网页设计公开课教案
冥界亚龙-陈旭律师
《网页设计》公开课教案
教 师
班 级
邓丽强
09动漫1班
多媒体网页设计实例
教学目标
综合运用以前学过的
Fireworks图片处理、图片文字设计、图片导出、新建网站、网页
布局、插入多媒体、超链接和
网页背景设置等知识完成一个集动画、声音和图像为一体的多
媒体网页。
教学方法
讲授、演示、操作
教具
电脑、多媒体平台
教学重点
多媒体网页设计的基本步骤
Fireworks图片处理与图片文字设计
新建网站和网页插入多媒体的方法
教学难点
多媒体网页设计的基本步骤（学生对整个制作流程比较难掌握）
Fireworks图片文字设计（ 学生要设计比较漂亮的文字标题有一定难度）
Flash动画设置成透明参数设置(学生不易记住参数)
教学过程
教师活动 学生活动
对应目标
教师引入： 让学生了
先通过提问的方式和多媒体展示方式介绍网页多媒
体
学生凭自己对多媒体
解网页多
网页的认识回答问题
媒体元素元素与多媒体网页。
与认识多
教学过程：
媒体网页
目标一：多媒体网页设计的基本步骤介绍
学生观看老师多媒
体
通过观看演
课件演示与老师操作
示，了解资
演示。
料准备的操
作步骤与方
法。
目标二： 网页设计资料准备
1.建立文件夹
在D：盘中新建一个文件夹：MyWeb作为站点文件
夹； 进入MyWeb新建一个Images文件夹用来存放图
片动画与声音等资料。
打开“网页设计”网
为网页设
2.下载与整理资料
站，下载网站所需的
计准备素
打开邓老师制作的“网页设计”精品课程网站，进入
资料。
材。
[教学资源 ]栏目，下载“网页实例素材下载 ”
课 时 1课时
压缩文件，并解压缩。
把文件夹：expch03
里的内容复制到你的站点文件夹
d:MyWeb中。
目标三：Fireworks图片处理
1.打开图片并调整图片大小
启动Fireworks软件。
打开Images文件夹中的图片作为网页的界面
图片。
2.图片处理
调整图片大小为960 X
450像素。目的是为制作的
网页能适应屏幕分辨率为1024*768以上的电脑。
导入Images文件夹中的图片，并进行图
片处理，作为“我的博客”Logo。
在图片中的指示木牌处加入文字“进入”，以后作
为链接到主页的锚点。
3.文字标题设计
输入“记录与青春有关的日子”文字。
对文字进行效果处理：
1）设置字体的颜色。
2）使用滤镜功能进行文字发光描边。
3）使用滤镜功能进行文字投影处理。
4）用钢笔工具画一个波浪线。
5）选中文字与路径选择[文本]下的“附加到路径”功
能。并用部分选定工具进行文字调整。
4.图片导出
1）保存原文件
把处理好的图片进行原文件保存到站点的Images
文件夹中。命名为:
方便以后进行修改。
2）图片导出
选择“优化”面板，选择“JPG”格式。
选择[文件]菜单下的“导出”功能，把文件导出到站
点的Images文件夹中，命名为:
5、学生使用电脑进行实操练习。
目标四：网页设计
1.新建站点
启动Dreamweaver
选择[站点]菜单-->新建站点，出现“新建站点”对
话框。单击“高级”标签，在对话框中输入站点名称：
“个人博客”，然后选择站点的文件夹：d:
MyWeb
学生观看老师多媒体
课件演示与老师操作
演示。
学生打开“网页设计”
网站进行自主学习，
并根据要求进行实操
练习。
通过网站
自主学习
与实操完
成目标二、
三的内容。
2.新建网页
3. 网页布局
为了适应1024*768分辨率以上的电脑，我们布局的
表格大小设置为：960像素，高度适当。
4.插入图片
在布局好的表格中插入设计好的图
片作为网页的主界面。
5.插入Flash
1）在图片上画一个图层
2）选择“常用”功能面板下的“插入FLASH”功能，
选择站点images文件夹的文件。
3）选中FLASH动画，在属性栏中点击[参数]功能，
在对话框中输入参数：wmode
了值为：transparent
6.超链接与背景音乐
1）超链接
通过图片热点链接到
思考：如何通过插入flash按钮连接到？
2）加背景音乐
插入“插件”，并选中背景音乐文件
把插件的宽与高设置为0 (主要是为了看不见控件)
3）测试网页，完成制作。
7、学生通过学习网站进行自主学习，并使用电脑进行
实操练习。
总结：
通过对“个人博客”多媒体网页实例的制作讲
解。让同学们综合运用工具完成网页作品，并掌握以
下知识点：
1、 多媒体网页设计的基本步骤
2、
Fireworks界面设计操作方法
3、 Dreamweaver网页排版方法
4、
掌握插入多媒体、超链接与背景音乐的操作方法。
课后作业：
根据老师提供的
素材，完成“个人博客”多媒体网页
的设计，要求完成的网页作业集图像、声音、动画与
文字一
体的个性化设计。完成后上交站点给老师。
学生打开“网页设计”
网站进行自主学习，
并根据要求进行实操
练习。
通过网站
自主学习
与实操完
成整个网
页的设计。