网站效果图设计 教学课件 作者 刘心美教材--第6章网页设计基础.ppt

《网站效果图设计 教学课件 作者 刘心美教材--第6章网页设计基础.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章网页设计基础知识目标：了解网站、网页概念及网页与网站二者关系掌握网页的设计流程，视觉元素，版式风格设计，形式语言的运用了解色彩基础概念，网页的色彩设计分析，色彩的搭配与运用分辨网页流程,版式的能力分析网页配色的能力能力目标：第6章网页设计基础网页设计流程6.1网站布局6.2网页的色彩设计6.3授课安排网页设计流程6.11.网站开发流程网站项目开发一般要分为客户需求、效果图设计、开发、测试、运行和维护几个阶段，各阶段循环往复，一直到客户审核通过为止，如图所示。网页设计流程6.12.页面效果图开发流程在页面效果图设计阶段，一般

2、要经过客户需求、网站策划、绘制效果图、客户审核、切片、优化导出等流程，如图所示。网页布局6.2网页是网站构成的基本元素，网页的精彩与否决定了网站的成败，当我们遨游于互联网上，一副副精彩的网页会一一呈现，丰富的色彩、简洁的文字、炫丽的图片效果，当然是不可忽略的因素，但是另一个关键的问题是，如何将这些网页元素进行合理排版，让他们相互配合，相互映衬，这就是网页的布局的作用。下面，我们就有关网页布局谈论一下。网页布局6.2图6-8网页效果图图6-9网页的布局结构6.2.2网页布局理论网页的布局设计图，在布局图中要划分明确主次区域，层次结

3、构，清晰的布局结构是一个网站成功的关键所在。以图为例来说。网页中的各个内容区域以一个个的“矩形块”构成，按照从上到下，从左到右的顺序对网页的布局结构进行排列，整体布局结构划为四行:第一行来制作Logo第二行制作导航第三行制作内容，内容区域又拆分为左、右两列，左侧为关键内容、标题等，右侧为具体内容的说明。第四行制作版权信息。Part16.2.1网页效果图布局原则网页的布局设计，就是网页元素的排版和定位，具体来讲是指网页中图像、文字等之间的位置关系，通过网页布局，实现将它们组成一个有机的整机，更好的实现传达信息的功能。关于网页布局要

4、从以下要点几点出发：1．主次分明，中心突出2．大小搭配，相互呼应。3．图文并茂，相得益彰。Part16.2.2网页布局理论图6-8网页效果图图6-9网页的布局结构网页的布局设计图，在布局图中要划分明确主次区域，层次结构，清晰的布局结构是一个网站成功的关键所在。以图为例来说。网页中的各个内容区域以一个个的“矩形块”构成，按照从上到下，从左到右的顺序对网页的布局结构进行排列，整体布局结构划为四行:第一行来制作Logo第二行制作导航第三行制作内容，内容区域又拆分为左、右两列，左侧为关键内容、标题等，右侧为具体内容的说明。第四行制作版权

5、信息。Part16.2.3网页布局分类网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。1、骨骼型描述：网页中骨骼型是一种规范、严谨的分割方式，也是最为普通和最为常见的一种形式，类似报刊的版式。常见的网页骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。特征：这种版式给人以和谐、理性的美。骨骼型版式常为综合门户、政府机关、新闻媒体类网站所采用。Part16.2.3网页布局分类网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论

6、述。2、满版型描述：页面以是以图像为诉求点，利用图像来充满整个版面，将部分文字置于图像之上。特征：视觉传达效果直观且突出，给人以生动大方的感觉，常被如学校、娱乐、体育、艺术、儿童以及个性化网页等所采用，是韩国网站所常使用的版式。Part16.2.3网页布局分类网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。3、分割型描述：指把整个页面划分成上下或左右两个部分，两部分形成对比。一般都分成图片和文字两部分，图片部分感性而具表现力，文字部分理性而具说服力，通过调整图片和文字部分的比例，

7、来调节对比强弱。Part16.2.3网页布局分类网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。4、中轴或对称型将页面元素沿当前窗口的中间轴心位置进行水平或垂直方向的对称排列。所谓对称可指左右对称、上下对称、四角型对称等。左右对称是指沿中轴水平左右对称，上下对称指沿中轴线上下对称，四角型对称是指以中轴线为基准，在页面四角安排相应的视觉元素。Part16.2.3网页布局分类网页布局大致可分为：骨骼型、满版型、分割型、对称型、倾斜型、焦点型、三角型、自由型。下面分别论述。5、焦点型网

8、页版式往往是利用浏览者视线的第一点，使页面对浏览者产生强烈的视觉效果。一般可分为中心焦点、向心焦点、离心焦点等方式，所谓中心焦点型是将图片或文字置于页面的视觉中心，产生聚焦的效果。向心焦点型是引导浏览者的视线向页面中心位置进行聚拢。离心焦点型是引导浏览者的视线向