网页布局的方法与步骤

第十章第一节网页配色的方法与步骤一、回顾与检查

结合所给网页示例，指出网页组成元素。

二、本节课程

既然大家已经掌握了网页的组成元素都有哪些，现在我们就来学习，如果参照一定的原则，运用恰当的方法，遵循一定的过程来对网页进行布局。

1、网页布局的原则

简洁性：最好用一个简单的关键词语或图像吸引人们的注意力，醒目易记。另一种方法是限制所用字体的颜色和数目。

一致性：是表现一个站点的独特风格的重要手段之一。保持一致性，可以从三个方面着手：1、页面的排版，使用相同的页边距、文本、图形之间保持相同的间距等；2、页面中的每个元素与整个页面以及站点的色彩和风格上的一致性；3、在字体和颜色的使用上保持和谐的搭配。如图：

好的对比度：使用对比是强调突出某些内容的最有效的办法之一。实现对比的方法有：1、使用颜色的对比，如内容提要使用蓝色，而正文采用黑色；2、使用大的标题，即面积上的对比；3、使用图像的对比。

2、网页布局的方法

纸上布局法：

●选择尺寸：目前一般1024*768像素的分辨率为最通用的浏览模

式，页面的尺寸以其为准；

●选择造型：先在白纸上画出浏览器窗口的矩形，就是布局的范围。

绘制一个向左的弧线，为了取得平衡再在页面右边增加一个矩形。

●增加页头：在页面的顶部增加一个页头，并让页头与左边的弧线

相交。

●增加文本：页面的空白部分分别加入文本和图形。因为在页面右

边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。

●增加图片：图片是美化页面和说明内容必须的媒介，把图片加入

适当的位置。

软件布局法：

●Photoshop在网页布局设计中的作用

先绘制大致布局，再进行细化，分出小模块。

●Photoshop在网页布局规划中的作用

➢布局灵活

➢修改方便

●用Photoshop设计网页布局应注意的几个问题

➢网页文档尺寸与分辨率

➢颜色

➢字体、标题

➢图文搭配

➢科学使用参考线

3、布局的步骤

●画出草案

只用粗陋的线条勾画出创意的轮廓即可，尽可能多画几张，最后选定一个满意的作为继续创作的脚本。

●粗略布局

在草案的基础上，将需要旋转的网页组成元素安排到页面上，这里必须注意遵循突出重点、平衡和谐的原则，将网站标志、导航栏等最重要的模块放在最显眼、最突出的位置，然后再考虑将要模块的排放。

定案

将粗略布局精细化，具体化。充分发挥设计师的智慧和经验，多方联想，才能作出具有创意的布局。

三、实践案例1：使用Photoshop完成服装类网站页面布局

1、整体布局：建立参考线，绘制整体布局

2、细化网页布局：工具条，产品发布区，添加页码条，保存文

件

四、实践案例2：根据页面布局制作服装类网站页面

1、绘制页头部分

●分析布局结构

●建立参考线

●排列页头元素

2、绘制内容区

●排列工具条

●排列产品区

●排列页码条

3、绘制页脚

五、小结及作业