网站栏目、版面、风格设计

网站栏目、版面、风格设计第一页，共13页。网站栏目、版面设计第二页，共13页。网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。一、网页栏目设计设计一个网站与编写一本书有相似之处，开始着手写书之前，首先要进行总体构思，拟定书的编写目录，然后才按章节组织编写内容。同样制作网站前要设计好网站的栏目。请大家观看南京大学的网站：当然，还可以有二级栏目或三级栏目：第一级栏目如下图示：第三页，共13页。1、“T”字型：也称“厂”字型，页面顶部为主菜单以及横条网站标志+广告条，下方左面为导航菜单，右面显示内容的布局。优点：页面结构清晰，主次分明；缺点：呆板，如果细节色彩上不注意，容易“看之无味”。二、网页版面设计网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。版面布局没有绝对统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。常见页面布局样式：第四页，共13页。2、“国”字型，也称“同”字型。即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。常见页面布局样式：第五页，共13页。3、自由式。又称POP布局页面布局像一张宣传海报，以一张精美图片作为页面的设计中心，菜单栏目自由摆放。优点：漂亮、吸引人，适宜于艺术类网站。缺点：显示速度慢，文字信息量少。常见页面布局样式：第六页，共13页。4、“口”字型。页面一般上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。优点：充分利用版面，信息量大，与其他页面的链接多，切换方便；缺点：页面拥挤，不过灵活。5、标题正文型。标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等，其特点是简洁明快，干扰信息少，较为正规。

6、“匡”字形布局：这种布局结构给主内容区释放了更多空间，内容虽看起来比较多，但布局整齐又不过于拥挤，适合一些下载类和贺卡类站点使用。7、“三”字形布局：一般应用在简洁明快的艺术性网页布局，这种布局一般采用简单的图片和线条代替拥挤的文字，给浏览者以强烈的视觉冲击。8、“川”字型布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能，一般适用在栏目较多的网站里。9、对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是很难将两部分有机地结合起来。

10、FLASH布局：FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。常见页面布局样式：第七页，共13页。巩固练习：1.如果一个网站的栏目设置不合理，可能导致网站（）A.不能正常运行B.目录结构不清晰、内容混乱C.没有自己的整体风格D.浏览时速度比较慢2.如果一个网页给人的感觉是内容杂乱无序，主次不分，这主要是因为（）A.制作工具选择不合理B.色彩选择不合理

C.版面设计不合理D.语言使用不合理3.网页的版面设计是否精美是吸引网民访问网站的重要因素之一。下列关于版面设计的叙述，错误的是（）

A.网页版面布局可按创意草案、粗略布局、最后定案三个步骤来进行

B.可以根据自己的想法在纸上绘制初步的版面布局创意图

C.版面设计包括风格设计、布局设计和交互设计

D.版面布局就是将网页需要呈现的内容进行合理的放置第八页，共13页。网站风格设计第九页，共13页。一、风格设计

风格是指网站的整体形象给浏览受。有的严肃计策、有的清爽温馨、有的深沉厚重、有的生动活泼、有的古朴典雅、有的豪迈奔放。风格设计与主题是密不可分的，是为突出主题服务的。一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等，同一个网站的各网页之间应保持风格一致。1、网站标志树立网站整体风格的第一步是：设计、制作一个网站的标志(logo)，将你的标志尽可能地放置在每个页面最突出的位置上，或者页眉，或者页脚，或者背景。如同商标一样，看见标志就让大家联想起你的网站。设计标志有这样几种方法：(1)选择与网站主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本，加以卡通化和艺术化。例如搜狐网站的卡通狐狸。(2)对于专业性的网站，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志。(3)最常用和最简单的方式是用自己网站的中文或者英文名称作标志。采用不同的字体、字母的变形与组合，可以很容易制作出自己的标志。比如百度，Google。第十页，共13页。一、风格设计2、网页色彩搭配设计网站的标准色彩：网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩，这样给人以整体统一的感觉。标准色彩能体现网站形象，延伸网站内涵。网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。3、设置字体设计网站的字体：在关键的标题、菜单、图片里使用统一的标准字体。与标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。

但要注意的是使用一些比较特别的字体时，最好使用图片的形式，否则你的辛苦设计便付之东流了，因为浏览者的计算机里很可能没有安装你的特别字体。第十一页，共13页。二、素材的收集与管理1、什么是素材？

网页制作过程中常用的多媒体文件格式有：

（1）图片：gif、jpg、png等

（2）声音：midi、wav、ra等

（3）视频：wmv、asf、rm、mov等

选用何种格式的文件要考虑到文件的大小。文件过大，会影响网页打开的速度，影响浏