421设计网站栏目及版面

一、教学目标

1．了解网站设计的基本内容。

2．依据主题设计网站的栏目和结构。

二、教材内容分析

设计网站栏目及版面是网站建设的关键步骤，栏目实质是一个网站的大纲索引，将网站的主题明确显示出来。设计好栏目，会使网站结构清晰，方便扩充和维护。

精美的网页版面设计会吸引大量的网民，精巧的版面结构能够让浏览者清楚、容易地理解作品传达的信息，同时也是不同元素巧妙排列的方式。就像传统的报刊杂志一样，我们将网页看作一张报纸或一本杂志中的一页来进行排版布局。设计版面时要把文字、图片、空白当作一个整体来看，采用平面分割方式，调动全部面积来构建整个版面。

信息技术发展日新月异，我们的教学重点应放在培养学生适应技术发展的能力上。在介绍基本概念、原理、方法以及一些相对稳定的内容时，要特别注重培养学生的思维方法。在该部分内容的学习中，充分调动学生的积极性，激发学生的创作热情和创新精神。

三、教学方法及策略

1．对已经下载的部分网站进行栏目和版面的分析比较。

2．以学生为中心，教师指导，学生依据自选主题设计栏目和构思版面。

四、教学过程

引入：

网站设计是把一个网站由蓝图变为现实的第一个步骤，是搭建网站整体结构的过程，能使后续工作有章可循，下面我们从栏目设置和版面设计入手。

新授：

（一）栏目设置

1．让学生浏览光盘上的“机器人做学玩”网站，归纳该网站的栏目设置。

2．教师总结网站栏目设置要注意的事项：

1

(1) 紧扣主题。

(2) 重点突出。

(3) 方便浏览。

3．根据以上三点，对课本第 82 页同是“环境保护”主题的两个栏目进行评价。

（二）版面设计

1．让学生打开 \\4-2\\sucai 文件夹中的几个网页，总结版面布局的几种类型及特点。 常见样式 特 点 优点：结构清晰，主次分明。 “厂”字型 缺点：呆板。 优点：信息量大，切换方便。 “口”字型 缺点：页面拥挤，不够灵活。 优点：漂亮、吸引人。 中国海洋大学 自由式（ POP ） 缺点：显示速度慢，文字信息中央美术学院 少。 2．教师举例：绘制“走进山东”网站的规划图。

（第一张规划图）

先锋网 — 人民网 中国人民大学图书馆 示例

2

（第二张规划图）

3．版面布局可按 创意草案——粗略布局——最后定稿 三个步骤进行。 根据网站主题的需要，从整体上设计各网页的内容、各网页之间的链接关系以及各网页的版面，画出网站的规划图。对规划图，一开始不必考虑细节功能，只是粗线条地勾画出规划的草案即可；在草案的基础上，将需要的功能模块安排到页面上，然后细化每项内容。规划并不是一成不变的，时常需要根据素材进行调整和完善。

[布置任务]

分析“机器人做学玩”的版面布局。除以上提到的，你还知道其他的布局类型吗？你最喜欢哪一种？

3