第一篇:网页设计与制作教案免费学技术改变生活
网页设计和发布流程
第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布
第一节 站点的规划与创建
【教学目的与要求】
一、规划站点
二、创建一个站点 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】: 基础知识:规划站点 重点知识:创建一个站点 2课时
【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、规划站点
Web站点是一组具有共享属性(如相关主题、类似的设计或共同目的等)的链接文档。
本地站点:是本地硬盘中存放远程网站所有文档的地方(文件夹)。建立网站的通常做法是:在要地硬盘中建立一个文件夹用来存放网站的所有文件,往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后,再把它们拷贝到网站上供浏览者浏览。
1、规划站点结构 注:规划站点的结构之前应先用笔绘出站点的结构图(如下图所示是一个典型的学校站点的结构图)
2、规划站点的浏览机制 一般可采用以下的方法: 创建返回主页的链接 显示网站专题目录 显示当前位置 搜索和索引
反馈(将网页创作者或网站管理员公布在网页上,或创建一个E-MAIL超级链接,以使用户能快速地将信息反馈到网站中)
二、创建一个站点 步骤:
1、单击“文件”---“新建”---“站点”命令(或单击常用工具栏中“新建网页”按钮的下拉箭头,从打开的下拉菜单中选择“站点”命令)
2、选择一种站点模板或向导
3、单击“确定”按钮
三、站点的基本操作
1、打开站点:“文件”---“打开站点”
2、删除站点:
方法一:在Windows资源管理器中删除一个站点
方法二:在FrontPage中删除站点,在“文件夹”视图或“网页”视图的“文件夹列表”中,右击站点所对应的目录,在快捷菜单中单击“删除”命令
3、站点的设置
“工具”----“站点设置”,有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡 【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第二节 利用表格进行网页布局
【教学目的与要求】
一、插入表格
二、单元格的基本操作 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识: 插入表格 重点知识:单元格的基本操作 【教学组织过程】2课时 2课时
1.上讲回顾 2.教授新知 【授课内容】
一、插入表格
1、单击常用工具上的“插入表格”按钮
2、单击“表格”---“插入”---“表格”命令
3、使用表格工具栏(“查看”—“工具栏”---“表格”命令)
4、由文本转换(“表格”—“转换”—“文本到表格”)一般以段落为分行标记,以逗号或句号为分列标记。
二、单元格的基本操作
1、选择单元格(“表格”—“选定”—“单元格”)Ctrl:可选择不相邻的单元格 Shift:选择多个相邻的单元格
2、插入单元格(“表格”—“插入”—“单元格”)
3、合并单元格(“表格”—“合并单元格”或“表格工具栏”上的“合并单元格”按钮)
4、拆分单元格(“表格”—“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮)
三、填充单元格
1、文本与图像填充(“插入”—“图片”)
2、对齐文本与图像(“表格”—“属性”—“单元格”,“水平对齐方式”、“垂直对齐方式”)
3、修改单元格背景(“表格”—“属性”—“单元格”,“背景”)
4、调整边框颜色(“表格”—“属性”—“单元格”,“边框”)
5、改变单元格尺寸(“表格”—“属性”—“单元格”,“指定宽度”、“指定高度”)
四、修改表格的行与列
1、选择行与列
2、插入行与列(“表格”—“插入”—“行或列”)
3、均分行与列(“表格工具栏”中的“平均分配行高”或“平均分配列宽”)
4、删除行与列(“表格工具栏”中的“删除单元格”按钮或“表格”—“删除单元格”命令)【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第三节 利用框架设计网页布局
【教学目的与要求】
一、认识框架网页
二、创建框架网页
三、框架网页的保存和打开 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】: 基础知识:认识框架网页 重点知识:创建框架网页 【教学组织过程】2课时 2课时 1.上讲回顾 2.教授新知 【授课内容】
一、认识框架网页
1、框架的概念 框架网页是一种特殊的网页,它将自身分成几个区域,每个区域称作一个框架窗口(通常简称为框架)
框架具有以下特性:
每个框架都可以独立地显示一个网页,各个框架窗口之间可以设立超链接。每个框架窗口可以赋予一个名字,以便其他URL作为目标调用。
2、框架的使用场合(如邮箱、论坛)
通常用框架来显示在同一个站点中的多个超链接,这样可以不用浏览器中的“后退”按钮而方便的进行浏览。
框架也适用于类似在线书籍的应用,将目录显示在左边的框架中,单击目录,右边框架中显示相关的章节
二、创建框架网页
1、框架网页的创建
“文件”—“新建”—“网页”,选择“框架网页”选项卡
2、框架网页模板(10种)“设置初始网页” “新建网页”
三、框架网页的保存和打开
框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。
1、框架网页的保存
“文件”—“保存文件”或“框架”—“保存网页”
2、框架网页的打开 “框架”—“在新窗口中打开网页”
四、框架网页的属性
1、框架网页的属性 “文件”—“属性” “框架间距”、“显示边框”
2、框架的属性 “框架”—“框架属性”
五、调整框架布局
1、调整框架窗口的大小(用鼠标拖动或在“框架属性”对话框中调整)
2、框架的拆分
方法一:“框架”—“拆分框架”(按行或按列拆分)方法二:用鼠标拖动拆分(按Ctrl键)
3、框架的删除 “框架”—“删除框架”
六、目标框架
当在框架网页的某一个框架中定义超链接时,需要指定被链接的网页显示在哪一个框架中,即指定超链接的目标框架。
选择要设置超链接的文字或图像,“插入”—“超链接”,单击“目标框架”、“更改目标框架” 【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第四节 使用导航栏
【教学目的与要求】
一、定义导航结构
二、认识导航栏属性
三、创建导航栏 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识:定义导航结构 重点知识:认识导航栏属性 【教学组织过程】2课时2课时 1.上讲回顾 2.教授新知 【授课内容】
一、定义导航结构
在网页内添加导航栏之前,先建立该站点的导航结构 “视图”—“导航”按钮
二、认识导航栏属性 “插入”—“导航栏”按钮
“父层”:创建指向当前网页上一级网页的超链接,并将上一级网页的标题名称显示在导航栏内。
三、创建导航栏(要在浏览器中才可看到实际导航栏效果)
四、创建共享边框
用创建导航栏的方法只能在一个网页中创建导航栏,若需要导航栏出现在站点内多个网页的相同位置,则可将导航栏插入网页的共享边框内。
右击编辑窗口,单击“共享边框”命令 练习
二、利用框架设计一个企业网站的布局 要求有如下内容:关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第五节 网页布局功能的应用
【教学目的与要求】
一、创建布局表格
二、绘制布局表格 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】: 基础知识:创建布局表格 重点知识:绘制布局表格 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、创建布局表格
1、创建布局表格
打开一个空白网页,并切换到“设计”视图下,单击“表格”菜单中的“布局表格和单元格”命令,随后在右侧弹出一个任务窗口,在该任务窗口下面程序提供了多种表格布局模板,在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格
如果你对模板中提供的布局表格不太满意,还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”,随后将指针移到操作窗口最左端,然后拖动鼠标即可绘制表格。
3、设置表格属性 插入表格后,还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。
提示:在设置表格时,如果要想覆盖网页的默认边距,并让布局表格跨到文档窗口的边缘,可以将表格中的各个边距的属性都设置为0。
在设计框架时经常需要调整某一行或列的属性,这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框,每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头,如更改行高度时,单击此下拉箭头弹出一个下拉菜单,选择“更改行高”命令,在弹出的“行属性”对话框中重新输入该行高度值即可。
练习
三、使用布局功能设计学校网站
要求包括有以下内容:学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等 【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第六节 网页布局设计
【教学目的与要求】
一、文本的美化(“格式”—“字体”)
二、运用边框与阴影(“格式”—“边框与阴影”)
1、设置边框
2、设置阴影
【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识:文本的美化(“格式”—“字体”)
重点知识:运用边框与阴影(“格式”—“边框与阴影”)
1、设置边框
2、设置阴影
【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、文本的美化(“格式”—“字体”)
1、输入文本
2、美化文本(设置文本字体、字号)注:字符的大小共有6级,其中默认级别是3。
3、设置文本效果
4、改变文本颜色
5、设置字符间距
二、运用边框与阴影(“格式”—“边框与阴影”)
1、设置边框
2、设置阴影
三、使用列表(“格式”—“项目符号和编号方式”)
1、添加项目列表。
项目列表也称为无序列表,它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种:实心黑点、空心圆圈和实心方块。
2、添加编号列表
在网页中的内容存在顺序关系时,可应用编号列表。
3、添加定义列表
定义列表就是在网页内定义词汇、术语的列表,具体的定义内容将以首行缩进的方式出现在列表的下一行。(格式工具栏的“样式”—“定义的术语”,输入要词汇、术语,按回车键)
4、设置嵌套列表
要建立组合列表,可以先生成第1级列表,然后再生成第2级列表,依此类推。
建立组合列表的具体操作步骤如下:(1)先生成第1级列表(2)将光标移动到拥有第2级列表的第1级列表项目的末尾,然后按回车键。将出现一个空的列表行。
(3)单击“格式工具栏”中的“增加缩进”图标。该行变为一个空白行,是没有列表编号或项目符号的。再单击一次“增加缩进”图标。(4)此时再按照建立列表的方法构造第2级列表。
(5)输入第2级列表。输入过程中每次接回车键就自动生成第2级列表项目。(6)第2级列表输入完毕后,将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。
嵌套列表可以转变为可折叠大纲,这样在浏览器中浏览时,就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下:(l)按生成复合列表的方法构造好这个复合列表所有的列表级次。
(2)选择“格式”菜单中的“项目符号和编号方式”命令,打开“项目符号和编号方式”对话框,或者在列表中单击右键,从弹出的菜单中选择“列表属性”命令。
(3)在打开的对话框中,选中“启用可折叠大纲”复选框。(4)单击“确定”按钮。
练习
四、设计一个介绍阳江风景及特产的网页
要求:设计一个网页介绍阳江的风景及特产,要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第七节 网页装饰设计
【教学目的与要求】
一、添加图像
二、处理图像 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识:添加图像 重点知识:
二、处理图像 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、添加图像
在浏览器中,能处理的图片格式只有GIF、JPEG格式和PNG格式等少数几种图片。
1、GIF格式图片
GIF格式最多能支持256种颜色(8位颜色)。可以具有透明、动画等特殊效果。
2、JPEG格式文件
JPEG格式可以处理高达1670万种颜色(24位颜色),所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。
插入本地计算机上的图像(“插入”—“图片”—“来自文件”,“从计算机选择一个文件”)
插入WEB上的图像(“插入”—“图片”—“来自文件”,“从WEB浏览器来选择网页或文件”)
二、处理图像
1、剪裁图像(“图片”工具栏—“剪裁”按钮)
2、设置透明背景(“图片”工具栏—“设置透明色”按钮)
三、添加文本(“图片”工具栏—“文本”按钮)
四、保存图像
注:默认情况下,当前站点的图像文件保存在Images文件夹中
五、运用特殊效果
1、调整图片的亮度和对比度
2、图片的翻转与旋转
3、图片的冲蚀和黑白处理
4、凹凸效果
六、设置图片对齐方式(“图片属性”—“外观”—“布局”—“对齐方式”)
七、使用水平线
水平线是贯穿网页宽度的细灰条,用于分隔文本或加着重符。添加水平线后,可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题,则会使用图形来代替水平线以匹配主题。
1、插入水平线
2、设置水平线属性
八、修改网页背景(“格式”—“背景”)
1、调整背景色彩
2、调整背景图案
九、创建交换图像(DW 2004)
1、插入交换图像(“插入”—“图像对象”—“鼠标经过图像”)“原始图像”、“鼠标经过图像”、“按下时,前往的URL”
2、预览交换图像:F12 【课程小结】a 【作业】
1.5 课后练习书本课后练习作业
第八节 创建超链接
【教学目的与要求】
一、与当前站点的链接
二、与空白网页的链接
三、与电子信箱的链接 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识:创建热点 重点知识:与电子信箱的链接 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、与当前站点的链接(“插入”—“ 超链接”,“搜索”当前站点的文件夹位置)
二、与空白网页的链接(“插入”—“ 超链接”,“创建一网页并链接到该网页”)
三、与电子信箱的链接(“插入”—“ 超链接”,“制作发送电子邮件的超链接”)
四、与Web的链接(“插入”—“超链接”,“使用WEB浏览器来选择网页或文件”,ALT+TAB,则网页地址自动添加到URL中)
五、修改链接颜色(“网页属性”—“背景”,“颜色”—“超链接”、“已访问的超链接”、“当前超链接”)
六、使用图像地图
1、创建热点
在图片中创建热点的具体操作步骤如下: 选中要建立热点的图片。图片被选中后,四周将出现8个控制方块,并且“图片工具栏”被激活。
在“图片工具栏”中,选择热点的形状的图标。可以选择长方形、圆形或多边形。
将鼠标移动到图片中。这时,鼠标指针变成一支笔的模样。
用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合
热点绘制完毕,图片中将出现该热点的边框。打开“插入超链接”对话框,建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。
练习
五、设计一个介绍一年四季风景的网站 要求:
用到嵌套列表、框架、超链接、图像热点等技术。【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第九节 表单设计
【教学目的与要求】
一、认识表单
二、生成表单
三、表单内容编辑 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识:认识表单 重点知识: 表单内容编辑 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、认识表单
表单的作用:表单就是浏览者可以在网页中填写信息的表格,其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。
二、生成表单
1、表单的创建与表单字段的添加 “插入”—“表单”
2、表单向导
“文件”—“新建”—“网页”--“常规”——“表单网页向导”
三、表单内容编辑
1、单行文本框
2、滚动文本框
3、复选框
4、单选按钮
5、下拉菜单
6、按钮
7、图片
8、标签
9、隐藏的表单字段
四、验证性表单字段(“验证有效性按钮”)
五、表单处理程序
右击表单,选择“表单属性”命令,提供了保存表单数据的三种不同处理方式:
1、发送到文件(单击“选项”按钮”,进行设置)
2、发送到数据库
3、讨论表单处理程序
4、注册表单处理程序
5、自定义ISAPI、NSAPI、CGI或ASP脚本 练习六:制作表单
制作一个注册信息表单,要求包括下面的内容:会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、常用电话、收货地址、邮政编码、提交按钮、重填按钮 【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第十节 层及应用(DW 2004)
【教学目的与要求】
一、层概述
二、创建层 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识:层概述 重点知识:创建层 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、层概述
层(Layer)是一种 HTML 页面元素,您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。
二、创建层
方法一:“插入”—“布局对象”—“层”
方法二:“插入”工具栏—“布局”—“ 描绘层”,按住鼠标拖动 方法三:“插入”工具栏—“布局”,拖动“ 描绘层”按钮到文档窗口(按CTRL键,可绘制多层)
三、通过拖动周围的黑色调整柄控制层的大小
四、拖动层左上角的选择柄可以移动层的位置。
五、单击层标记可以选中一个层。(显示层标记的方法:“编辑”—“首选参数”—“分类”—“不可见元素”
六、显示层面板(“窗口”—“层”)
1、层的隐藏与显示
2、层数
3、层重叠
七、层和表格之间的转换(在转换为表格之前,请确保层没有重叠。)“修改”—“转换”—“层到表格”
若要将表格转换为层,请选择“修改”—“转换”—“表格到层” 【课程小结】
【作业】
1.5 课后练习书本课后练习作业、第十一节 行为
【教学目的与要求】
一、行为概述 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识:行为概述 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、行为概述
行为是一种利用简单直观的语句设置手段,为网页对象添加一些动态效果和简单的交互功能的技术。行为是事件和由该事件触发的动作的组合。
下面给出一些常见事件的一些解释
onClick 单击
onDbclick 双击
onKeypress按键
onMouseDown鼠标按下
onMouseOut鼠标移出
onMouseOver鼠标移上
onMouseUp鼠标抬起。
实例:dreamweaver中网页折叠菜单的制作
第一步:先插入一个一行、两列的表格,方法:单击菜单上的“插入”,再选取“表格”,在“行”中输入1,在列中输入2,在单击“确定”。
把宽和高分别设为200px和30px 在两个单元格内分别输入 内容
第二步,在单元格内插入一个层。把宽和高分别设为100px和90px 第三步:在层中插入一个三行、一列的表格,方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。在三个单元格中输入内容
在层的属性栏中将“可视”设为“隐藏”,这样在打开网页时便看不见这个层
在“行为目标”中选择一个合适的浏览器,一般是选择“IE 4.0”。然后单击左边的“+”按钮,来添加行为。在弹出的菜单中选择“显示或隐藏层”,在弹出的窗口中选择 “Layer1”,就是我们刚才添加的那个层了,再单击“显示”
接着单击“事件”下面右边的那个向下箭头按钮,在弹出菜单中选择“当鼠标移上”(OnMouseOver)。
再单击“+”按钮,选取“显示或隐藏层”,还是选取“Layer1”,不过这次我们点击的是“隐藏”(Hide)了,再确定。然后选择“事件”,单击“当鼠标移开”(OnMouseOut)。【课程小结】
【作业】
1.5 课后练习书本课后练习作业
第十二节 HTML语言基础
【教学目的与要求】
一、HTML语言概述
二、HTML文件基本架构 【教学方法与手段】
多媒体教学:借助多媒体手段,进行课堂理论教学;
启发式教学:教学活动关注的重点从结果转向过程。激发思维,师生互动,增强学生学习的主动性、积极性和创造性; 【教学重点与难点】:
基础知识: HTML语言概述 重点知识:HTML文件基本架构 【教学组织过程】2课时 1.上讲回顾 2.教授新知 【授课内容】
一、HTML语言概述
当我们畅游Internet时,我们透过浏览器所看到的网站,是由HTML(HyperText Markup Language)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言,透过标记式的指令(Tag),将影像、声音、图片、文字等连结显示出来。
HTML标记是由 < 和 > 所括住的指令,主要分为 : 单标记指令、双标记指令(由 < 起始标记 >,< / 结束标记 >所构成)。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑,完成后(以.htm 或.html 为文件后缀保存)将HTML网页文件由浏览器打开显示,若测试没有问题则可以放到服务器(Server)上,对外发布信息。
二、HTML文件基本架构
文件开始
标头区开始第二篇:网页制作技术教案免费学技术改变生活
第一模块 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分钟)
(一)图层和蒙版的概念: 式,以及管理蒙版等。
2.蒙版:实际上是256色的荼毒图像,必须与图层的基本内同配合才能发挥作用。白色为透明区,黑色为不透明去,灰色为半透明区。(二)(三)【层】面版组成:
:设置对象子层的不同透明度和颜色混合模式 1.图层:可以方便的调整对象的叠加顺序,显示或隐藏,对未向设置透明度与颜色混合模1.展开、折叠图层 2.显示、隐藏 3.锁定、取消 4.设置当前图层 5.新建(四)
6.复制 7.重命名 8.删除 9.调整顺序 10.移动
11.分散各层 12.隐藏其它层 13.锁定其它层
设置对象子层的不同透明度和颜色混合模式:
1.色彩增值 7.饱和度 2.屏幕 8.颜色 3.暗变 9.发光度 4.亮度 10.反转 5.差异 11.色调 6.色相 12.擦除
(五)使用蒙版:
1.关于蒙版:(1)矢量蒙版:(2)位图蒙版: 2.创建和使用蒙版:
(1)使用“粘贴为蒙版”命令遮罩对象(2)使用“粘贴为内部”命令遮罩对象 3.编辑蒙版:
(1)蒙版的替换,禁用和删除(2)对象与蒙版的链接
(3)向被遮罩对象的选区添加对象
二、图像编辑:(约50分钟)
(一)通过路径操作命令编辑一组图像(二)使用笔触和蒙版打造残破照片边缘效果(三)综合实例:制作网站徽标
13.平均 14.颜色加深 15.反转颜色 16.柔化加深 17.颜色渐淡 18.反选颜色
渐淡 19.柔化简单 20.柔光 21.模糊光 22.强光 实验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,且链接到新疆交通学校的主页:http://www.xiexiebang.com 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.作品下载方便:流媒体 5.支持导入声音、视频:
6.支持跨平台动画播放:与其他软件很好的兼容性
三、Flash8的工作环境::(约30分钟)
(一)(二)(三)(四)(五)(六)(七)(八)(一)(二)(三)菜单栏:10个
工具栏:窗口—工具栏—主工具栏 工具箱:4个区域 时间轴:图层、时间轴
舞台:工作界面中央的的空白区域 场景:影片的片段 浮动面版:
属性面版:用于显示当前选择对象的属性 建新文件:两种方法 打开文件:三种方法 保存文件:三种方法
四、创建Flash文件:(约20分钟)
第二模块 Flash 教学课题:
第十五章 绘制与编辑适量
计划课时:2课时 授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash绘制工具的使用及矢量图的绘制 2.掌握Flash图像选取与控制 3.掌握Flash辅助工具的使用 4.掌握Flash修改矢量图形的操作 5.掌握Flash选项修改矢量图
知识点:
教学重点:
1.利用绘制工具绘图
2.利用钢笔工具绘制曲线并修改曲线 3.标尺、网格、辅助线的使用 4.任意变形工具的使用 教学难点:
1.锁定填充的理解和使用 2.使用箭头工具修改图形 突破难点的关键:
实例讲解,区别对比
作业布置:
1.课本第252页填空题,直接做在书上
本课小结:本章介绍绘图和编辑矢量图形的基本知识,为后面的Flash动画创作打下坚实的基础。通过本章的学习,应该掌握以下内容:熟悉工具箱中的各种绘图工具并能够使用绘图工具绘图,掌握视图的选取与控制方法,使用辅助工具进行绘图,适量图之间的覆盖关系,使用工具箱中的各种工具来修改矢量图。
新课引入:第十六章 编辑颜色和文本
···················································································· 教学过程与时间分配:
一、绘制工具及矢量图:(约10分钟)
(一)(一)工具中的绘图工具:shift+字母 直线:
二、利用绘制工具绘图:(约40分钟)
1.两种模式:对象绘制模式、普通模式 2.贴紧至对象:
3.水平、垂直、45度角的直线绘制:shift(二)椭圆
1.两种模式:对象绘制模式、普通模式 2.贴紧至对象: 3.正圆的绘制:shift(三)多边形
1.矩形:圆角的设置
2.多边形和星型:边数和顶点大小(四)铅笔
1.对象绘制:
2.绘图模式:伸直、平滑、墨水瓶(五)钢笔:可以精确的绘制直线或平滑曲线,并可以分段绘制
1.设置钢笔工具的参数:编辑—首选参数—绘画—钢笔工具 2.利用钢笔工具绘制直线段、曲线段(1)绘制直线段:点击(2)绘制曲线段:拖动
3.结束使用钢笔工具的方法:双击、点击钢笔工具按钮或按CTRL键在路径外点击(六)刷子:模仿真实画笔绘制矢量图形,绘制的是填充而不是线条
1.涂色模式:标准绘画、颜料填充、后面绘画、颜料选择、内部绘画 2.刷子大小与形状:
3.锁定填充;所有使用相同填充的区域将作为一个连续的填充图形
三、图像选取与控制:(约10分钟)
(一)箭头工具:选择工具
1.功能:
(1)选择对象:选择填充、选择线条、整体选择,选择多个(2)修改图形:修改边缘、修改顶点(3)移动对象:
2.箭头工具选项:平滑、拉伸(二)部分选取工具:
1.调整路径上的锚记点:
2.曲线段与直线段的相互转换:alt键 3.调整直线段的长度、角度和曲线段的斜率(三)套索工具:选择填充图形中的某一不规则部分
1.套索工具:
2.魔术棒工具:魔术棒工具 3.多边形套索:(四)(五)(一)(二)放大镜工具: 手形移动工具: 使用标尺:视图—标尺
使用网格:视图—网格—显示网格|编辑网格
四、使用辅助工具:(约10分钟)(三)(四)(一)(二)使用辅助线:视图—辅助线 使用贴紧:视图—贴紧
矢量图之间的覆盖关系:两个矢量图有部分互相重叠的时候,会分割和重组 利用工具箱中的工具修改矢量图:
五、修改矢量图形(约20分钟)
1.箭头工具 2.部分选取工具 3.橡皮擦工具:
(1)擦除模式:标准擦除、擦除线条、擦除填色、擦除所选填充;(2)水龙头:快速擦除所选填充(3)橡皮擦形状和大小: 4.任意变形工具:
(1)具有箭头工具部分作用:选择、移动(2)特有功能:缩放、翻转、倾斜、旋转(3)选项:贴紧至对象、旋转与倾斜、缩放
5.填充变形工具:修改渐变色,移动变色中心,调整填充大小和方向
六、利用菜单栏选项修改矢量图(约10分钟)
(一)(二)(三)(四)优化曲线:修改—形状—优化
将线条变为填充图:修改—形状—将线条转化为填充 宽展填充图:修改—形状—扩展填充 柔化填充边缘:修改—形状—柔化填充边缘 实验4绘制矢量图——“和尚与鱼”
实验课时:2课时
实验环境:windows XP,网页三剑客 实验设备:电脑 实验目的:
1.掌握Flash绘制工具的使用及矢量图的绘制 2.掌握Flash图像选取与控制 3.掌握Flash辅助工具的使用 4.掌握Flash修改矢量图形的操作 5.掌握Flash选项修改矢量图
实验过程:
1.建立大小为550*400的文档,设置背景色为#D2DAC2 2.将层命名为“脸”,使用椭圆绘制头,边框为#E9CC9C填充为#F5EAD3,并使用箭头进行轮廓的修改 3.新建“耳朵”层,使用椭圆工具以同样填充和线条色绘制耳朵,使用铅笔工具平滑模式,绘制耳郭,将耳朵复制、翻转,移动到相应位置。最后将耳朵层移至脸下方
4.新建“烟头烫”图层,使用刷子工具,填充色设置为#E9CC9C,进行和尚头部的烫点绘制 5.新建“左眼”层,使用椭圆工具,设置填充为黑色,线条无色绘制左侧黑色眼睛;使用刷子工具,填充色为白色,调整刷子大小,为眼睛添加白色反光。
6.新建“右眼”层,使用线条工具,颜色为黑色,调整线条粗细,拖动出眨眼眼型
7.新建“舌头”层,使用铅笔工具,平滑模式,线条色为#FF3366,绘制舌头,并使用填充工具填充颜色为#FF99CC 8.新建“脸红”层,使用椭圆工具,设置填充为粉红到透明的渐变,使用变形工具压扁,复制,并调整到相应位置
9.新建“袈裟”层,使用线条绘制梯形,使用箭头工具改变形状,并填充蓝白渐变,调整到“脸”层下方
10.新建“鱼”层,使用线条工具,设置颜色为#999966,绘制线条,使用箭头工具将其拖弯;使用变形工具将其移动到合适位置并拼合和鱼的形状,使用线条工具为鱼添加鱼鳍和鱼眼;将鱼复制多个,调整大小和方向 11.使用刷子工具,填充色为#999966,不断调整大小绘制装饰的点 12.保存原文件,导出动画
第二模块 Flash 教学课题:
第十六章 编辑颜色和文本
计划课时:2课时 授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash编辑颜色的方法 2.掌握Flash编辑文本的方法
知识点:
教学重点:
1.多种更改填充和线条颜色的方法 2.如何设置渐变填充 3.如何使用位图进行填充
4.使用墨水瓶工具改变线条和给填充描边 5.了解文本的类型和使用 6.创建不同类型的文本的方法 7.分离文本的方法的作用 教学难点:
1.设置填充色、填充渐变的操作
2.创建自动伸缩和固定宽度的静态文本,及属性设置 突破难点的关键:
实例讲解,区别对比
作业布置:
1.课本第267页填空题,直接做在书上
本课小结:在前面学习了绘图基础和修改矢量图的基本方法。本课学习的内容是编辑矢量图的颜色,使用、创建、编辑文本,文本的链接、文本的图形化及制作艺术字。通过本章的学习,应该掌握以下内容:使用工具箱或熟悉面版中的颜色按钮编辑矢量图的颜色,使用混色器编辑颜色及工具编辑颜色,使用渐变色或位图进行填充,使用、创建、编辑文本并设置文本属性和格式,文本的分离、制作艺术字。新课引入:第十七章 使用外部资源
···················································································· 教学过程与时间分配:
一、编辑颜色:(约50分钟)
(一)利用工具想的颜色按钮编辑线条和填充
1.线条颜色工具 2.填充颜色工具
3.默认填充和线条颜色按钮 4.无色按钮
5.交换填充颜色和线条颜色按钮(二)利用混色器编辑纯色与渐变色:窗口—设计面版—混色器
1.编辑纯色:两种模式的颜色(RGB、HSB)2.编辑渐变色:两种(线性、放射状)(三)油漆桶工具:两个选项(缺口尺寸、锁定填充)
1.使用渐变色进行填充:点击、拖动 2.使用位图进行填充:首先需要导入位图到库(四)墨水瓶工具:用于改变线条的颜色、宽度、类型,也可为填充添加轮廓
1.修改已有的线条:点击 2.为填充图添加轮廓线:点击 3.使用渐变色和位图绘制线条:
(1)使用渐变色绘制线条:笔触颜色-混色器(2)使用位图绘制线条(五)(一)吸管工具:从现有的线条或填充图形总获取颜色和类型信息 文本的类型:
二、编辑文本:(约50分钟)
1.静态文本:用于显示固定不变的文字,影片运行时不产生变化,可以创建超链接 2.动态文本:用于显示可以更新的文字 3.输入文本:用于影片运行时用户输入的内容(二)文本的创建:
1.创建静态文本
(1)静态文本的样式:横板和竖版、可扩展和固定宽度(2)创建方法:点击或者拖动
2.创建动态文本、输入文本及其滚动文本(3)动态和输入文本没有竖版(4)动态和输入文本可设置为滚动文本(三)设置文本属性和格式
1.设置静态文本属性
2.设置动态文本和输入文本的属性 3.分离文本
(1)一次分离文本:成为独立文字(2)二次分离文本:成为图形
第二模块 Flash 教学课题:
第十七章 使用外部资源
计划课时:2课时 授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash导入和编辑矢量图或位图 2.掌握Flash导入和编辑声音文件 3.掌握Flash导入和编辑矢量图或位图 4.掌握Flash导入和编辑声音文件
知识点:
教学重点:
1.导入矢量图和位图的方法 2.编辑导入的位图图像 3.编辑声音文件属性 4.编辑声音文件 教学难点:
1.转换位图为矢量图
2.编辑属性的4个选项有什么不同 突破难点的关键:
实例讲解,区别对比
作业布置:
2.课本第277页填空题,直接做在书上
本课小结:本课学习的的内容就是如何使用外部资源中的图像、声音。通过本章的学习,应该掌握以下内容:导入编辑图像,导入和编辑声音。新课引入:第十八章 编辑对象
···················································································· 教学过程与时间分配:
一、导入和编辑矢量图或位图:(约50分钟)
(一)导入矢量图和位图
1.三种方法: 2.图像序列的导入:(二)编辑导入的位图图像
1.使用属性面版编辑位图 2.设置位图的属性 3.分离位图:修改—分离
4.使用套索工具的魔术棒工具编辑位图:与之、平滑 5.转换位图为矢量图:修改—位图——转换位图为矢量图
二、导入和编辑声音文件:(约50分钟)
(一)(二)可添加的声音文件类型:wav、mp3、aiff等。添加声音文件:
1.导入声音:文件—导入到库 2.编辑属性:(1)选择相应的声音
(2)选择默认的声音效果:7种选择(3)设置声音同步类型:
1)事件:将声音和一个时间的发生过程同步起来 2)开始:当声音播放时不会播放新的声音 3)停止:将指定的声音停止 4)数据流:重复和循环(三)声音文件:编辑—编辑封套
1.设置显示状态:帧、时间 2.设置开始和结束位置 3.设置声音的大小、声道 4.设置声音的效果(四)使用声音实例——砸赌 实验5网页广告动画—“五一劳动节”
实验课时:2课时
实验环境:windows XP,网页三剑客 实验设备:电脑 实验目的:
1.掌握Flash编辑颜色的方法 2.掌握Flash编辑文本的方法
实验过程:
1.建立大小为640*240的文档,背景色为白色
2.新建“背景”层,设置黄到红的反射状渐变,渐变中心在舞台偏左上的位置
3.新建“光芒”层,使用矩形工具绘制很窄的无边框长条矩形,设置填充色为黄到透明的线性渐变;调整矩形的变形中心到黄色一端,使用变形面版,设置旋转角度为15,复制并应用变形,直到形成光芒图形。将整个光芒选中,组合。
4.将组合后的光芒选中,转换成元件。在第60帧插入关键帧,生成补间动画,在i设置旋转。5.新建“文字1”,从Fireworks文档中复制设置好样式的文本,粘贴到相应位置。同理,生成“文字2”层。
6.将两个文字层延长到第60帧。
7.新建“星星”图形元件,绘制五角星,调整透明度为60% 8.新建“星星闪”影片剪辑元件,将“星星”图形元件拖入,制作星星闪的动画:在影片剪辑的第5、10、15帧插入关键帧,添加补间动画,设置第1帧和最后一帧的透明度为0 9.新建“星1-N”图层,将“星星闪”元件拖入舞台多次,分布在不同的层上,调整不同的大小、角度、透明度。并将动画延长到第60帧。10.保存原文件,导出动画
第二模块 Flash 教学课题:
第十八章 编辑对象
计划课时:2课时 授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash对象的基本操作 2.掌握Flash对象的旋转和翻转 3.掌握Flash【变形】面版的使用
知识点:
教学重点:
1.对象的不同选择方式
2.对象的组合、及组合对象的编辑 3.对象的移动、复制和删除 4.对象的旋转和翻转 5.使用【变形】面版 教学难点:
1.对象的旋转和翻转
2.使用复制并应用变形功能创建多彩图形 突破难点的关键:
实例讲解,区别对比
作业布置:
1.课本第284页填空题,直接做在书上
本课小结:本课主要介绍舞台元素上的各种编辑方法。通过本章的学习,应该掌握以下内容:使用箭头、套索等工具选择对象,对象的移动、复制和删除。,对象的对齐、旋转和翻转。新课引入:第十九章 元件、实例和库
···················································································· 教学过程与时间分配:
一、对象的基本操作:(约50分钟)
(一)对象的选择:
1.使用箭头工具选择对象:
(1)单击:可选择单一线条,填充、群组、实例或文本(2)双击:同时选择一个矢量图的全部线条和填充(3)框选:选区内的所有对象 2.使用套索工具选择对象:(1)以曲线绘制选择区域:(2)以直线绘制选择区域:
(3)以曲线、直线混合绘制选择区域:(二)对象的组合:
1.组合:修改—组合 2.取消组合:修改—取消组合
3.选择组合体或组合体内的对象:编辑—编辑所选项目,或双击(三)对象的移动、复制和删除
1.移动对象:(1)直接拖动:(2)使用方向键移动:
(3)使用信息面版:注意调节对象中心 2.复制对象:
(1)拖动法:按下alt或ctrl键(2)剪贴板法:
(3)变换操作法:窗口—变形 3.删除对象:
(1)按delete键或backspace键(2)编辑—清除(3)编辑—剪切(4)鼠标右键菜单—剪切
二、对象的旋转和翻转:(约30分钟)
(一)(二)(一)对象的旋转:修改—变形
对象的翻转:变形—垂直翻转|水平翻转
【变形】对话框的变形设置:窗口—设计面版—变形
三、使用【变形】对话框:(约20分钟)
1.按比例变形: 2.旋转: 3.倾斜:(二)【变形】对话框的变形操作
1.复制并应用变形: 2.重置:(三)【变形】对话框的应用实例——多彩的海螺
第二模块 Flash 教学课题:
第十九章 元件、实例和库
计划课时:2课时 授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash元件的基本概念和优点 2.掌握Flash实例的基本概念和特点 3.掌握Flash创建和编辑元件的方法
知识点:
教学重点:
1.元件的基本概念和优点 2.实例的基本概念和特点 3.库的使用
4.元件的分类和创建方法对象的旋转和翻转 5.实例创建和编辑、修改 教学难点:
1.在电影之间复制库文件 2.元件和实例之间的修改关系 突破难点的关键:
实例讲解,区别对比
作业布置:
1.课本第299页填空题,直接做在书上
本课小结:元件、实例和库是动画设计中非常重要的概念,本课主要介绍元件、实例和库的概念,元件、实例的创建,库的操作。通过本章的学习,应该掌握以下内容:元件、实例和库的概念,创建图形、按钮、一片剪辑元件的方法,创建实例的方法,库的操作,共享库资源及处理库中资源冲突。新课引入:第二十章 时间轴、时间轴特效
···················································································· 教学过程与时间分配:
一、基本概念:(约20分钟)
(一)元件:元件是进行影片设计的基本单位,是构成影片的最基本的部分
1.创建元件的用途:
(1)图形元件:用于绘制静态图像
(2)按钮元件:用于创建响应鼠标时间的交互式按钮(3)影片剪辑元件: 创建可重复使用的动画片段 2.元件的主要优点:(1)可以重复使用
(2)使用元件可以简化影片编辑
(3)可以显著的缩减影片文件的大小(4)加快影片浏览和播放速度(5)制作渐变动画的前提(二)实例:
1.概念:舞台上或嵌套在另一个元件内部的元件副本,2.特点:
(1)一个元件可以有多个副本(2)修改元件,实例随即变化(3)修改实例,不影响元件(三)库:可以重复使用的元件的储存仓库
二、创建元件:(约30分钟)
(一)创建元件的方法
1.将舞台上的对象转化为元件:(1)将对象拖放到库中(2)右键菜单—转换为元件 2.创建一个空元件:(1)插入—新建元件(2)库面版——新建元件按钮 3.退出:
(1)舞台左上角的退出按钮(2)编辑—编辑文档(3)点击场景按钮(二)复制元件:重置元件,修改元件(三)创建按钮元件实例
(四)创建图形元件、影片剪辑元件实例
三、创建实例:(约30分钟)
(一)创建实例的方法(二)编辑实例:
1.对实例进行重新命名: 2.编辑实例的颜色: 3.编辑实例的尺寸
四、库:(约20分钟)
(一)库的操作
(二)在电影之间复制库文件:
1.复制和粘贴资源 2.拖放复制资源(三)共享库资源
1.运行时的共享资源 2.编辑时的共享资源(四)库中资源冲突的处理:选择不同的名称4.移动实例的位置;5.交换元件实例:
6.更改实例类型:分离实例:
实验6 网页广告动画—“跳动的文字”
实验课时:2课时
实验环境:windows XP,网页三剑客 实验设备:电脑 实验目的:
1.掌握Flash对象的基本操作
2.掌握Flash对象的旋转和翻转、【变形】面版的使用 3.掌握Flash元件和实例的基本概念和优点 4.掌握Flash创建和编辑元件的方法
实验过程:
一、缩放文字:
1.建立大小为400*200的文档,将图层1重命名为“背景”,使用矩形工具,绘制舞台尺寸大小的矩形(无线条色,填充为蓝到黑的放射状渐变);将背景层锁定。2.新建层输入文字“welcome”,调整字体、大小和颜色;将文字打散一次成为单个字母,使用对齐面板设置好文字的位置,逐个转换成相应名称的图像元件;将所有文字选中使用“修改-时间轴-分散到图层”。
3.选中第一个字母,在第15帧插入关键帧;将第15帧中文字大小设置为600%,透明度为20%。4.同理制作其他字母动画,设置以后每个字母落后5帧。将所有层动画按F5延长到最后一个字母完成时的帧。
5.保存原文件,导出动画。
二、跳动的文字:
1.建立大小为400*240的文档,设置背景色为蓝色。
2.新建影片剪辑元件“跳动文字”,在元件中心输入文字,可按自己喜好输入。
3.将文字打散一次,使用对齐面板设置好文字的位置,逐个转换成相应名称的图像元件;将所有文字选中使用“修改-时间轴-分散到图层”。4.拖动出辅助线,设置好文字预计运动位置。
5.选中第一个字母,分别在第10帧和第20帧插入关键;拖动第10帧中的字母到运动最高点第20帧落回原位;将第1帧和第10帧的“缓动值”分别设置为“50”和“-50 ” 6.同理制作其他字母动画,设置以后每个字母落后5帧。
7.将所有层动画延长到最后一个字母完成时的帧;退出元件编辑状态,回到场景
8.将图层1重命名为“背景”,使用矩形工具,绘制大小为舞台一半的无线条色,填充为透明度为30%的黑色块。
9.新建“文字”层,将库中的剪辑元件“跳动文字”拖动到舞台上,调整好位置
10.新建“倒影”层,将文字层的影片剪辑元件复制并垂直翻转,调整透明度形成倒影 11.保存原文件,导出动画。
第二模块 Flash 教学课题:
第二十章 时间轴、时间轴特效
计划课时:2课时 授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash时间轴的概念和相关操作 2.掌握Flash图层的概念和相关操作
知识点:
教学重点:
1.帧和动画的含义和表示 2.帧的种类及相关操作 3.标签、注释和锚记的使用 4.图层的分类、图层操作 5.时间轴特效的添加及设置 教学难点:
1.图层的分类、图层操作 2.运动引导层和被引导层的作用 3.遮罩层与被遮罩层的作用 突破难点的关键:
实例讲解,区别对比
作业布置:
2.课本第320页填空题,直接做在书上
本课小结:时间轴是Flash8设计中能够形成画的关键内容,无论是制作动画还是播放动画,都离不开对时间轴的操作。时间轴特效使得在Flash8创作进程、执行最少的步骤可制作复杂的动画,从而免去复杂的创作过程。通过本课的学习,应该掌握以下内容:时间轴及时间轴中的动画表示,播放纸张及帧的操作,标签、注释和锚记,图层的构成及操作,时间轴特效的应用。新课引入:第二十一章 制作动画(1)
···················································································· 教学过程与时间分配:
一、时间轴:(约50分钟)
(一)时间轴及动画表示:
1.帧和动画的含义和表示:
2.时间轴的概念:图层,帧、播放指针 3.时间轴中动画表示:(二)播放指针和帧操作:
1.播放指针和帧:
(1)播放指针:控制当前舞台上显示时间轴的帧及帧的内容(2)帧:帧的种类
2.帧的显示方式:大小、颜色、关联等 3.帧的操作:(1)插入关键帧(2)插入空白关键帧(3)插入普通帧(4)选择帧(5)拖动帧(三)标签、注释和锚记:
1.创建标签: 2.添加注释: 3.命名锚记: 4.锚记应用实例:
二、图层:(约20分钟)
(一)图层的分类:
1.普通图层:
2.引导层:在绘图时帮助对齐对象
3.运动引导层和被引导层:使对象沿相应轨迹运动 4.遮罩层与被遮罩层:设置对象的显示动画 5.文件夹层:组织和管理图层(二)图层操作:
1.创建和删除图层及图层文件夹:
2.图层的操作:隐藏与显示、显示边框、锁定与解锁
3.编辑图层和图层文件夹:重命名、选择、复制、删除、改变顺寻、移动 4.图层中对象的叠放次序:
三、时间轴特效:(约50分钟)
(一)时间轴特效基础:
1.时间轴特效的添加:插入—时间轴特效 2.时间轴特效的编辑:设置参数、查看预览 3.时间轴特效的删除:(二)创建时间轴特效:
5.分离: 6.展开: 7.投影: 8.模糊: 1.变形: 2.转换: 3.分散式重制: 4.复制到网格:
(6)复制帧
(7)关键帧与普通帧的相互转换(8)删除帧(9)清楚帧(10)清除关键帧
第二模块 Flash 教学课题:
第二十一章 制作动画(1)21.1-21.4动画
计划课时:2课时 授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash动画原理 2.掌握Flash逐帧动画的创作 3.掌握Flash直线型运动渐变动画 4.掌握Flash曲线型运动渐变动画
知识点:
教学重点:
1.了解动画的原理 2.了解动画的分类 3.掌握逐帧动画的制作方法 4.掌握直线型运动渐变动制作方法 5.掌握曲线型运动渐变动画制作方法 教学难点:
1.逐帧动画的制作方法 2.直线型运动渐变动制作方法 3.曲线型运动渐变动画制作方 突破难点的关键:
实例讲解,区别对比
作业布置:
1.课本第343页填空题,直接做在书上
本课小结:时间轴是Flash8设计中能够形成画的关键内容,无论是制作动画还是播放动画,都离不开对时间轴的操作。时间轴特效使得在Flash8创作进程、执行最少的步骤可制作复杂的动画,从而免去复杂的创作过程。通过本课的学习,应该掌握以下内容:时间轴及时间轴中的动画表示,播放纸张及帧的操作,标签、注释和锚记,图层的构成及操作,时间轴特效的应用。新课引入: 综合练习
···················································································· 教学过程与时间分配:
一、Flash动画原理:(约50分钟)
(一)(二)动画的原理:视觉残留 动画的分类:
1.按照人机关系分:非交互式、交互式 2.图像的绘制方式分: 1)逐帧动画:
2)渐变动画:运动渐变、形状渐变
二、逐帧动画:(约50分钟)每一帧都是关键帧
(一)(二)(一)导入逐帧动画:文件—导入—导入到库 制作逐帧动画实例:
直线型运动渐变动画的创建方法:
三、直线型运动渐变动画:从对象的两个关键帧之间做运动
1.创建运动渐变动画的方法:三种方法 2.创建补间动画时在属性面版中进行属性设置(1)帧:帧的名称
(2)标签类型:名称、注释、锚记(3)补间:无、动作、形状(4)缓动:运动速度的变化(5)旋转:对象的旋转设置(二)(三)(四)(一)(二)制作直线运动渐变动画实例 制作跳跃运动渐变动画实例 制作复合直线运动渐变动画实例
曲线型运动渐变动画的创作方法:设置引导层 曲线型运动渐变动画的创作实例:
四、曲线型运动渐变动画制作方法:
第二模块 Flash
教学课题:
综合练习
计划课时:2课时
授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash动画原理
2.掌握Flash逐帧动画的创作 3.掌握Flash直线型运动渐变动画 4.掌握Flash曲线型运动渐变动画
知识点:
教学重点:
1.了解动画的原理 2.了解动画的分类
3.掌握逐帧动画的制作方法
4.掌握直线型运动渐变动制作方法 5.掌握曲线型运动渐变动画制作方法 教学难点:
1.逐帧动画的制作方法
2.直线型运动渐变动制作方法 3.曲线型运动渐变动画制作方 突破难点的关键:
实例讲解,区别对比
作业布置:
2.课本第343页填空题,直接做在书上
本课小结:时间轴是Flash8设计中能够形成画的关键内容,无论是制作动画还是播放动画,都离不开对时间轴的操作。时间轴特效使得在Flash8创作进程、执行最少的步骤可制作复杂的动画,从而免去复杂的创作过程。通过本课的学习,应该掌握以下内容:时间轴及时间轴中的动画表示,播放纸张及帧的操作,标签、注释和锚记,图层的构成及操作,时间轴特效的应用。新课引入:第二十一章 制作动画(1)
21.5-21.7动画
···················································································· 教学过程与时间分配:
一、简单运动动画制作:(约40分钟)
(一)残影效果:
二、引导层:(约50分钟)
(一)太阳星星升起月落下:
(二)汽车广告:
第二模块 Flash 教学课题:
第二十一章 制作动画(1)21.5-21.7动画
计划课时:2课时
授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash形状渐变动画的制作 2.掌握Flash遮罩动画的制作 3.掌握Flash动画的编辑
知识点:
教学重点:
1.形状渐变动画的原理
2.不使用形状提示渐变动画的方法 3.使用形状提示渐变动画的制作的方法 4.遮罩动画的操作 5.编辑动画的方法 教学难点:
1.洋葱皮工具的使用 2.遮罩动画的各典型实例
3.使用形状提示渐变动画的创作方法 突破难点的关键:
实例讲解,区别对比
作业布置:
3.课本第343页填空题,直接做在书上
本课小结:时间轴是Flash8设计中能够形成画的关键内容,无论是制作动画还是播放动画,都离不开对时间轴的操作。时间轴特效使得在Flash8创作进程、执行最少的步骤可制作复杂的动画,从而免去复杂的创作过程。通过本课的学习,应该掌握以下内容:时间轴及时间轴中的动画表示,播放纸张及帧的操作,标签、注释和锚记,图层的构成及操作,时间轴特效的应用。新课引入:第二十二章 简单的交互动画 ···················································································· 教学过程与时间分配:
一、形状渐变动画:(约20分钟)
(一)形状渐变:一个对象随着时间的推移,逐渐演变成另一个对象所产生的形变效果。(二)不使用形状提示渐变动画的创作方法:(三)不使用形状提示渐变动画创作实例:1变2(四)使用形状提示渐变动画的创作方法: 1.形状提示:为系统指出形状渐变的提示点 2.添加形状提示:修改-形状-添加形状提示 3.移动形状提示: 4.删除形状提示:(五)使用形状提示渐变动画的制作实例:1变2
二、遮罩动画:(约50分钟)
(一)遮罩原理:(二)遮罩的操作: 1.创建遮罩
2.将普通层变成遮罩层 3.将遮罩层变为普通图层(三)在遮罩层中制作动画实例——展开的画卷(四)动画制作实例——移动的放大镜
三、编辑动画:(约20分钟)
(一)洋葱皮工具: 1.洋葱皮工具: 2.洋葱皮边框工具: 3.修改多帧工具:
4.修改洋葱皮标志工具:
5.创建补间动画时在属性面版中进行属性设置(二)移动动画 实验7 网页广告—“共青团网站横幅”
实验课时:2课时
实验环境:windows XP,网页三剑客 实验设备:电脑 实验目的:
1.掌握Flash形状渐变动画的制作 2.掌握Flash遮罩动画的制作 3.掌握Flash动画的编辑
实验过程:
一、Fireworks部分:
1.将“汉仪综艺体简”和“方正黄草体”两种字体装入本机。2.建立大小为643*168的文档,背景色为#DD060C;将优化设置为jpg。3.导入“国旗.jpg”,并添加放射状蒙版,使国旗和背景色融合。
4.分别使用“汉仪综艺体简”和“方正黄草体”输入文字,完成如图背景。
5.保存源文件为“共青团.png”并导出为“共青团.jpg”格式。
二、Flash部分:
1.建立大小为643*168的文档,背景色为#DD060C;导入制作好的背景,将图层锁定。2.导入“团徽.png”图片,调整位置,锁定图层。3.制作文字闪光效果:(1)新建“文字闪光层”,输入同样大小和字体的“共青团网站”字样,与背景文字重叠,并转换为影片剪辑元件;双击进入元件(2)文字层下方新建层,使用矩形工具和变形工具绘制“闪光”,并转为“闪光”图形元件。(3)制作闪光来回移动动画,延长文字层;将文字层转为遮罩层。4.制作团徽闪光效果:(1)在导入的团徽层下新建一层,绘制一个略大的无线条,填充为黄到透明的圆,并转为“光芒”影片剪辑元件;进入元件,将圆转换为“光”图形元件,制作闪光效果。(2)
回到场景,在导入的团徽层上新建一层,绘制一个略小无填充的圆,转换为为影片剪辑元件;进入元件,使用橡皮擦工具擦除部分圆;在圆弧下面新建层,拖入 “光芒”影片剪辑元件,使它沿掩护做引导动画。
5.返回场景,保存原文件,导出动画。
第二模块 Flash 教学课题:
第二十二章 简单的交互动画
计划课时:2课时
授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.掌握Flash动画脚本的基本设置 2.掌握Flash【动作】面版的使用 3.领会、理解常用动作脚本指令 4.掌握、运用事件与动作
知识点:
教学重点:
1.动作脚本的概念 2.3种动作子面版
3.【动作】面版的使用方法 4.按钮的各种状态 5.电影剪辑事件 教学难点:
1.主要的动画控制指令 2.流程控制指令 3.事件与动作的设置 突破难点的关键:
实例讲解,区别对比
作业布置:
4.课本第359页填空题,直接做在书上
本课小结:制作交互式动画是Flash动画设计中比较高级的内容,具有一定的难度。而交互式动画是Flash动画作品最为吸引人的地方。通过本科的学习,应该掌握以下内容:动作脚本基础知识和使用火动作面版,简单的脚本质量,制作简单的交互式动画。新课引入:第二十三章 优化、发布和导出电影 ···················································································· 教学过程与时间分配:
一、动画脚本的基本设置:(约10分钟)
(一)动作脚本的概念:是Flash 8 的脚本编程语言,是一种面向对象的编程方式。(二)动作脚本的基本设置:编辑-首选参数-Action Script
二、使用【动作】面版:(约10分钟)
(一)启用【动作】面版:3种子面版:动作—帧|电影剪辑|按钮(二)【动作】面版的使用方法: 1.查看动作
2.添加动作:3种方法
(1)双击或拖动到脚本编辑区(2)鼠标右键—添加到脚本
(3)单击脚本脚本编辑区左上角“将新项目添加到脚本” 3.编辑动作: 4.查找与替换:
三、常用动作脚本指令:(约30分钟)
(一)主要的动画控制指令: 1.stop()和play():用于停止和播放当前电影 2.gotoAndPlay()和gotoAndStop():制定电影的停止和播放位置 3.nextFrame()和prevFrame():用于播放并停止在下一帧或上一帧 4.nextScreen()和prevScreen():用于进入电影的下一个或上一个场景并停止在第一帧 5.startDray()和stop Dray():用于设置鼠标开始拖动电影中指定的电影剪辑元件实例 6.stopAllSounds():停止所有声音,但不影响电影的播放 7.getURL():调用网页或邮件地址 8.setProperty()和getProperty():用于设置或获取元件实例的某些属性(二)流程控制指令
1.if指令:条件转移指令 2.while指令:先判断再执行 3.do while指令:先执行再判断 4.for 指令:循环指令
四、事件与动作:(约20分钟)
(一)设置帧事件:(二)设置按钮事件:按钮的各种状态(三)设置电影剪辑事件:电影剪辑事件
五、简单交互动画实例:(约20分钟)
(一)实例1:天女散花:(二)实例2:可控制放大镜(三)实例3:放飞气球
第二模块 Flash 教学课题:
第二十三章 优化、发布和导出电影
计划课时:2课时
授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.领会、理解Flash优化电影的原则
2.掌握Flash发布Flash电影的方法与设置
3.掌握、运用Flash发布GIF、JPEG、PNG等格式文件 4.掌握Flash导出电影的设置
知识点:
教学重点:
1.优化电影的一般原则 2.优化矢量图的一般原则 3.优化文本和字体的一般原则 4.优化颜色的一般原则 5.发布电影的步骤 教学难点:
1.布GIF、JPEG、PNG等格式文件 2.导出Flash电影 突破难点的关键:
实例讲解,区别对比
作业布置:
1.课本第371页填空题,直接做在书上
本课小结:在制作Flash作品时,应该以最小的文件空间,创作最理想的Flash作品,并达到最佳的作品质量和最快的文件下载与播放速度。通过本课的学习,应该掌握以下内容:优化电影的原则,发布Flash电影和图像,导出Flash电影和图像。
新课引入:第二十三章 优化、发布和导出电影 ·················································································· 教学过程与时间分配:
一、优化电影:(约10分钟)
(一)优化电影的一般原则:
1.重复使用的元素应该转换为元件 2.尽量不使用逐帧动画
3.尽量使用电影剪辑而不是图形
4.两关键帧之间发生变化的距离越短越好 5.尽量不用位图制作动作 6.声音文件mp3 7.少用时间轴特效(二)优化矢量图的一般原则 1.尽量将图形组成群组
2.将静态对象和动画分到不同层 3.对孤立线条进行优化 4.尽量使用实线
5.用铅笔工具绘制的线条占用空间小(三)优化文本和字体的一般原则 1.减少字体种类,使用系统字体 2.选择需要的字符的嵌入字体 3.尽量不打散文字(四)优化颜色的一般原则 1.尽量减少颜色使用的种类 2.使用混色器面版默认颜色 3.尽量少用渐变填充
4.尽量减少设置颜色的透明度
二、发布Flash电影:(约10分钟)
(一)发布电影的步骤:
1.准备完整的Flash应用程序所需的所有文件 2.使用发布命令市场影片和相应的附属文件(二)设置发布文件格式:(三)设置Flash发布选项:尽量选择高版本(四)设置HTML格式文件:
三、发布GIF、JPEG、PNG等格式文件:(约30分钟)
(一)设置GIF格式文件:(二)设置JPEG格式文件:(三)设置PNG格式文件
四、导出Flash电影:(约20分钟)
(一)导出电影:文件—导出—导出影片(二)导出图像:文件—导出—导出图像
实验8 网页导航栏动画—“产品列表”
实验课时:2课时
实验环境:windows XP,网页三剑客 实验设备:电脑 实验目的:
1.掌握Flash动画脚本的基本设置、【动作】面版的使用 2.领会、理解常用动作脚本指令 3.掌握、运用事件与动作 4.掌握Flash导出电影的设置
实验过程:
一、制作产品简介:
1.建立大小为400*200的文档,背景为黑色。2.新建按钮元件“产品简介”,使用矩形工具和文本工具设置按钮的3个状态及反应区。3.修改按钮的属性,使其产生动态的凸起和凹下效果。
二、制作菜单命令:
1.复制“产品简介”元件,分别命名为“光盘”、“硬盘”
2.修改对应元件的文字内容,及显示效果。
三、制作菜单动画片段:
1.新建影片剪辑元件“弹出菜单”,在第1帧拖入“产品简介”;
2.第2帧分别把“光盘”和“硬盘”拖放到适合位置(可以使用对齐面板)。3.在第10帧插入关键帧
4.给第1帧添加帧动作为“stop”,给第10帧添加帧动作为“转到并停止在第1帧”。5.给第1帧中的“产品简介”按钮添加动作
“on(rollOut){ gotoAndPlay(3);} on(rollOver){ gotoAndPlay(2);}”
6.同理给其他按钮也添加同样的动作语句。
7.将影片剪辑元件“弹出菜单”拖入场景,保存源文件,导出动画。
第三模块 Dreamweaver
教学课题:
第一章Dreamweaver 基础知识
计划课时:2课时
授课形式:多媒体教学 教学辅助:投影,电脑 教学目的与要求:
1.了解Dreamweave的功能和新特性
2.掌握Dreamweave的工作界面、工具箱、面板组等
3.掌握Dreamweaver站点操作(新建站点,管理站点和删除站点)4.掌握Dreamweaver页面基本操作
知识点:
教学重点:
1.Dreamweave的工作界面组成 2.Dreamweave的工作界面操作 3.Dreamweaver站点操作 4.页面基本操作 教学难点:
1.创建本地站点的方法
2.本地站点的管理:编辑、删除、复制、导入和导出 突破难点的关键:
1.实例讲解,区别对比
作业布置:
1.课本第15页填空题
本课小结:Dreamweave是一款用来设计网页的多功能应用程序。随着版本的不断升级,功能的不断加强,Dreamweave受到愈来愈多网页制作者的青睐。目前最新版本Dreamweave更是以它方便快捷的操作模式有的诸多好评。通过本课的学习,应该掌握以下内容:认识Dreamweaver工作区,掌握基本的文档操作,站点操作(新建站点,管理站点和删除站点)。新课引入:第二章 制作图文混排网页 ·················································································· 教学过程与时间分配:
一、Dreamweaver 8简介(约20分钟)
(一)Dreamweaver优点:所见即所得(二)启动和退出Dreamweaver8:
二、Dreamweaver8操作界面(约30分钟)
(一)标题栏:显示文档路径和文件名称(二)菜单栏:共10个(三)插入栏:图像化的插入命令,可插入图像、声音、多媒体动画、表格、图层、框架、表单、Flash Active等元素。(四)文档工具栏:提供各种文档窗口视图—设计和代码(五)文档窗口:设计、代码、拆分视图
第三篇:网页设计与制作教案
《网页设计与制作教案》
教师:系部:信息技术工程系专业:计算机应用班级:计机
湄洲湾职业技术学院
2008-2009学年第一学期
唐 俊 奇
电子信息
07(1)信息07(1)08(2)
1.3 网页中所使用的技术
1.3.1 HTML语言和XML语言
1、HTML语言
ØHTML只使用SGML中很小一部分标记
ØHTML语言(Hyper Text Markup Language 超文本标记语言)
ØHTML是纯文本的语言,其源代码可以用各种文本编辑工具进行编辑,常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具
2、XML语言
XML(eXtensible Markup Language)1.3.2 动态网页
1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序
1.4 制作网页的基本方法
1.4.1 制作网页的基本步骤
1、确定网页的内容
2、设计网页的组织结构
3、资料的收集与整理
4、选择网页的设计方法
1.4.2 制作网页时要注意的问题
1、网页的标题要简洁,明确。
2、在文本中要使用水平线,以分割不同部分。
3、对重点段落要强调显示。
4、网页中插入的图片要尽量的小。
5、图形要附加文字说明,以便关闭图像时查看。
6、网页中引用的资料及商标(或图标),不能侵犯版权。【课后小结】
通过学习,认识网络、网站、网页及相关信息,理解网页制作的流程及了解相应开发工具,为设计网页做准备。
第二讲 HTML的基本标志与格式标志
【教学内容】
讲解HTML基本标志对和格式标志。【教学目的】
使学生标志对与格式标志对的使用。【教学重点】
格式标志的使用。【教学难点】
* 使学生掌握超级链接标志的使用。【教学重点】
* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入。【教学难点】
* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.2 插入文字
2.2.1 划分段落 格式
段落内容
2.2.2 插入标题文字 格式设置基准字号:
2.2.6
文本修饰
......,文字以粗体显示。......,文字显示为斜体。......,显示下划线。
...... STRIKE>,中心线贯穿文字。< EM>...... EM>,强调文字,通常用斜体。
< STRONG>...... STRONG >,特别强调的文字,通常用黑体。
2.3.2 图片的属性
2.4 建立超级链接
2.4.1 指向一个目标
1、建立超级链接
2、为图片建立超级链接
3、链接到邮件和多媒体文件 链接到邮件
请与我联系 2.4.2 使用锚点
Ø使用锚点可以使用户在一个较长的文档中跳转,方便地找到要阅读的内容。Ø建立锚点:
Ø锚点文字 Ø使超级链接指向已定义的锚点。Ø文字 Ø文字 2.4.3 新窗口和基准链接
1、打开新窗口 Target=“window-name”>开一个新窗口
2、基准链接
在
与 之间设定BorderColor=“#008000“ >
2.7.3 子窗口属性设置
-2.7.4 常见的框架窗口划分方法(1)标题和正文,分为上下两部分(2)层次结构,分为上中下三部分
(3)目录和标题,分为左上、左下、右三部分
(4)标题、目录和正文,分为上、左下、右下三部分(5)嵌套目录,分为左、右上、右下三部分 2.7.5 不支持框架的网页