武汉市生物工程学院-美文摘抄400字

《网页的美化》
教学设计

教材版本
课 题
学 校
课 型
课程
纲要
依据
教材
分析
青岛版
《网页的美化》
龙子心中学
新授课 授课班级 初二（1）班
授课教师
课 时
杨斌
1
本节课的定位在 于“熟练掌握”的程度上，旨在让学生通过对《网页的美
化》的学习，了解掌握美化网页的方法、步骤， 熟练掌握美化网页的操作，提
高审美意识，激发学生对网页制作进行更深入的学习和研究的兴趣。 结合本校学生和教学环境的特点，深入地领会由青岛出版社出版的初中《信
息技术》（八年级）教材 的编写意图，设计了制作“情感小屋”网站的主题活动，
制作“情感小屋”网站。
初二学生已 经学习了很多信息技术基础知识，并且具备了一定的操作计算
机、上网搜索、编辑图象的能力。通过前几 周的学习，学生对网站制作有了初
步的认识，并建立了站点，制作了首页，而且还通过表格归整了网页中 的各元
素，使网页趋于整洁。但是，由于制作的网页中还未有设置背景、背景音乐、
Flash 动画、字幕等元素，还显得单调。他们希望能够通过学习新的知识，进
一步美化他们制作的网页。
①了解美化网页的常用方法，理解美化网页对提高网站质量的作用。
②学会在网页中设置背景、音乐、Flash动画和滚动字幕。
③提高审美意识，善于发现美，美化生活从自身做起。
在网页中设置背景、音乐、Flash动画和滚动字幕。
在网页中设置音乐、Flash动画。
讲授法、自主学习法、任务驱动法、实验探究法等
计算机及多媒体网络教室系统、FrontPage2003软件等
学情
分析
教 学
目 标
教学重点
教学难点
教学方法
教学资源
网页的美化
一、美化网页的作用
二、美化网页的方法
三、美化网页的流程
四、具体操作：
1. 插入背景音乐
2. 设置网的背景
3. 设置表格的背景
4. 插入Flash动画
5. 插入滚动字幕
板书
设计

时
间
（分）

（课前2分钟预备）

教 学 内 容

对比提问：
（2分钟）

观看图片：未精心布置的房间与布置后的房间、丑女与美女
教
师
活
动
组织


展示
提问








导入
新课



板书







讲授



展示
讲解




展示
讲解




展示
讲解



展示
讲解




展示
讲解





展示
讲解

学
生
活
动
就坐
安静

观看
思考
回答







听讲




观察







思考
记忆


观看
记忆




观看
记忆




观看
记忆



观看
记忆




观看
记忆





观看
记忆

设
计
意
图
组织
课堂

设置
情景
引起
学生
兴趣
为引
入新
课做
铺垫

引出
新课
内容


白板
文字
显示
教学
整体
结构





演示
直观
体验



演示
直观
体验



演示
直观
体验


演示
直观
体验



演示
直观
体验




演示
直观
体验



2








1








2



3




















提问：你更喜欢哪一个？为什么？
（更喜欢后者，因为后者更赏心悦目，“养眼”，美）
观看网页：未经美化的网页与美化后的网页
（ , , , ）
提问：你更喜欢哪一个？
（更喜欢后者，因为前者相对比较单调，浏览后者使人“耳目一新”）

引入新课：
（1分钟）
我们这节课就来学习并自己动手操作一下如何从前者变成后者，如何使
网页更加具有美感。
使网页更加漂亮的过程就是“网页的美化”。




讲授新课：
（38分钟）


网页的美化
一、美化网页的作用
通过刚才的比较，相信同学们已经对美化网页的作用有了一定的认识，现
在我们再来看一些网站，加深了解。
展示一些比较优秀的网站。（百度视频、新浪、网易、搜狐、秘密花园等）
二、美化网页的方法

一般都用哪些方法美化网页呢？
⒈ 插入背景音乐
听到自己喜欢的音乐，可以让我们消除疲劳，在网页上设置背景音乐，也
可以让浏览者心旷神怡 。
展示无背景音乐和有背景音乐的网页。
⒉ 设置网页背景
在制作网页时，为网 页加上背景颜色或背景图片，可以让网页更加美观、
生动活泼、更能衬托网页的主题。
展示无背景与有背景的网页。
⒊ 设置表格的背景
我们在设计网页的过程中有时也 需要对网页中某一局部的背景颜色进行
设置，以达到强化有关内容的效果。
对比无表格背景与有表格背景的网页。
⒋ 插入Flash动画
我们浏览网页时，会看到很多广告形式的动画。
在网站设计中，如果在我们自己的网页上也能 插入几个Flash动画，肯定
会使网页增色不少。
对比无Flash与有Flash动画的网页。
5. 插入滚动字幕
在网页设计中，我们也会采取各种方式让文字或图片动起来，以吸引浏览

时
间
（分）

教 学 内 容
者的注意力。为了让一些纯文本的内 容（如标题）更醒目，一般通过改变字体、
字号、颜色或产生动态效果的方法来实现。其中效果最好的当 属在网页中使用
滚动字幕。

展示无滚动字幕与有滚动字幕的
index
网页。

教
师
活
动








播放
讲解








布置
任务







巡视
指导





组织
演示

总结
提醒











布置
任务







巡视
指导





学
生
活
动








思考
互动
回答







接受
任务
学习
动手
操作











演示
操作










整改
网页


接受
任务
学习
动手
操作











设
计
意
图








了解
美化
网页
的流
程





培养
自主
学习
能力











培养
表达
能力









培养
反思
意识


培养
自主
学习
能力

















3







三、美化网页的流程
⒈ 确定主题（基调）
思考：网站“情感小屋”的基调，是凝重的，还是轻松的？
⒉ 搜集素材（音乐、图片、Flash动画）
⒊ 加工素材（剪裁音乐，修改图片、动画，制作图形、动画）
⒋ 选择美化网页工具——
FrontPage2003
软件
⒌ 美化网页（插入所需元素）
四、美化网页
将全班分成两组，一组同学完成任务一，二组同学完成任务二。
任务一：设置网页背景、表格背景
自主学习：浏览教学网站——（1）设置网页背景；（2）设置表格背景。
设置D:情感小屋 的网页背景为D:素材背景，表格
背景设置为颜色RGB(cc,99,ff)。并保存，预览。
完成了任务一的同学完成任务二。
任务二：设置单元格背景、设置背景音乐
自主学习：浏览教学网站——（1）设置表格背景；（2）插入背景音乐。
设置D:情感小屋 的单元格背景如图所示，背景音乐为D:
素材友谊地久天长.mid。并保存，预览。
完成了任务二的同学完成任务一。
学生演示操作：任务一或任务二。


总结：提醒同学们在操作时要注意：

1. 先打开要编辑的网页；
2. 设置表格背景必须确保光标在该表格中；
3. 设置单元格背景必须确保光标在该单元格中；
4. 看清是编辑状态还是预览状态；
5. 保存时注意图片、音乐的存放位置。
（挑选该班学生易出错的方面提醒）
让学生再整改。

任务三：添加滚动字幕、Flash动画、设置单元格背景
自主学习：浏览教学网站 ——（1）设置表格的背景；（2）插入滚动字幕；
（3）插入Flash动画。
为D:情感 小屋添加滚动字幕“海内存知已，天涯若比邻”；
插入Flash动画D:素材月亮之上.swf；设置 纯文字单元格的背景色如下图
所示。

8









3


1






3

6

时
间
（分）

教 学 内 容
教
师
活
动




















组织
演示

总结
提醒





提出
问题



















布置
任务







播放
总结
归纳



学
生
活
动




















演示
操作








接受
任务
学习
动手
操作
讨论
探究














改名
复制







观看
回忆
听讲
梳理

听讲
设
计
意
图



















培养
表达
能力



探究
学习



巩固
记忆

探究
学习
















复制
到自
己网
盘中
以备
以后
继续
制作

对知
识点
进行
梳理


学生演示操作：任务三。

3
总结：提醒同学们在操作时要注意：

1. 准备素材时要分文件夹放置（imamges , sound , swf）；
1
2. Flash影片属性的“透明”属性；

3. 字幕的表现方式、连续次数。

拓展探究：根据我们所学到的知识，看看能否将主页中的Banner加动画

效果，结果如下图。素材：（１）D:素材；（２）D:素材。
6










（注意空中雨滴，水上波纹动画）

提示：

可以浏览学习网站——拓展探究



五、改名，复制：

将“D:情感小屋”文件夹改名为“情感小屋—网页的美化”，并将该文件
1
夹复制到自己的网盘中。

（因为学生机都安装了还原卡，所以必须保存在网盘中，以后才可以继续

制作。）



总结归纳：
（1分钟）

网页的美化
1
一、美化网页的作用

二、美化网页的方法

三、美化网页的流程

四、具体操作：

1. 插入背景音乐

时
间
（分）

教 学 内 容
教
师
活
动












布置
作业


学
生
活
动
记录

设
计
意
图












继续
完成
主题


2. 设置网的背景
3. 设置表格的背景
4. 插入Flash动画
5. 插入滚动字幕


课后作业：
（1分钟）


美化“情感小屋”其他网页的Banner及导般栏，如中样
1
式。



1.设计理念：
使用任务驱动法，让学生完成任务。
分组合作探究法，让学生分组操作，并演示。
2.教学亮点：
引导学生用教学网站自学，并分组合作探究。培养学生自学及合作能力。

教后反思


3.待改进地方：
本课内容较多，学生学习时稍嫌紧 张，可以设计为两课。拓展探究中的
文件，可以试学生自己通过修改做出来。

《网页的美化》
教学设计

教材版本
课 题
学 校
课 型
课程
纲要
依据
教材
分析
青岛版
《网页的美化》
龙子心中学
新授课 授课班级 初二（1）班
授课教师
课 时
杨斌
1
本节课的定位在于“熟练掌握”的程度上，旨在让学生通过对《网页的美< br>化》的学习，了解掌握美化网页的方法、步骤，熟练掌握美化网页的操作，提
高审美意识，激发学 生对网页制作进行更深入的学习和研究的兴趣。
结合本校学生和教学环境的特点，深入地领会由青岛出 版社出版的初中《信
息技术》（八年级）教材的编写意图，设计了制作“情感小屋”网站的主题活动，< br>制作“情感小屋”网站。
初二学生已经学习了很多信息技术基础知识，并且具备了一定的操作计 算
机、上网搜索、编辑图象的能力。通过前几周的学习，学生对网站制作有了初
步的认识，并建 立了站点，制作了首页，而且还通过表格归整了网页中的各元
素，使网页趋于整洁。但是，由于制作的网 页中还未有设置背景、背景音乐、
Flash动画、字幕等元素，还显得单调。他们希望能够通过学习新 的知识，进
一步美化他们制作的网页。
①了解美化网页的常用方法，理解美化网页对提高网站质量的作用。
②学会在网页中设置背景、音乐、Flash动画和滚动字幕。
③提高审美意识，善于发现美，美化生活从自身做起。
在网页中设置背景、音乐、Flash动画和滚动字幕。
在网页中设置音乐、Flash动画。
讲授法、自主学习法、任务驱动法、实验探究法等
计算机及多媒体网络教室系统、FrontPage2003软件等
学情
分析
教 学
目 标
教学重点
教学难点
教学方法
教学资源
网页的美化
一、美化网页的作用
二、美化网页的方法
三、美化网页的流程
四、具体操作：
1. 插入背景音乐
2. 设置网的背景
3. 设置表格的背景
4. 插入Flash动画
5. 插入滚动字幕
板书
设计

时
间
（分）

（课前2分钟预备）

教 学 内 容

对比提问：
（2分钟）

观看图片：未精心布置的房间与布置后的房间、丑女与美女
教
师
活
动
组织


展示
提问








导入
新课



板书







讲授



展示
讲解




展示
讲解




展示
讲解



展示
讲解




展示
讲解





展示
讲解

学
生
活
动
就坐
安静

观看
思考
回答







听讲




观察







思考
记忆


观看
记忆




观看
记忆




观看
记忆



观看
记忆




观看
记忆





观看
记忆

设
计
意
图
组织
课堂

设置
情景
引起
学生
兴趣
为引
入新
课做
铺垫

引出
新课
内容


白板
文字
显示
教学
整体
结构





演示
直观
体验



演示
直观
体验



演示
直观
体验


演示
直观
体验



演示
直观
体验




演示
直观
体验



2








1








2



3




















提问：你更喜欢哪一个？为什么？
（更喜欢后者，因为后者更赏心悦目，“养眼”，美）
观看网页：未经美化的网页与美化后的网页
（ , , , ）
提问：你更喜欢哪一个？
（更喜欢后者，因为前者相对比较单调，浏览后者使人“耳目一新”）

引入新课：
（1分钟）
我们这节课就来学习并自己动手操作一下如何从前者变成后者，如何使
网页更加具有美感。
使网页更加漂亮的过程就是“网页的美化”。




讲授新课：
（38分钟）


网页的美化
一、美化网页的作用
通过刚才的比较，相信同学们已经对美化网页的作用有了一定的认识，现
在我们再来看一些网站，加深了解。
展示一些比较优秀的网站。（百度视频、新浪、网易、搜狐、秘密花园等）
二、美化网页的方法

一般都用哪些方法美化网页呢？
⒈ 插入背景音乐
听到自己喜欢的音乐，可以让我们消除疲劳，在网页上设置背景音乐，也
可以让浏览者心旷神怡 。
展示无背景音乐和有背景音乐的网页。
⒉ 设置网页背景
在制作网页时，为网 页加上背景颜色或背景图片，可以让网页更加美观、
生动活泼、更能衬托网页的主题。
展示无背景与有背景的网页。
⒊ 设置表格的背景
我们在设计网页的过程中有时也 需要对网页中某一局部的背景颜色进行
设置，以达到强化有关内容的效果。
对比无表格背景与有表格背景的网页。
⒋ 插入Flash动画
我们浏览网页时，会看到很多广告形式的动画。
在网站设计中，如果在我们自己的网页上也能 插入几个Flash动画，肯定
会使网页增色不少。
对比无Flash与有Flash动画的网页。
5. 插入滚动字幕
在网页设计中，我们也会采取各种方式让文字或图片动起来，以吸引浏览

时
间
（分）

教 学 内 容
者的注意力。为了让一些纯文本的内 容（如标题）更醒目，一般通过改变字体、
字号、颜色或产生动态效果的方法来实现。其中效果最好的当 属在网页中使用
滚动字幕。

展示无滚动字幕与有滚动字幕的
index
网页。

教
师
活
动








播放
讲解








布置
任务







巡视
指导





组织
演示

总结
提醒











布置
任务







巡视
指导





学
生
活
动








思考
互动
回答







接受
任务
学习
动手
操作











演示
操作










整改
网页


接受
任务
学习
动手
操作











设
计
意
图








了解
美化
网页
的流
程





培养
自主
学习
能力











培养
表达
能力









培养
反思
意识


培养
自主
学习
能力

















3







三、美化网页的流程
⒈ 确定主题（基调）
思考：网站“情感小屋”的基调，是凝重的，还是轻松的？
⒉ 搜集素材（音乐、图片、Flash动画）
⒊ 加工素材（剪裁音乐，修改图片、动画，制作图形、动画）
⒋ 选择美化网页工具——
FrontPage2003
软件
⒌ 美化网页（插入所需元素）
四、美化网页
将全班分成两组，一组同学完成任务一，二组同学完成任务二。
任务一：设置网页背景、表格背景
自主学习：浏览教学网站——（1）设置网页背景；（2）设置表格背景。
设置D:情感小屋 的网页背景为D:素材背景，表格
背景设置为颜色RGB(cc,99,ff)。并保存，预览。
完成了任务一的同学完成任务二。
任务二：设置单元格背景、设置背景音乐
自主学习：浏览教学网站——（1）设置表格背景；（2）插入背景音乐。
设置D:情感小屋 的单元格背景如图所示，背景音乐为D:
素材友谊地久天长.mid。并保存，预览。
完成了任务二的同学完成任务一。
学生演示操作：任务一或任务二。


总结：提醒同学们在操作时要注意：

1. 先打开要编辑的网页；
2. 设置表格背景必须确保光标在该表格中；
3. 设置单元格背景必须确保光标在该单元格中；
4. 看清是编辑状态还是预览状态；
5. 保存时注意图片、音乐的存放位置。
（挑选该班学生易出错的方面提醒）
让学生再整改。

任务三：添加滚动字幕、Flash动画、设置单元格背景
自主学习：浏览教学网站 ——（1）设置表格的背景；（2）插入滚动字幕；
（3）插入Flash动画。
为D:情感 小屋添加滚动字幕“海内存知已，天涯若比邻”；
插入Flash动画D:素材月亮之上.swf；设置 纯文字单元格的背景色如下图
所示。

8









3


1






3

6

时
间
（分）

教 学 内 容
教
师
活
动




















组织
演示

总结
提醒





提出
问题



















布置
任务







播放
总结
归纳



学
生
活
动




















演示
操作








接受
任务
学习
动手
操作
讨论
探究














改名
复制







观看
回忆
听讲
梳理

听讲
设
计
意
图



















培养
表达
能力



探究
学习



巩固
记忆

探究
学习
















复制
到自
己网
盘中
以备
以后
继续
制作

对知
识点
进行
梳理


学生演示操作：任务三。

3
总结：提醒同学们在操作时要注意：

1. 准备素材时要分文件夹放置（imamges , sound , swf）；
1
2. Flash影片属性的“透明”属性；

3. 字幕的表现方式、连续次数。

拓展探究：根据我们所学到的知识，看看能否将主页中的Banner加动画

效果，结果如下图。素材：（１）D:素材；（２）D:素材。
6










（注意空中雨滴，水上波纹动画）

提示：

可以浏览学习网站——拓展探究



五、改名，复制：

将“D:情感小屋”文件夹改名为“情感小屋—网页的美化”，并将该文件
1
夹复制到自己的网盘中。

（因为学生机都安装了还原卡，所以必须保存在网盘中，以后才可以继续

制作。）



总结归纳：
（1分钟）

网页的美化
1
一、美化网页的作用

二、美化网页的方法

三、美化网页的流程

四、具体操作：

1. 插入背景音乐

时
间
（分）

教 学 内 容
教
师
活
动












布置
作业


学
生
活
动
记录

设
计
意
图












继续
完成
主题


2. 设置网的背景
3. 设置表格的背景
4. 插入Flash动画
5. 插入滚动字幕


课后作业：
（1分钟）


美化“情感小屋”其他网页的Banner及导般栏，如中样
1
式。



1.设计理念：
使用任务驱动法，让学生完成任务。
分组合作探究法，让学生分组操作，并演示。
2.教学亮点：
引导学生用教学网站自学，并分组合作探究。培养学生自学及合作能力。

教后反思


3.待改进地方：
本课内容较多，学生学习时稍嫌紧 张，可以设计为两课。拓展探究中的
文件，可以试学生自己通过修改做出来。