网页设计公开课教案

《网页设计》公开课教案

教师邓丽强

班级09动漫1班课时1课时

多媒体网页设计实例

教学目标

综合运用以前学过的Fireworks图片处理、图片文字设计、图片导出、新建网站、网页布局、插入多媒体、超链接和网页背景设置等知识完成一个集动画、声音和图像为一体的多媒体网页。

教学方法

讲授、演示、操作

教具

电脑、多媒体平台

教学重点

●多媒体网页设计的基本步骤

●Fireworks图片处理与图片文字设计

●新建网站和网页插入多媒体的方法

教学难点

●多媒体网页设计的基本步骤（学生对整个制作流程比较难掌握）

●Fireworks图片文字设计（学生要设计比较漂亮的文字标题有一定难度）

●Flash动画设置成透明参数设置(学生不易记住参数)

教学过程

教师活动学生活动对应目标教师引入：

先通过提问的方式和多媒体展示方式介绍网页多媒体元素与多媒体网页。

教学过程：

目标一：多媒体网页设计的基本步骤介绍

目标二：网页设计资料准备

1.建立文件夹

在D：盘中新建一个文件夹：MyWeb作为站点文件夹；进入MyWeb新建一个Images文件夹用来存放图片动画与声音等资料。

2.下载与整理资料

打开邓老师制作的“网页设计”精品课程网站，进入[教学资源]栏目，下载“网页实例素材下载” exp.rar 学生凭自己对多媒体

网页的认识回答问题

学生观看老师多媒体

课件演示与老师操作

演示。

打开“网页设计”网

站，下载网站所需的

资料。

让学生了

解网页多

媒体元素

与认识多

媒体网页

通过观看演

示，了解资

料准备的操

作步骤与方

法。

为网页设

计准备素

材。

压缩文件，并解压缩。

把文件夹：\exp\ch03 里的内容复制到你的站点文件夹d:\MyWeb中。

目标三：Fireworks图片处理

1.打开图片并调整图片大小

启动Fireworks软件。

打开Images文件夹中的1.jpg图片作为网页的界面图片。

2.图片处理

调整图片大小为960 X 450像素。目的是为制作的网页能适应屏幕分辨率为1024*768以上的电脑。

导入Images文件夹中的logo.jpg图片，并进行图片处理，作为“我的博客”Logo。

在图片中的指示木牌处加入文字“进入”，以后作为链接到主页的锚点。

3.文字标题设计

输入“记录与青春有关的日子”文字。

对文字进行效果处理：

1）设置字体的颜色。

2）使用滤镜功能进行文字发光描边。

3）使用滤镜功能进行文字投影处理。

4）用钢笔工具画一个波浪线。

5）选中文字与路径选择[文本]下的“附加到路径”功能。并用部分选定工具进行文字调整。

4.图片导出

1）保存原文件

把处理好的图片进行原文件保存到站点的Images 文件夹中。命名为:main.png 方便以后进行修改。

2）图片导出

选择“优化”面板，选择“JPG”格式。

选择[文件]菜单下的“导出”功能，把文件导出到站点的Images文件夹中，命名为:main.jpg

5、学生使用电脑进行实操练习。

目标四：网页设计

1.新建站点

启动Dreamweaver

选择[站点]菜单-->新建站点，出现“新建站点”对话框。单击“高级”标签，在对话框中输入站点名称：“个人博客”，然后选择站点的文件夹：d:\ MyWeb 学生观看老师多媒体

课件演示与老师操作

演示。

学生打开“网页设计”

网站进行自主学习，

并根据要求进行实操

练习。

通过网站

自主学习

与实操完

成目标二、

三的内容。

2.新建网页

3. 网页布局

为了适应1024*768分辨率以上的电脑，我们布局的表格大小设置为：960像素，高度适当。

4.插入图片

在布局好的表格中插入设计好的images\main.jpg图片作为网页的主界面。

5.插入Flash

1）在图片上画一个图层

2）选择“常用”功能面板下的“插入FLASH”功能，选择站点images文件夹的yezi.swf文件。

3）选中FLASH动画，在属性栏中点击[参数]功能，在对话框中输入参数：wmode 了值为：transparent 6.超链接与背景音乐

1）超链接

通过图片热点链接到main.htm

思考：如何通过插入flash按钮连接到main.htm？2）加背景音乐

插入“插件”，并选中背景音乐文件images/music.wma

把插件的宽与高设置为0 (主要是为了看不见控件) 3）测试网页，完成制作。

7、学生通过学习网站进行自主学习，并使用电脑进行实操练习。

总结：通过对“个人博客”多媒体网页实例的制作讲解。让同学们综合运用工具完成网页作品，并掌握以下知识点：

1、多媒体网页设计的基本步骤

2、Fireworks界面设计操作方法

3、Dreamweaver网页排版方法

4、掌握插入多媒体、超链接与背景音乐的操作方法。

课后作业：

根据老师提供的素材，完成“个人博客”多媒体网页的设计，要求完成的网页作业集图像、声音、动画与文字一体的个性化设计。完成后上交站点给老师。学生打开“网页设计”

网站进行自主学习，

并根据要求进行实操

练习。

通过网站

自主学习

与实操完

成整个网

页的设计。