《网页制作》第六章--网页构图与色彩.pptVIP

第六章 网页构图与色彩 教育技术与信息中心 彭旭 授课内容： 一、网页的重心平衡 二、网页色彩以及图片的格式 三、图像的优化 四、网页构图方法 五、文本色彩体系 一、网页的重心平衡 （一）重心平衡的概述 重心平衡即网页重心反映的网页上各 种元素分布的协调程度 网页中的元素 图片、文字、页面背景、表格、表单 一、网页的重心平衡 （二）重心平衡设计实例 A卫星式类型 B散开式类型 C对称式类型 A卫星式类型网页版式 特征： 中心有重点，四周元素围绕重点展开，重点的安定感和四周元素的开放感并存，传递稳定而牢固的印象。 原本网页中关联不强的各种信息通过此版式能稳定结合在一起。 B散开式类型网页版式 特征： 不受限制的优雅与自由，使浏览者对页面产生流动的印象。 常用来表现轻松氛围 散开的元素遵循页面左右平衡原则 C对称类型网页版式 特征： 上下对称或左右对称 保持该对称的做法： 放置图片或文字时，在画面中央引出一条线，然后以此为轴进行上下或左右对称的配置，在页面即将失去平衡时，在对称位置上放置一张有分量的照片或标识，来保持平衡。 二、页面色彩及图片的格式 （一）色彩 色彩有强大的精神影响力，常常能左右人的情绪。 色彩的心理效应产生在不同层次，有些直接的感官刺激，有些使人产生联想从而涉及人的观念与信仰。 针对性地用色彩体现网站的特色是高明的做法 二、页面色彩及图片的格式 （一）色彩 网页色彩的选择 A根据主题选择 B根据浏览者选择 C可适当考虑流行色 二、页面色彩及图片的格式 （二）色彩的基本概念 颜色分非彩色与彩色 彩色三属性： A色相（Hue）：颜色基本属性，颜色的原貌 B饱和度（Saturation）颜色的纯度 大则生动活泼 小则显得模糊 C明度（Lightness）亮度，颜色的深浅 二、页面色彩及图片的格式 （二）色彩的基本概念 色彩的感觉 红：热情、奔放、喜悦、庆典 黑：严肃、夜晚、沉着 黄：高贵、富有 白：纯洁、简单 蓝：智慧、清爽 绿：生命、生机 灰：深沉、阴暗、消极 紫：神秘、浪漫、爱情 二、页面色彩及图片的格式 （三）色彩与GIF，JPEG文件格式 色彩的载体是图像，图像的载体是文件格式。 一般网络上采用GIF，JPEG格式 GIF 线条简单、色彩种类少的图形，或透明图形与制作动画 JPEG 照片 GIF Graphics Interchange Format，图形交换格式。GIF是无损压缩，即在压缩过程中图像没有质量损失。未压缩的图像信息以线性方式存储。 GIF的压缩方式是把文件中重复的色块消除，然后把这些色块的位置信息存在一个表里。图像中相同色块越多，压缩率就越高。 GIF的优势：能做动画图像、能做透明色 GIF的不足：无法256色以外的色 JPEG Joint Photographic Experts Group，联合图像专家小组 JPEG是有损压缩，即在压缩过程中图像质量会有损失。其压缩过程首先把图像从RGB转换为YUV，用亮度、色调和饱和度储存每个象素的信息。然后减少色调和饱和度的信息数量，这种差别不容易被肉眼察觉到。 JPEG优点适用于色彩丰富的图像 JPEG不足压缩比越高越失真 三、图像的优化 目的： 让用户能在网页上欣赏到效果最好的图像，并能以最快速度在浏览器中显示出来。 使用图形图像工具优化 Photoshop 、Fireworks等 四、页面构图方法 （一）网页布局相关概念 A页面尺寸 800×600 1024×768 B整体造型 不同形状不同意义 C页眉 定义页面的主题 D文本 E页脚 制作者、公司信息、版权等 F图片 G多媒体 四、页面构图方法 （二）网页页面布局 A纸上布局法 B软件布局法 A纸上布局法 步骤： 1选择页面尺寸 2页面总体造型 3选择一形状作为主题造型 4增加