网页制作技术教案学技术改变生活.docx
- 文档编号:29022245
- 上传时间:2023-07-20
- 格式:DOCX
- 页数:102
- 大小:1.96MB
网页制作技术教案学技术改变生活.docx
《网页制作技术教案学技术改变生活.docx》由会员分享,可在线阅读,更多相关《网页制作技术教案学技术改变生活.docx(102页珍藏版)》请在冰豆网上搜索。
网页制作技术教案学技术改变生活
第一模块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课时
实验环境:
windowsXP,网页三剑客
实验设备:
电脑
实验目的:
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课时
实验环境:
windowsXP,网页三剑客
实验设备:
电脑
实验目的:
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课时
实验环境:
windowsXP,网页三剑客
实验设备:
电脑
实验目的:
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,且链接到新疆交通学校的主页:
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.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 技术 教案 改变 生活