第章网布局和构成专业知识讲座

1、文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 上章回顾 ?设计网页时，比较常用的颜色模式有 RGB和Indexed两种颜色模 式。 ?网页安全色是指以 256色模式运行时，在不同硬件环境、不同 操作系统、不同浏览器中都能够正常显示的颜色集合，其中有 216种常见颜色被称为网页安全色。 ?网页配色时可以遵循鲜明性、独特性、协调性、联想性、艺术 性等五大原则。 ?网页色彩按表现功能划分为主色调、辅色调、点睛色和背景色。 其中页面中的主色调起到主导作用，辅色主用于烘托和支持主 色调，之后再用点眼色突出主题。 ?在对网页进行配色时

2、，可以采用色相配色、标准色配色、渐变 色配色等方法。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 本章进阶 ? 了解网页的基本元素 ? 理解网页重要元素的表现形式 ? 掌握网页的布局结构 ? 掌握网页的构成要素 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 案例案例 ? 案例分析 根据本章知识点把提 供的网页效果图进行 规划、布局。 ? 涉及知识点 ? 布局分析规划 ? Photoshop操作 素材 完成效果 文档来源于网络，文档所提供的信息仅供参考

3、之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页概述 首页 ? 访问者见到的第 一个页面 ? 展示网站形象 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页概述 次级页面 ? 传达信息 ? 展示网站内容 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页概述 形象页 ? 文字信息较少 ? 仅作为网站入口 ? 关注访问者对网站的整体印象 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如

4、有不当之处，请联系本人或网站删除。 网页概述 门户网站更注重信息的传播和网站的访问量，因此 网站的形象处于次要的位置，通常首页直接设置内容。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 页面主要元素 网站LOGO 导航条 导航按钮 网站通栏 文字 图片 按钮 广告条 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 页面尺寸 常用的显示器分辨率 ? 800像素600像素 ? 1024像素768像素 第一眼看到的最大化显 示的页面大小相应为 ? 778像素

5、420像素 ? 1002像素600像素 浏览器界面中的标题栏、菜单栏、功能按钮、状态栏、 滚动条等要占用一定的显示空间。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页基本要素 从信息组织角度分类 ? 内容 ? 结构 ? 表现 ? 行为 内容 结构 表现 行为 四个基本要素存在层次关系，内容是核心、基础。 桔子 芹菜 菠萝 蔬菜 土豆 水果 香蕉 菠菜 辣椒 苹果 水果 ? 桔子 ?苹果 ?香蕉 ?菠萝 蔬菜 ?芹菜 ?菠菜 ?辣椒 ?土豆 水果 蔬菜 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请

6、勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页基本要素 从制作角度分类 ? 内容 ? 设计 ? 技术 对于网页设计师来说，设计工作占有重要比重。 决定网页的价值 技术主要是网页及图形图像制作软件的运用以及程序员的 程序开发实现。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 重要的网页元素 网页元素就像棋子，网页布局的过程就是棋盘上“排兵 布阵”的过程，合理的安排它们的位置，就会达到意想不到 的效果。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删

7、除。 网页标志 网页LOGO ? 网站特色和内涵的集中体现 ? 具有唯一性 ? 设计灵活性较大、样式多样 注意突出LOGO，使其醒目、明显。 LOGO居中 LOGO居左 LOGO居右 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 通栏 横贯页面的通栏 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 通栏 横贯页面的通栏 不横贯页面的通栏 灵活多样的通栏 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本

8、人或网站删除。 网站导航 ? 文字导航 ? 按钮导航 ? 图片导航 ? 隐藏导航 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 按钮导航条 演示 绘制底色 绘制单个按钮 绘制颜色块 输入文字并保存文件 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页文字 文字是传达数据和信息的重要载体，是网页 中的重要组成元素。 ? 文字字体选用不宜过多 ? 字体风格与网站整体风格一致 ? 特效字体应遵循美观、醒目、易于识别的原则 文本标题与正文应有字体与字号的变化

9、 文字成为构成页面的主体，同时兼具导航的作用，风格十分独特。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 页面布局结构 网页布局确定网站首页和其它页的结构形式 ? 栏式结构 将页面信息划分为若干列 ? 一分栏（通栏） ? 二分栏 ? 三分栏 ? 四分栏 ? 区块结构 利用辅助线、图形、色块等把页面划分为若干区块 ? 其它结构 ? 国字型 ? 拐角型 ? 标题正文类型 ? 框架类型 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 栏式结构 二分栏结构简练

10、大方、个性鲜明，页面区域划分清晰便于查阅。分 栏的宽度可以均等，也可以左宽右窄或是左窄右宽。 三分栏结构三部分的宽度可以任意调整，对于信息量大、内容繁多 的网站非常适用。 四分栏结构适合信息标题短小精炼的网站，分栏宽度可以灵活调整。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 区块结构 栏式结构基础上的横向划分，这种结构的设计较为自由，变化多样。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 其它结构 国字型布局：信息内容的边线不是浏览器边线，而被包

11、围在一个线框区域内。 拐角结构常见于网站次级页面，页面结构清晰、主次分明，但形式 单调乏味，过于呆板。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 其它结构 标题正文类型结构简单，适用范围有限。 全图像类型往往只出现在网站的首页。 框架的使用是一种复杂的形式，一般在某些大型网站的社区论坛中较为常见。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页布局 ? 掌握已有结构模式的规律和特点，使用时灵 活组合，便会产生无尽的变化。 ? 布局是设计思想的具

12、体体现，是一种“活” 的灵魂，设计中要注意不囿于固有模式。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 点、线、面是平面构成的主要组成元素，也 是构成网页的基本视觉元素。 网页中的点 ? 造型的基本要素 ? 连续的点可以产生线的感觉 ? 临近点的集合给人一种虚面的感受 ? 大小排列分布的点形成空间感 网页构成 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页中的点 在空白区域中，点是视觉的焦点，给人的视觉感受尤为强烈。 当点的数量很多时，浏览者的注

13、意力就会被分散。 如果大量的点中有个别点具备了颜色、大小、变化等差异 性，那么视觉的焦点将会集中于这些点。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页中的点 连续、规律排列的点可以产生节奏感和韵律感。 点阵的疏密能产生强烈的空间感。 聚集点形成的点阵本身与周围背景环境疏密的强烈反差，更容易吸引视线。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页中的线 ? 点的运动轨迹就形成了线，线强调方向与形状，具有 很强的表现力。 ? 直线象征平实、挺

14、拔、力量、速度和稳定。 ? 曲线给人一种平滑、柔软、优雅和委婉的感觉，使人 联想到流畅、秩序、自由。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页中的直线 由水平线和垂直线构成的边框区域使人产生一种庄重、平稳、安 定、均衡的感觉。 选择适当的线宽或色彩，常会出现独特的视觉感受。 把水平线和垂直线改为斜线，将给人带来速度和运动的感觉。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页中的曲线 曲线变化形式多样，细线精致、锐利，粗线则更具浑实、敦厚

15、 的特点，其转折变化还具有视线导向的作用。 封闭的线条形成一个面，此时的线具有突出、美化形的效果。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页中的面 ? 平面构成中最大的元素 ? 注重形状和面积的对比 ? 大量密集的点和封闭的线都可以形成面 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页中的面 多边形面使页面显得简洁明快、干净利落。 圆形面的视觉效果鲜明、强烈，可以看做是一个点放大后的形 态，很容易吸引视线。 不规则形状可以衍生出千变万化的

16、图案和创意，这给页面的设计 带来了广阔的创作空间。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 网页构成的综合运用 页面上点、线、面同时出现，面通常会成为视觉的中心，点和 线则只起到陪衬装饰作用。 合理安排点、线、面三种视觉构成的基本元素， 综合运用多种构成形式，才能使画面具有更加强烈的 表现力，达到最佳的视觉效果。 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 素材准备 演示案例制作 操作步骤 打开素材 调整楼盘插图 调整一级栏目 调整颜色块 调整栏目 调整版权文字并保存文件 文档来源于网络，文档所提供的信息仅供参考之用，不能作为科学依据，请勿模 仿。文档如有不当之处，请联系本人或网站删除。 本章总结 ? 网页显示出的版面大小与显示器的分辨率