第 3 章 网页布局及构成.pptVIP

网页文字 文字是传达数据和信息的重要载体，是网页中的重要组成元素。 文字字体选用不宜过多 字体风格与网站整体风格一致 特效字体应遵循美观、醒目、易于识别的原则 文本标题与正文应有字体与字号的变化 文字成为构成页面的主体，同时兼具导航的作用，风格十分独特。 页面布局结构 网页布局——确定网站首页和其它页的结构形式 栏式结构 将页面信息划分为若干列 一分栏（通栏） 二分栏 三分栏 四分栏 …… 区块结构 利用辅助线、图形、色块等把页面划分为若干区块 其它结构 国字型 拐角型 标题正文类型 框架类型 栏式结构 二分栏结构简练大方、个性鲜明，页面区域划分清晰便于查阅。分栏的宽度可以均等，也可以左宽右窄或是左窄右宽。 三分栏结构三部分的宽度可以任意调整，对于信息量大、内容繁多的网站非常适用。 四分栏结构适合信息标题短小精炼的网站，分栏宽度可以灵活调整。 区块结构 栏式结构基础上的横向划分，这种结构的设计较为自由，变化多样。 其它结构 国字型布局：信息内容的边线不是浏览器边线，而被包围在一个线框区域内。 拐角结构常见于网站次级页面，页面结构清晰、主次分明，但形式单调乏味，过于呆板。 其它结构 标题正文类型结构简单，适用范围有限。 全图像类型往往只出现在网站的首页。 框架的使用是一种复杂的形式，一般在某些大型网站的社区论坛中较为常见。 网页布局 掌握已有结构模式的规律和特点，使用时灵 活组合，便会产生无尽的变化。 布局是设计思想的具体体现，是一种“活”的灵魂，设计中要注意不囿于固有模式。 点、线、面是平面构成的主要组成元素，也是构成网页的基本视觉元素。 网页中的点 造型的基本要素 连续的点可以产生线的感觉 临近点的集合给人一种虚面的感受 大小排列分布的点形成空间感 网页构成 网页中的点 在空白区域中，点是视觉的焦点，给人的视觉感受尤为强烈。 当点的数量很多时，浏览者的注意力就会被分散。 如果大量的点中有个别点具备了颜色、大小、变化等差异性，那么视觉的焦点将会集中于这些点。 网页中的点 连续、规律排列的点可以产生节奏感和韵律感。 点阵的疏密能产生强烈的空间感。 聚集点形成的点阵本身与周围背景环境疏密的强烈反差，更容易吸引视线。 网页中的线 点的运动轨迹就形成了线，线强调方向与形状，具有 很强的表现力。 直线象征平实、挺拔、力量、速度和稳定。 曲线给人一种平滑、柔软、优雅和委婉的感觉，使人 联想到流畅、秩序、自由。 网页中的直线 由水平线和垂直线构成的边框区域使人产生一种庄重、平稳、安定、均衡的感觉。 选择适当的线宽或色彩，常会出现独特的视觉感受。 把水平线和垂直线改为斜线，将给人带来速度和运动的感觉。 网页中的曲线 曲线变化形式多样，细线精致、锐利，粗线则更具浑实、敦厚的特点，其转折变化还具有视线导向的作用。 封闭的线条形成一个面，此时的线具有突出、美化形的效果。 网页中的面 平面构成中最大的元素 注重形状和面积的对比 大量密集的点和封闭的线都可以形成面 网页中的面 多边形面使页面显得简洁明快、干净利落。 圆形面的视觉效果鲜明、强烈，可以看做是一个点放大后的形态，很容易吸引视线。 不规则形状可以衍生出千变万化的图案和创意，这给页面的设计带来了广阔的创作空间。 网页构成的综合运用 页面上点、线、面同时出现，面通常会成为视觉的中心，点和线则只起到陪衬装饰作用。 合理安排点、线、面三种视觉构成的基本元素，综合运用多种构成形式，才能使画面具有更加强烈的表现力，达到最佳的视觉效果。 素材准备 演示案例制作 操作步骤 打开素材 调整楼盘插图 调整一级栏目 调整颜色块 调整栏目 调整版权文字并保存文件 本章总结 网页显示出的版面大小与显示器的分辨率有关。 视觉效果包含了网页元素的图形设计方法，色彩、动态效 果，传递着网页的外观风格，可以提供给网页有代表性的 视觉形象。 主要的网页元素包括网站标志、网站通栏、导航按钮、文 字、图像、视频、广告等。 网页布局实质上是指确定网站首页和其它页的结构形式。 点、线、面是构成网页的基本视觉元素，点、线、面同时 出现在一张网页上时，面通常会成为视觉的中心，点和线 则只起到陪衬装饰作用。 第3章 网页布局与版式构成 上章回顾 设计网页时，比较常用的颜色模式有RGB和Indexed两种颜色模式。 网页安全色是指以256色模式运行时，在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，其中有216种常见