《网页布局的方法与步骤.docVIP

第一节 网页配色的方法与步骤 回顾与检查 结合所给网页示例，指出网页组成元素。 本节课程 既然大家已经掌握了网页的组成元素都有哪些，现在我们就来学习，如果参照一定的原则，运用恰当的方法，遵循一定的过程来对网页进行布局。 网页布局的原则 简洁性：最好用一个简单的关键词语或图像吸引人们的注意力，醒目易记。另一种方法是限制所用字体的颜色和数目。 一致性：是表现一个站点的独特风格的重要手段之一。保持一致性，可以从三个方面着手：1、页面的排版，使用相同的页边距、文本、图形之间保持相同的间距等；2、页面中的每个元素与整个页面以及站点的色彩和风格上的一致性；3、在字体和颜色的使用上保持和谐的搭配。如图： 好的对比度：使用对比是强调突出某些内容的最有效的办法之一。实现对比的方法有：1、使用颜色的对比，如内容提要使用蓝色，而正文采用黑色；2、使用大的标题，即面积上的对比；3、使用图像的对比。 网页布局的方法 纸上布局法： 选择尺寸：目前一般1024*768像素的分辨率为最通用的浏览模式，页面的尺寸以其为准； 选择造型：先在白纸上画出浏览器窗口的矩形，就是布局的范围。绘制一个向左的弧线，为了取得平衡再在页面右边增加一个矩形。 增加页头：在页面的顶部增加一个页头，并让页头与左边的弧线相交。 增加文本：页面的空白部分分别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。 增加图片：图片是美化页面和说明内容必须的媒介，把图片加入适当的位置。 软件布局法： Photoshop在网页布局设计中的作用 先绘制大致布局，再进行细化，分出小模块。 Photoshop在网页布局规划中的作用 布局灵活 修改方便 用Photoshop设计网页布局应注意的几个问题 网页文档尺寸与分辨率 颜色 字体、标题 图文搭配 科学使用参考线 布局的步骤 画出草案 只用粗陋的线条勾画出创意的轮廓即可，尽可能多画几张，最后选定一个满意的作为继续创作的脚本。 粗略布局 在草案的基础上，将需要旋转的网页组成元素安排到页面上，这里必须注意遵循突出重点、平衡和谐的原则，将网站标志、导航栏等最重要的模块放在最显眼、最突出的位置，然后再考虑将要模块的排放。 定案 将粗略布局精细化，具体化。充分发挥设计师的智慧和经验，多方联想，才能作出具有创意的布局。 实践案例1：使用Photoshop完成服装类网站页面布局 整体布局：建立参考线，绘制整体布局 细化网页布局：工具条，产品发布区，添加页码条，保存文件 实践案例2：根据页面布局制作服装类网站页面 绘制页头部分 分析布局结构 建立参考线 排列页头元素 绘制内容区 排列工具条 排列产品区 排列页码条 绘制页脚 五、小结及作业