网页制作技术教案免费学技术改变生活

第一模块 Fireworks

教学课题：

第十章Fireworks8入门

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.了解Fireworks的功能和新特性

2.掌握Fireworks的工作界面、工具箱、面版组等

3.掌握Fireworks基本文档操作

4.掌握有关图像编辑的基本概念

知识点：

教学重点：

1.Fireworks的工作界面

2.文档的基本操作

3.像素的概念

教学难点：

1.Fireworks的工作界面

2.矢量图和位图的区别

突破难点的关键：

1.实例讲解，区别对比

作业布置：

1.课本第125页填空题，直接做在书上

2.作业本：写出矢量图与位图的区别

本课小结：Fireworks8是一款用来设计网页图形的多功能应用程序。随着版本的不断升级，功能的不断加强，Fireworks受到愈来愈多图像网页制作者的青睐。目前最新版本Fireworks8更是以它方便快捷的操作没事和在位图编辑、矢量图形处理与GIF动画制作功能上的多方面优秀整合，有的诸多好评。通过本课的学习，应该掌握以下内容：认识Fireworks8工作区，掌握基本的文档操作，掌握图像编辑的基本概念。

新课引入：第十一章使用Fireworks8制作图片

11.1路径的绘制与编辑；

11.文本的创建与编辑····················································································

教学过程与时间分配：

一、Fireworks8界面与功能简介：（约50分钟）

(一)Fireworks8的新功能：

(二)Fireworks8的工作区域：标题栏、菜单栏、工具栏、工具箱、属性面板、面版组合、

文档窗口、标尺辅助线、

二、基本文档操作：（约20分钟）

(一)创建新文档：

(二)打开和关闭已有文档：

(三)保存文档：

(四)还原打开的文档：文件-还原

(五)使用【历史记录】面版撤销和重复多个动作：

三、有关图像编辑的基本概念：（约30分钟）

(一)矢量图形：

1.概念：使用“矢量”的线条和曲线（包含颜色和位置信息）呈现的图形。

2.特点：

（1）用数学方式来描述曲线的组成

（2）组成基本单元是锚点和路径

（3）与分辨率无关

(二)位图图像：（点阵图，格栅图）

1.概念：有排列成网络的像素点组成。

2.特点：

（1）与分辨率无关

（2）放大后会失真

(三)像素：

1.概念：组成位图图像的基本单位。

2.两个属性：特定的位置和颜色值

3.图像的大小和像素尺寸成正比

(四)分辨率：

1.概念：图像单位长度内含有的像素量。

2.特点：分辨率越高，图像质量越好

3.分类：显示分辨率，打印机分辨率（输出分辨率）

第一模块 Fireworks

教学课题：

第十一章使用Fireworks8制作图片（1）

11.1路径的绘制与编辑；

11.文本的创建与编辑

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.了解Fireworks路径绘制与编辑

2.掌握Fireworks的文本的创建与编辑

3.掌握Fireworks编辑位图对象的方法

知识点：

教学重点：

1.路径绘制

2.路径对象的编辑

3.为路径对象设置描边、填充、不透明度及效果

4.文本的创建与编辑

5.编辑位图对象

教学难点：

1.绘制自动形状：自动形状是矢量对象组

2.钢笔工具：绘制直线或者曲线

3.通过编辑节点变形路径

4.按路径改变文本的排列方式：文本-附加到路径

5.选区制作与调整

突破难点的关键：

实例讲解，区别对比

作业布置：

3.课本第174页填空题，直接做在书上

4.作业本：写出如何设置描边类型

本课小结：在Fireworks8中，可以创建及编辑多种对象，如路径对象，文本对象及位图对象等。通过本章的学习，应该掌握以下内容：路径的绘制与编辑，文本的创建与编辑，编辑位图对象，对象操作，使用图层和蒙版。

新课引入：第十一章使用Fireworks8制作图片

11.3编辑位图对象；

11.4对象操作····················································································

教学过程与时间分配：

一、路径绘制与编辑：（约50分钟）

(一)路径绘制工具简介：

1.直线工具：

2.矩形、圆角矩形、椭圆及多边形工具：

3.绘制自动形状：自动形状是矢量对象组

4.钢笔工具：绘制直线或者曲线

5.矢量路径工具：

(二)路径对象的编辑：

1.通过编辑节点变形路径：指针工具或自动选取工具

2.使用矢量工具进行编辑：弯曲、推拉、重画、分割路径

3.通过路径操作命令编辑路径：路径的混合、简化、扩展收缩、变形和扭曲

4.对象的变形和扭曲

5.使用“自动形状属性”面版编辑形状

(三)为路径对象设置描边、填充、不透明度及效果

1.设置颜色

2.设置描边类型：属性—描边类型

3.设置效果

(四)使用【样式】面版：描边，填充、和效果设置的综合运用

二、文本的创建与编辑：（约50分钟）

(一)输入与编辑文本：属性面版

(二)对文本设置描边、填充、效果和样式：

(三)按路径改变文本的排列方式：

1.将文本附加到路径：文本—附加到路径

2.改变文本路径：

3.将文本从路径上脱离

(四)文本变形

(五)将文本转换为路径：文本-转化为路径

实验1：网页广告的设计—“香巴拉牛肉干”

实验课时：2课时

实验环境：windows XP，网页三剑客

实验设备：电脑

实验目的：

1.了解Fireworks的功能和新特性

2.掌握Fireworks的工作界面、工具箱、面版组等

3.掌握Fireworks基本文档操作

4.掌握有关图像编辑的基本概念

5.了解Fireworks路径绘制与编辑

6.掌握Fireworks的文本的创建与编辑

7.掌握Fireworks编辑位图对象的方法

实验过程：

一、新建Fireworks文档，设置大小为800*600，分辨率默认

二、使用矩形工具绘制800*600的矩形作为广告背景设，并填充红到黄的渐变色

三、使用智能多边形—星型工具绘制多角形（角数大于8），设置渐变填充色为黄到红

四、调整星形的内径和外径及圆度，最后成为放射状

五、使用多边形工具绘制白色无边框五角星，缩小，调整透明度

六、将五角星复制多个，并拖到合适的位置，围成圆形

七、使用文本工具，添加“香巴拉”和“牛肉干”字样

八、为文本设置字体，大小，填充黑色，白色描边

九、使用变形工具中的“扭曲工具”，将文字调整角度，呈现立体效果

十、保存源文件为“香巴拉牛肉干广告”

十一、再导出jpg网页格式图片

第一模块 Fireworks

教学课题：

第十一章使用Fireworks8制作图片（2）

11.3编辑位图对象；

11.4对象操作

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.掌握Fireworks编辑位图对像

2.掌握Fireworks对象操作

知识点：

教学重点：

1.创建位图对象的方法

2.选区制作与调整

3.图像的擦除、填充、复制与修饰

4.编辑位图对象

5.对象操作

教学难点：

1.绘制位图对象

2.使用滤镜和插件：可以增强和改善图像效果

3.对象的堆叠、成组与对齐

突破难点的关键：

实例讲解，区别对比

作业布置：

1.课本第174页填空题，直接做在书上

2.作业本：如要一次撤销或重复多步操作，应采用什么方法

本课小结：在Fireworks8中，可以创建及编辑多种对象，如路径对象，文本对象及位图对象等。通过本章的学习，应该掌握以下内容：路径的绘制与编辑，文本的创建与编辑，编辑位图对象，对象操作，使用图层和蒙版。

新课引入：第十一章使用Fireworks8制作图片（3）

11.5使用图层和蒙版····················································································

教学过程与时间分配：

一、编辑位图对象：（约50分钟）

(一)创建位图对象的方法：5种方法

(二)选区制作与调整：

1.制作选区

2.调整选区

(三)绘制位图对象：

1.使用铅笔工具绘制位图对象

2.使用刷子工具绘制位图对象

(四)图像的擦除、填充、复制与修饰：

1.使用橡皮擦工具擦除像素

2.使用油漆桶和渐变工具填充像素

3.使用橡皮图章工具复制像素

(五)裁剪位图

(六)选区的变形

(七)使用滤镜和插件：可以增强和改善图像效果二、对象操作：（约50分钟）

(一)对象的选择、移动、复制与删除

1.对象的选择方法

2.移动、复制和删除对象

(二)对象的堆叠、成组与对齐

1.对象堆叠

2.对象成组：修改—组合

3.对其对象：修改—对齐

(三)操作的撤销与恢复：历史记录面版

第一模块 Fireworks

教学课题：

第十一章使用Fireworks8制作图片（3）

11.5使用图层和蒙版

11.6 综合练习

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.掌握Fireworks使用图层和蒙版

2.掌握Fireworks图像编辑实例

知识点：

教学重点：

1.图层和蒙版的概念

2.图层操作：展开、折叠、显示、隐藏、锁定、取消、设置当前图层、新建、复制等

3.设置对象子层的不同透明度和颜色混合模式

教学难点：

1.使用蒙版

2.蒙版的替换，禁用和删除

3.对象与蒙版的链接

突破难点的关键：

实例讲解，区别对比

作业布置：

1.课本第174页填空题，直接做在书上

2.作业本：图层和蒙版的概念是什么，有什么作用？

本课小结：在Fireworks8中，可以创建及编辑多种对象，如路径对象，文本对象及位图对象等。通过本章的学习，应该掌握以下内容：路径的绘制与编辑，文本的创建与编辑，编辑位图对象，对象操作，使用图层和蒙版。

新课引入：第十二章 Web图像制作技术····················································································

教学过程与时间分配：

一、使用图层和蒙版：（约50分钟）

(一)图层和蒙版的概念：

1.图层：可以方便的调整对象的叠加顺序，显示或隐藏，对未向设置透明度与颜色混合模

式，以及管理蒙版等。

2.蒙版：实际上是256色的荼毒图像，必须与图层的基本内同配合才能发挥作用。白色为

透明区，黑色为不透明去，灰色为半透明区。

(二)【层】面版组成：

(三)：设置对象子层的不同透明度和颜色混合模式

1.展开、折叠图层

2.显示、隐藏

3.锁定、取消

4.设置当前图层

5.新建

6.复制

7.重命名

8.删除

9.调整顺序

10.移动

11.分散各层

12.隐藏其它层

13.锁定其它层

(四)设置对象子层的不同透明度和颜色混合模式：

1.色彩增值

2.屏幕

3.暗变

4.亮度

5.差异

6.色相

7.饱和度

8.颜色

9.发光度

10.反转

11.色调

12.擦除

13.平均

14.颜色加深

15.反转颜色

16.柔化加深

17.颜色渐淡

18.反选颜色

渐淡

19.柔化简单

20.柔光

21.模糊光

22.强光

(五)使用蒙版：

1.关于蒙版：

（1）矢量蒙版：

（2）位图蒙版：

2.创建和使用蒙版：

（1）使用“粘贴为蒙版”命令遮罩对象

（2）使用“粘贴为内部”命令遮罩对象

3.编辑蒙版：

（1）蒙版的替换，禁用和删除

（2）对象与蒙版的链接

（3）向被遮罩对象的选区添加对象

二、图像编辑：（约50分钟）

(一)通过路径操作命令编辑一组图像

(二)使用笔触和蒙版打造残破照片边缘效果

(三)综合实例：制作网站徽标

实验2：网站LOGO—“旅游网站徽标”

实验课时：2课时

实验环境：windows XP，网页三剑客

实验设备：电脑

实验目的：

1.掌握Fireworks编辑位图对像

2.掌握Fireworks对象操作

3.掌握Fireworks使用图层和蒙版

4.掌握Fireworks图像编辑实例

实验过程：

一、新建Fireworks文档，设置大小为640*480，分辨率默认

二、拖动标尺，调整出辅助线

三、使用椭圆工具绘制同心圆，修改—组合路径—打孔

四、使用矩形工具绘制矩形，克隆矩形，并旋转，将两个矩形联合

五、选中矩形和圆形，打孔，拆分

六、改变填充色

七、使用矩形工具绘制矩形，克隆并打孔，删除不必要形状

八、导入位图图像，粘贴于小圆内部

九、输入文本，调整么属性和位置

十、保存最终作品

第一模块 Fireworks

教学课题：

第十二章Web图像制作技术

12.1切片；

12.2热点和图像映射

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.掌握Fireworks切片使用

2.掌握Fireworks热点和图像映射的使用

知识点：

教学重点：

1.切片的概念和作用

2.创建不同切片的方法操作

3.切片的交互

4.热点和图像映射的作用

教学难点：

1.切片的交互

2.热点和图像映射

3.用热点常见变换图像

突破难点的关键：

实例讲解，区别对比

作业布置：

1.课本第208页填空题，直接做在书上

2.作业本：课本第208页简答题第一题，第二题

本课小结：热点、切片、按钮编辑器及弹出菜单编辑器使Fireworks8能够轻松地创建具有交互性的Web 图像。利用Fireworks8更可以创建包含活动的横幅广告，徽标和卡通形象的动画图形。通过本课的学习，应该掌握以下内容：创建热点，创建图像切片，为切片或热点附加行为，创建按钮及导航条，创建简单的GIF动画。

新课引入： 12.3按钮和弹出来的菜单；

12.4创建简单的GIF动画····················································································

教学过程与时间分配：

一、切片：（约50分钟）

(一)切片的概念：

1.用于创建交互的性的基本构造块

2.优点：

（1）优化：

（2）交互性

（3）更新网页的某些部分：

(二)创建切片：

1.创建矩形切片：

2.创建多边形切片：

3.基于对象创建切片：编辑—插入—热点

4.创建HTML切片：指定浏览器中出现普通HTML文本的区域

(三)显示和隐藏切片：

1.隐藏切片：不会影响该对象导出到HTML

2.显示切片：

(四)编辑切片：

1.移动切片辅助线以编辑切片：使用工具编辑切片对象：

2.使用属性面版编辑切片对象：

(五)切片的交互：

1.使切片具有简单的交互效果

2.使用行为面版向切片添加交互效果

二、热点和图像映射：（约50分钟）

(一)概念：使较大图像中的各个小部分产生交互，并将网页图形的却与链接到URL

(二)创建热点：工具面版—web区域

(三)编辑热点：

(四)创建图像映射：

(五)用热点常见变换图像：一个热点只能出发一个不相交的变换图形。

第一模块 Fireworks

教学课题：

第十二章Web图像制作技术

12.3按钮和弹出来的菜单

12.4创建简单的GIF动画

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.掌握Fireworks按钮和弹出来的菜单的制作

2.掌握Fireworks创建简单的GIF动画的操作

知识点：

教学重点：

1.关于按钮状态的特点和功能

2.创建按钮和编辑按钮的方法

3.创建导航栏的作用和创建方法

4.弹出菜单的功能和创建方法

教学难点：

1.创建帧-帧GIF动画

2.通过元件和实例制作动画

3.结合使用层和帧制作动画

突破难点的关键：

实例讲解，区别对比

作业布置：

3.课本第208页填空题，直接做在书上

4.作业本：课本第208页简答题第三题，第四题

本课小结：热点、切片、按钮编辑器及弹出菜单编辑器使Fireworks8能够轻松地创建具有交互性的Web 图像。利用Fireworks8更可以创建包含活动的横幅广告，徽标和卡通形象的动画图形。通过本课的学习，应该掌握以下内容：创建热点，创建图像切片，为切片或热点附加行为，创建按钮及导航条，创建简单的GIF动画。

新课引入：第十三章图像优化与导出

13.1图像优化；

13.2图像导出····················································································

教学过程与时间分配：

一、按钮和弹出来的菜单：（约50分钟）

(一)创建按钮元件：

1.在按钮编辑器中创建的按钮具有的特点：（7点）

2.关于按钮状态：

（1）释放状态：按钮的迷人外观或静止时的外观

（2）滑过状态：指针滑过按钮的外观

（3）按下状态：单击后的按钮

（4）按下时滑过：用户将指针滑过出狱按下状态的按钮时的外观

3.创建按钮：编辑—插入—新建按钮

4.编辑按钮：修改—元件—编辑元件

(二)使用系统提供的元件按钮：编辑—库—（主题、动画、按钮、项目符号）

(三)创建导航栏：

1.导航栏的概念：提供到网站不同区域链接的一组按钮

2.创建方法：创建按钮元件，复制多次，修改：

(四)创建弹出菜单：

1.弹出菜单编辑器：弹出菜单是一个带有选项卡的对话框创建弹出菜单：行为面版—设

置弹出菜单

二、常见简单的GIF动画：（约50分钟）

(一)创建动画的准备工作：

1.创建新文档：

2.创建简单的“帧—帧”动画，或过度动画

3.设置帧延迟

4.观察动画播放速度

5.优化和输出文档为GIF动画

(二)帧-帧GIF动画实例

(三)使用“分散到帧”按钮制作动画：

(四)通过元件和实例制作动画：

1.建立和编辑元件

2.使用“补间实例”制作动画

3.使用“选择动画”制作动画

(五)结合使用层和帧制作动画

1.添加、移动、复制、编辑和删除帧

2.设立背景

实验3 网页效果图—“国庆60周年”

实验课时：2课时

实验环境：windows XP，网页三剑客

实验设备：电脑

实验目的：

1.掌握Fireworks切片使用

2.掌握Fireworks热点和图像映射的使用

3.掌握Fireworks按钮和弹出来的菜单的制作

4.掌握Fireworks创建简单的GIF动画的操作

实验过程：

1.建立大小为800*600的文档，设置背景色为红色#EC2623

2.页面上方字样

“热烈庆祝中华人民共和国成立”和“周年”，发光效果（#FF9900）

3.“60”颜色为红#EC2623到黄#FF9900的渐变色，使用浮雕效果

复制“60”，放大，使用高斯模糊，并调整到文字后方

4.使用钢笔工具绘制光晕，复制，调整颜色和透明度及角度

5.页面四角腾龙图案（30分）使用图层混合效果，尽量与背景融合。

6.“首页”图片，发光效果#DF0000，且链接到新疆交通学校的主页：

https://www.360docs.net/doc/474427179.html,

7.“殷殷贺词”添加滤镜效果

8.页底英文，发光效果

9.把做好的图片利用切片工具生成网页，图片放入”image”文件夹

第一模块 Fireworks

教学课题：

第十三章图像优化与导出

13.1图像优化；

13.2图像导出

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.掌握Fireworks图像优化

2.掌握Fireworks图像导出

知识点：

教学重点：

1.最佳文件格式的选择

2.了解每种格式特定的选项

3.调整图形中的颜色

4.导出参数设置

5.在Dreamweaver8中使用Fireworks8文档

教学难点：

1.每种文件格式的特点和区别

2.文件格式各个参数的设置

3.导出文件格式选项

突破难点的关键：

实例讲解，区别对比

作业布置：

1.课本第216页填空题，直接做在书上

2.作业本：课本第216页简答题第一题

本课小结：网页图形设计的最终目标是创建能够尽可能的快的消灾就没图像。为此，必须在最大限度的保障图像配置的同时，还要选择压缩质量最高的文件格式。这种平衡就是优化，即寻找颜色、压缩和配置的最佳组合。通过本章的学习，应该掌握以下内容：优化图像，导出多种格式图像文件。

新课引入：第十四章初识Flash8 ····················································································

教学过程与时间分配：

一、图像优化：（约50分钟）

(一)关于优化：

1.选择最佳文件格式：

2.设置格式特定的选项：

3.调整图形中的颜色：

(二)使用【优化】面版：窗口—优化

二、图像导出：（约50分钟）

(一)导出参数设置：

1.设置导出文件的名称：

2.设置保存类型：

（1）HTML和图像

（2）仅图像

3.设置HTML代码的导出方法：

（1）导出HTML文件

（2）复制到剪贴板

4.设置切片的导出方法：

（1）无

（2）导出切片

（3）沿沿引导线切片

5.其他设置：

6.导出文件：

(二)导出选定区域的方法：工具—选择—导出区域

(三)在Dreamweaver8中使用Fireworks8文档：插入—图像对象三、实践——导出图像：文件—图像预览

第一模块 Fireworks

教学课题：

综合练习

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.掌握Fireworks综合使用技巧

2.掌握Fireworks网页图像处理技巧

知识点：

教学重点：

1.图像的绘制

2.色彩的调节

3.调整图形中的颜色

4.库和样式的应用

5.图像的优化和导出

教学难点：

1.特殊图像的绘制和编辑技巧

2.文件格式各个参数的设置

3.交互功能的使用

突破难点的关键：

实例讲解，区别对比

作业布置：

1.课本第216页填空题，直接做在书上

本课小结：网页图形设计的最终目标是创建能够尽可能的快的消灾就没图像。为此，必须在最大限度的保障图像配置的同时，还要选择压缩质量最高的文件格式。这种平衡就是优化，即寻找颜色、压缩和配置的最佳组合。通过本课的学习，应该掌握以下内容：优化图像，导出多种格式图像文件。

新课引入：第十四章初识Flash8 ····················································································

教学过程与时间分配：

一、制作按钮：（约10分钟）

(一)插入按钮元件：

1.制作按钮释放状态：圆角矩形、形状编辑、填充变形、文本编辑

2.制作按钮释放状态：

3.制作按钮释放状态：

4.制作按钮释放状态：

(二)剪裁画布：

(三)导出图像：

二、导航栏的制作：（约20分钟）

(一)将按钮保存：：

(二)新建文件，导入元件

(三)多次将元件拖入画布，并设置其对齐和间距

(四)预览

三、弹出菜单的制作：（约20分钟）

(一)选中需要设置弹出菜单的图像：

(二)在行为面版添加“设置弹出菜单”

(三)设置菜单的内容、外观、位置等参数

(四)预览

四、制作帧帧动画：月亮升起（约50分钟）

(一)新建画布，设置背景：

(二)绘制各种形状的月亮

(三)将月亮分布在帧上

(四)预览动画

第二模块 Flash

教学课题：

第十四章初识Flash8

计划课时：2课时

授课形式：多媒体教学

教学辅助：投影，电脑

教学目的与要求：

1.掌握Fireworks图像优化

2.掌握Fireworks图像导出

知识点：

教学重点：

1.Flash8的用途与特点

2.Flash8的特点

3.Flash8的工作环境

4.创建Flash文件

教学难点：

1.Flash8的特点

2.Flash8的工作环境

突破难点的关键：

实例讲解，区别对比

作业布置：

1.课本第227页填空题，直接做在书上

本课小结：本课主要介绍Flash的诞生、用途、特点、工作环境、基本概念及基本操作等基础知识。通过本章的学习，应该掌握以下内容：Flash的用途、特点和基本概念，Flash的工作环境，Flash的基本操作。

新课引入：第十五章绘制与编辑适量····················································································

教学过程与时间分配：

一、Flash8简介：（约20分钟）

二、Flash8的用途与特点：（约30分钟）

(一)Flash8的用途：

1.绘制矢量图：

2.制作动画：

3.开发游戏：

(二)Flash8的特点：

1.矢量图形模式：占用空间小

2.文件的小型化：重复运用元件

3.支持交互：通过键盘、鼠标等工具，通过单击按钮、选择菜单等方式控制动画的播放

4.作品下载方便：流媒体