4.2.1网站的结构设计

1、4.2 网站的设计,通过上节课的学习，我们知道了一般开发网站的基本过程，主要经过5个阶段，这5个阶段是按顺序进行的，我们已学习了网站的规划，确定网站的主题，也就是解决了“做什么？”的问题。,当我们确定了网站的主题后，就要思考：如何去表达主题，如何做才能把内容成功地组织和展现，作品如何实现的问题，也就是“如何做？”的问题，这项工作就叫做网站设计。,同学们在东莞学习、生活了这么长时间，你们清楚虎门销烟是怎么回事吗？,一位同学为了方便别人了解虎门销烟，他设计了一个虎门销烟启思录网站，大家认真观察，大致了解网站的情况,同学们觉得这个网站怎么样呢？想不想自己也设计一个网站呢？,网站的设计目的：在于把需要

2、表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。 网站设计一般包括：网站栏目结构设计、网页版面设计、网页的链接设计（导航设计）三方面。,一、 网站的结构设计 设计一个网站与编写一本书有相似之处，开始着手写书之前，首先要进行总体构思，拟定书的编写目录，然后才按章节组织编写内容。同样，制作网站前要设计好网站的栏目。编写书通常有三级目录，网站的栏目也可以有多层，但并不是越多越好，以能恰当的体现网站的主题为好。此外，每个栏目本身应有一个大致的内容描述，以表达栏目的设计思路，充实整个网站的总体结构设计。,下面是“虎门销烟启思录”网站的结构图各网站的一、二级栏目部分内

3、容描述：,请同学们观摩下面网站，思考下面问题。 （1）网站是主题是什么？网站是怎样围绕主题展现内容的？ （2）网站提供了哪些栏目及功能的？ 网站一 勿忘国耻 八年抗战 网站二 中国剪纸艺术网 网站三 专题学习网站叶的世界:2006/ 网站四 虎门销烟启思录（在光盘）,二、 网页的版面设计 网页的版面设计包括如下两方面：风格设计、版面布局设计1、风格设计风格：是指网站的整体形象给浏览者的综合感受。有的严肃，有的清爽温馨，有的深沉厚重等。风格的设计与主题密不可分，是为突出主题服务的。一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。同一网

4、站内的各网页之间应保持风格的一致、在每个页面的相同位置放置图标、文本块等元素，这样有利于提高浏览速度、并给人以整体感。,2、版面布局设计网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次分明。如何把最重要的信息放在吸引人的位置是版面布局首先需要考虑的。 一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要的或固定的信息，附加信息（如版权信息）一般放在最下方。下图是版面布置的一个例子。,请同学们观摩下面网站，看它们的风格设计、主题布局、色彩应用各有什么特点？ 网站一 勿忘国耻 八年抗战 网站

5、二 中国剪纸艺术网 网站三 专题学习网站叶的世界:2006/ 网站四 虎门销烟启思录（在光盘）,三、 网页的交互设计 用户如何访问网站？怎样从一个位置到另一个位置？怎样防止用户在网站中“迷路”？链接点设计就是要考虑人们在浏览网站时通常有哪些需求，并帮助他快捷地路到所需的页面，实现轻松自如的浏览。以下是“虎门销烟启思录”网站的网页交互设计表：,请同学们打开以下网站，围绕以下几个问题进行观摩，看这些网站的链接有哪些特色？是否便捷？ 网站一 勿忘国耻 八年抗战 网站二 中国剪纸艺术网 网站三 专题学习网站叶的世界:2006/ 网站四 虎门销烟启思录（在光盘）,动手设计：请同学们3个人一组，围绕已选好的网站主题（选择主题可参考P95），设计网站的内容和栏目结构（每个栏目要有大致内容描述）、版面布局、风格特点、