网页制作教学设计

2024年1月27日发(作者：)

镇江好课堂

句容市级竞赛教案

创建网站，制作首页

【教材分析】

这节课是第10章第2节《制作网站》的第一课时，我把重点放在了站点的创建、简单的首页制作，以及网页的保存上。因为Frontpage与Word同属于Office组件，所以窗口无需过多讲解，而对于Frontpage的4种工作模式虽然课本上是先于《创建网站和制作首页》出现，但我认为此知识点结合后面学生制作的首页来表现更为妥当，这样学生不但能轻松的理解4种工作模式的区别，还能在“代码”工作模式中看到自己制作的网页所对应的HTML语言，使他们感受到编程不再是遥不可及、深不可测。至于首页的制作，仅仅对学生做了简单的要求，要求他们用Word学过的操作来完成课堂练习，实现知识的迁移。而网页中常见的背景音乐，滚动字幕，超级链接等将放在之后的课时中学习。对于网页的保存，它既是重点，也是一个难点，所以我把保存分成了两个步骤，第一次保存是在没有图片的情况下实行的，其操作与Word类似；第二次则是在第一次的基础上添加了图片，这时的保存需要实行“更改文件夹”的操作。这样通过对比能使学生对网页的保存操作记忆更加深刻。

【教学思路】

1、因为学生平时接触网络比较多，对丰富多彩的网页、网站很熟悉，所以在这节课的开始并没有为学生展示一些网站和网页，而是用PPT直接出示了教学内容——《创建网站，制作首页》，使学生明确这节课的教学目标。

2、学生平时浏览的都是大型的、复杂的网站，当教师提出要自己动手制作时，他们难免有点胆怯，于是教师演示了一个学生作品样例，简单的个人网站——《心灵驿站》。制作个人网站比书本上的样例更加贴近学生生活，更易激发学生的兴趣，能够消除学生的畏难情绪，增强他们的信心。

3、这节课使用的软件是Frontpage，因为它与学生非常熟悉的Word软件同属于Office组件，很多操作都与Word相似，所以对于Frontpage窗口教师无需讲解，学生能够通过类比Word，实现知识迁移。

4、新建站点虽然是个全新的知识，但是学生能够通过自学书本P48上的步骤来完成，教师需要做的是实行即时的指导和协助，并对新建站点中出现的两个文件夹image、_private实行简单的解释。

5、在网站首页的制作中涉及到文字，图片，背景的设置和排版，这些内容能够使用在Word中学过的方法来操作。整个过程中，教师能够给予点拨、提示，同学之间能够相互协助，并以小组为单位提出本组成员在操作中的难点，教师实行集体讲解。

6、在展示学生的作品并实行点评的过程中，需要引入一个重要的内容——Frontpage的四种工作模式，并提出HTML语言。虽然这些内容在课本上是先于创建网站和制作首页出现的，但我认为此时结合实例来表现更为妥当，这样学生不但能轻松的理解4种工作模式的区别，还能在“代码”工作模式中看到自己制作的网页所对应的HTML语言，使他们感受到编程不再是遥不可及、深不可测。

6、本节课用到的课堂练习中一共有4个任务，前三个任务是相对比较基础，一般的同学都能完成，而任务4的设置有两个目的：第一，很多学生在设置背景时认为和插入图片是一回事，通过任务4让他们能够区分；第二，网页中没有图片等信息时，保存和WORD没什么区别，而当添加了图片后，保存时则需要更改文件夹。

【教学目标】

1、了解Frontpage窗口组成，以及编辑窗口的4种工作模式；简单了解网页编辑

中的HTML语言。

2、掌握站点建立的方法；学会网页制作中的基本操作（添加背景、文字输入、

插入图片、网页保存等）。

3、培养学生自主探究、小组合作的学习水平；协助他们树立准确的审美观，提

高他们的审美水平

【教学重点】

网站的建立、网页制作中的基本操作（添加标题、插入水平线、文字输入、插入图片、设置背景、网页保存等）。

【教学难点】

网站的建立、网页的保存

【教学方法】

使用引导、演示、任务驱动、学生自主探究、师生互动、同学互助合作等方式

【教学过程】

一、情境导入

教师：1、利用PPT出示本节课的内容《创建网站，制作首页》，指出大家平时都是浏览现成的网站，而今天我们就来自己动手制作网站，使学生明确本节课的教学目标。

2、演示一个简单的个人网站样例——《心灵驿站》。因为学生平时浏览的都是大型的、复杂的网站，当教师提出动手制作时，他们难免有点胆怯，所以通过这个简单的样例能够消除学生畏难情绪，增强他们的信心。

二、新课讲授

教师：通过《心灵驿站》引出Frontpage软件，并打开Frontpage，指出该软件与

WORD同属于OFFICE组件，很多操作相似。

学生：打开Frontpage，熟悉其窗口组成，与已经学过的word实行对比，实现知

识迁移。

教师：请学生指出《心灵驿站》首页上有哪些类型的信息？

学生：观察并回答文字、图片、艺术字、声音……

教师：1、总结学生的答案，指出一个网站一般都是由多张网页组成，其包含的

信息量非常大，文件的类型也是各式各样，为了便于网站的管理、浏

览、发布和维护，我们在制作网页之前需要为网站建立一个站点，用

于保存网页和相关的素材，并打开《心灵驿站》站点实行演示。

2、参考书本P48“实践学习”完成任务一。

学生：通过自学尝试完成站点的建立

教师：1、指导协助学生，请每组率先完成的同学担任小组长，协助组内其他同

学。

2、总结巡视过程中发现的问题，并演示建立的站点的过程，纠正学生的错误，提示站点“student”中自带的两个文件夹，一个是image，一个是_private。Image文件夹里放置站点用到的图片，_private文件夹比较特殊，一般存放一些不想让浏览者看到的网页文件，比如：注册用户的个人信息。也能够根据自己的需要新建其他文件夹，例如music

3、展示几个不同风格的个人网站首页，要求学生大胆创新，利用教师提供的素材完成任务二，设计制作自己的首页。

学生：自主探究，小组合作尝试完成首页制作

教师：1、针对学生遇到的难点，实行讲解；展示多个不同风格的学生作品，并

实行点评。

提示：Frontpage有4种工作模式：设计、拆分、代码、浏览。指

出浏览模式下不能进行网页编辑。

提示：可以用WORD中学过的方法来进行文字、图片的处理

2、要求学生完成任务三，保存自己的网页。

学生：根据教师的讲解对自己的作品实行修改、完善，并完成任务三

教师：教师巡视，对学生实行指导，了解学生任务完成的情况，保证所有学生能

完成前3个任务，并要求学生继续实行任务4的探究。

学生：完成任务4的过程中，在设置背景的操作中出现错误，很多同学用插入图

片的方法设置背景

教师：1、演示优秀的学生作品，并即时纠正学生的错误操作，使他们了解图片

插入与背景图片设置的区别。、

2、再次保存，为学生讲解网页中图片的保存方法，并要求学生自行操作。

三、课堂小结

教师：1、简要总结这节课的内容

2、再次演示《心灵驿站》，提示网页中还有其他的内容，比如：超级链接、滚动字幕、按钮等等，这些都是以后我们需要继续深入学习的知识。

课堂练习

【任务一】参考书本P48“实践学习”的内容，在D盘新建一个空

白站点，站点名称为“student”。

【任务二】1、用艺术字为网页添加网站标题

2、在标题下方插入一条水平线，高度为“3”，颜色为

“红色”

3、在标题的下方添加个人简介（姓名、年龄、班级）

【任务三】保存首页到站点“student”中，文件名为默认的“index”，网页标题为“自己的姓名”。

【任务四】利用桌面上“网页素材”中的图片完成：

1、用图片作为网页的背景。

2、在个人简介旁插入一张头像图片。