dna分子的结构教案-卖肉动画

《网页制作》项目式教案



长汀职业中专学校




教



案



科目：《电商网页制作》
计算机组：张开秀
班级：15电商3、4班

1 78

《网页制作》项目式教案
项目一 初始8和建立站点

章 节
项目一1 初识 8 课时；2 课时
1.
2.
3.
4.
5.
8的基本概况
8的功能和作用
8的学习方法
8的工作界面
8工具栏和面板的使用方法
讲授主
要内容
重 点
难 点
8的工作界面
8常用工具栏和面板的使用方法

要求掌握 8的功能和作用、定义站点的基本过程、创建文件和保存文件的方法、
8 窗口界面、浮动面板组、【 标准】工具栏、【文件】面板、【文档】工具栏、【属性】
面板、【插入】面板、工作区布局等知识点。
项目主要是让学生对网页制作软件 8有一个总体认识，并掌握学习 8的基本方
法。在项目中，首先介绍 8的发展历程、功能和作用，同时欣赏一些优秀网站，然
后介绍学习 8的基本方法，最后介绍 8的工作界面及其相关知识。

要求掌握
的知识点和
分析方法
授课思路，采
用的教学方
法和辅助手
段，板书设
计，重点如何
突出， 难点如
何解决，师生
互动等
1、从网页案例欣赏入手，让学生增强对网页设计与制作 这门课程的兴趣，同时
增强创业的信心。
2、以情景模拟的方式介绍 8的功能和作用以及学习方法。
3、以制作一个简单的网页为例（悠悠我心的个人网站），让学生认识 8的工作
界面和工作过程。
4、通过课件讲授基本知识。
5、让学生自己动手制作教学案例，来进一步巩固 8的使用。

作业布置 打开教师发布的悠悠我心个人网站，巩固 8的使用

通过学习，大部分学生对网页制作这门课产生了浓厚的兴趣。





教学反思
2 78

《网页制作》项目式教案
章 节
项目一2规划和创建站点 课时；2 课时
1.
2.
3.
4.
创建站点的基本方法
管理站点的基本方法
设置首选参数的方法
创建文件夹和文件的基本方法
讲授主
要内容
重 点
难 点
导入和导出站点的基本方法
设置首选参数的方法
要求掌握网站制作流程、网页布局的基本方式、定义站点、创建文件夹和 文件、
设置首选参数等知识点。
项目主要是让学生对使用 8定义、创建和发布站点有一个总 体认识，并学会其
基本操作方法。在项目中，首先介绍做好一个网站必须经历的基本过程及网页布局和色彩搭配的基础知识，然后介绍服务器环境的配置以及在 8中定义和创建站点的
基本方法，最后使用 8发布站点的方法。
要求掌握
的知识点和
分析方法
授课思路，采
用的教学方
法和辅助手
段，板书设
计，重点如何
突出，难点如
何解决，师生
互动等
1、教师讲解网站制作流程、网页布局的基本方式、网页色彩搭配的原理和技巧
等基础知识，并演示 创建站点的基本过程。
2、通过课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
作业布置 新建悠悠我心的站点，导出，发送给老师


大部分学生都能很好的完成站点建设，对网页制作的基本知识有了进一步的了解
教学反思








3 78

《网页制作》项目式教案
项目二 制作网站首页
任务描述：上 一个项目中，创建了“幽幽我心的个人网站”。本项目将在这个站点中进行首页
内容的制作，学习如何在 网页中添加文本和图像，使用设置文本、图像和页面的样式。任务
完成后效果如图所示：

本项具体的教学过程共分为以下五个方面的任务：
任务一 添加首页文本（4课时）

任务二 编辑文本样式 （4课时）

任务三 添加图像 （4课时）

任务四 创建与应用美化网页 （4课时）

任务五 使用代码制作图文网页 （4课时）





4 78

《网页制作》项目式教案
任务一 添加首页文本
一、提出任务
1．任务目标
完成首页文本内容。
2. 解决的问题 < br>通过完成本任务学习修改网页标题，在网页中添加文本，分段换行和段内换行，输入连
续空格，保 存和预览网页等知识。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点 有：使用站点管理功能创建站点，在文件面板中创建和
打开首页文件。
二、教学目标
1. 知识目标
⑴ 掌握修改网页标题。
⑵ 掌握输入网页文本内容的方法。
⑶ 掌握网页编辑中三种不同换行方式的区别。
⑷ 了解在文档窗口中输入连续空格的几种方法。
⑸ 熟悉保存和预览网页的方法。
2. 能力目标
掌握添加和编辑网页文本的基本操作，能够根据具体需求添加网页文本内容；通过参加
科学探究活动，具有初步添加和编辑网页文本的能力，并加深对网页文本重要性的理解。
3. 情感目标
通过分组完成任务，提高自主学习和协作学习的能力，培养团队精神。
三、教学分析与准备
1. 教学重点
⑴ 修改网页标题。
⑵ 输入网页文本内容的方法。
⑶ 在文档中对文本分段换行和段内换行，输入连续空格。
2．教学难点
⑴ 网页编辑中三种不同换行方式的区别。
⑵ 在文档窗口中输入连续空格的几种方法。
3. 教学方法
任务驱动学习和协作学习、探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程（组织课堂、复习知识、教师引领完成任务占1学时；举一反
三占3学时。）
教学环节及手段 教学内容 备注
组织课堂

复习知识


集中学生注意力，准备上课。


通过学生动手
指定学 生上前操作，考察学生对新建站点、新
操作，复习与本次任
建文件功能的掌握情况。
5 78

《网页制作》项目式教案



任务流程
导入任务




浏览规定站
点，教师引导，学
生讨论、分析




分析任务





完成任务









教师启发学
生，使学生借助课
务有关的知识。
1．新建站点“幽幽我心的个人网站”。

2．新建首页文件并打开。


力求通过任务
在开始新的课程学习之前，先来了解一下，网
页元素的构成， 为什么要在首页中添加文本。
导入，吸引学生学习
通过浏览新浪、搜狐等著名网站的网页，引导
欲望。
学生分析网页的构成元素，得出结论：网页元素归

纳起来有文本、图像、表格等，其 中最常用的是文
引导学生分析
本。因而，为首页添加内容，最重要的是为首页添
归纳。
加文本。

打开前面创建的首页文件，展示给学生。显然，

一个没有任何内容的网页是毫无意义的，从而导入

要为首页添加内容。

为首页添加文本，就需要掌握在网页中编辑文

本的一些操作。
明确任务。
提出任务：添加首页文本


教师提出任务
在第一单元中建立了首 页空白文件“”，本单
要求，由学生进行讨
元将对首页修改标题，添加准备好的内容并设置其< br>论，教师归纳总结。
格式。

鼓励学生通过查书、查找帮助找到并总结出添

加网页内容的途径以及设置网页内容格式的方法。



１．修改网页标题并预览

列举各站点的首页标题。明确首页的标题是对

网站主旨的概括，起着画龙点睛的作用。制作首页，

首先就是要修改首页标题文本。

回顾打开首页文件的方法。

在文档工具栏中，将标题修改为“幽幽我心的
学生观察标题
个人网站”。
修 改后文档窗口左
提醒学生注意：文档窗口左上角网页名称处的
上角网页名称的变
“*” 代表文件已经被修改过但并没保存，保存后
化。
“*”会消失。

预览网页

２．输入首页文本内容并划分段落
学生观察预览
⑴ 输入首页文本
效果。
将素材“”文本内容复制粘贴到文档窗口。通

过比较使学生明确：

从普通文档中复制过来的文本不保留格式内

容，只保留段落结构，并且在文本遇到文档窗口的

边界时会自动换行。

⑵ 换行操作

a．“自我介绍”、“青春寄语”和“立志飞翔 ”

部分进行段落划分

6 78

《网页制作》项目式教案

学生对照观察
原文本文件与粘贴
⑶ 输入连续空格
到文档窗口后文本
演示输入连续空格的几种方式。

格式的变化情况。
完成“青春寄语”部分首行缩进的操作。

最后，保存网页。强调及时保存页面是一个好


习惯，可以避免断电或系统故障导致的数据丢失。

通过完成本任务学习了修改网页标题，输入网
页文本内容，分段换行和段内换行，输入连续空格，
保存和预览网页。



依据前面学习的知识与掌握的专业技能，学生

自己完成类似的任务，教师作为组织者和引导者，

着重启发学生寻找完成任务的思路，养成检索与应


用“书籍”、“帮助”、“网络”自学的好习惯。


结合进行知

1．使用浏览器浏览各种类型的页面，分析各

个页面中文本所起作用，并分析是否可以用其他网
识讲解

页元素代替。




在互连网上有各种类型的网站，如搜索引擎类

网站，商业类网站，个人网站等。设计各种类型的

页面都可以从中借鉴。
知识总结


对学生进行分组，每组选择一个主题网站进行

分析。



举一反三

要求每组学生讲出自己的分析结果，并自评。




结论：文本在网页制作中起着关键的作用，通

常不能用其他网页元素替代。


任务目标
2．新建一个网页“2-1”，将本单元素材“举
教师作为引导
一反三”文件夹中“2-1” 的文本内容拷贝到页面

中，使用插入空格的方法修改文本，使每一行文本
者和组织者，学生分
组上机操作，完成相
中的“”字样达到对齐的效果。
启发思路 应任务并进行评价。


新建网页“2-1”，可以这样完成：①借助头脑

里的知识；②借助互联网③借助帮助④同学讨论。


分组完成任务
对学生分组，开始完成任务



每组同学演示自己完成的任务，其他组给以评
本、帮助等完成。
7 78
b．“立志飞翔 ”部分进行强制换行
总结，三种换行方式的特点及其实现方法。

《网页制作》项目式教案
学生自评或互评

教师点评总结


任务目标




启发思路



分组完成任务

学生自评互评

教师点评总结


任务目标





启发思路


分组完成任务

学生自评互评

教师点评总结


布置作业






8 78
价。

总结各组同学完成任务情况，对完成好的给以
表扬，没有完成的引导其找出没有完成的原因。

3．新建一个网页“2-2”，输入多行文字内容
并进行分段和强制换行，修改网页 标题为“换行效
果预览”，保存后预览页面，观察在浏览器中标题
在什么位置，浏览器窗口大小 发生变化时，对三种
换行方式的影响。

三种换行方式指的是自动换行、分段和强制换
行，重点理解它们的区别。

对学生分组，开始完成任务

每组同学演示自己完成的任务，其他组给以评
价。

总结各组同学完成任务 情况，对完成好的给以
表扬，没有完成的引导其找出没有完成的原因。可
以根据每组任务完成情 况结合自评与互评情况给
出每组的成绩。

思考下列问题：
1．如何预览和保存网页？
2．如何对文档窗口中的文本进行段落的划分
和强制换行操作？
3．如何实现插入栏两种显示方式的转换？

《网页制作》项目式教案








任务二 编辑文本样式
一、提出任务
1．任务目标
完成首页文本样式设置，添加水平分隔线与列表。
2. 解决的问题
本任务通过设 置首页文本样式，学习文本样式设置与应用，修改文本样式，添加水平分
隔线与列表知识。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：输入文本内容的方法， 段内换行与划分段落方法，
输入连续空格的方法。
二、教学目标
1. 知识目标
⑴ 掌握文本样式设置与应用。
⑵ 掌握修改文本样式。
⑶ 掌握重命名文本样式。
⑷ 掌握添加水平分隔线与列表。
2. 能力目标
能够根 据具体需求进行文本各种属性及样式的编辑与设置，并提高学生自主学习、协作
学习和知识迁移的能力。
3. 情感目标
通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识 ，激发学
习本课程的兴趣，增强学好本课程的信心。
三、教学分析与准备
1. 教学重点
⑴ 文本样式的设置、应用及修改。
⑵ 添加水平分隔线与列表。
2．教学难点
文本样式的设置、应用及修改。
3. 教学方法
任务驱动学习、协作学习和探究学习相结合
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室
四、教学过程
（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学
9 78

《网页制作》项目式教案
时。）
教学环节及手段
组织课堂

复习知识






任务流程
导入任务






分析任务

演
示本任务
教学内容
集中学生注意力，准备上课。

指定学生上前操作，考察对添加文本内容及
划分行与段落的掌握情况。
在指定站点内 新建一个网页，将事先输入的
两首诗（没做任何格式设置）复制过来，要求学
生通过插入空格、 分行与分段操作，使页面外观
美观。最后，预览网页。

在开始新的课程学习之前， 先来了解一下，
为什么要为网页设置文本样式及设置哪些文本样
式。
通过浏览网站， 引导学生明白文本字体、字
号、颜色、加粗、倾斜及对齐方式等文本样式的
设置是必需的，那么 ，如何完成文本样式的设置
与编辑呢？
提出任务：完成首页文本样式设置，为首页添加
水平分隔线与列表。

可 以直接通过属性面板设置指定文本的样
式，也可以其他文本位置应用该样式，但样式的
修改需要 在样式面板中进行。
可以通过制作列表，添加水平线来编辑网页
的外观。

1．文本样式设置与应用
⑴ 为网页中第一行文字“幽幽我心的个人
网站”设置文本样式
回忆文本格式设置的设置步骤：首先选中相
应文本；接着通过格式工具栏进行设置。
网页制作也类似，首先要选中相应文本，接
着通过文本属性面板完成设置。
演示设置过程，强调：文本属性设置一气呵
成的重要性以及反复选中修改属性的弊端。
简介文本属性面板各部分及其功能，讲解为
“字体”列表项添加字体的方法。
为网页中第二段标题文字“自我介绍”设置
文本样式。
⑵ 为标题文字“青春寄语”、“立志飞翔”，
10 78
备注



通过指定学生
上前演示，复习与
本任务有关的知
识。



力求通过任务
导入，吸引学生学
习兴趣。

引入课题。









教师讲解为
主。
大多数学生都
有编辑格式的经
验，引导 学生将格
式设置中的经验迁
移过来，加深学习
的印象。










完成效果，教师
分析。


完成任务

《网页制作》项目式教案
















单击“样式”列表旁的按钮，打开


“样式”面板。对样式“2”进行编辑，在面板当

中修改颜色值为“6600”。让学生观察应用了“2”

样式的文本颜色是否会发生相应的变化。

４．插入列表与水平线
选中“自我介绍”部分的文本内容，选择“属
性”面板中的“项目列表”，为选中文本插入项目
知识总结 列表。
将光标插入到“青春寄语”标题之前，将“插
入”栏切换到“”类别，选择其中的“水平线”教师启发思
按钮，在“自我介绍”内容和“青春寄语”内容路，学生自己动手
举一反三 之间插入一条水平线，起到分隔的作用。 完成。




通过完成本任务学习了文本样式设置与应用，修

改文本样式，添加水平分隔线与列表知识，设置
任务目标

文本样式时最好一气呵成。



启发思路
依据前面学习的知识与掌握的专业技能，引

导学生完成类似的任务，教师作为组织者和引导

者，着重启发学生寻找完成任务的思路，养成利

提醒学生使用
用“书籍”、“帮助”、“网络”等自学的好习惯。
帮助功能找到答
分组完成任务

案。

将本单元素材“举一反三”文件夹中的网页


“2-3”拷贝到D:目录下，给页面中的每一段文

学生自评或互评
字设置一种不同的文本样式。
应用样式（为“自我介绍”设置的样式）
２．样式重命名
引导学生观察并总结出样式默认命名形式
为。一个网页中可能会定义 许多样式，而这些样
式不一定全是文本类型的，为了方便使用样式，
最好对样式进行重命名，使 名称能表示样式含义。
演示为“幽幽我心的个人网站”中的文本样
式重命名的方法，并按照课 本P37页表格要求，
设置“青春寄语”与“立志飞翔”中的文本样式
并重命名。
３．修改文本样式
提出如何修改文本样式让学生思考，学生们
可能有说通过属性面板 修改样式的，教师可以演
示通过属性面板不能修改样式。
演示修改2样式：
11 78

《网页制作》项目式教案


教师点评总结




布置作业


要设置各部分文字样式首先做什么，接下来通过
什么面板进行设置；要做到标题醒目，各段样式
不同但风格要一致。

把不同层次的学生分在一组中，鼓励同学积
极讨论完成任务。

组织不同组的同学互相评论对方完成任务的
优缺点。

教师对每组同学完成 任务情况进行总结，对
完成任务的表扬，对没有完成任务的鼓励，并帮
助他们分析没有完成的原 因。可以根据每组任务
完成情况结合自评与互评情况给出每组的成绩。

1．新建一 个网页“2-4”，插入5条水平线，
使用属性面板进行不同的宽、高、对齐与阴影属
性设置， 预览页面并比较不同属性的设置效果。
2.新建“班级荣誉”页面，文件名为“2-5”，
列 举班级成员所获奖励，设置为编号列表，修改
文本样式，用不同的文本大小、颜色区分奖励的
等 级，保存并预览页面。尝试先设文本样式后设
编号列表有何区别。（要求各组课下搜集班级成员
获奖情况，并制定一个设置方案）




















12 78

《网页制作》项目式教案


任务三 添加图像
一、提出任务
1．任务目标
为首页添加图像内容。
2. 解决的问题
本任务通过为首页添加图像内容，学习在网页中插入图像和编辑图像的方法。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中输入文本内容。
二、教学目标
1. 知识目标
⑴ 掌握使用插入栏插入图像。
⑵ 掌握使用菜单栏插入图像。
⑶ 掌握使用组合键插入图像。
⑷ 掌握使用文件面板插入图像。
⑸ 掌握编辑图像的方法。
2. 能力目标
能够根据具体情况在指定位置灵活高效地插入图像并进行必要的编辑。
3. 情感目标 通过教师引导学生主动参与学习，使学生学会使用探求性学习方法获取新知识，激发学
习本课程的兴 趣，增强学好本课程的信心。
三、教学分析与准备
1. 教学重点
⑴ 插入图像的各种方法。
⑵ 图像的编辑操作。
2．教学难点
图像编辑的方法。
3. 教学方法
任务驱动学习、协作学习和探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室
四、教学过程
（组 织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学
时。）
教学环节及手段
组织课堂

复习知识



教学内容
集中学生注意力，准备上课。
备注




通过提问考察学生对设置文本样式及插入水

平线的掌握情况。
复习时教师按
1．如何设置文本样式？
2．如何重命名文本样式以及在样式面板中修
照学生回答演示操
13 78

《网页制作》项目式教案



任务流程
导入任务






分析任务




完成任务






结合


进行讲解

















改文本样式？
3．如何插入水平线？
通过联想学校宣传栏、报纸、儿童书籍以及课
本等内容，总结出其中都有图像；引导学生懂得通
过插入图像可以使内容生动直观，具体形象。进一
步打开两个网页，一个是全文本的，一个是图文并茂的，让学生通过比较这两个网页明确哪一个更适
用并说明原因，引出要使首页内容生动形象，图像
的添加和编辑就必不可少了。
提出任务：为首页添加图像内容。
作，指出其中的问
题。




力求通过任务
导入，吸引学生学习
欲望。


引入课题。






教师提出问题，
并提示可以通过网
络搜索及查帮助找
到答案。


知识讲解。





图像是网页中 经常使用的元素，图像的插入方
法比较简单，但需要区分图像的格式，并不是所有
的图像都能在 网页中正常显示。插入图像后需要熟
悉其属性面板的设置。

1．网页中图像文件的格式及其特点
教师提出下列问题让学生分组查找答案：
通常在网页中使用什么格式的图像文件，它
们的特点是什么？
在同学回答上述问题基 础上，教师总结并讲解
在网页中通常使用“”、“”和“”格式图像文件及
其这三种格式图像文 件的特点。
2．准备素材：将本单元素材文件夹中的“”
文件夹下的全部图像素材复制到D:文件夹下。
３．使用文件面板插入图像
拖曳文件面板中的 “”到“自我介绍”标题
前，插入图 像“”。选中所插入的图像，在属性面
板中设置对齐方式为“右对齐”。

预览页面效果。

通过复习中插入图像的方法，总结出另外三

种插入图像的方法。
师生一起回顾，
A．使用菜单栏插入图像
探索发现插入图像
定位插入点到“立志飞翔”文字前，选择菜单
的三种方法。
栏“插入”菜单中的“图像”选项，插入“”图像

文件并设置对齐方式为“左对齐”。

B．使用插入栏常用类别中的按钮插入图像
根据中插入图
定位插入点到“立志飞翔”的第三段文字前，
像的经验让学生尝
选择“插入”栏“常用”类别中的按钮，插
试进行，尝试失败的
可以查找“帮助”或
入 “”图像文件并设置对齐方式为“右对齐”。
通过网络获得答案。
C．使用组合键插入图像

定位插入点到“立志飞翔”的第五段文字前，
14 78

《网页制作》项目式教案

知识总结

举一反三
任务目标



启发思路

分组完成任务


学生自评或互评


教师点评总结



任务目标


启发思路


分组完成任务

学生自评或互评

教师点评总结

布置作业
使用组合键，插入“”图像文件并设置对齐方式为
“左对齐”。
4．介绍图像属性面板
完成图像的编辑。








概括本课插入图像的四种方式。
1．将本单元素 材文件夹中的“1”插入到一个
新建页面“2-7”中，裁剪后宽度为200像素，高
度为10 0像素，并设置边框宽度为5，完成后预览
页面。
插入后选中该图像并通过属性面板完成。 教师启发思路，
学生自己动手完成。
把不同层次的学生分在一组中，鼓励同学积极
研究探索完成任务。



组织不同组的同学互相评论对方完成任务的

优缺点。


教师对每组同学完成任务情况进行总结，对完

成任务的表扬，对没有完成任务的鼓励，并帮助他

们分析没有完成的原因。

2．新建网页“2-8”，插入本单元素材文件夹

中的“2”，尝试使用 8的图像编辑功能修改图像

的亮度并进行锐化设置。



插入后选中该图像并通过属性面板完成。



把不同层次的学生分在一组中，鼓励同学积极

讨论完成任务的方法



组织不同组的同学互相评论对方完成任务的

优缺点。



教师对每组同学完成任务情况进行总结，对完

成任务的表扬，对没有完成任务的鼓励，并帮助他

们分析没有完成的原因。可以根据每组任务完成情

况结合自评与互评情况给出每组的成绩。



1．通过网络下载3张图片，文件类型分别为

“”、“”、“”，使用不同的方法插入到一个新建页

面 “2-6”中。



任务四 创建与应用美化网页
15 78

《网页制作》项目式教案
一、提出任务
1．任务目标
使用美化网页。
2．解决的问题
本任务通过为对首页进行美化，学习应用样式。
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中输入文本内容、插入图像及水平线。
二、教学目标
1. 知识目标
⑴ 了解样式的作用与特点。
⑵ 掌握使用设置文本样式。
⑶ 掌握使用设置背景样式。
⑷ 掌握使用设置列表样式。
⑸ 掌握使用设置水平线样式。
2. 能力目标
能够使用样式面板进行样式的设置 ，区分使用“类”样式与“标签”样式。通过帮助或
搜索引擎等查询学习过程中出现的的概念和定义，掌 握获得相关信息的方法。
3. 情感目标
正确看待自己，合理评价他人。
三、教学分析与准备
1. 教学重点
⑴ 样式的设置。
⑵ “类”样式与“标签”样式的区别。
2．教学难点
“类”样式与“标签”样式的区别。
3. 教学方法
提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解 解决问题
过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（ 组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学
时。）
教学环节及手段
组织课堂

复习知识





任务流程
教学内容 备注

集中学生注意力，准备上课。


复习时教师按
通过提问复习上节课所学内容，并了解学生对
照学生回答演示 操
上节课知识点的掌握情况。
作，指出其中的问
1．网页中文本样式是如何设置的？
2．其他网页元素的样式是如何设置的？是否
题。

也可以使用“属性”面板来完成？



在之前的任务中使用属性面板来设置并应用
16 78

《网页制作》项目式教案
导入任务







分析任务




完成任务






























力求通过任务
导入，吸引学生学习
欲望。


学生分组讨论
并尝试操作。







学生分组讨论
实现方法，并比较与
之前所使用方法的
不同。















“高级”样式：这种样式仅用于定义超级链接

的4种状态，所以可定义的样式名称也只有相应的

4种，分别是：“”用于定义超级链接初始状态；“”

用于定义已经访问过的超级链接状态；“”用于定

义鼠标经过超级链接对象时的状态；“”用于定义

超级链接的活动状态。

⑵ 样式可定义参数。
“类型”选项：用于定义常规的文本属性，包
括“字体”、“大小”、“颜色”等选项。
“背景”选项：用于定义背景属性，可设置“背
景颜色”、“背景图像”、背景图像的“水平位置”
等选项。
文本样式，可以简 化文本属性的设置过程。其特点
主要表现为：样式可以一次设置多次应用，可以同
步修改已应用 的样式。即丰富了文本的外观、美化
了页面同时也使文本属性的修改变得简单快捷。
思考：是否可以用同样方法设置其它网页元素
的样式？
提出任务：使用美化网页。

使用属性面板设置文本样式是应用的一种特
例，其他网页元素可以使用属性面板应用 已定义好
的样式，但不能通过属性面板完成样式的定义，本
任务将学习样式定义的一般方法。

1．创建与应用文本样式。
使用面板创建文本样式“3”，并将新样式应用
到“青春寄语”部分的标题文本上。讨论这种方法
与之前学习的设置方法有什么不同。
知识讲解：
⑴ 样式的三种类型
在使用“样式”面板定义新的样式的时候，在弹出的对话框中要进行样式类型的选择，其中包含
了“类”、“标签”和“高级”三种类型，三种类 型
分别具有如下特点。
“类”样式：“类”样式是最为灵活的一种类
型的样式，它可 以任意定义名称并且应用到网页中
的各种对象上。但是这种类型的样式在定义之后需
要选择对象 并应用后才会生效。
“标签”样式：“标签”样式的定义是建立在
语言基础上的，可以针对网 页中的各种标签进行定
义，所以用这种类型的样式定义的名称仅限于固定
的标签名称，并且在样 式定义后，直接被应用到页
面中相应的标签对象中。
17 78

《网页制作》项目式教案












2．创建与应用页面背景样式。

文本样式的设置使用的是三种样式中的第一

种类型，即“类”样式。其特点为：样式的定义与

应用过程是分离的，所有定义好的“类”样式都需

要选择相应对象进行应用。

观察以下操作，比较“标签”样式与“类”样

式的区别。

单击“样式”面板上的“新建规则”按钮，弹

出“新建规则”对话框，在当前文档中新建一个命

名为“”的“标签”样式。

完成相应设置并浏览网页。

思考并讨论：“类”样式与“标签”样式的区

别。

3．完成其他样式的设置

⑴ 定义“标签”样式“”。

⑵ 定义“类”样式“”并应用到页面中的水

平线上。

思考：作为“类”样式的“”是否只能应用于

水平线？如果将一张图片应用了该样式，会有什么

结果，为什么？



通过本任务学习了样式设置方法及“类”样式

与“标签”样式的区别。
举一反三

任务目标 教师作为引导
1．新建网页“2-9”，插入3条水平线，定义
3种“类”样式“l1”、“l2”、“l3”。定义 过程中
者和组织者，学生分
修改样式中的边框属性，使其拥有不同的效果，分
组上机操 作，完成相
应任务并进行评价。
别应用在各条水平线上，预览页面。
启发思路

学生总结之前
三种“类”样式分别定义与应用，体现了“类”
任务中的方法或按
样式的使用特点。
分组完成任务 教材中的操作步骤


每组4名同学，组长安排成员完成某一样式的
完成。
18 78































知识总结
“区块”选项：用于定义文本的间距与对齐方
式等属性。
“方框”选项：用于定义表格、框架等对象的
属性。
“边框”选项：用于定义各种对 象的边框属性，
表格、框架、水平线的边框样式都可以使用这一选
项进行定义。
“列表”选项：用于定义文本列表的属性。
“定位”选项：用于定义层对象的属性。
“扩展”选项：用于定义光标、图像等内容的
视觉效果的扩展属性。

《网页制作》项目式教案

学生自评或互评


教师点评总结


任务目标







启发思路


分组完成任务


学生自评或互评

教师点评总结



布置作业





学生分组讨论
相关操作。
并通过尝试操作得

组织不同组的同学互相评论对方完成任务的
出结论。

优缺点。

对正确完成的小组提出表扬，不正确的进行指
正，或请其他组同学更正错误。
2．将本单元素材“举一反三”文件夹中的网
页“2-11”拷贝到D盘根目录下，定义“标签”样
式“p”，设置文本大小与颜色，保存后预览页面观
察效果，之后定义“类”样式“p1”，设 置不同的
文本大小与颜色，并应用于页面中所插入的文本，
浏览页面观察效果，总结“类”样式 与“标签”样
式的区别。

注意区分两种样式分别为“标签”样式和“类”
样式，观察在两种样式共存的情况下，那种样式优
先。

把不同层次的学生分在一组中，鼓励同学积极
讨论完成任务的方法。

组织同学自评或互评。

教师对每组同学完成任务情况进行总结，对完
成任 务的表扬，对没有完成任务的鼓励，并帮助他
们分析没有完成的原因。

新建网页“ 2-10”，插入本单元素材“举一反
三”文件夹中的“3”和一条水平线，定义“类”
样式“ 1”，修改样式中的边框属性。分别将该样式
应用在页面中的图片与水平线上，预览页面，分析
样式设置的结果。







任务五 使用代码制作图文网页
19 78

《网页制作》项目式教案
一、提出任务
1．任务目标
使用代码制作一个图文网页“唐诗赏析”。
2. 解决的问题
通过完成本任务，学习使用代码为网页添加图像、文本等元素并设置其属性。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在设计视图中为网页添加文本、图像等元素并设置
属性。
二、教学目标
1. 知识目标
⑴ 掌握使用代码在网页中插入文本。
⑵ 掌握使用代码在网页中插入列表。
⑶ 掌握使用代码在网页中插入图像。
⑷ 掌握使用代码在网页中插入水平线。
⑸ 掌握使用代码在网页中创建样式。
⑹ 掌握使用代码设置文本等元素的属性。
2. 能力目标
能够使用代码制作图文网页，并学会使用代码设置图像、文本、水平线的属性。
3. 情感目标
培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。
三、教学分析与准备
1. 教学重点
⑴ 使用代码插入文本、图像和水平线。
⑵ 使用代码设置网页元素属性。
2．教学难点
使用代码设置网页元素属性。
3. 教学方法
任务引领学习、自主学习、协作学习和探究学习相结合，通过几种教学方法的 运用，不
仅让学生掌握相关知识，同时提高学生的学习能力。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（ 组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学
时。）

教学环节及手段
组织课堂

复习知识




任务流程
教学内容
集中学生注意力，准备上课。

通过指定学生上前操作下列各题考察学生对已
学代码的掌握情况。
1．使用代码创建一个空白网页文件。
2．使用记事本创建一个空白网页文件。

通过完成一个任务，启发学生思考完成任务的
20 78


学生操作。




力求通过任务
备注

《网页制作》项目式教案
导入，吸引学生学习
方法，讲授必要的知识，传授必要的技能。
1．展示一个图文页面，让学生描述在设计视图
兴趣。
下的制作流程。

2．让学生讨论上面复习知识的第2个问题，如

果要求使用代码来完成这个操作，该如何实现？

由以上两个问题引出本课课题。

提出任务：使用代码制作图文网页



使用代码在网 页中插入文本和图像，并进行简
任务提出后的
单的属性设置，了解相应标签的使用方法、插入位
分析过程可以先由
置和基本属性。
学生讨论，再由教师

总结。
1．知识讲解

完成任务
⑴ 在使用语言制作网页过程中，首先要设置网

知识讲解
页的标题标签。如下所示：


标 签 描 述
教师引导，学

<>…<>………页面标题标签
生讨论、分析。
⑵ 插入文本、图片以及水平线需要如下标签：


标 签 描 述

…<>………………段落标签


<>……………………图像标签


<>……………………水平线标签

⑶ 列表标签分为两种形式而列表项标签是相


同的，如下所示：


标 签 描 述

<>…<>………………项目列表标签


<>…<>………………编号列表标签

<>…………………列表项标签


⑷ 如何设置页面的背景颜色属性？

⑸ 如何设置段落标签、图像标签及水平线标签


的属性？


⑹ 如何在代码试图下应用。


2．自己动手


⑴ 准备工作。


⑵ 设置标题并修改背景颜色。


⑶ 添加图像与文本。


a．添加段落标签并设置属性。


b．添加图像标签并设置属性。


c．添加列表并设置属性。


d. 添加水平线标签并设置属性。

安排学生分组讨论并示范操作，教师引导。



⑷ 使用。

使用代码定义样式并将其应用到段落标签中。




知识总结
通过本任务主要学习了使用代码在网页中插入

21 78

导入任务






分析任务

《网页制作》项目式教案
文本、图像、列表、水平线，并设置相应属性。




将本单元素材 “举一反三”文件夹中的网页
培养学生自主
“2-12”拷贝到D盘根 目录下，使用<><>标签代码
学习、探究学习的能
制作项目列表，并比较与编号列表的区别。
力。


项目列表标签与编号列表标签的区别在于列表
启发思路
的浏览效果不同，使用方法是相同的，所以两种列

表中的列表项都是使用<>标签。



学生分组上机，在组内进行讨论交流，最终完
分组完成任务
成任务。



由各组学生代表来分析说明本组完成情况。
学生自评或互评


指出学生在总结时可能出现的错误，补充不足，
教师点评总结
鼓励学生学习使用代码制作网页的信心。



将本单元素材 “举一反三”文件夹中的网页
布置作业
“2-13”拷贝到D盘根目录下，在“代码”视图下

定义样式“”，设置字体样式 为大小18像素，颜色
为“#662244”，将这一样式应用到页面中的所有段
落标签中，在 任一位置插入本单元素材“举一反三”
文件夹中的图像“4”，使用代码设置图像的对齐方
式， 完成后预览页面。









举一反三
任务目标


项目三 制作“作品展示”网页
本项目通过“创建表格”、“编辑表格”、“添加表格内容”和“建立超级链接 ”四个任务，
完成“幽幽我心的个人网站”中的“作品展示”网页的制作，学习如何使用表格来进行网页
的布局。任务完成后效果如图所示：
22 78

《网页制作》项目式教案









本项具体的教学过程共分为以下五个方面的任务：
任务一 创建表格 （4课时）
任务二 编辑表格 （4课时）
任务三 添加表格内容 （4课时）
任务四 建立超级链接 （6课时）
任务五 使用代码制作表格网页 （6课时）

任务一 创建表格
一、提出任务
1．任务目标
完成“作品展示”网页中表格的创建。
2．解决的问题
通 过在“作品展示”网页中创建表格理解表格布局页面的重要性，学习网页的布局分析，
掌握创建表格的几 种方法。
23 78

《网页制作》项目式教案
3．本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在页面添加文本，设置文 本格式，插入图像，设置
图像格式。
二、教学目标
1. 知识目标
⑴ 理解表格在网页设计中的作用。
⑵ 掌握利用表格布局页面。
⑶ 掌握创建表格的基本方法。
⑷ 掌握创建嵌套表格。
⑸ 掌握在网页中利用表格进行排版。
2. 能力目标
掌握表的创建和编辑，能够根据具体需求灵活应用表格，并能利用表格进行页面布局和
排版。
3. 情感目标
⑴ 通过参与作品评价，提高学生的审美能力与鉴别能力。
⑵ 鼓励学生根据任务需求进行科学合理的设计，提高学生分析问题与解决问题能力。
三、教学分析与准备
1. 教学重点
⑴ 理解表格在网页设计中的作用。
⑵ 分析页面的表格布局。
⑶ 创建表格的基本方法。
2．教学难点
⑴ 分析页面的表格布局。
⑵ 创建嵌套表格。
3. 教学方法
任务驱动学习、协作学习、探究拓展学习与举一反三相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程
（组 织课堂、复习知识、教师引领完成任务占2学时，举一反三占2学
时。）

教学环节及手段
组织课堂

复习提问


任务流程
导入任务




教学内容 备注

集中学生注意力，准备上课。


学生回答，
通过提问考察学生对插入图像基础知识的了解。
如何在网页上插入一张图片，并调整图片的大小、
教师按照步骤
操作。
位置？
学生展开

学生分组讨论如何在网页上制作一个班级通讯录，
讨论

每行内容有“姓名、照片、地址、联系电话”。

通过上面讨论，引导学生认识利用表格制作通讯录

是方便快捷的方式，再引导学生联想生活中用到的表

格，进而了解表格在网页制作中的广泛应用。
24 78

《网页制作》项目式教案




分析任务




完成任务
分析网页布局


































在 8中，表格是用于在页面上显示表格式数据及

对文本和图像等元素进行布局的强用力的工具。本任务

将学习在网页制作中如何灵活运用表格。

提出任务：利用表格规划、布局作品展示网页。
教师展示

依据设计图样， 可以使用四个表格把页面划分为四
“作品展示”网
个区域，四个表格分别命名为“1”、“2” 、“3”和“4”。
页成品

依据不同的设计内容，这四个表格还需要进行相应的编

辑与嵌套。
给出课本

图3-1页面布局
1．分析网页布局
⑴ 见课本图3-2，教师带领学生进行页面表格分
及课本图3-2

析。

引导学生了解：“1”是一个2行1列的表格。第一

行用于放置网站标题及图像，第二行嵌套一个1行5列

的表格“1-1”，用于放置五个导航按钮。

“2”是一个1行4列的表格。左右单元格为空白

区域，中间两个单元格分别用于放置“作品展示”和“友

情链接”两张图像。

“3”是一个1行3列的表格。左右单元格为空白

区域，中间单元格用于放置作品分类标题和图像。在中

间单元格嵌套一个6行1列的表格“3-1”。“3-1”表

格的每一行再嵌套一个表格，其中第一、三、五行分别

嵌套一个1行2列的表格，用于放置图标及作品题目；

第二、四、六行分别嵌套一个1行5列的表格，放置三

幅作品及左右两个空白区域。

“4”是一个3行1列的表格，第一行是空白区域，

第二行通过设置行属性显示为一条细线，第三行放置版

权信息。

重点理解如下内容：

ａ．课本图3-1页面布局由4个大表格组成，分别

分析每个表格的作用。
让学生积
b．什么是嵌套表格（插入嵌套表格是指在表格的< br>极讨论实际例
单元格中插入新的表格。）和嵌套表格的作用。
⑵ 教师举一些网页布局 的实际例子让学生进行协
子的布局结构，
同分析。总结：通过以上几个实际网站页面的例子，介
教师归纳总结。

绍表格布局知识，即许多网页的表格布局可分为上、中、

下三个部分，上面部分放置网页的标题，中间部分放置

网页的主要内容,下部分放置制作者的信息及版权信息

等。上、中、下三个部分又包含各自的嵌套表格来布局

相应的内容。

提问：回想以前打开一张网页的时候是所有的内容

都同时全部显示吗？如果不是的话是怎样进行显示的

呢？为什么这样显示？表格布局在这里有什么作用？
25 78

《网页制作》项目式教案

总结：如果使用表格布局网页结构不合理，会降低

网页浏览速度。因为浏览器在解析网页时，先将整个网

页的结构下载完后才显示内容，如果不使用嵌套表格布

局网页只使用一个表格会非常复杂，浏览者要等待很长

时间才能看到网页内容。通常用表格布局页面时，应该

遵循以下几点：

创建本栏目目录结
a．整个网页不要放在一个表格里，尽量使用多个
构

表格来进行布局。


b．表格的嵌套层次尽量要少。


c．单一表格的结构尽量整齐，不要太复杂。


2．创建目录结构


在 8中打开“幽幽我心的个人网站”，依据第一单
创建表格知识
元建立的网站目录结构，在本栏目“”文件夹中新建文



件“”，然后把光盘中本单元素材中的“”、“”、“”文


件夹复制到本栏目“”文件夹中。本栏目目录结构如课

给一定时
本表3-1所示。

间学生自己学
3．创建表格的知识

⑴ 练习插入一个表格：学会使用菜单、“插入”栏、
习或讨论找出

答案，教师最后
快捷键创建表格。

总结。
⑵ 回答表格对话框中如下选项的作用：


“页眉”选项组、“标题”、“对齐标题”、“摘要”。


⑶ 要求学生回答下列问题：


a．大多数浏览器默认显示单元格边距、间距是多


少？若要确保浏览器显示的表格没有边距和间距，必须


把单元格边距和单元格间距设置为多少？


b．如果没有明确指定边框的值，则浏览器怎么显


示表格边框呢？大多数浏览器默认显示边框粗细是多


少？若要确保浏览器显示的表格没有边框应该怎么


办？若把边框设置为0，则如何查看单元格和表格的边


框呢？


c．在网页制作过程中，元素的长度单位可以选用


百分比或像素来表示。请解释什么是像素、百分比？它


们的区别是什么？“百分比”是相对于谁说的？（教师


在最后总结时一定要强调是父元素，其绝对大小会随所


属父元素的大小变化而发生变化。）


d．在用表格布局页面时，宽度设置为多少时页面


不会出现水平方向的滚动条？（教师总结：为防止浏览
完成任务

过程中出现水平方向的滚动条，通常在800*600分辨率


下，把表格宽度最大设置为778像素，在1024*768分


辨率下最大设置为1002像素。）
知识小结

e．如何给当前表格命名？如何删除当前选中的表


格？


f．嵌套表格的宽度受所在单元格宽度的限制吗？


4．自己动手
26 78

《网页制作》项目式教案
根据所学知识，创建课本图3-1页面所需表格结
构。

通过完成本任务学习了：
⑴ 创建表格
⑵ 表格布局页面

⑶ 表格在页面中的作用：

让学生讨论表格在网页制作中的作用：网页中既有

明显的表格，也有隐含的表格；表格在网页中有两种作
启发思路
用：布局与真正的表格。



创建网页“3-1”，在网页中插入一个6行5列的表

格，宽500像素，边框粗细与单元格间距均为5像素，
分组完成任务
页眉选择“顶部”，标题为“产品信息”，保存并预览网

页。


学生自评或互评
回想插入表格的几种方法，考虑页眉、标题等选项

出现在哪个对话框的选项卡中，并考虑如何设置创建表
教师点评总结
格的相关属性。



学生分组完成任务，教师巡视指导，指出问题，纠
布置作业
正学生不良操作习惯。


由各组学生代表分析说明自己完成的任务。

对完成任务的学生给予鼓励，完不成的帮助其找到
原因并引导完成。

1．创建网页“3-2”，在网页中插入如图3-1所示
的嵌套表格，保存并预览网页。





举一反三
任务目标






图3-1

2．创建网页“3-3”，在网页中插入如图3-2所示
的嵌套表格，保存并预览网页。

27 78

《网页制作》项目式教案

图3-2
3．制作一个以环保为主题的网页，首先利用已学
知识设计栏目和目录结构 ，创建表格布局网页。














任务二 编辑表格
28 78

《网页制作》项目式教案
一、提出任务
1．任务目标
编辑已创建成的表格。
2. 解决的问题
通过对本单元任务一创建的表格进行编辑 ，学习更改表格边框或背景颜色，添加、删除
行或列，调整行高、列宽及表格大小，拆分或合并单元格。
3. 本任务所涉及原有知识要点
完成本任务需要掌握以前学过的利用表格布局页面，创建表格等知识点。
二、教学目标
1. 知识目标
⑴ 掌握选择单元格。
⑵ 掌握选择表格。
⑶ 掌握设置单元格属性。
⑷ 掌握设置表格属性。
⑸ 掌握表格的基本操作：如合并、拆分单元格，添加、删除行或列，调整行高、列宽。
2. 能力目标
掌握表格编辑，能够根据具体需求灵活应用表格。
3. 情感目标
培养学生用比较分析方法分析问题、解决问题的能力，并使学生具有自主学习能力。
三、教学分析与准备
1. 教学重点
⑴ 选择单元格、选择表格。
⑵ 设置单元格和表格的属性。
⑶ 表格的基本操作。
2．教学难点
单元格和表格属性的区分
3. 教学方法
任务驱动学习、协作学习、探究拓展学习与举一反三相结合
4. 课时安排
4课时
5. 教学环境
多媒体网络教室
四、学习过程
（组织课堂、复习知识、教 师引领完成任务占2学时；举一反三占2学
时。）
教学环节及手段 教学内容 备注
组织课堂

复习提问



任务流程
导入任务


集中学生注意力，准备上课。



通过提问方式考察学生对插入表格的掌握情况。
学生回答，教
1．创建表格的方法有哪些？
2．用表格布局页面的注意事项有哪些？
师归纳。


表格插入后和课本图3-1的表格相比较，会发现
教 师用展示这
相差甚远，至少表格的高度就相差很多，有些单元格
两张表格。
还需要调整。要完成最终效果，就必须对表格进行编

29 78

《网页制作》项目式教案



分析任务




完成任务
知识点讲解


































辑。
提出任务：编辑任务一中已创建成的表格。

观察任务一中创建的表格，对比最终效果，需要
分别对表格“1”、“2”、“3”、“4”及其嵌套表 格，设
置对齐、行高与列宽、背景颜色、背景图像和边框等
属性。

1．知识点讲解
⑴ 选中单元格和表格
a．引导学生利用已经学过的表格知识迁移总结
什么是表格、单元格、行、列。
b．介绍表格的3个重要标签“、、”并演示用法。
c．学生分组讨论选择表格的方法，并最后总结。
d．学生分组讨论选择表格中行、列、单元格的
方法，并最后总结。
思考：选中表格中所有单元格和选中整个表格
是一个概念吗？带着问题学习下面知识。
⑵ 设置单元格属性、表格属性
利用属性面板设置属性。
a．表格“属性”面板参数介绍
“表格”：表格的，为表格命名。
“行”和“列”：表格中行、列的数目。
“宽”和“高”：以像素为单位或按百分比指定
表格宽度、高度。通常不需要设置表格的高度。
“填充”：指的是单元格边距，即单元格内容和
单元格边框之间距离，单位为像素。
“间距”：指的是单元格间距，即相邻单元格之
间的距离，单位为像素。
“对齐”：确定表格相对于同一段落中其他元素
（例如文本和图像）的显示位置。
“边框”：指定表格边框的宽度，单位为像素。
“清除列宽”按钮：从表格中删除所有明确指
定的列宽。
“清除行高”按钮：从表格中删除所有明确指
定的行高。
“将表格宽度转换成像素” 按钮和“将表格高
度转换成像素”按钮：将表格中每列的宽度或高度
设置为以像素为单位的当前 宽度，同时将整个表格
的宽度设置为以像素为单位的当前宽度。
“将表格宽度转换成百分比” 按钮和“将表格
高度转换成百分比”按钮：将表格中每列的宽度或
高度设置为按百分比表示的当 前宽度，同时将整个
表格的宽度设置为按百分比表示的当前宽度。
30 78








教师讲授










教师简单介绍
知识点。

《网页制作》项目式教案



























完成任务










































c．继续上一个遗留问题：选中表格中所有单元

格和选中整个表格是一个概念吗？

2．自己动手
学生自己操
让学生按着下列要求编辑任务一中已创建的表< br>作，做好的给予鼓
格。
⑴ 编辑表格“1” 励，做不好时一定
设置表格“1”在页面中居中对齐。
设置表格
要给予其提示。

“1”的第2行的单元格背景图像为“”文件

夹下的．。

⑵ 编辑表格“1-1”
设置表格“1-1”宽500像素、高34像素、左
对齐。把“1-1每个单元格宽度设为100像素。
⑶ 编辑表格“2”
设置表格“2”的属性：“表格”为“2”、高“50
像素”、对齐方式为“居中对齐”，背景颜色为“”，
第一列和第四列的列宽均为17像素。
⑷ 编辑表格“3”及其中的嵌套表格
设置表格“3”为“居中对齐”，背景颜色为“”，
第1列与第3列列宽均设置为17像素。
31 78
b．单元格“属性”面板参数介绍
“合并单元格”按钮：将所选的单元格、行或
列合并为一个单元格。
“拆分单元格” 按钮：将一个单元格拆分成多
个单元格。一次只能拆分一个单元格；如果选择的
单元格多于一个 ，则此按钮将禁用。
“水平”：设置单元格、行或列内容的水平对齐
方式。
“垂直”：设置单元格、行或列内容的垂直对齐
方式。
“宽”和“高”：可以以像素 为单位或按占整个
表格宽度或高度的百分比进行设置。若让浏览器根
据单元格的内容以及其他列 和行的宽度和高度自动
确定适当的宽度或高度，此文本框采取默认设置
（空）。
“不 换行”：可以防止换行，从而使给定单元格
中的所有文本都在同一行。如果启用了“不换行”，
则当键入数据或将数据粘贴到单元格时，单元格会
加宽来容纳所有数据。
“标题”：可以将所 选的单元格格式设置为表格
标题单元格。默认情况下，表格标题单元格的内容
为粗体并且居中。
“背景”和“背景颜色”：设置所选单元格、列
或行的背景图像和背景颜色。
“边框”：单元格的边框颜色。

《网页制作》项目式教案



















设置“3-1 ”边框粗细为1像素，边框颜色为“”。
分别设置表格“3-1”第一行、第三行和第五行单元
格中嵌套的表格“1”、“1”和“3D1”的属性：高30
像素，对齐方式为左对齐，第1列列宽为3 0像素。
分别设置表格“3-1”第二行、第四行和第六行
单元格中嵌套的表格“2”、“2 ”和“3D2”的属性：
第1列和第5列的列宽均设置为40像素。
⑸ 编辑表格“4” < br>设置表格“4”对齐方式为居中对齐，背景颜色
为“”。将第2行行高设置为1像素、背景颜色设 置
为“”，这样表格“4”的第2行就显示为一条高1
像素、颜色为“”的细线（注意：必须在 “代码”
视图里将表格“4”第2行单元格内的“;”删除，
否则行高不会以1像素显示）。
至此，完成了“作品展示”网页中所有表格的编辑
工作。

通过完成本任务学习了：
1．选则单元格、表格的方法。
2．设置单元格属性。
3．设置表格属性。
4．表格的基本操作：如合并、拆分单元格，添加、
删除行或列，调整行高、列宽。

引导学生分组做任务二的举一反三。通过这些
练习，使学生熟练掌握编辑表格的知识，并从中体
会和总结学习方法。
创建网页“3-4”，插入一个1行2列的表格，
在属性面板中 设置表格的填充、间距、边框均为10
像素，在第1行第2列中再插入一个2行1列的嵌
套表格 ，设置表格的填充、间距为0像素，边框为1
像素，保存并预览网页，体会填充、间距、边框的
含义。


学生分组完成任务，教师巡视指导，指出问题，
纠正学生不良操作习惯。




















教师总结






知识小结






举一反三


任务目标






启发思路


由各组学生代表分析说明自己完成的任务。
分组完成任务


对完成任务的学生给予鼓励，完不成的帮助其

学生自评或互评
找到原因并引导完成。


1．创建网页“3-5”，插入如图3-4所示表格并
教师点评总结
32 78

《网页制作》项目式教案


布置作业
按要求设 置其属性：宽400像素、高100像素、单
元格间距为5像素、边框粗细为3像素、边框颜色
为“0000”。表格第1、3列宽100像素、单元格的
边框颜色为“#0000”，第2列宽100 像素、单元格
的边框颜色为“#0000”。

图3-4
2．创建网页“ 3-6”，插入一个4行3列的表格，
按图3-5所示，对单元格进行合并与拆分。设置表
格边 框粗细为1像素、颜色为“#000000”，将表格
第1行的背景颜色设置为“#3399”，第2行 与第3
行的第一列单元格、第4行第1、2列单元格的背景
颜色设置为“”。

图3-5
3．创建网页“3-7”，插入5个表格，设置表格
对齐属性及单元格内容 对齐属性，使预览效果如图
3-6所示。

图3-6
4．继续创建上一任 务作业中以环保为主题的网页，
对表格进行相应编辑。暂不添加表格中的内容。

任务三 添加表格内容
一、提出任务
1．任务目标
在“作品展示”网页中添加表格内容。
2. 解决的问题
通过在“作品展示”网页的表格中添加内容，学习在表格中添加内容并设置格式。
33 78

《网页制作》项目式教案
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：表格的创建和编辑。
二、教学目标
1. 知识目标
⑴ 掌握在单元格中插入图片。
⑵ 掌握在单元格中设置图片格式。
⑶ 掌握在单元格中插入文字。
⑷ 掌握在单元格中设置文字格式。
⑸ 掌握使用表格的“扩展”视图模式。
⑹ 掌握使用表格的“布局”视图模式。
2. 能力目标
通过完成本任务使学生掌握在表格中添加内容并设置格式。
3. 情感目标
培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。
三、教学分析与准备
1. 教学重点
⑴ 在表格中插入内容。
⑵ 表格的三种视图模式。
2．教学难点
表格三种视图模式的使用。
3. 教学方法
任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程
（ 组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2
学时。）

教学环节及手段
组织课堂

复习提问






任务流程
导入任务


分析任务

教学内容
集中学生注意力，准备上课。

通过提问考察学生对插入表格的掌握情况和
上节课作业的完成情况。
1．总结表格属性面板和单元格属性面板的不
同。
2．提问学生，谈谈自己用表格制 作并编辑环
保为主题的网页页面布局，想做成一张什么样的网
页。其他同学可以进行评论。

用表格布局好页面后，就可以添加相应内容
了，本次课任务就是在上一任务完成的表 格内添加
内容。
提出任务：向表格中添加内容

34 78
备注




学生回答，教
师补充归纳

《网页制作》项目式教案












































完成任务
任务二已完成“作品展示”页面表格的编辑，
页面布局部分已经完成，本任 务需要将准备好的内
容添加进去，并设置其格式。

1．添加并编辑表格内容
⑴ 向表格“1”中添加内容
利用第二单元所学的方法，在“文件”面板中
打开“” 文件夹，把“”文件夹下的“”图像添加
到表格“1”的第1行中。
将光标放入表格“1-1 ”的第1列的单元格中，
输入导航文字“首页”。在第2至5列的单元格中
分别输入文字“作品 展示”、“心情日记”、“家乡山
水”和“访客信息”。
用鼠标拖拽选中表格“1-1”的 全部单元格，
在单元格“属性”面板中设置各单元格内容的对齐
方式为“居中”，文字大小保持 默认值，文字颜色
为“#5E5C5D”并加粗显示。
⑵ 向表格“2”、“3”中添加内容
将光标放入表格“2”的第2个单元格中，添
加图像“”。
将光标放入表格“2”的第3个单元格中，添
加图像“”。
将光标放入表格“1”的 第1个单元格中，在
“属性”面板中设置单元格水平对齐方式为“居
中”，在其中添加图像“” 。然后将光标放入表格“1”
的第2个单元格中，输入文字“网页作品”，设置
文字大小为14 像素，颜色为“#336666”、字体为
加粗。
使用同样方法在表格“1”和“3D1”中 添加图
像“”和文本，文本内容分别为“作品”和“3D
作品”，并与“网页作品”文字进行同 样的样式设
置。
选择表格“2”的第2至4个单元格，在“属
性”面板中将单元格水 平对齐方式设为“居中”。
在“2”的第2个单元格中，添加图像“w1”；在“2”
的第3个 单元格中，添加图像“w2”；在“2”的第
4个单元格中，添加图像“w3”。添加好图像文件
后，可以看到图像与所在行等高，为了网页美观，
让图像与表格边框之间适当留白，将表格“2”的< br>行高设置为159像素。
接下来分别选择上述三幅图像，在图像“属性”
面板里设置边框为1。为这三幅图像加上边框。
采用如上方法分别在表格“2”和“3D2”中添
加内容：在“2”中添加的图像文件分别为“ f1”、
35 78



教师引导学生
动手完成任务 。完
成的给予鼓励，完
不成的一定要给予
其提示

《网页制作》项目式教案













































“f2”和“f3”，在“3D2”中添加的图像文件分别

为“d1”、“d2”和“d3”。

⑶ 向表格“4”中添加内容

将光标放入表格“4”第3行的单元格中，将

其行高设为48像素，单元格水平对齐方式为“居

中”，文字大小为12像素，然后在其中输入文字“版

权所有：幽幽我心 欢迎来信 :123456789”。

⑷ 添加网页背景图像

单击“页面属性”按钮，在“分类”中选择“外

观”，在“外观”中设置背景图像为“D:”。

至此，页面内容添加完毕。 学生自己找答
思考：单元格设置背景图像和插入图像又什么
区别呢？你能区别开吗？单元格 背景图像的大小
案。学生、教师一
起总结
对单元格的显示又什么影响呢？
教师讲授
2．知识讲解：表格的三种布局模式

8在“插入”栏的“布局”类别中提供了“标

准”、“扩展”和“布局”三种表格视图模式，如图

所示。

“标准”模式：标准模式是表格默认的视图模

式，对于表格及其内容的绝大部分操作适合在该模

式下进行。

“扩展”模式：在标准模式中，当图像填满整

个单元格时，很难直接将光标定位在单元格中，为

了解决这个问题，可以切换到“扩展表格”模式。

在“扩展”模式下， 8临时向文档中的所有表格

添加单元格边距和间距，并且增加表格的边框以使

编辑操作更加容易。利用这种模式，可以方便地选

择表格中的内容或者精确地定位插入点。

“布局”模式：在“布局”模式中，可以在表

格添加内容前，使用“布局”单元格和“布局”表

格对页面进行灵活的布局。文档窗口的顶部显示

“布局模式”，指示当前正处于“布局”模式中，

原来页面上的每个表格都显示为布局表格。

“布局”模式的主要功能是绘制或编辑复杂的

表格。“布局单元格”不能存在于布局表格之外，

可以在“布局表格”中任意位置绘制“布局单元格”。

单击绘制“布局表格”或“布局单元格”按钮后，

可以通过拖拽鼠标来绘制“布局表格”或“布局单

元格”，也可以按住键拖拽鼠标，实现连续绘制多

个“布局表格”或“布局单元格”。在布局表格内，

布局单元格可以任意移动。

如果页面中没有其他内容，则新建的“布局表

格”自动定位在页面的左上角。不能在文档、图像、

表格等内容的旁边绘制“布局表格”。如果要在内
36 78

《网页制作》项目式教案



知识小结




举一反三
任务目标


启发思路




分组完成任务


学生自评或互评

教师点评总结

布置作业




容之下绘制布局表格时出现禁止绘制光标，表示布
局表格的插 入点距离内容太近。“布局”单元格可
以自由移动，也可以利用控制柄灵活地调整大小。

通过完成本任务学习了：
1．在单元格内插入图片，并设置图片格式。
2．在单元格内插入文字，并设置文字格式。
3．使用表格的三种视图模式。
< br>打开上一任务作业中创建的以环保为主题的
网页，从互联网或其他途经搜索需要的素材，插入到表格中，并设置相应格式。

自己搜索素材，把素材插入到表格中并设置格
式 。根据最终要完成的效果可调整素材或单元格。
若在操作单元格时遇到问题，可以考虑用“扩展”
或“布局”模式来配合操作。

学生分组完成任务，教师巡视指导，指出问题，
纠正学生不良操作习惯。

点评自己及他人作品的优点和缺点

总结学生点评结果，补充不足，

完成课本中本任务举一反三练习题。


















任务四 建立超级链接
一、提出任务
1．任务目标
完成“作品展示”网页中超级链接的添加。
2. 解决的问题
本任务将把网站中的 所有网页联接起来、并把网站和上的目标对象联接起来。通过完成
本任务要学会如何在网页中建立超级链 接。
37 78

《网页制作》项目式教案
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中添加文本对象、图像等网页元 素，以及设
置这些网页元素的样式。
二、教学目标
1. 知识目标
⑴ 理解各个独立的网页如何构成一个有机的整体。
⑵ 理解超级链接的含义，超级链接中的链接源和链接目标。
⑶ 掌握为网页中的文本对象建立超级链接。
⑷ 掌握为网页中的图像建立超级链接。
⑸ 在网页中建立电子邮件超级链接。
⑹ 掌握其他类型（文件下载、空链接）超级链接的使用。
⑺ 掌握设置文本超级链接样式。
⑻ 理解不同类型的链接路径。
2. 能力目标
熟练掌握在 8中为网页元素建立各种超级链接 ，并能根据具体需求进行灵活应用。通
过对不同对象设置超级链接的操作，总结出操作规律，培养学生自 主学习与应用的能力。
3. 情感目标
培养学生系统分析、解决问题的能力，在小组协作学 习中，培养学生团队精神与沟通能
力；并通过完成本任务，使学生感受成功的喜悦。
三、教学分析与准备
1. 教学重点
⑴ 超级链接的含义，链接源和链接目标。
⑵ 各种超级链接的建立。
⑶ 设置文本超级链接的样式。
2．教学难点
链接路径的三种类型。
3. 教学方法
任务引领学习和自主学习、协作学习、探究 学习相结合，通过举一反三拓展对所学知识
的认识和理解。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（ 组织课堂、复习知识、教师引领完成任务占4课时；举一反三占2
课时。）
教学环节及手段
组织课堂

复习知识




任务流程
教学内容
集中学生注意力，准备上课。

通过让学生上前操作考察学生对“添加表格
内容”的掌握情况。
教师在 8中打开一个表格布局的网页，让学
生在表格中插入文字和图片。

在“作品展示“网页中已制作好网页导航，
备注


提醒学生注意
光标的插入状态，
不要在选中当前单
元格的状态下插
入。

38 78

《网页制作》项目式教案
但这时的导航还没有实现超 级链接。请大家回忆
在以前的学习中，哪些软件利用到了超级链接？
在这些软件中超级链接起什么作用？通过讨论总
结使学生理解超级链接的含义。
教师引导，学展示两个网页，一个已经创建了超级链接，
生讨论、分析。 一个没有超级链接，让学生进行比较找出区别。
学生展开交流，通过对比找出不同点，回答教师
的问题。使学生明白在因特网上有“小手”的地
方就有超级链接——就有信息资源，超级链接让
网页“活”了起来。从而引出本课课题。
提出任务：为“作品展示”网页创建超级链接

分析任务 在建立超级链接之前，要明确链接源与链接
目标及其链接关系，然后根据不同的超级链接类
型建立超级链接。

完成任务 1．为文本添加超级链接
知识讲解 ⑴ 为网页中的导航文本添加超级链接。
a．超级链接的添加方法：
使用“浏览文件”按钮。
使用“指向文件”按钮。
输入超级链接路径：直接在“链接”下拉列
表框中输入文本的链接对象的路径。
b．“目标”下拉列表选项简介。
⑵ 介绍链接路径的三种类型。
提示学生注意观察：创建不同类型的超级链
接时在属性面板中“链接”下拉列表框看到的路
径有何不同。
⑶ 结合以前的学习经验，讨论如何使用“插
入”菜单或“插入”栏的“常用”类别中的“超
级链接”按钮，建立超级链接。
动手练习 在同一站点内不同页面之间建立链接。学生
实践完成教材p92页题3。
知识讲解 2．设置文本超级链接样式
学生讨论并回答：上网时见过哪些超级链
接？它们的文本样式是什么？实际制作时如何实
现这些样式？
为了区别未建立链接的普通文本，可以为超
级链接文本设置不同的样式。
动手练习 设置文本超级链接样式练习，学生实践完成
教材p92页题2。
知识讲解 3．为图像添加超级链接
安排学生示范操作并讲解如何为图像添加超
级链接，然后教师总结补充。
教师讲解如何设置“提示文本”。
4．添加“友情链接”
39 78
导入任务

由学生来回答
问题，一起复习在
中学过的有关超级
链接的知识。




通过任务导
入，吸引学生学习
兴趣。



教师提出任务要求，
由学生进行讨论，教
师归纳总结。




教师讲解为
主。











学生分组讨论
并完成。教师提示
操作要点，出现问
题时可查找课本或
帮助。




学生分组讨论
并完成。

《网页制作》项目式教案




动手练习





知识拓展

知识总结








完成任务

举一反三



任务目标




启发思路












通过在“属性”面板中的链接文本框中输入
绝对路径，实现在浏览器中预览网页时，单击图
像“”，即可打开“”（网页教学网）。
实现与上的目标对象间的超级链接。学生实践
完成教材p91页题1。
5．添加电子邮件超级链接
在网页中经常看到一些用于运行邮件发送程
序的超级链接，这就是电子邮件超级链接。
教师演示建立电子邮件超级链接的三种方法。 学生分组讨论
6．文件下载超级链接、空链接。 并完成。


通过完成本任务学习了：

⑴ 什么是超级链接。
⑵ 关于链接源和链接目标：超级链接不能凭

学生利用“帮
空建立，需依托一个实体而存 在，这个实体可以
是文本、图片、表格的行列或单元格等，链接的
助”学习，并互相
讨 论掌握这两种超
目标对象可以是网页、文件、邮件地址等。
级链接，教师辅以
⑶ 建立各种超级链接的方法。
必要的讲解，要求
⑷ 不同类型的链接路径。
每个人做出实例，
⑸ 设置文本超级链接样式。
教师点评总结。
学生动手“作品展示”页面的链接。


依据前面学习的知识与掌握的专业技能，学

生自己完成任务，教师作为组织者和引导者，着

重启发学生寻找完成任务的思路，养成检索与应


用“书籍”、“帮助”、“网络”等习惯。
利用收集到的素材和课前的准备，完成“环

保”主题网站制作。在网页上添加本任务所学习

到的各种超级链接，链接的目标网页内容可以相


对简单，但所有链接均为有效链接。


1．超级链接可以使访问者从一个网页跳转至

另外一个网页，或从一个站点跳转至另外一个站

点。但是，这种频繁的跳转可能使人烦躁。为了


方便用户更好的浏览页面，要注意什么？：

⑴ 超级链接必须简洁明了。
⑵ 超级链接文字必须与普通的内容文字相

区别，鼠标移动到超级链接上时显示突出效果。

默认的超级链接动作对应的是颜色变化，同

时还要考虑到如果仅仅依靠颜色的变化来区分超

级链接状态的话，那么色盲们可以接受吗？给超

级链接加上下划线将更有助于用户辨认超级链

接；或者是当鼠标经过超级链接时出现下划线，


也能达到同样的效果。

⑶ 超级链接上最好包含一些简单的链接目
标提示，这有助于用户决定自己的意愿，即是否
40 78

《网页制作》项目式教案

点击该链接。
2．不同功能的超级链接可以使用不同的链接

样式，如导航条内的超级链接，应该使用特别的

颜色和效果。

3．网站内的链接样式应该尽可能的少，同一

站点下的所有网页超级链接样式最好保持一致，

这样页面比较整洁。

4．超级链接能做到“来去自如”，但是要在

中途迷路了怎么办？应该在每一页上都做返回链

接。为了浏览方便，还可以添加“上一页、下一

页、回首页”等链接。



学生分组完成。
分组完成任务


由各组学生代表分析说明本组完成的任务。
学生自评或互评


教师对学生作品点评总结。引出下一节课课
教师点评总结
题：想成为网页制作高手吗？学习使用代码制作

表格网页。



1．在个人网站的推广中，如何有效的利用超
布置作业
级链接。

2．上网浏览一些个人网站，注意特殊的超级
链接效果，并模仿制作。










任务五 使用代码制作表格网页
一、提出任务
1．任务目标
使用代码制作一个“玉石鉴赏”网页。
2. 解决的问题
通过完成本任务，学习使用代码创建表格并设置表格属性、添加图像与文本、添加超级
链接。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在设计视图中使用表格布局网页和建立超级链接。
41 78

《网页制作》项目式教案
二、教学目标
1. 知识目标
⑴ 熟悉语言中，构成表格的3个主要标签及相关属性。
⑵ 掌握使用代码制作表格。
⑶ 掌握使用代码设置表格属性。
⑷ 掌握使用代码制作嵌套表格。
⑸ 掌握使用代码添加超级链接。
2. 能力目标
能够使用代码制作表格网页，并学会使用代码添加图像与文本、建立超级链接。
3. 情感目标
培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。
三、教学分析与准备
1. 教学重点
⑴ 使用代码制作表格。
⑵ 使用代码设置表格属性。
⑶ 使用代码添加超级链接。
2．教学难点
⑴ 使用代码设置表格属性。
⑵ 使用代码制作嵌套表格。
3. 教学方法
任务引领 学习、自主学习、协作学习和探究学习相结合，通过几种教学方法的运用，不
仅让学生掌握相关知识，同 时提高学生的学习能力。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（组织课堂、复习知识、教师引领完成任务占4学时 ；举一反三占2
学时。）

教学环节及手段
组织课堂

复习知识






任务流程

导入任务



教学内容
集中学生注意力，准备上课。

通过指定学生上前操作下列各题考察学生对
已学代码的掌握情况。
1．使用代码创建一个空白网页文件，修改页
面的背景颜色。
2．使用代码在页面中心位置输入文本“欢迎
进入幽幽我心的个人网站>>”。

通过完成一个任务，启发学生思考完成任务的
方法，讲授必要的知识，传授必要的技能。
展示一个彩色虚线表格，让学生讨论利用以前
学到的表格知识是否能够制作出来？
提出任务：使用代码制作表格网页



学生操作。








力求通过任
务导入，吸引学生
学习兴趣。

备注
42 78

《网页制作》项目式教案
使用代码制作一个表格布局页面，设置表格与
单元格的属性，添加超级链接并设置其属性。了解
相应常用标签的使用方法。

1．知识讲解
完成任务
⑴ 在语言中，表格主要通过3个标签来构成，
知识讲解
表格标签、行标签、单元格标签。如下所示：

标 签 描 述
教师引导，
学生讨论、分析。
<>…<>………表格标签
<>………<>……………行标签

<>………<>…………单元格标签

⑵ 表格标签应放在代码的什么位置？

⑶ 如何设置表格属性？

2．自己动手

⑴ 准备工作。

⑵ 插入表格并设置属性。

a．添加表格标签并设置属性。

b．添加行标签并设置属性。

c．添加单元格标签并设置属性。

完成以上步骤后，在预览网页之前，让学生讨

论分析刚才利用代码完成的是一个什么样的表

格？

⑶ 添加图像与文本。

安排学生示范操作，教师引导。

⑷ 添加超链接。

添加超链接标签并设置属性。
知识总结


本任务需要着重掌握的知识是：表格标签、行

标签、单元格标签、超链接标签的用法及属性。
举一反三

任务目标
在 8的代码视图下分析“作品展示”网页。


启发思路
在分析网页时注意以下几点：

⑴ 页面属性。

⑵ 样式的定义。

⑶ 表格结构。

⑷ 表格标签的“”属性与行标签和单元格标

签的“”属性的异同。

⑸ 代码中电子邮件超链接是如何实现的？

⑹ 超级链接的“”属性部分都使用了哪种类

型的链接路径？



学生分组上机，讨论交流。
分组完成任务


由各组学生代表来分析说明本组完成情况。
43 78
分析任务










任务提出后的
分析过程可以先
由学生讨论，再由
教师总结。





准备工作由优
秀学生按教材要
求完成。

通过讨论分析
加深学生对所学
知识的理解。








培养学生自
主学习、探究学习
的能力。

《网页制作》项目式教案
学生自评或互评


指出学生在总结时可能出现的错误，补充不
教师点评总结
足，鼓励学生学习使用代码制作网页的信心。



1．使用代码制作网页“3-14”，这个网页中
布置作业
包含一个2行3列的表格。

2．使用代码制作网页“3-15”，网页中包含
课本P98“图3-11”所示表格。
3．制作本课开始时所展示的彩色虚线表格。
（给出样式的代码。）
4．在第一单元任务一中，设计了自己的个人
网站栏目，使用代码制作其中一个栏目的网页。








项目四 制作“心情日记”网页
本项目通过“创建框架集”、“使用链接控制框架内容”和“制作媒体日记页面 ”三个
任务完成“幽幽我心的个人网站”中“心情日记”栏目的制作，学习如何使用框架结构来布
局页面及如何在网页中插入多媒体文件，任务完成后效果如图：

44 78

《网页制作》项目式教案


本项目具体的教学过程共分为以下四个方面的任务：
任务一 创建框架集 （4课时）
任务二 使用链接控制框架内容 （4课时）
任务三 制作媒体日记网页 （4课时）
任务四 使用代码制作框架网页（4课时）



任务一 创建框架集
一、提出任务
1．任务目标
创建“心情日记”页面的框架结构。
2. 解决的问题
本任务通过在“心情日记”页面创建框架集并设置属性，学习创建框架集以及设置框架
45 78

《网页制作》项目式教案
集和框架属性的知识。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：创建网页、在网页中添加内容、添加超链接等。
二、教学目标
1. 知识目标
⑴ 了解框架的含义。
⑵ 掌握框架集的创建。
⑶ 掌握框架的选择。
⑷ 掌握框架集的选择。
⑸ 掌握框架属性设置。
⑹ 掌握框架集属性设置。
2. 能力目标
能够利用框架布局页面，设置框架属性。
3. 情感目标
培养学生不怕困难、积极探索的优良作风，增强学生审美能力，给学生以成功的体验。
三、教学分析与准备
1. 教学重点
⑴ 框架的含义。
⑵ 创建框架集。
⑶ 设置框架属性。
⑷ 设置框架集属性
2．教学难点
⑴ 显示框架边框。
⑵ 设定框架的滚动格式。
⑶ 框架的边框样式。
3. 教学方法
任务驱动学习和协作学习、探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（组织课堂、复习知识、教师引领完成任务占1. 5课时；举一反三占
2.5课时。）





教学环节及手
段
教师活动 学生活动
46 78

《网页制作》项目式教案
组织课堂

复习知识








任务流程
导入任务




分析任务






完成任务



教师结合
演示文稿和实
际操作讲解。

边讲边做，
一定要将目录
结构讲清楚









集中学生注意力，准备上课。

通过学生总结考察学生对布局页面知识和美化
页面的了解情况。
1．网页常见的几种布局？
2．布局网页的方法？
３．如何新建和使用样式美化页面？
教师总结，通过前面的学习已经掌握了网页的基
本概念以及制作网页的基本知识，包括使用样式美化
网页、使用表格进行页面布局、添加链接等。

本任务学习如何在同一个网页中显示更多的内
容，即在一个窗口中显示多个页面，要 完成的就是创
建“心情日记”页面的框架结构、使用链接控制框架
内容。（同时演示任务）
提出任务：创建“心情日记”页面的框架结构。

依据“心情日记”效果图，页面分 为上部、左下、
右下三个部分，每个部分可以用一个框架页来实现。
上部框架页用于放置标题“ 心情日记”和图像；左下
部框架页用于放置“个人日记”等五个导航链接，每
个导航链接一个页 面；右下部框架页用于显示与导航
链接相对应的页面。
下面讲解完成任务的步骤。
1．创建本单元的目录结构
打开要完成的任务，引导学生分析本任务、创建
目录，拷 贝素材，结果“心情日记”目录结构如下：

文件文件夹
所在路径 说明
的名字



1
D:
2
3
4
5
<>
“心情日记”框架
集网页
左下部框架页
上部框架页
右下部框架显示
的“个人日记”网
页
“情感天地”网页
“休闲搞笑”网页
“天下杂侃”网页
“媒体日记”网页
存放本栏目需要
的图片











首先对今天< br>学习任务进行明
确定位，让学生明
确今天学习的任
务目标。




























47 78

《网页制作》项目式教案
















































２．创建框架集

创建框架集有两种方法，引导学生通过课本或帮

助将两种方法找出来，并根据任务要求选择框 架集的
学生观察框
类型，即“上方固定，左侧嵌套”。
架的使用
３．选择框架并设置属性

让学生自己找选择框架的方法（通过课本或使用

帮助）。然后按照课本步骤，设置框架属性，添加每

个框架的内容。讲解属性面板各选项的含义：

“框架名称”：用于设置链接的“目标”属性或

脚本中引用该框架时所用的名称。

“源文件”：用于设置在该框架中显示的网页文

件。可以单击“浏览文件”按钮 选择要显示的网页

文件。

“滚动”：用于设置是否显示滚动条。其中“默

认”表示由浏览器的默认设置确定是否显示滚动条。

大多数浏览器默认设置为在浏览器窗口中没有足够

空间来显示框架内容时，显示滚动条。

“不能调整大小”：用于设置在浏览器中是否可

以通过拖动框架边框来调整框架大小。

“边框”：用于设置在浏览器中是否显示框架边

框。大多数浏览器默认设置显示边框。

“边框颜色”：用于设置边框颜色。

“边界宽度”：以像素为单位设置框架左边框和

内容之间的距离。

“边界高度”：以像素为单位设置框架上边框和

内容之间的距离。

提个醒：在页面中单击框架区域内部，表示要编

辑该框架内容，不等于选中了框架。在“框架”面板

中框架内部单击，才会选中相应框架。

４．选择框架集并设置属性

给出选择框架集的方法，然后提问学生，应该在

哪里设置属性。最后按课本步骤操作讲解。

５．保存框架和框架集

按课本步骤操作

注意：上述任务创建了一个框架集网页，它包含

三个框架页，其中左下部和右下部框架页已经通过

“属性”面板的“源文件”选项设置为从素材中拷贝

过来的网页，页面内容没有修改，所以不需要保存；

而框架集页面和上部框架页是新建的，因此需要保

存。

保存单个框架页面时，可以先将光标定位到该框

架页面，再选择菜单栏“文件”菜单的“保存框架”
<> 存放多媒体文件
48 78

《网页制作》项目式教案


知识拓展














知识总结


举一反三
任务目标



启发思路


完成任务

总结评价



布置作业


选项。

进行下列操作前，首先要勾选菜单栏“查看”→“可视化助理”→“框架边框”选项（默认不被勾选），
在页面中显示框架结构。
⑴ 手动创建框架集
用鼠标拖拽“文档窗口”中的任一边界，都可以
创建包含两个框架的框架集。
用鼠标拖拽“文档窗口”的任一角，都可以创建
包含上下左右4个框架的框架集。
⑵ 拆分框架
先选中要拆分的框架，再按住键盘的键用鼠标拖
拽边框拆分框架。
⑶ 删除框架
用鼠标拖拽框架边框到相邻边框，即可删除相应
框架。

通过本任务学习了创建框架集、设置框架集属性
以及如何保存框架网页的知识。
< br>1、创建网页“4-1”，使用“新建文档”对话框，
创建“右侧固定，上方嵌套”结构的框架集 网页，设
置显示框架边框，边框宽度为3，颜色为“#0000”。

根据所学习的 创建框架集方法，自己动手创建上
述框架集网页。每个框架的属性设置按要求制作。

学生分组完成任务。

让每组学生评论本组作的情况，哪些好、哪些不
好，缺点是什么，哪些知识点没有掌握。
教师总结，根据不同情况再次进行强调总结。

1．自己试一试如何手动创建框架。
2. 自己练习如何拆分框架和删除框架。
3．创建如下图所示的框架集网页“4-2”。





















引导学生自
己完成给出的任
务，学生做好了给
予鼓励，做不好时< br>一定要给予其提
示。











49 78

《网页制作》项目式教案
４．创建如下图所示的框架集网页“4-3”。















任务二 使用链接控制框架内容
一、提出任务
1．任务目标
在“心情日记”页面创建链接，使用链接控制框架内容。
2. 解决的问题
本任务 通过在“心情日记”页面创建链接，学习使用超级链接控制框架内容，实现在同
一浏览器窗口中显示多个 网页的功能。
50 78

《网页制作》项目式教案
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：如何创建框架集，设置框架集和框架的属性。
二、教学目标
1. 知识目标
⑴ 理解通过创建超级链接控制框架显示内容的过程。
⑵ 熟悉属性面板中“目标”的种类和含义。
⑶ 掌握框架中超链接的设置。
2. 能力目标
掌握利用框架和链接实现在同一浏览器窗口中显示多个网页内容。
3. 情感目标
培养学生不怕困难、积极探索的优良作风，增强学生审美能力，使学生感受到完成任务
的成就感。
三、教学分析与准备
1. 教学重点
框架中超链接的设置。
2．教学难点
属性面板中“目标”的种类和含义。
3. 教学方法
任务驱动学习、协作学习和探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程
（组织课堂、复习知识、 教师引领完成任务占1.5课时；举一反三占
2.5课时。）

教学环节及手段 教师活动 学生活动
51 78

《网页制作》项目式教案
课堂

复习提问


任务流程
导入任务



分析任务






完成任务
教师结合演
示文稿和实际操
作讲解。

边讲边做






知识总结


举一反三
引出任务




任务目标





集中学生注意力，准备上课。

1． 如何创建框架集？
2． 如何设置框架集和框架的属性？

演示上次的任务，找出未完成的部分，从而引
出本 任务的内容，即通过添加超级链接控制框架页
中显示不同的内容
提出任务：使用链接控制框架内容

为上一任务创建的框架页面添加内容，其中左< br>下部框架页直接应用素材网页“”。该网页中有“个
人日记”、“感情天地”等五行文本。然后为 这五行
文本创建超级链接，链接到素材中对应的网页，链
接目标显示在右下部框架。下面，讲解 完成任务的
步骤。

１．添加框架页的内容
制作顶部框架页所需要的网页“”，创建一个
空白页面“5”。
２．创建超级链接控制框架显示内容
讲解“个人日记”的链接方法，让学生自己完
成其他的链接，最终结果如下：
文本链接目
内容 对象 标
情感
天地
休闲
搞笑
天下
杂侃
媒体
日记
“2”
“3”
“4”
“5”





教师提问，学
生总结回答






首先对今天学
习的任务进行明确
定位，让学生明确
今天学习的任务目
标。



















引导学生自己
完成










完成本任务学习了在网页中创建超级链接，实
现控制框架显示内容。

总结 上述知识点，然后提问学生是不是也想自
己做一个应用框架技术的网页？比如，我们拍摄收
集了 很多相片，有家人的、朋友的、自己的。希望
将他们分类管理，以便更容易浏览展示。下面任务
就是利用今天学的框架知识完成一个个人相册。

创建网站“4-3”,站点保存在“D:4-3”文件
52 78

《网页制作》项目式教案



启发思路


准备资料

完成任务


总结评价



布置作业
夹。使用框架技术制作一个网 上相册，将自己拍摄
或搜集的相片分类（至少分三类），把每一类相片
显示在一个页面中。创建 一个“上方固定，左侧嵌
套”的框架集网页“4-6”。上部框架显示相册标题
（自定），左下 部框架显示分类名称并添加链接，
右下部框架显示相应类别的相片页面（注意：除了
框架集网页 外其他网页文件名自定）。

要认真组织页面，力求达到美观的效果，最好
使用样式。

准备资料：上网查找或者使用自己的照片素材

应用上述技术制作自己的网页，每个框架页的
属性设置根据自己的喜好制作。
学生自评：分组让学生评论本组作的情况，哪
些好、哪些不好，缺点是什么，哪些知识点没有掌握
教师总结：根据不同情况再次进行强调总结

设计一个个人网站进行自我介绍，要求使用框
架技术布局页面。






给学生时间自
己找资料，自己布
局美化页 面，以便
有更多自由发挥的
空间








53 78

《网页制作》项目式教案
任务三 制作媒体日记网页
一、提出任务
1．任务目标
在网页中插入多媒体内容。
2. 解决的问题
通过完成本任务认识多媒体视频文件 和动画文件在网页制作中的重要作用，学习运用多
媒体文件美化和丰富网页。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中插入图像、编辑图像，使用框架结构布局
页面。
二、教学目标
1. 知识目标
⑴ 了解多媒体文件的分类。
⑵ 了解视频文件在网页制作中的作用
⑶ 掌握在网页中插入视频文件。
⑷ 了解动画在网页制作中的作用
⑸ 掌握在网页中插入动画。
2. 能力目标
能够在网页中插入多媒体文件并进行参数设置。
3. 情感目标
通过参加科学探究 活动，初步掌握在网页制作中使用多媒体文件的方法，并加深对多媒
体文件的理解。使学生增强自信心， 对学习产生兴趣。
三、教学分析与准备
1. 教学重点
⑴ 多媒体文件的分类
⑵ 在网页中插入视频文件。
⑶ 在网页中插入动画。
2．教学难点
⑴ 在网页中插入视频文件。
⑵ 在网页中插入动画。
3. 教学方法
任务驱动学习、协作学习和探究学习相结合
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（组织课堂、复习知识、 教师引领完成任务占1.5学时；举一反三占
2.5学时。）
教学环节及手段
组织课堂

复习知识

教师活动
集中学生注意力，准备上课。

通过提问考察学生对框架集掌握情况。
1．框架集的作用？
54 78
学生活动

《网页制作》项目式教案



任务流程
导入任务










分析任务



完成任务
























2．上前演示使用框架集在一个网页中显示几
个网页的内容。

学生分组讨论下列问题。
1．什么是媒体文件？
2．媒体文件有哪些？
3．列举日常生活中的媒体文件。
学生回答上述问题，教师总结，从而引导学
生学习媒体文件。
浏览包含多媒体文件的网页，吸引学生兴趣。
通过前面的学习已经系统的了解了图形图像在网页制作中的应用，但是还没有使用过媒体文
件，本任务将系统学习多媒体文件在网页制作中的应用。
提出任务：在网页中插入视频文件

在“媒体日记”链接的网页“5 ”中，插入一
段视频文件。在上部框架页面“”中，插入动画
作为装饰，美化页面。

1．布局“媒体日记”页面
运行 8，在“文件”面板中，选择并打开上
一任务创建 的网页文件“5”，通过“页面属性”
设置网页上、下边距为0像素，背景色设置为“0”，
其 他采用默认值。
选择菜单栏“插入”菜单的“表格”选项，
插入一个宽366像素、2行2列 的表格，表格边
框为0。设置第一行高20像素，第二行高272像
素，第一列宽17像素，第 二列宽349像素（第二
列列宽可以不设）。
在第一行、第一列单元格中插入“D:”文件夹中“1”图像，在第一行的第二列中输入文字
“媒体日记”，文字大小为12像素。
然后合并第二行的两个单元格。
2．插入媒体插件
在“文档窗口 ”中，用鼠标在 表格第二行内
单击，选择菜单栏“插入”→“媒体”→“插件”
选项，弹出“选择文件”对话框 ，如课本图4-16
所示。选择“D:”文件夹中的视频文件“”，
单击“确定”按钮。
结合插入媒体菜单讲解有哪些媒体文件可以
应用在网页设计中。
3．插入动画文件
在顶部框架页插入动画。在 8中，打开“D:”
55 78



学生可以利用
帮助、课本、互联
网查找答案。



力求通过任务
导入，吸引学生学
习兴趣。







教师引导，学
生讨论、分析。

《网页制作》项目式教案








文件夹下的网页“”，将插入点放到图像“”的 右
边，选择菜单栏“插入”→“媒体”→“”选项，
在弹出的“选择文件”对话框中选择“D: ”文
件夹中的动画文件“”，单击“确定”按钮。
保存网页“”，按F12键预览
插入文件后，背景与网页背景不协调。为此，
在“文档窗口 ”中，单击选中刚插入的动画，然
后单击“属性”面板中的“参数”按钮，弹出“参
数”对话框，设置“参数”为“”，“值”为 “”，

表示背景为透明。然后单击“确定”按钮，完成

插入及其参数设置，保存页面。

多媒体文件包含动画、、、和插件等，每一类

文件都有其相应的可设置参数，用于设置多媒体

文件的各种属性。“”是动画模式参数，“”值设

置为代表显示动画时，背景为透明。



通过完成本任务学习了视频文件和动画在网
页制作中的应用。
知识总结
创建网页“4-7”，在网页中插入“插件”，播
放本单元素材“举一反三”文件夹中的“”。
举一反三
任务目标 回忆使用哪个菜单、选项可以插入插件？本
题应插入那个插件？每个插件可以插入什么类型
的多媒体文件？
启发思路
把不同层次的学生分在一组中，鼓励同学积
极讨论完成任务。

分组完成任务 小组间互相观看运行效果，并相互评论。

教师对学生完成情况及评论进行总结，对完
学生自评或互评 成任务的表扬，对没有完成任务的鼓励，并帮助
他们分析没有完成的原因。
教师点评总结
1. 如何在网页中插入声音文件，插入的声音
文件和网页的背景音乐有什么区别？
2．创建一个网页“4-8”，效果如图4-5所示，
布置作业 在网页下方插入“插件”，播放本单元素材“举一
反三”文件夹中的“”。
3．创建网页“ 4-9”，在网页中插入“插件”
播放本单元素材“举一反三”文件夹中的“”，要
求设置循环 播放。
要点提示：在“插件”的属性面板添加参数
56 78












教师作为引导
者和组织者，学生
分组上机操作，完
成相应任务并进行
评价。

《网页制作》项目式教案
“”，值为“-1”。



















任务四 使用代码制作框架网页
一、提出任务
1．任务目标
使用制作一个标题为“唐代名词赏析”的框架页面。
57 78

《网页制作》项目式教案
2. 解决的问题
通过使用代码制作框架网页学习中框架集、框架标签的语法格式。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：使用代码在网页中添加超链接，插入文本并设置文
本格式。
二、教学目标
1. 知识目标
⑴ 了解框架集与框架在中的区别。
⑵ 掌握框架、框架集标签的用法。
⑶ 掌握框架、框架集标签的一些重要属性。
⑷ 掌握使用代码生成框架网页。
2. 能力目标
能够利用代码制作框架网页。
3. 情感目标
培养学生不怕困难、积极探索的优良作风，对自己充满信心，对学习充满兴趣。
三、教学分析与准备
1. 教学重点
⑴ 框架、框架集标签的用法。
⑵ 框架、框架集标签的一些重要属性。
2．教学难点
框架、框架集标签的用法。
3. 教学方法
任务驱动学习、协作学习和探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（ 组织课堂、复习知识、教师引领完成任务占1.5学时；举一反三占
2.5学时。）
教学环节及手段
组织课堂

复习知识



引领完成任务
导入任务



分析任务


教师活动 学生活动

集中学生注意力，准备上课。



通过提问考察学生对框架的掌握情况。

1．什么是框架、框架集？

2．框架、框架集的作用是什么？


力求通过任务
前面已经学习了语言的一部分内容，本任务将
继续学习，学习 中框架、框架集标签，从而能够掌
导入，吸引学生学
习兴趣。
握如何使用代码生成框架页面。

提出任务：使用代码制作框架网页。



通过代码添加包含三个框架的框架集，设置框

架的属性，在一个框架集内显示三个框架页的内
。
容。
58 78

《网页制作》项目式教案
完成任务












































1．准备工作
新建一个文件夹“”，把随书光盘中本单元素
材文件夹中“ ”文件夹下的网页“”、“”、“”、“2”
和“3”拷贝到此新建文件夹中。
运行 8，新 建一个空白页面，命名为“”，保
存在“”文件夹中。将“文档窗口”切换到“代码”
视图，修 改网页标题为“唐代名词赏析”。
2．添加框架集
⑴ 在<>和<>之间添加框架集代码创建框架
集，并设置其属性。
⑵ 框架、框架集标签讲解。
框架集标签格式：
< 高度宽度是否显示框架边框边框
宽度框架间距离
框架标签格式
< 框架显示的网页文件地址框架名称

3．在框架集中添加框架
在<>和< >之间添加框架代码创建框架并设
置他们的属性。
4．设置在不支持框架的浏览器中显示的信息
⑴ 在<>和<>之间修改并添加代码，设置在不
支持框架的浏览器中显示的信息。
⑵.知识讲解
框架集网页中<>……<>标签与<>和<>标签不
能互相包含。但是<>……<>可以添加在 <>……<>
标签中，用于设置不支持框架的浏览器中显示的提
示信息。
⑶ 知识拓展
框架还有第二种形式：内联框架（ 或）。它由
微软 3.0版本引入的。它把内 联框架嵌入文档
中，就像文档嵌入图片一样。内联框架可以使开发
者把一个文档嵌入到另一个文 档中。
嵌入内联框架的语法：
< 0 “框架名称” “要嵌入的网页地址” 400
400

通过完成本任务学习了：
1．框架集与框架在中的区别。
2．框架集、框架标签。
3．框架集、框架标签的一些重要属性
4．使用代码生成框架集和框架的方法。

59 78












教师讲授














教师讲解

《网页制作》项目式教案

知识小结





结合前面的例子，通过各种途径完成举一反三

的任务。获得帮助的方法有：
举一反三 教师作为引导
1．从教材获取。
任务目标 者和组织者，学生
2．通过 8帮助获取。
分组上机操作，完
3．从互联网获取。

从 8帮助或互联网获取，要注意检索方法和
成相应任务并进行
评价。
检索关键词。
启发思路


把不同层次的学生分在一组中，鼓励同学积极

讨论完成任务。



每组学生代表说明任务完成情况，并说明获取

知识途径以及检索关键词等信息。



针对每组完成情况进行点评总结。
分组完成任务

1．使用代码制作“上方固定”的框架集网页
“4-10”，上方框架高度为120像素。
学生自评或互评 2．通过各种途径完善框架的第二种方式-内联
框架的知识储备，每一组同学都要完成一个内联框
架的作业。
教师点评总结


布置作业

使用代码制作框架集网页“4-11”，其结构为
左 侧固定、上方嵌套，左侧框架宽150像素，右上
框架高100像素，显示框架边框，宽度为1像素，< br>颜色为“00”。

项目五 制作“家乡山水”网页
本项目 将通过“添加热点与锚记链接”、“添加和使用层”以及“制作页面动态效果”
几个任务来完成“家乡山 水”页面的制作。 “家乡山水”页面的效果如下图所示：
60 78

《网页制作》项目式教案


本项目具体的教学过程共分为以下四个方面的任务：
任务一 添加热点和锚记链接（4课时）
任务二 添加和使用层 （4课时）
任务三 制作页面动态效果 （4课时）
任务四 使用代码制作“异国风情”网页（4课时）




任务一 创建框架集
一、提出任务
1．任务目标
为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。
61 78

《网页制作》项目式教案
2. 解决的问题
本任务通过在“家乡山 水”页面中添加热点来划分景区地图上的各个景区，为景区地图
上各个热点设置属性，链接到“景区介绍 ”页面中的相应位置。学习创建热点和锚记链接。
3. 本任务所涉及原有知识要点
完成 本任务所涉及原有知识要点有：网页的基本概念以及制作网页的基本知识，包括表
格的制作、插入图像、 添加链接等。
二、教学目标
1. 知识目标
⑴ 了解热点和锚记的概念。
⑵ 锚记名称的命名规则。
⑶ 掌握热点的分类。
⑷ 掌握添加热点。
⑸ 掌握创建锚记。
⑹ 掌握创建锚记链接。
2. 能力目标
能够为图像添加热点并设置热点的属性，添加锚记链接。
3. 情感目标
培养学生不怕困难、积极探索的优良作风，增强学生审美能力，给学生以成功的体验。
三、教学分析与准备
1. 教学重点
⑴ 热点的含义。
⑵ 锚记的含义。
⑶ 设置热点属性。
⑷ 锚记的作用。
2．教学难点
⑴ 添加热点的方法。
⑵ 根据不同的图形添加不同形状的热点。
⑶ 创建锚记链接。
3. 教学方法
任务驱动学习和协作学习、探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（组 织课堂、复习知识、教师引领完成任务占2课时；举一反三占2
课时。）

教学环节及手段 教师活动 学生活动
62 78

《网页制作》项目式教案
组织课堂

复习知识








任务流程
导入任务









分析任务




完成任务



教师结合演
示文稿和实际操
作讲解。

边讲边做，
一定要将目录结
构讲清楚







集中学生注意力，准备上课。



通过让学生回答下列问题复习制作简单网页和

布局页面知识。

1．网页常见的布局有那些？

2．布局网页的方法？（表格和框架）

3．网页中可以包含哪些元素?

教师总结：通过前面的学习已经掌握了网页的

基本概念以及制作网页的基本知识，包括使用表格

进行页面布局、添加链接等。


首先让学生明
在设计网页时，有时网页内容比较多，需要占
用好 几屏，当用户浏览内容时如果让他通过滚动条
确本任务学习的任
一屏屏查找所要浏览内容是非常 费事的。这时可以
务目标。
同时演示任务
在网页中添加热点和链接，通过单击热点快 速定位
到所要查找内容。本任务将制作家乡山水页面，在
完成效果。

“家乡山水”页面中添加热点来划分景区地图上的

各个景区，为景区地图上各个热点设置属性，链接

到“景区介绍”页面中的相应位置。通过完成此任

务学习创建热点和锚记链接的方法。

提出任务：为景区添加热点和创建锚记链接。



建立好本单元的目录结构，在“景区介绍”页

面中为每个景区的介绍内容添加锚记，之后在景区

地图上按景区绘制热点，然后为每个热点添加锚记

链接，链接到“景区介绍”页面的对应位置。



1．创建本单元的目录结构

打开要完成的任务，引导学生分析本任务需要

创建的目录结构，拷贝素材，最终得出目录结构如

下：



文件文件夹的
所在路径 说明

名字

“家乡山水”


页面

“景区介绍”
D:

页面

页面所需图
<>

像

２．为“景区介绍”页面添加锚记

引导学生从课本中找到创建锚记的方法然后按

步骤操作，记住锚记的命名规则，如何使用，在页

面中的显示。思考：锚记的作用是什么？为什么在
63 78

《网页制作》项目式教案






















知识总结


自己动手练习



举一反三
任务目标






















工具”后，选中某个热点，可以通过拖拽移动它


的位置，还可以利用键盘的方向键或方向键移动热

点的位置。

调整热点的大小：用指针热点工具单击某个


热点，然后将光标移到热点的顶点处，拖拽鼠标可

以改变热点的形状和大小。

选中多个热点：单击“属性”面板中的“指针

热点工具”后，按住键的同时，可以通过单击选


中多个热点；按下键盘的组合可以选中所有的热点。

４．设置热点属性添加锚记链接

给出为热点添加锚记链接的方法，由此回答前

面提出的问题，让学生牢记添加锚记链接的方法。



通过本任务学习了如何添加锚记、添加热点以

及如何创建锚记链接。



安排学生按步骤制作“家乡山水”网页，根据

学生练习情况进 行总结，再次强调知识点。使学生
引导学生自己
通过模仿达到熟练掌握添加热点和创建锚记链接 的
完成给出的任务，
目的。
学生做好了给予鼓

将本单元“举一反 三”文件夹中的“5-1”文件
励，做不好时一定
夹拷贝到D盘根目录，利用图像文件“5-3 ”，制作
要给予其提示。

一个有关荷花的简单网页“5-3”。使用多边形热点< br>工具为图像中的荷花添加热点，熟悉使用指针热点

工具对热点进行移动和修改大小的操 作。添加替换
文本“映日荷花別样红”，添加链接到“5-4”，热点
替换如图5-2所示。
此添加锚记？
３．为“家乡山水”页面的景区地图添加热点
在“文件”面板中双击 “”文件，打开“家乡
山水”页面，选中里面的地图图像，引导学生自己
找出热点工具的使用方 法（通过课本或使用帮助），
然后引导学生使用多边形热点工具为每一个景区添
加热点。这里要 强调热点工具的使用方法：
移动热点：单击“属性”面板中的“指针热点
64 78

《网页制作》项目式教案

启发思路


完成任务

总结评价


教师点评总结



布置作业



图5-2

根据所学习的添加热点和创建锚记链接的方法
完成。

学生分组完成任务。

让每组学生评论本组完成情况，哪些好、哪些
不好，缺点是什么，哪些知识点没有掌握。

对完成任务好的学生给予鼓励，完不成的帮助
其找到原因并引导完成。并根 据不同情况再次强调
总结知识点。

1．创建网页“5-1”，插入本单元素材“举 一反
三”文件夹中的图像“5-1”，练习使用矩形热点工
具、多边形热点工具和椭圆形热点工 具绘制不同形
状的热点。
2. 创建网页“5-2”，插入本单元素材“举一反
三” 文件夹中的图像“5-2”，在图像上添加圆形热
点，并添加替换文本“月到中秋分外明”。效果如图< br>5-1所示。

图5-1
65 78

《网页制作》项目式教案
任务二 添加和使用层
一、提出任务
1．任务目标
完成“家乡山水”页面中层的制作。
2. 解决的问题
通过完成本任务学习层的使用，并为下一个任务添加行为做准备。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中添加表格，在单元格中添加内容。
二、教学目标
1. 知识目标
⑴ 理解层的概念和作用。
⑵ 掌握插入层。
⑶ 掌握层的基本操作：选中、移动、对齐、调整大小。
⑷ 掌握层的属性设置。
⑸ 掌握在层中添加内容。
2. 能力目标
熟练掌握使用层在网页中不同位置定位的方法。
3. 情感目标
培养学生不怕困难、积极探索的优良作风，增强学生审美能力，使学生感受到 完成任务
的成就感。
三、教学分析与准备
1. 教学重点
⑴ 层的属性设置。
⑵ 在层中插入内容。
2．教学难点
层的定位方法。
3. 教学方法
任务驱动学习、协作学习和探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程
（组 织课堂、复习知识、教师引领完成任务占2课时；举一反三占2
课时。）

教学环节及手段 教师活动 学生活动
66 78

《网页制作》项目式教案
组织课堂

复习提问




任务流程
导入任务



分析任务





完成任务



教师结合演
示文稿和实际操
作讲解。

边讲边做


















集中学生注意力，准备上课。



通过教师提问、学生回答来考察学生对添加热

点和创建锚记链接的掌握情况。

3． 如何添加热点，有几种热点工具？

4． 如何创建锚记链接？


先让学生明确
演示本任务网页，找出本次需要完成的部分，
从而 引出本任务的内容，即通过插入层来在网页中
本任务学习的任务
目标。
定位要显示的内容。

提出任务：添加和使用层。



景区地图上共有六个景区，每个景区对应一个

层，加上初始显示层共有七个层叠放在同一位置，

显示相应的图像。另外，还需要建立一个层，用于

显示简单的介绍文字。本任务将在页面中插入八个

层，改变层的大小，确定层的位置，然后在层中添

加内容。



１．插入层

在“文件”面板中双击“”文件，打开“家乡

山水”网页。引导学生从课本中找到插入层的步骤，

在需要的位置插入8个层，同时认识层面板。

２．设置层的属性
在“层”面板中，单击“8”选中该层，其中“高”、
“宽”等属性的默认值取决于“首选参数”对话框
（选择菜单栏“编辑”→“首选参数”选项）中“层”
分类的设置。将“宽”修改为300像素，其他采用
默认值。其他层的属性保持默认值不变。

层“属性”面板介绍

“层编号”：用于设置层的名称，同一页面中的

每个层都有唯一的名称。第一次插入的层名称默认

为“1”。

“左”和“上”：用于设置层的左上角相对于页

面（如果是嵌套层，则相对于其父层）左上角的水

平距离和垂直距离，值默认为0，单位默认为像素，

通常使用默认值。

“宽”和“高”：用于设置层的宽度和高度。单

位默认为像素。

“Z轴”：用于设置层在Z轴上的位置，即层叠

顺序。在浏览器中，编号较大的层叠放在编号较小

的层的上面。值可以为正，也可以为负。

“可见性”：用于设置层是否可见。:默认值；:

继承父层的可见性；：可见；：不可见。
67 78

《网页制作》项目式教案
















知识总结


举一反三
任务目标















启发思路

完成任务

总结评价


教师点评总结
“溢出”：用于设置当前层中的内容 超出其大小
时的状态。：层高度自动增加以容纳超出的内容；：
层大小不变，多出的内容隐藏； ：在预览时层自动加
上滚动条；：自动识别是否显示滚动条，层中内容超
过层的大小时显示，否 则不显示。
“剪辑”：用于定义层在“文档窗口”中的可见
区域，单位为像素。
3. 在层中添加内容
将光标放在要插入内容的层中，然后添加内容。
4.设置层的显示属性
通过“层”面板中的图标，将所有层的显示
属性设置为隐藏。 单击“层”面板中“1”和“8”
左边的图标，将这两个层的显示属性设置为可



















引导学生自己
完成




















见，其他层不可见。

通过完成本任务引导学生学习了层的作用，以
及如何插入层、设置层的属性、对层操作。

将本单元“举一反三”文件夹中的“5-2”文件
夹拷贝到D盘根目录，运行 8，使用文件夹中的图
像与文本制作“我的心事”网页“5-7”,整个页面
使用层进行布局， 效果如图5-5所示。

图5-5

应用层、对层进行定位布局网页。

组织学生分组完成本任务

每组学生代表评论本组完成情况，哪些好、哪
些不好，缺点是什么，哪些知识点没有掌握

根据不同情况再次进行强调总结

68 78

《网页制作》项目式教案

布置作业
1. 创建网页“5 -5”，使用层完成如下工作：在
图像“5-4”的上方叠放另一张图像“5-5”（所需素
材 在本单元素材文件夹中的“举一反三”文件夹中），
完成效果如图5-3所示。


图5-3

2. 创建网页“5-6”，利用层的可重叠性，制作
阴影效果的文字，如图5-4所示。


图5-4








任务三 制作页面动态效果
一、提出任务
1．任务目标
为“家乡山水”网页添加动态效果。
2. 解决的问题
通过为网页元素添加动态效果，学习在网页中添加层行为以及修改删除层行为操作。
69 78

《网页制作》项目式教案
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中添加热点、设置热点属性，添加层、设置
层属性。
二、教学目标
1. 知识目标
⑴ 了解行为的原理。
⑵ 掌握“行为”面板的使用。
⑶ 为页面的热点添加“显示-隐藏层”行为。
⑷ 为页面的热点添加“设置层文本”行为。
⑸ 掌握修改添加的行为的方法。
⑹ 掌握删除添加的行为的方法。
2. 能力目标
通过完成本任务使学生掌握在网页中添加、修改以及删除层的行为，学会制作动态效果
网页。
3. 情感目标
培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。
三、教学分析与准备
1. 教学重点
⑴ 为页面的热点添加“显示- 隐藏层”行为。
⑵ 为页面的热点添加“设置层文本”行为。
(3) 修改层行为。
(4) 删除层行为。
2．教学难点
层行为的原理。
3. 教学方法
任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程
（ 组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2
学时。）

教学环节及手段
组织课堂

复习提问





任务流程
导入任务

教师活动 学生活动

集中学生注意力，准备上课。



通过提问考察学生对添加层、使用层的掌握情

况和上节课作业的完成情况。
学生回答，教
1．总结层的添加与操作的方法。
2．谈谈自己对层及热点的理解，其他同学可以
师给予提示、补充
归纳。
进行评论。



为网页添加好层、设置好热点以后，就可以为

热点添加行为了，本任务就是在上一任务完成的热

点上添加层行为，为网页创建动态效果。
70 78

《网页制作》项目式教案


分析任务









































完成任务

提出任务：为网页创建动态效果。



任务二已完成“家乡山水”页面层的添加，页

面布局部分已经完成，本任务需要将准备好的内容

添加进去，并设置其行为。


1．为“金华山景区”热点添加“显示-隐藏层”
行为。
在“文件”面板中双击“”文件，打开“家乡教师引导学
山水”页面，勾选“窗口”菜单中的“行为”选 项，生动手完成任务。
或者按下键盘的4键打开“行为”面板。 完成的给予鼓励，
选中景区地图“”中覆盖“金华山景区”的热完不成的一定要
给予其提示
点，单击“行为”面板上的“添加行为”按钮，

在下拉菜单中选择“显示- 隐藏层”选项，弹出“显
示-隐藏层”对话框，设置层“2”（“金华山景区”
图像所在层）和层“8”（显示文本的层）为“显示”，
其他层全部设置为“隐藏”，单击“确定”按钮。
在“行为”面板的事件栏中，选择该行为的事
件为“”
至此，为“金华山景区”热点添加了一个行为，
预览“家乡山水”页面时，鼠标移上“金华山景区”
热点，层“2”和“8”显示，其他层都隐藏。
2. 为“金华山景区”热点添加“设置层文本”
行为。
选中“金华山景区”热点，在“行为”面板中，

选择“添加行为”按钮，在弹出的下拉菜单中选

择菜单栏“设置文本”→“设置层文本”选项，弹
出“设置层文本”对话框，在“层”中选择层“8”，
在“新建”中输入对该景区的简单介绍，然后单击
“确定”按钮。
在“行为”面板的事件栏中，选择“”。
3. 为其他热点设置行为。
使用与上面相同的方法，参照教材表5-1为其
他热点设置“显示- 隐藏层”行为。注意在设置某一
景区热点的行为时，将该景区图像所在层和用于显
示文本的“8”层设置为“显示”，其他层设置为“隐
藏”。
使用与上面相同的方法，参照教材表5-7为相
应热点添加“设置层文本”行为，输入热点相对应
的景区介绍文字。
至此，“家乡山水”栏目的制作全部完成，保存
并预览检查效果。
71 78

《网页制作》项目式教案












































思 考：单元格设置背景图像和插入图像又什么
区别呢？你能区别开吗？单元格背景图像的大小对
单 元格的显示又什么影响呢？
4．知识讲解：行为和事件类型。
行为是 8预置的程序库。每 个行为由一个动作
和一个事件组成。其中，事件是指行为发生的条件，
即触发动态效果的原因， 如鼠标指向、单击等；动
作是指事件发生后所作出的反应，即最终完成的动
态效果，比如交换图 像、弹出信息、播放声音等。
可以添加行为的对象有图像、热点、超级链接
文本、多媒体文件或者网页本身等。
⑴ 常用事件有：
事件 说明
鼠标单击时触发
鼠标双击时触发
按下鼠标左键时触发
鼠标左键按下后松开时触发
当鼠标指针移上某对象时触发
当鼠标移动时触发
当鼠标离开某对象时触发
当键盘上某个键按下并且放开时触发
当键盘上某个键按下时触发
当键盘上某个键松开时触发
⑵ 常用行为有：
交换图像：通过更改“”标签的“”属性将一
个图像和另一个图像进行交换。
恢复交 换图像：将最后一组交换的图像恢复为
它们以前的源文件。每次将“交换图像”动作附加
到某个 对象时都会自动添加该动作；如果在附加“交
换图像”时选择了“恢复”选项，就不再需要手动
选择“恢复交换图像”动作。
弹出信息：可显示一个带有用户指定信息的警
告框，可以为用户提供信息而不能让用户选择。
打开浏览器窗口：可以在一个新的窗口中打开，
可以指定新窗口的大小、特性和名称。
播放声音：可以在网页中播放声音，例如，当
鼠标滑过某图像时可以播放一段音乐；或者当页面
载入时播放音乐。
改变属性：可以通过改变图像、层、表单等的
属性来实现动态效果，例如 ，层的背景颜色或图像
的宽或高。具体可以更改哪个属性由当前选用的浏
览器来决定，4.0中 可以通过此行为更改的属性比
3.0多得多。
设置文本：可用于设置层文本、框架文本、状
72 78




教师讲授

《网页制作》项目式教案







知识小结



举一反三
任务目标



态栏文本和表单元素中的文本域文本。

预先载入图像：用于将不立即显示在网页中的

图像预先载入浏览器缓存中，防止当图像显示时由

于下载而导致延迟。



通过完成本任务学习了：

1．为页面中的元素添加“显示- 隐藏层”行为。

2．为页面中的热点添加“显示层文本”。


将本单元“举一反三”文件夹中的“5-3”文件学生、教师一
夹拷贝到D盘根目录，为其中的两个网 页“5-8”、起总结
“5-9”添加“打开浏览器窗口”行为，设置事件为
“”，使浏览任一网页时，两个网页在两个浏览器窗
口中同时打开。


注意选择正确的行为和事件。


启发思路
学生分组完成任务，教师巡视指导，指出问题，

纠正学生不良操作习惯。
分组完成任务


每组学生代表点评本组及其他组作品的优点和

缺点，并说明本组那些方面需提高。
学生自评或互评


总结学生点评结果，补充不足。


教师点评总结 1．创建网页“5-1 0”，插入本单元素材“举一
反三”文件夹中的图像“5-2”，为图像添加“弹出

布置作业
信息”行为，使鼠标经过图像时弹出信息“月到中
秋分外明”。
2．创建网页“5-11”，使用表格、层及行为创
建如图5-6所示菜单，鼠标移到菜单选项时显示下
拉列表，移出时下拉列表隐藏，目录结构参照表5-1。

图5-6

表5-1
目录结
构
“首页” 无
“作品
收藏”
“个人
“”“”“”
“工作日志”“学
73 78
下拉菜单

《网页制作》项目式教案
日志”
“游山
玩水”
“留言
板”


习日志”“读书
日志”
“山水风光”“他
乡风俗”
无
“论坛” 无







任务四 使用代码制作“异国风情”网页
一、提出任务
1．任务目标
使用代码制作一个“异国风情”网页。
2. 解决的问题
通过完成本任务，学习使用代码在网页中添加层和热点。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在设计视图中使用“行为”面板添加层 和热点，在
代码视图中使用代码添加图像和链接。
二、教学目标
1. 知识目标
⑴ 掌握使用代码插入图像和层。
⑵ 掌握使用代码给图像添加热点。
⑶ 掌握使用代码为热点添加行为。
⑷ 熟悉<>标签的使用方法。
⑸ 熟悉<>标签的使用方法。
2. 能力目标
能够使用代码制作网页动态效果，并学会使用代码添加图像与层、添加热点和行为。
3. 情感目标
培养学生勤于探索、主动学习的意识，树立将来成为网页制作专业技术人员的信心。
74 78

《网页制作》项目式教案
三、教学分析与准备
1. 教学重点
⑴ 使用代码插入图像和层。
⑵ 使用代码给图像添加热点。
⑶ 使用代码为热点添加行为。
2．教学难点
⑴ 使用代码添加热点。
⑵ 使用代码为热点添加行为。
3. 教学方法
任务引领学习、自主学习、协作学 习和探究学习相结合，通过几种教学方法的运用，不
仅让学生掌握相关知识，同时提高学生的学习能力。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、教学过程
（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2
学时。）< br>
教学环节及手段
组织课堂

复习知识




任务流程
导入任务





分析任务







完成任务
知识讲解


教师活动
集中学生注意力，准备上课。

通过指定学生上前操作下题考察学生对已学代
码的掌握情况。
1．使用代码创建一个空白网页文件，修改页面
的背景颜色，并添加一副图片。

展示“唐诗赏析”网页，让学生描述在设计视图
下的制作流程。
让学生讨论上题，如果要求使用代码来完成该如
何实现？
提出任务：使用代码编写网页，当单击导航图像
中不同文字时，在网页中显示不同的内容。


学生操作。








学生活动
力求通过任
务导入，吸引学

生学习兴趣。
网页由上下两部分组成，上半部分添加用于导航

的文字图像，下半部分显示文字对应的风景图像。这

些风景图像分别放在不同的层中，这些层重叠在相同

位置，并且大小相同。通过为上半部分导航图像上的

文字添加三个矩形热点、把热点链接到一段代码，该

代码功能为调用函数，该函数控制层的显示与隐藏，

实现各热点的行为。



1．知识讲解
任务提出后
⑴ 添加热点标签语句格式
的分析过程可以
< 形状位置链接替换文本
先由学生讨论，
“”标签用于设置 热点。中<>标签没有结束标志，
再由教师总结。
而且这个元素总是嵌套在<>标签内。
75 78

《网页制作》项目式教案
































教师引导，
学生讨论、分析。





知识总结


举一反三
任务目标

“”属性：用于设置热点的形状。可设置为，：
表示热点为矩形；：圆形；：多边形。
“”属性：用于设置热点的顶点坐标。
“”属性：用于添加链接，链接可以是，也可以
是代码。
本例链接的是一段代码，( )意思是显示层（层在
下一步骤添加），功能为调用函数，显示相应的层。
该函数代码将在下文 中添加到<>和<>标签中。
“”属性：用于设置当鼠标放到热点上时显示的
内容。
(2) 层标签的语句格式
< 层名称宽; :高; :层叠位置;
“”属性：用于设置层的名称。
“”属性：用于设置层的样式，其中有如下常见
属性：
“”值为或。当为时，层的位置固定；当为时，
层位置会随着内容的实际情况进行浮动。
“”值为或。为默认状态，表示显示；为隐藏。
“”值用于设置层在Z轴上的位置，即层叠顺序。
2．自己动手
⑴ 生成空白网页并设置属性。
⑵ 插入导航图片并设置属性。
⑶ 为导航图片添加热点并设置热点属性。
教师讲解，中间涉及到函数调用。
⑷ 添加图像层。
添加图像层并设置属性。

通过完成本任务学习了使用代码插入图像和层、
为给图像添加热点、为热点添加行为。

在 8的代码视图下分析“异国风情”网页。

在分析网页时注意以下几点：
⑴ 页面属性。
⑵ 层样式的定义。
⑶ 热点的定义。
⑷ 函数的使用。

学生分组上机，讨论交流。

由各组学生代表来分析说明本组总结情况。

指出学生在总结时可能出现的错误，补充不足，
鼓励学生学习使用代码制作网页的信心。
76 78





准备工作由
优秀学生按教材
要求完成。

通过讨论分
析加深学生对所
学知识的理解。








培养学生自
主学习、探究学
习的能力。

《网页制作》项目式教案
启发思路





分组完成任务

学生自评或互评

教师点评总结


布置作业


1. 创建网 页“5-12”，插入本单元素材“举一反
三”文件夹中的图像“5-10”，练习矩形热点的属性设置。
2. 使用层代码编写网页“5-13”, 效果如图5-7
所示。所需图像为本 单元素材的举一反三文件夹中的
“5-11”和“5-12”。

图5-7

3. 利用本单元素材举一反三文件夹中的“5-13”
图像，使用代码制作页面“ 5-12”，给上面的人物添
加圆形热点，为各个热点设置“”属性，设置热点的
替换文本为卡 通人物的名称，效果如图5-8所示。（七
个小矮人的名字分别是万事通、害羞鬼、瞌睡虫、喷
嚏精、开心果、迷糊鬼和爱生气）。提示：圆形热点
属性包括：（圆心x轴的坐标），（圆心y轴的坐< br>标），（圆的半径）。


图5-8
77 78

《网页制作》项目式教案



78 78