网页设计——入门与提高 作者 王维 吴菲 王丽娜 第02章.pptVIP

* * 第2章 网页版式设计原则 在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 网页设计的基本构成元素： 文本和图片：是网页的基本元素，最简单的页面也需要文字或图片来表达它的内容。 超链接：有文字链接和图片链接两种，只要浏览者用鼠标单击带有链接的文字或图片，就可以自动链接对应的其他文件，这样才让浩如烟海的网页能连接成一个整体，这也正是网络的魅力所在。 动画：有两种格式，一种是GIF格式，一种是Flash格式。活动的内容总比静止的要吸引人的注意力，所以精彩的动画让页面变得更加魅力四射。 表单：是一种可以在浏览者与服务器之间进行信息交流的网页元素，使用表单可以完成搜索、论坛、发送电子邮件等交互动能。 音频、视频：随着网络技术的发展，网站上已经不再是单调的MIDI背景音乐，而丰富多彩的网络电视等已经开始成为网络新潮流。 2.1 文本和图片设计 文本和图片是互联网上最主要的两种信息形式。它们既是网站构成的基础信息，也是使网页看起来多姿多彩的主要条件。对建造如“房屋大厦”般的网站来说，图片和文字就是砖头和水泥，设计师无法离开它们，浏览者更需要它们。 2.1.1 文本设计 文本是信息的主要载体方式，也是网页版面构成的基础。因为占用页面面积最多的往往就是文字信息，所以页面中文字的排版是非常重要的。文字信息阅读的舒适程度直接关系到浏览者的心理感受，字体的选择、字号的大小、行与行的距离、段落与段落的安排，都需要谨慎考虑。 进行字体设计时，尽量不要使字体变形，被变形的字体通常是不美观的。排版时要注意大标题，小内文；粗标题，细内文的原则。色彩与背景有一定的差异，保持文字的可见性和易读性。字体大小要适中，保持页面整洁，阅读舒适。全文排版最忌讳不分段，应该有层次。 2.1.2 图片设计 网站就是各种各样内容网页的集合，有的网站内容庞杂，如新浪、网易这样的门户网站；有的网站可能只有几个页面，如小型的公司网站、个人网站，但是他们都是由最基本的网页组合起来的。 1. 网站标志（Logo） 一般由图案和文字组合而成，用于宣传和各个站点间交换链接。它是整个网站的商标，传达着网站的理念和内涵。 2.1.2 图片设计 2.背景图片 页面背景可以衬托出整个页面的气氛。用什么样的图片或颜色作为背景，要看网站的内容和类型。网页中的背景图不要喧宾夺主，要为网站的内容服务。 2.1.2 图片设计 3.辅助图片 一是要有良好的视觉吸引力，能吸引读者的注意力，通过“阅读最省力原则”来吸引人们注意网站。 二是要简洁明确地传达网站信息的思想概念，有良好的看读效果，能使人们一目了然地抓住网站信息的诉求重心。 三是有强而有力的诱导作用，直接诉诸视觉，造成鲜明的视觉感受效果，能使人们与自己的问题联系起来，从观看过程中产生愿望和欲求。 四是需要与页面设计风格协调统一，如果不统一，就需要手动美化。 2.1.2 图片设计 4.动态图片 网页中的常见动画分为GIF动画和Flash两种： GIF动画的原理是在一个文件内存储多帧（Frames）图像，然后按顺序显示，同事还可以设置每帧的延时时间。GIF动画目前仍被广泛应用，因为它不需要安装播放插件就可以在各种浏览器内显示。 Flash动画主要是由矢量图形组成的，而且其播放采取了“流模式”，使其网页内的Flash动画能够边下载边播放，因此访问者可以很快就看到动画效果。Flash虽然功能强大，但是依然需要安装浏览器插件才可以播放，同时，Flash动画的效果越复杂，其占用的系统资源就越多。 2.1.3图文排版 在图片较多的情况下，要进行合理的图文排版。将数张图片以整齐有序的形式排列在版面上，称为块状组合。将图片分散于版面的各个部位，使版面成为自由的不呆板的形式，称为分散组合。 2.2 导航设计 导航是网站设计不可缺少的基础元素之一，从本质上讲是一组超链接，目的是帮助访问者快速准确地浏览网站。 导航样式有很多，包括：横排导航、竖排导航、多排导航、图片式导航、Jump Menu下拉菜单和隐藏式导航等。多种样式的导航设计，是为了与不同风格页面设计协调统一而衍生出来的。由于网站可能储备了多种类别信息，所以一个网站不一定只有一个导航菜单。到目前为止，光标悬停式导航栏较为常见。 2.3 框架结构设计 分栏式结构是最常见的网页框架，是类似于新浪网的页面骨架设计，以超过一屏半为准，把页面从上到下分割为几列构架的设计结构。 分栏结构是一种开放式框架结构，它的用途