网页制作教程 第2版 教学课件 作者 王君学 项目四 网页版面设计与制作.ppt

《网页制作教程 第2版 教学课件 作者 王君学 项目四 网页版面设计与制作.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、掌握了网页布局方法仅仅是掌握了一项版面布局技术，如何让版面设计得更美观、得体，还需要学习版面设计的基本知识。本项目将介绍版面的基本类型、设计准则以及使用Photoshop制作版面的方法。项目四网页版面设计与制作学习目标掌握版面的基本类型。掌握版面的设计准则。掌握使用Photoshop设计版面的方法。任务一版面的基本类型和设计准则（一）版面的基本类型（二）版面的设计准则（一）版面的基本类型概括起来，目前网页版面的基本类型主要有10种，分别是骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型和自由型。下面分别进行简

2、要说明。1.骨骼型骨骼型是一种规范的、理性的分割方法，通常有竖向或横向通栏、双栏、3栏、4栏等几种，一般以竖向分栏为最多，如果综合运用这几种分栏形式效果会更好，如图所示。（一）版面的基本类型2.满版型满版型是指页面以图像充满整版，主要以图像为诉求点，也可将部分文字压置于图像之上。满版型视觉传达效果直观、强烈，给人一种舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多，如图所示。（一）版面的基本类型3.分割型分割型是指将整个页面分成上下或左右两部分，分别安排图像和文案，有图像的部分感性而具活力，有文案的部分则理性而

3、平静。通常可以调整图像和文案所占的面积，来调节对比的强弱，如图所示。（一）版面的基本类型4.中轴型中轴型是指沿浏览器窗口的中轴将图像或文字作水平或垂直方向的排列。水平排列的页面给人稳定、平静、含蓄的感觉，垂直排列的页面给人以舒畅的感觉，如图所示。（一）版面的基本类型5.曲线型所谓曲线型是指图像、文字在页面上作曲线的分割或编排，从而产生韵律与节奏，如图所示。（一）版面的基本类型6.倾斜型页面主题形象或多幅图像、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目，如图所示。（一）版面的基本类型7.对称型对称型页面给人一种稳定、严谨、庄

4、重、理性的感受。对称分为绝对对称和相对对称，一般采用相对对称的手法，以避免呆板，如图所示。（一）版面的基本类型8.焦点型焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果，如图所示。焦点型分3种情况：（1）中心，以对比强烈的图片或文字置于页面的视觉中心；（2）向心，视觉元素引导浏览者视线向页面中心聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法；（3）离心，视觉元素引导浏览者视线向外辐射，则形成一个离心的版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。（一）版面的基本类型9.三角型

5、网页各视觉元素呈三角形排列。正三角形（金字塔型）最具稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。如图所示，整体看为正三角形的构图，主体形象稳定而突出。（一）版面的基本类型10.自由型自由型的页面具有活泼、轻快的风格，传达随意、轻松的气氛，如图所示。（二）版面的设计准则在进行版面设计的时候，必须注意版面设计的基本准则。下面是一些基本的建议，希望对读者能有所帮助。1.通用的网页设计建议•保持文件容量尽可能小，以便能够快速下载。•将最重要的信息放在第1个满屏幕区域。•将页面长度限制在两个到3个满屏幕区域内。•不

6、要只为一个专门的平台或者浏览器设计网页。•不要使用过多的动画。（二）版面的设计准则2.文本设计建议•对相似的元素使用相同的设计，对重要的元素在视觉上要更加突出。•不要将所有文本设置为大写。•不要将大量文本设置为斜体。•不要将文本同时设置为大写、粗体和斜体。•不要在没有必要的情况下插入换行符。•不要使用

或者

标签。（二）版面的设计准则3.图像设计建议•对图像中大多数文字使用边缘平滑处理（字体大小小于“10”的文本例外）。•将图像文件的大小保持在30kB以下（除非是确实需要使用较大的图片文件）。•消除透明图像周围的色晕。

7、•不显示链接图像的蓝色边框线。•每个图像都要提供替代文本，当图像无效时就显示替代文本。•不要将图像制作得像按钮一样，链接按钮图像除外。（二）版面的设计准则4.美观设计建议•不要使网页上任何内容都居中对齐。•不要混合使用对齐方式。•不要使用太多种颜色，最好先选择一到两种主流色和一种强调色，并在整个网站中坚持一直使用下去。•不要使用重彩的平铺背景图案。•不要使用黑底白字，特别是对较大量的小字体文本，最好选择一种柔和的颜色来反衬，例如淡灰色反衬黑色，或者淡蓝色反衬深蓝色。（二）版面的设计准则5.主页设计建议•体现站点的标识和使命。•加强

8、网站导航和站点层次功能。•对于信息量大的网站，提供搜索功能是很必要的。•导读，主页要用一些“里面有精彩内容”的暗示来吸引用户。•内容更新，如果网站的成功取决于用户是否经常来访，那么主页应该有一些经常更新的内容。•如果网站使用会员制，主页应该为新用户