课题

4.2网站的设计(1)

课时

1个（40分钟）

教师

潘永开

班级

高二级

教目标学

知识与能力

以恰当的方式组织并呈现网站的信息，掌握网站结构及栏目结构的设计方法，了解网页版面设计要考虑的因素，掌握页面版式布局设计的初步技术方法

过程与方法

对知识与能力的目标采用集体讨论、分组实践活动、比较、任务驱动等方法进行解决

情感态度与价值观

从美学角度、从平面设计角度去学习与欣赏网站的设计

教材分析

重点

（1）      以恰当方式组织并呈现网站的信息

（2）      掌握网站栏目设计、版式设计的方法

难点

（1）      网站的结构设计

（2）      网页的风格设计

（3）      版面内容的布局设计

教具

多媒体教学网

教

学

过

程

一、引入

观摩学生作品《虎门销烟启示录》，小结上节关于网站主题及栏目设计有关内容

引出网站结构设计（如何着手网站结构设计）

二、教学过程

4.2.1网站的结构设计

通过观摩作品《虎门销烟启示录》，讨论该网站的结构。

向学生提出问题：

确定一个主题后，如何来构思相关的栏目？可采用什么方法？

答：1、栏目的构思应能恰当体现主题为好

    2、可采用表格，分层级方式的方法进行描述

4.2.2网页的版面设计

引：人有七情六欲，喜怒哀乐，网站和网页也有。

与学生一起讨论分析《虎门销烟启示录》的风格特点，再结合现有网上有特点的网站或网页，选取两个不同个性的网页加以比较。

向学生提出问题：

网站的风格形成主要由那些因素构成？在设计时应考虑些方面？

1、 网页的风格设计

考虑因素：为主题服务

技术因素：布局、色彩、图片、标志

同一网站内的各网页之间应保持风格一致

2、 版面布局设计

 版面：标题、栏目、内容、附加

 屏幕：中上--最引人注意

       两侧--不太重要信息或固定信息

       下方—附加信息（如版权）

选取多个不同布局类型的优秀网页与学生一起欣赏，讨论这些优秀作品布局特点。选取3-5种不同布局类型网页：如国字型、拐角型、标题正文型、左右框架型、上下框型等，进行欣赏与讨论。最后向学生提出问题

在设计前，可采用什么方法进行版面布局的构思？

答：没有绝对统一方法；可参考采用图表方式进行构思

分组实践活动：每四人一组，每组成员根据给定的同一主题，分别制作不同版式布局的网页，完成后小组成员彼此相互对各自的作品进行评价。

具体过程：

1、教师操作演示

2、学生分组制作

3、作品互评

三、小结

1、网站结构可采用什么方法进行进行描。

2、影响网站风格的主要因素。

3、版面布局方法。

教学流程图