1.2 网站设计流程（课件）-高二《网页设计与制作》同步教学（北京出版社）

1.2 网站设计流程 任务导入 学习目标 任务实施 知识拓展 思考与练习 任务导入 小赵已经对叶行科技公司的网站建设有了初步的规划，那么下一步从哪儿做起呢？小赵向老张请教。老张告诉他，在着手建设之前，必须对合同内容进行深入研究，对网站的轮廓有个大体的把握，这也就是着手建设前所必须的一个设计流程。 本任务将学习： （1）划分商务网站栏目及确定网站风格。 （2）进行网站目录结构与链接结构的设计。 （3）设计网页布局及配色。 学习目标 了解网站栏目与版块设置，会划分网站栏目。 了解网站整体风格的设计方法，会对网站风格进行基本设计。 了解网站目录结构与链接结构的基本要求，会进行网站目录及链接结构的设计。 了解网页设计布局与配色，会进行网页色彩搭配及布局。 任务实施 1.2.1 确定网站栏目与版块 1.2.2 确定网站整体风格 1.2.3 确定网站目录结构 1.2.4 确定网站的链接结构 1.2.5 首页的设计 1.2.6 网页设计布局 1.2.7 配色 1.2.1 确定网站栏目与版块 栏目实质上是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目时，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几方面： 1）紧扣主题 2）设立一个最近更新或网站指南栏目 3）设立一个可以双向交流的栏目 1.2.2 确定网站整体风格 （1）将标志logo尽可能地出现在每个页面上，或者页眉，或者页脚，或者背景。 （2）突出标准色彩。文字的链接色彩、图片的主色彩、背景色、边框等色彩尽量与标准色彩一致。 （3）突出标准字体。在关键的标题、菜单、图片里使用统一的标准字体。 （4）构思一条朗朗上口宣传标语。把它做在banner里，或者放在醒目的位置，告诉大家网站的特色。 1.2.2 确定网站整体风格 （5）使用统一的语气和称谓。 （6）使用统一的图片处理效果。比如，阴影效果的方向、厚度、模糊度都必须一样。 （7）创造一个站点特有的符号或图标。 （8）用自己设计的花边、线条、点。 1.2.3 确定网站目录结构 建立目录结构的一些建议： （1）不要将所有文件都存放在根目录下。 有的人为了方便，将所有文件都放在根目录下，这样做造成的不利影响在于：① 文件管理混乱。② 上传速度慢。 （2）按栏目内容建立子目录。 子目录的建立，首先按主菜单栏目建立。其他的次要栏目（如友情连接等）内容较多、需经常更新的可以建立独立的子目录。 （3）在每个主目录下都建立独立的images（图片）目录。 默认地，一个站点根目录下都有一个images目录，而根目录下的images目录只是用来放首页和一些次要栏目的图片。 （4）目录的层次不要太深。 目录的层次建议不要超过3层，方便维护管理。 1.2.4 确定网站的链接结构 确定网站链接结构的目的是：用最少的链接，使得浏览最有效率。 一般地，建立网站的链接结构有两种基本方式： 1）树状链接结构（一对一） 2）星状链接结构（一对多） 1.2.5 首页的设计 如何设计好首页呢？一般的步骤是： （1）确定首页的功能模块。 首页的内容模块是指需要在首页上实现的主要内容和功能。一般的站点都需要的模块有：网站名称（logo）、广告条（banner）、主菜单（menu）、新闻（what's new）、搜索（search）、友情链接（links）、邮件列表（maillist）、计数器（count）、版权（copyright）。选择哪些模块，实现哪些功能，是否需要添加其他模块，都是首页设计时首先需要确定的。 （2）设计首页的版面。 在功能模块确定后，开始设计首页的版面。设计版面的最好方法是：找一张白纸，一支笔，先将你理想中的草图勾勒出来，然后再用网页制作软件实现。 1.2.6 网页设计布局 设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，将网页看作一张报纸、一本杂志来进行排版布局。版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。版面布局一般的步骤如下： （1）画出草案。 （2）粗略布局。 （3）定案。 1.2.7 配色 1）色彩的基本知识 （1）颜色是因为光的折射而产生的。 （2）红、黄、蓝是三原色，其它的色彩都可以用这三种色彩调和而成。 （3）颜色分非彩色和彩色两类。非彩色是指黑、白、灰系统色。彩色是指除了非彩色以外的所有色彩。 （4）任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。 色彩示意