《网站创作始于规划》教学设计

李晓艳

● 教材分析

《网站创作始于规划》选自上海科技教育出版社出版的《网络技术应用》第四单元《网站的设计与评价》。本单元以网站设计为工作任务，让学生通过完成网页制作的过程，亲历利用信息技术加工信息和表达思想的过程与方法，同时将网络技术的基础理论与实际应用技能有机结合起来。在网站制作中，一份详细的规划书有利于指导创作过程，而我们学生所缺少的也正是这种统筹规划能力，因而我从实际出发把网站的规划单独提了出来，以网页规划设计表为载体设计了一课时的教学内容。本节课的《普通高中信息技术课程标准（实验）》要求是：通过开发实践，学会规划、设计简单网站的基本方法并能够根据网站主题要求设计评价指标。从课标和教材可以看出，本节内容至关重要，有着承上启下的作用。承上：承接必修教材中《信息作品的集成》环节。启下：本课是《网站的设计与评价》单元的开篇，网页规划的合理与否，主题的确定是否恰当，小组成员的分工是否详细，对于后续的网页制作起着至关重要的作用。

● 学情分析

高一学生经过近一个学期的学习，已经具备了一定的信息获取、加工、管理能力，同时了解了网络技术的基础理论，对精彩的网页很感兴趣，非常向往掌握网页制作的技术，很想亲自创作网页作品来表达自己的想法进行有效交流。但他们会忽略电子作品制作的前期规划，对于网页设计的一般流程，以及如何确定适合的主题、如何在作品中体现主题，缺少必要的经验，因此本节课有必要在规划设计方面加以训练。

● 教学目标

知识与技能目标：了解创作电子作品的一般流程，理解网页规划的重要性；能够根据网站主题要求设计评价指标，对网站的质量与运行状况进行评价。

过程与方法目标：通过赏析、评价网页作品，了解网页规划的设计要素，提高审美意识；能根据任务需求，确定主题，进行科学规划，初步掌握网页规划的方法。

情感态度与价值观目标：通过小组合作，感受同学友谊，增强集体意识和协作意识；学会欣赏他人的劳动成果，提高艺术修养和审美情趣。

● 教学设计思路

通过赏析网页，让学生感受优秀网页所具有的特征，了解网页规划的设计要素，形成网页规划设计的思路。通过往届学生网页作品投票和评分的过程，明确网页规划的注意事项，初步了解网页评价量规，激发学生的创作兴趣。最后，结合实际表达需求，小组协作，确定创作主题，进行创意设计，完成网页规划设计。

● 教学过程

1.创设情境，导入新课

师：因特网在全球的迅速普及和发展，为人类开启了一方全新的文化空间。在网上我们可以浏览各种各样的网页，获取无穷无尽的知识。因特网上的每一个网页都从属于某一网站，可以说，包含着各种信息的因特网就是由无数的网站组成的。只要拥有了一个属于自己的网站，你就可以在茫茫的网络世界中拥有一片属于自己的天空。同学们想不想做一个属于自己的网站呢？

生：想。

师：网站也是一个信息作品，请同学们思考前面学到的信息集成的一般过程。

生：确定作品主题—规划设计作品—采集处理素材—制作加工作品—测试发布作品。

师：那么网站的制作流程是什么呢？

生：网站的规划—素材的搜集、加工—网站的制作—网站的测试与发布—网站的评价。

师：由网站创作流程我们可以看出，网站创作、始于规划，本节课我们学习网站的规划与设计。要求以小组为单位制作一个网页规划设计表。

设计意图：导课承上信息集成的一般过程，启下引出网页创作流程，揭示规划的重要性，从而点题。

2.规划开始，确定主题

这是一个承上启下的教学环节。时间不长，但作用很大。首先提出问题。

师：同学们平时都喜欢去什么网站？

生：百度、新浪、人人、QQ、4399……

师：这些网站要表达的主要内容，也就是网站的主题是什么？

生：百度是全球最大的中文搜索引擎，新浪以全面而及时的新闻而著称……

师：主题是信息作品的灵魂，由大家来制作网页，你想表达什么主题呢？你对哪方面的主题感兴趣？提示确定主题的原则：小而精，目标定位准确，积极、健康、向上，网页名称有创意，符合主题（幻灯片展示）。

设计意图：明确主题的含义，了解主题的重要性，它是信息作品的灵魂，思考启发网页主题，为后面的制定规划做铺垫，提供选题参考。本环节主要采用谈话法，谈话法的运用，有利于建立民主平等的师生关系，而课堂上的民主气氛是学生创造性思维得以激发的一个重要条件。

3.网页欣赏，归纳网页设计元素

师：我们来欣赏一个网页，百年世博，落户上海，城市让生活更美好，同学们说说这个网站的主题是什么，并思考如何在网页中体现这一主题。

教师引导学生从网页设计要素中来体现主题，如内容、色彩、版面布局、导航设计、图标设计、图片等。

教师组织学生从以下几个设计要素讨论网站内容和风格，分析网页框架和风格。

（1）栏目设置

师：确定好网站主题后，要把网站的内容按一定的方法进行分类，并设置专门的栏目（如图1）。

网站栏目设计原则一是要紧扣主题，二是要突出重点。

（2）网站色彩

师：不同的颜色给人不同的感受，同学们看这几个网站主要是什么色调，给人什么样的视觉感受呢？

学生思考回答问题。

教师总结图2所示的网站色彩与感觉之间的关系。

（3）网站LOGO

师：我们重点来看图片3中网站的Logo，什么是网站的Logo呢？

生：网站的标识。

师：我们来欣赏图片3中几个网站的Logo，并思考他们所表达的含义。

学生思考，教师予以引导：百度的“熊掌”Logo的灵感来源于“猎人追寻熊爪印迹”的刺激，这与李先生的“分析搜索技术”非常相似，从而构成了百度的搜索概念。熊掌图案也最终成为了百度公司的Logo；新浪的大眼睛寓意世界尽在你的眼中等。

设计意图：采用了比较法、归纳法以及“基于问题的学习”等教学方法，让学生学会欣赏网站，通过欣赏和思考问题，初步归纳网页设计要素，并意识到：要根据主题，设计恰当的网页风格和内容结构。

4.网页评价，明确优秀网页的标准

活动要求：快速浏览学科网页上展示的上届学生的网站作品，选出自己感兴趣的网站进行投票。

活动过程：教师观察学生评分过程，实时展示各网页作品的投票人数柱状图，查看相应网页的评分结果。

分析评价结果，总结网站评价标准。首先，分析学生对网页评价的结果——引出网页规划设计应注意的问题：选题不能过大，网页名称有新意；内容栏目设置有条理，清晰；色彩搭配合理；版面布局规范，美观；导航设计恰当。

设计意图：让学生深刻体验优秀网页的设计标准，学生在学科网上投票评价网页，首先学生很感兴趣，其次大大提高了教学效率，将评价的结果作为讨论的依据总结出网站评价标准，环环相扣，从而轻松自然地突破难点（网站评价指标的讨论和确立）。

5.课堂实践，制定小组主题网页的规划

教师提出学习任务：以小组为单位完成网页规划设计表。而后，教师介绍学习资源，并提出组内按栏目和角色两个维度分工的建议（如图4、图5）。

设计意图：本环节主要采用了小组协作法和自主探究法，让学生去规划设计网页，为学生创造力的发挥提供了平台。学科网提供了大量的网站规划和设计的指导资源，并采用“半成品加工”教学策略给学生一个网页规划设计表和案例，尊重学生的个体差异，让学生有表可依快速进入了课堂实践。同时在组间形成竞争，促进了组内团结。按栏目和角色二维分工，使学生的责任更加明确，课后能有针对性地收集资料和素材。

6.展示规划，相互交流

请1～2组学生交流展示自己本小组的规划设计。学生浏览并讨论。

7.课堂小结

强调规划的重要性，以及规划的思路和方法。同时渗透我们学校的教育部国家级课题《人生规划意识》。你不规划人生，就要被人生规划，希望我们的人生经过规划和设计后，可以成功和幸福。

● 教学反思

本节内容的基础知识和基本技能主要是利用学习网站设置问题情境、提供学习资源，学生可以通过自主学习获得，教师对部分重点难点进行讲解和演示。而动手规划部分要求学生主动地与同伴探讨、合作，将知识与技能内在化、系统化，达到认知结构的有效调整和重构。合作学习在这一建构过程中起了关键的作用。因而本课主要采用了自主探究法、小组协作法，个别地方采用了比较法、归纳法，而教法主要采用了任务驱动法、基于问题的学习、讨论法、讲授法。应该说，整个教学过程比较流畅，基本上都按照教师的教学预想开展教学，学生在教学中能够积极地思考和回答问题，能够学会有效地规划网站的方法，提升了规划能力和审美能力。

点 评

这是一个在借鉴基础上进行创新的优秀案例。说其优秀，是因为每一环节都体现出了设计者的精心、细心。

导入新课部分，由信息集成的一般过程引入，巧妙利用学生已学知识与技能进行迁移，即将信息集成中学习到的规划设计迁移到网站制作中，有利于促进学生在制作作品（包括多媒体与网站制作）中形成规划意识，这也是本次课的核心指向。

网站评价部分，引导学生根据网站分析的结果总结网站评价标准，实现了以评促学、以评导学的目的，在此过程中潜移默化地促进了学生对规划中应注意问题的关注，从而避免了类似问题的出现，以提升规划的效果。

网站规划部分，学生的规划不是空洞的存在，培养规划能力也不是纸上谈兵，因此教学中必须借助各种形式促使“虚”的规划设计落到“实”处，该案例使用的是规划表，也有案例采用了思维导图等方式来实现规划的具体化与可视化。

分组合作部分，作品制作课中学生工作量相对较大，因此分组合作是常见的方式。二维分工方式的采用，既保证所有学生都能经历网站制作，在此过程中形成对网站制作的体验与感悟，也较好关照了学生兴趣爱好等方面的差异。

课堂小结部分，在本次课教学内容的基础上，拓展延伸至人生规划意识的培养。既与教学伊始的设计呼应，又有很大程度的提升。设计者强调的是与该校相关课题的联系，其实，就作品（包括多媒体与网站制作）中的规划部分教学而言，最后提升至人生规划方是此部分的终极追求及应然境界。这一点，当为信息技术教师进行相关内容教学时所借鉴。

整体而言，该案例在设计上思路非常清晰，引领学生由理论认识到实践探索再到理论提升，实现了认识上的螺旋上升，由欣赏分析到具体设计，符合学生认知发展的基本规律，能够较好地达成教学目标。

当然，该案例也有其自身的不足，如教学目标中的“情感态度与价值观”的描述有空泛、虚化之嫌，本次课强调的是规划，因此可以用类似“……养成规划的意识”的表达凸显与教学内容的紧密联系。

（点评人：朱彩兰 南京师范大学教育科学学院）