第三章：网页设计——中期网站制作.ppt

1、第三章：网页设计 中期网站美工设计、 制作,电脑艺术设计 张红 2011-2012学年上学期,第一节：页面设计基础知识,一、页面设计基本知识,（一）、页面尺寸 由于页面尺寸和显示器大小、分辨率、浏览器软件等都有关系，因此，为了考虑到绝大多数人能够正常浏览网页，而不用拖动水平滚动条，一般将网页的标准尺寸设置为： 800 x600像素下：760X420，（满屏显示，不出现滚动条），也可保证宽度为760，高度随意，不出现水平滚动条。 1024x768像素下：955X600（这样两边有很宽的空白可以放广告） 其实网页宽度保持在1002以内，就不会出现水平滚动条。如果满屏显示的话，高度在612615之间

2、，就不会出现垂直滚动条。,（二）、页面数据量 考虑到浏览者浏览页面的等待时间，除了提高网速外，就是要压缩放在网页上的元素（包括图片、动画、视频、声音等）的数据量。 一般图片使用jpg格式，在图像显示质量基本保证的情况下，可以将图像数据压缩90 %以上。 动画用flash动画，具有矢量格式，有很小的数据量。 视频、Mpeg格式，对数据量进行了极大的压缩Rm 格式可以边下载边播放，极大的节约了等待时间。 音频用mp3格式,（三）、页面功能 1、信息传递功能 2、导航功能 3、审美功能,（四）、视觉保护 留白、字体、字号、间距、文字排列、文字的颜色与背景、色彩搭配、动点适度等方面 决定了浏览者在浏览

3、网站时会不会眼镜疲劳。 留白：版面简洁透气，使浏览者心情轻松愉快。 字体：正文首选宋体，标题根据需要定，将其存为图片使用。 字号：网页主要内容文字大小在1216点比较适合。 间距：行间距：通常接近字体尺寸的行距设置比较适合正文，行距的常规比例为：10:12，即文字10点，行间距12点。,第二节、页面设计,一、页眉设计,网页页眉指的是页面顶端的部分。有的网页划分比较明显，有的页面没有明确区 分或者没有页眉。页眉的作用是定义页面的主题，比如一个站点的名字多数都显示在 页眉里。这样，访问者能很快知道这个站点的大致内容。 页眉是整个页面的设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。 页眉的

4、风格一般和整体页面风格一致，富有个性特色的页眉有着和网站LOGO一样的 标识作用。页眉的位置注意力较高，大多数网站创建者在此设置网站的宗旨、宣传口 号、广告语等，有的设计成广告位。,页眉通常包含的内容有：网站名称，图片，导航条。,（一)、网站名称或logo的设计,（二)、网站图片或广告的设计（banner设计),（三)、导航条的设计 1、导航元素 (1)导航元素的种类：文字、图像、动画、按钮都可以。用的最多的是按钮 （2）导航元素的位置：左部或上部 （3）导航元素设计应注意的问题： 利用人们固有知识经验 内容匹配 易于点击,2、导航条设计 导航条的分类包括：横排导航、竖排导航、多排导航、frame框架快捷导航、图片式导航等,竖排导航,多排导航,图片式导航,二、内容(中心舞台)设计 在页眉与页脚之间的区域是我们的中心区域，也是这个网站的视觉焦点所在。 用于摆放网页上大量的文字内容（如文章、栏目索引等）,失败的设计,三、页脚设计,页脚和页眉相互呼应。页脚是放置站点主题的地方，而页脚是放置制作作者或者公司信息的地方。我们经常看到，许多制作信息、版权信息都是放置在页脚的。 有效设计的页脚是可以发挥很大的作用的。不要将页脚想象成