《网站主页的设计》教学设计
一、教材分析
本节课讲授浙江教育出版社《信息技术基础》第六章“网页的设计与制作”的相关，并
根据《浙江省普通高中新课程实验信息技术学科教学指导意见》进行了适当设计，教学侧重
于让学生掌握网站的策划与构思和熟练掌握简单网页的设计与制作。
二、学情分析
学生已经会收集和整理素材，掌握了用 FrontPage 制作网页的基本操作，对网站的策划
与构思有了一定的了解，但网站创建的知识以及网站策划构思的实践比较欠缺，另外学生现
有知识水平存在一定差异。
三、教学目标
知识与技能：能较熟练地运用表格实现网页布局；知道创建网站的一般过程，了解一些
主页设计的知识；初步掌握网站的策划与构思。
过程与方法：通过自主探究和小组合作完成学习任务，掌握一些探究学习的方法，培养
与他人协作、交流的意识和能力。
情感、态度与价值观：通过网站主页设计，激发学生的创作欲望，提高学习信息技术的
兴趣和愿望；通过教师提供的创作背景信息，使学生更关注气候变化对人类发展的影响，增
强社会责任感。
四、教学重难点
重点：学会运用表格实现网页布局，初步掌握网站的策划与构思。
难点：如何在主页制作中实现自己的网站设计构思。
五、教学过程
1．教学引入，学习准备
教师指导学生访问课堂学习网站（如图 1），然后介绍网站的创作构思与特点。
师：这是老师为课堂学习专门设计制作的一个网站，请同学们从“名称贴切、主题鲜明、
内容丰富、结构清晰、界面友好美观”五个角度，给网站做个评价，认为都满意就赶快伸出
五个手指头。
学生们高举手臂，伸出五个手指。
师：谢谢大家的支持，你们的认可是我创作的动力。
师：通过前段时间的学习，我们已经较好地掌握了素材收集与整理的方法；掌握了一些
利用 FrontPage 软件做网页的基本操作；在欣赏优秀网站的基础上，对网站的策划与构思有
了一定了解。这节课，我们将跟随着学习网站的导航栏，一起揭开创建个人网站的第一页─
─设计制作网站主页。
师：先来玩一个拼图游戏吧。
图 1 学习网站首页 图 2 学习参考页面
设计意图：用学习网站吸引学生的注意力，使其迅速进入课堂学习状态。通过学生评价
老师的网站设计，使学生对网站策划构思中要考虑的因素有进一步认识。
2．以趣激学，化解难点
学生浏览学习网站中“拼图游戏”活动要求。
活动内容：将分割成小块的图片素材插入到教师预先设计好的网页中，完成拼图。
师：老师这里有个完工的网站主页（如图 3），网站主题是关于拯救水城威尼斯的，网
站名称是“威尼斯的泪”，页面十分简洁，用一张图片吸引观众目光，导航栏设置在右下处，
四个超链接对应网站的四块内容，这种网页布局可归为封面型的布局类型，在个人主页和企
业网站设计中较常用（具体可参考学习网站）。请大家仔细看这个网页，接着我们将用它的
半成品来玩拼图（如图 4）。
教师用 FrontPage 软件打开半成品网页。
师：同学们看到网页上都有些什么？
生：哦，表格，原来刚才的网页是用这样的表格来实现布局的。
师：对了，那再仔细观察一下，这里到底用了几张表格。
生：两张，三张……
师：答案是五张表格，最外面一张虚线显示的表格将整体分为上下两大块，然后表格里
面套表格，最终将所有网页内容，用一个个单元格定位。
师：现在网页上半部分的九个单元格就是留给大家来完成拼图的，加油，看谁最快完成
提交。
学生下载素材，尝试着完成拼图；教师巡视，了解学生的制作过程。学生在制作过程会
碰到一个主要问题“如何将图片拼得天衣无缝”，涉及到表格的属性设置这一知识点，要能
够想到将表格边框设置为隐藏，将表格单元格边距和间距值都设置为 0。
师：已经有同学完成拼图提交了，某某同学是最快完成的，让我们一起来看一下他们的
拼图吧。
教师根据学生完成情况，选择不同的教学，如果已经有学生很好地完成了拼图，就请学
生来讲解、演示；如学生都没有很好地解决问题，教师可以通过提问“五张表格中最外一张
用虚线显示的表格在预览中是否能看到它？”“表格边框隐藏是怎么实现的？”“表格属性
中还能设置什么？”等问题，引导学生找到答案。
师：只有想不到，没有做不到，网页布局，表格帮你轻松搞定。
设计意图：以一个熟悉的游戏任务引导学生探究、学习、掌握表格布局的知识。同时，
任务素材又是后续学习任务“主页设计”的一个范例，帮助化解学习难点。
3．创设情景，引起思考
师：再次欣赏这幅拼图作品，不知道摄影师有没给它取过名，就让我们来给它设计个名
称吧。
生：“大海，大海”，“港湾”，就用“威尼斯的泪”……
师：请大家分别用“大海，大海”和“威尼斯的泪” 做名称来看这幅作品，不知道你
的脑海里会浮现些什么？
生：很不一样。
师：作品的名称十分重要，它能够引导观众欣赏的视角，我们在进行网站策划构思的时
候，一定要给自己的网站设计好名称。
师：拼图照片源自一则反映威尼斯遭受水淹的新闻报道，由于气候变化，威尼斯经常遭
受水灾，人们用葬礼的形式倡议拯救威尼斯。在学习网站还有“‘2012’离人类还有多远？”
和“哥本哈根气候大会”等背景资料，提供这些材料是为了引起大家对“气候变化对人类社
会的影响”这一社会议题的思考，同时我们将借助网页技术来发出自己的声音。
师：让我们一起进入主页设计活动环节。
设计意图：通过名称设计，揭示网页作为一种信息表达技术的价值，培养学生的创作意
识。用热门新闻和议题创设情景，激发学生创作欲望和增强社会责任感。
4．任务驱动，合作探究
活动内容：根据背景资料，以同桌同学为小组，进行网站创建的策划与构思，形成网站
主页的初步框架，以完成主页表格框架或绘制草图等形式呈现结果。
师：主页设计是网站设计制作的一个重心，设计的完成如同写文章列好了提纲，将对整
个网站的制作过程和完成质量起重要影响。接下来，小组同学要发扬团队协作精神，一起来
完成学习任务。这可能是我们第一次进行网站主页的设计，所以老师给大家的建议是“从模
仿做起，善于吸收他人经验”，在学习网站中有“网站创建流程”“网站主页设计”“主页
模版欣赏”等内容可供参考。
教师将“网站创建流程”（如图 2）和“威尼斯的泪”表格框架网页（如图 4）投影在
屏幕上，作为重点提示；了解小组合作情况、操作进度，解决技术问题，并对技术相对薄弱
的小组重点帮助指导。小组同学合作协商，进行网站的策划与构思，形成网站主页的初步框
架。
设计意图：通过任务驱动、小组合作探究，让学生在实践中体会网站创建和主页设计的
知识，培养协作、交流的意识和能力。
5．交流评价，分析提高
师：在刚才的学习活动中，大家表现很好，一些小组中，同学们的讨论很激烈，发挥了
各自特长，任务完成体现了 1+1>2 的效果；下面我们一起围绕以下三点来交流学习成果：网
站名称响亮有特点、栏目设置有趣且反映主题、页面布局美观可实现。老师会请几组同学派
代表上台来介绍自己的设计，其他同学随时准备发表观点。
设计意图：通过交流评价学习成果，有助于学习小组的思维与智慧被整个群体所共享，
形成共享的、更高级的理解，同时在评价中获得成就感。
6．课堂小结，延伸教学
师：这节课我们围绕设计网站主页，实践探讨了网站的策划构思和实现的过程，接下来
的几节课我们将进一步完善设计，学习新知识以至完成整个网站。网页技术作为一种信息表
达的技术，其真正价值的体现在如何更新颖合理地表达一个有意义的主题或内容，希望同学
们在日常学习过程中注重观察，多积累一些网页制作的知识，提升技术素养。
六、教学反思
在让学生围绕某个主题进行网站设计制作时，会碰到这样一些情况：（1）找不到头绪，
无从下手；（2）想到一点做一点，结果做到一半再也做不下去；（3）网站最终完成了，但
却暴露出栏目设置不合理，内容无法体现主题等问题。显然，学生对网站策划构思的知识掌
握不够，我在教学设计中融入了三种方法来加强引导：（1）作品欣赏，俗话说：“熟读唐
诗三百首，不会做诗也会吟”，模仿是创作入门的重要途径；（2）开展构思协商，通过小
组合作和全体交流讨论，有助于教师和每位学生的思维与智慧被整个群体所共享，形成共享
的、更高级的理解。（3）进行作品评价，在自评和互评中反思自己策划构思的不足，发现
自己和他人设计的新颖之处，使学生获得满足感和成就感。
微信/支付宝扫码支付