建站之行 始于规划

张　涓

一、设计思想

本课选自中国地图出版社《网络技术应用(选修3)》第四单元《建设网络家园》,重点是网站设计的整体构思。

本节课让学生观摩优秀学生网站实例,引导学生从网站主题、布局、风格、导航及链接等方面多角度赏析优秀网站作品,感悟优秀网站是如何规划的。学生通过理解网站的独特风格是标志、色调、文字及版面多方面共同作用的结果,进而在规划自己的网站时,会主动地进行全盘考虑。本课要求学生动脑思考和理解的内容比较多,要让学生了解网站设计的完整过程,不能急于求成,暂时只要求他们能够策划出简单的网站即可。

二、教学目标

知识与技能:了解开发网站的一般过程,掌握规划网站的知识,能以小组分工协作的方式完成网站的组织与规划。

过程与方法:在赏析优秀学生网站及小组协作的过程中,学会自主学习和协作学习;在理解网站规划知识的基础上,掌握网站规划的技巧。

情感、态度与价值观:体会网站规划在建设网站中的重要性,提升分析能力和规划能力,促进个性化发展。

三、教学重点、难点

重点:优秀学生网站的观摩和赏析,小组成员分工、协作规划主题网站。

难点:小组成员协作确定网站主题,制定切实可行的《网站分工计划表》及《栏目设计分工表》。

四、教学准备

多媒体网络教室、大屏幕液晶投影仪、课件、教学资源(提前将多个不同类型的优秀学生网站和《“我喜爱的网站”分析表》、《主题网站类型及名称参考表》、《小组主题网站栏目设计分工表》及《网站规划分工计划表》放在机房FTP服务器上)、异质分组(每小组4～5人)。

五、教学过程

1.创设情境,导入新课

师:刚刚大家从FTP服务器下载并观摩了多个学生网站优秀作品。大家一定也想拥有一个属于自己的网站,如何开发网站呢?

学生众说纷纭。有的说上网收集制作网站的素材,然后动手制作;有的说要借助Photoshop等处理工具才能使自己的网站有个性……

教师借助课件介绍开发网站的一般流程:规划→设计→实现→发布管理,并让学生知道规划网站是开发网站的前提,引导他们重视本节课的学习。

设计意图:课前引导学生观摩多个优秀学生网站作品,激发学生开发网站的热情,让学生思考如何开发网站,引入本节课的教学内容。

2.观摩体验,感受规划

(1)领略网站主题,品味网站名称

教师带领学生观摩“中华傲三峡”和“机器人做学玩”网站,引导学生观察网站的主题及名称,使学生认识到选题和取名的重要性。

学生积极观察,理解一个好的网站名称可以起到画龙点睛的作用,并尝试规划自己的网站主题和名称。

(2)剖析网站首页,分析模块组成

教师讲解并剖析“中华傲三峡”网站的首页及模块组成:导航栏、网站LOGO、Banner、版权和联系方式。

学生观察并理解首页在网站中所处的地位和作用,了解首页的功能模块组成,为后续的网页版面设计奠定基础。

(3)多层面分析,领悟网站整体风格

①教师引导学生观察网站的LOGO和Banner,说明独特的LOGO及Banner是树立网站个性风格的标志,激发学生的个性展示需求及创新意识。

学生查看常用网站(如网易、搜狐、百度)的LOGO设计,同时观察网站的Banner,理解网页的主题与LOGO、Banner间的内在联系。

②教师引导学生观察不同类型网站的色彩搭配、字体设置及图片样式,让学生明白网站的色彩搭配是无声的语言,同时以“中华傲三峡”为例,强调使用特殊字体时,最好使用图片的形式。

③教师引导学生分析“机器人做学玩”网站的版面布局图,说明版面布局结构就是以最适合浏览的方式将图片和文字排列在页面的不同位置。利用课件向学生展示网页布局常见的三种样式:“口”字型、“厂”字型和“POP”型。

学生浏览“中华傲三峡”及“机器人做学玩”两个网站的版面布局结构,思考这两个网站是如何将不同元素巧妙地排列,理解网页所传达的信息,明白设计版面时要把文字、图片、空白看做一个整体,采用平面分割方式,调动全部面积来构建整个版面。

(4)层层深入,探寻网站的栏目设计

教师参照“机器人做学玩”网站,给出一级栏目、二级栏目名称及相关的内容描述,为学生设计自己的网站结构提供一个范例。让学生明白,栏目实质是一个网站的大纲索引,索引应该将网站的主体清晰呈现。

学生自主浏览“中华傲三峡”网站,思考该网站的三级栏目分别是如何设定的,各栏目如何表达网站主题。

(5)指点迷津,直面交互设计

教师引导学生理解导航栏、网站地图、网站当前位置提示导航的必要性,规范学生的导航意识,同时让学生观察各栏目目录菜单及相应网页的链接,使学生明白链接的设计应是双向的。

学生理解导航栏及网站地图能够方便浏览网站。网站链接是灵魂,不同类型的链接有着不同的应用场合。

(6)结合自身需要,选择网站开发工具

教师简要介绍常用的网页制作工具FrontPage、Dreamweaver、Photoshop及Flash等,学生可根据需要灵活选择。

设计意图:教师运用演示法向学生剖析典型网站案例,让学生领悟规划网站需要考虑的因素,掌握规划网站的相关知识,为小组填写《网站规划分工计划表》和《小组主题网站栏目设计分工表》埋下伏笔。

3.小试牛刀,评说网站规划

教师请学生对照《“我喜爱的网站”分析表》,评价自己喜爱的网站,分析网站的规划设计。

设计意图:通过评价“我喜爱的网站”,引导学生在赏析的同时,利用规划网站的知识,从“内行”的角度来分析自己喜爱的网站,为小组合作规划主题网站奠定基础。

4.小组协作,规划网站

小组成员参照教师提供的《主题网站类型及名称参考表》,从网站选题及网站名称入手,完成《网站规划分工计划表》和《小组主题网站栏目设计分工表》的填写。

设计意图:本环节是本节课的重点,通过学生填写系列表格,引导学生逐步规划网站。学生在填表的过程中,学会分工及合作,理解并掌握网站建设之初需要考虑的问题。

5.上交表格,点评反馈

学生以小组为单位将填写完成的表格上传到FTP服务器中。教师点评,强化学生的规划意识,并对表格的填写给出修改建议。

六、教学反思

本节课以高中信息技术课程标准为指导,力图贯彻新课程理念,主要做到了以下几点。

1.赏析优秀网站,营造学习氛围

良好的信息技术学习氛围是有效教学的前提。教师一方面通过FTP服务,给学生提供多个优秀主题网站,激发学生创作主题网站的热情。另一方面,通过分析典型网站案例,引导学生把握创建网站的几个步骤,了解在整体规划中需要考虑的问题。同时,教师通过系列表格对小组合作规划主题网站进行指导和调控,旨在提高学生的分析能力、探究能力和组织能力,鼓励学生积极思维、勇于创新。

2.灵活选用教学方法, 实现教学目标

本节课采用多种教学方法相结合的教学模式,通过对主题网站的解剖,激发学生规划网站的兴趣,引导学生规划小组的主题网站。适时设疑并进行分析,努力为学生创设一种协作学习环境,培养学生自主学习的能力和创新精神。

3.揭示技术思维, 提高信息素养

教师通过对两个网站的分析,让学生多观察、多思考,理解网站的独特风格是标志、色调、文字及版面共同作用的结果。引导学生体验信息技术蕴涵的文化,适时地把学生的注意力引导到技术背后所蕴涵的技术思想、应用价值和人文特征上来,达到提升学生信息素养的目的。

(作者单位:江苏六合高级中学)