第3章 网页布局与版式构成1.上章回顾q设计网页时，比较常用的颜色模式有RGB和Indexed两种颜色模式。q网页安全色是指以256色模式运行时，在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，其中有216种常见颜色被称为网页安全色。q网页配色时可以遵循鲜明性、独特性、协调性、联想性、艺术性等五大原则。q网页色彩按表现功能划分为主色调、辅色调、点睛色和背景色。其中页面中的主色调起到主导作用，辅色主用于烘托和支持主色调，之后再用点眼色突出主题。q在对网页进行配色时，可以采用色相配色、标准色配色、渐变色配色等方法。2.本章进阶q 了解网页的基本元素q 理解网页重要元素的表现形式q 掌握网页的布局结构 q 掌握网页的构成要素 3.q 案例分析根据本章知识点把提供的网页效果图进行规划、布局。q涉及知识点v布局分析规划vPhotoshop操作素材完成效果4.网页概述首页q 访问者见到的第 一个页面q 展示网站形象5.网页概述次级页面q 传达信息q 展示网站内容 6.网页概述形象页q 文字信息较少q 仅作为网站入口q 关注访问者对网站的整体印象7.网页概述 门户网站更注重信息的传播和网站的访问量，因此网站的形象处于次要的位置，通常首页直接设置内容。 8.页面主要元素网站LOGO导航条导航按钮网站通栏文字图片按钮广告条9.页面尺寸常用的显示器分辨率q 800像素600像素 q 1024像素768像素第一眼看到的最大化显示的页面大小相应为q 778像素420像素q 1002像素600像素 浏览器界面中的标题栏、菜单栏、功能按钮、状态栏、滚动条等要占用一定的显示空间。 10.网页基本要素从信息组织角度分类q 内容 q 结构q 表现q 行为内容结构表现行为四个基本要素存在层次关系，内容是核心、基础。桔子 芹菜 菠萝 蔬菜 土豆 水果 香蕉 菠菜 辣椒 苹果水果l 桔子l苹果l香蕉l菠萝蔬菜l芹菜l菠菜l辣椒l土豆水果 蔬菜11.网页基本要素从制作角度分类q 内容 q 设计q 技术对于网页设计师来说，设计工作占有重要比重。决定网页的价值 技术主要是网页及图形图像制作软件的运用以及程序员的程序开发实现。12.重要的网页元素 网页元素就像棋子，网页布局的过程就是棋盘上“排兵布阵”的过程，合理的安排它们的位置，就会达到意想不到的效果。 13.网页标志网页LOGOq 网站特色和内涵的集中体现 q 具有唯一性 q 设计灵活性较大、样式多样 注意突出LOGO，使其醒目、明显。LOGO居中LOGO居左LOGO居右14.通栏横贯页面的通栏15.通栏横贯页面的通栏不横贯页面的通栏灵活多样的通栏16.网站导航q 文字导航q 按钮导航q 图片导航q 隐藏导航17.按钮导航条 演示绘制底色 绘制单个按钮绘制颜色块输入文字并保存文件18.网页文字 文字是传达数据和信息的重要载体，是网页中的重要组成元素。 q 文字字体选用不宜过多q 字体风格与网站整体风格一致q 特效字体应遵循美观、醒目、易于识别的原则文本标题与正文应有字体与字号的变化文字成为构成页面的主体，同时兼具导航的作用，风格十分独特。19.页面布局结构 网页布局确定网站首页和其它页的结构形式q 栏式结构 将页面信息划分为若干列v 一分栏（通栏）v 二分栏v 三分栏v 四分栏 q 区块结构 利用辅助线、图形、色块等把页面划分为若干区块q 其它结构v 国字型v 拐角型v 标题正文类型v 框架类型20.栏式结构 二分栏结构简练大方、个性鲜明，页面区域划分清晰便于查阅。分栏的宽度可以均等，也可以左宽右窄或是左窄右宽。 三分栏结构三部分的宽度可以任意调整，对于信息量大、内容繁多的网站非常适用。 四分栏结构适合信息标题短小精炼的网站，分栏宽度可以灵活调整。21.区块结构栏式结构基础上的横向划分，这种结构的设计较为自由，变化多样。22.其它结构国字型布局：信息内容的边线不是浏览器边线，而被包围在一个线框区域内。 拐角结构常见于网站次级页面，页面结构清晰、主次分明，但形式单调乏味，过于呆板。23.其它结构标题正文类型结构简单，适用范围有限。全图像类型往往只出现在网站的首页。 框架的使用是一种复杂的形式，一般在某些大型网站的社区论坛中较为常见。 24.网页布局q 掌握已有结构模式的规律和特点，使用时灵 活组合，便会产生无尽的变化。q 布局是设计思想的具体体现，是一种“活”的灵魂，设计中要注意不囿于固有模式。 25. 点、线、面是平面构成的主要组成元素，也是构成网页的基本视觉元素。 网页中的点q 造型的基本要素q 连续的点可以产生线的感觉q 临近点的集合给人一种虚面的感受q 大小排列分布的点形成空间感网页构成26.网页中的点在空白区域中，点是视觉的焦点，给人的视觉感受尤为强烈。 当点的数量很多时，浏览者的注意力就会被分散。 如果大量的点中有个别点具备了颜色、大小、变化等差异性，那么视觉的焦点将会集中于这些点。 27.网页中的点连续、规律排列的点可以产生节奏感和韵律感。 点阵的疏密能产生强烈的空间感。 聚集点形成的点阵本身与周围背景环境疏密的强烈反差，更容易吸引视线。 28.网页中的线q 点的运动轨迹就形成了线，线强调方向与形状，具有 很强的表现力。 q 直线象征平实、挺拔、力量、速度和稳定。q 曲线给人一种平滑、柔软、优雅和委婉的感觉，使人 联想到流畅、秩序、自由。 29.网页中的直线 由水平线和垂直线构成的边框区域使人产生一种庄重、平稳、安定、均衡的感觉。 选择适当的线宽或色彩，常会出现独特的视觉感受。 把水平线和垂直线改为斜线，将给人带来速度和运动的感觉。 30.网页中的曲线 曲线变化形式多样，细线精致、锐利，粗线则更具浑实、敦厚的特点，其转折变化还具有视线导向的作用。封闭的线条形成一个面，此时的线具有突出、美化形的效果。31.网页中的面q 平面构成中最大的元素q 注重形状和面积的对比q 大量密集的点和封闭的线都可以形成面 32.网页中的面多边形面使页面显得简洁明快、干净利落。 圆形面的视觉效果鲜明、强烈，可以看做是一个点放大后的形态，很容易吸引视线。 不规则形状可以衍生出千变万化的图案和创意，这给页面的设计带来了广阔的创作空间。33.网页构成的综合运用 页面上点、线、面同时出现，面通常会成为视觉的中心，点和线则只起到陪衬装饰作用。 合理安排点、线、面三种视觉构成的基本元素，综合运用多种构成形式，才能使画面具有更加强烈的表现力，达到最佳的视觉效果。 34.素材准备演示案例制作操作步骤 打开素材调整楼盘插图 调整一级栏目调整颜色块调整栏目调整版权文字并保存文件35.本章总结q 网页显示出的版面大小与显示器的分辨率有关。q 视觉效果包含了网页元素的图形设计方法，色彩、动态效 果，传递着网页的外观风格，可以提供给网页有代表性的 视觉形象。q 主要的网页元素包括网站标志、网站通栏、导航按钮、文 字、图像、视频、广告等。q 网页布局实质上是指确定网站首页和其它页的结构形式。q 点、线、面是构成网页的基本视觉元素，点、线、面同时 出现在一张网页上时，面通常会成为视觉的中心，点和线 则只起到陪衬装饰作用。 36.37.