冀教版信息技术第四册教案

文档属性

名称 冀教版信息技术第四册教案
格式 zip
文件大小 47.4KB
资源类型 教案
版本资源 通用版
科目 信息技术(信息科技)
更新时间 2012-02-06 16:03:13

图片预览

文档简介

TOC \o "1-3" \n \h \z \u
第一单元 描绘跃动的春意
第一课 别样精彩话广告
教学目标:1.认识公益广告,了解其创意及制作。
2.初识flash,能够打开软件,认识各个部分组成。
3.通过对公益广告的兴趣对动画的制作产生浓厚的兴趣。
教学重、难点: 欣赏Flash动画,了解“层”与“帧”。
教学内容:观看公益广告,了解flash软件的打开及工具面板,认识关键帧。
教学过程:
第一课时
一、故事导入:
1、师:你们在电视上看到过公益广告吗?
2、你们知道动画的公益广告是用什么做出来的吗?
4、讨论公益广告的分类
二、上网搜索flash动画公益广告,下载并保存,播放欣赏。
三、公益广告的创意
A、直言相告,针砭时弊;
B、妙喻惊人,发人深思;
C、措辞警策,启迪心智;
D、画龙点睛,茅塞顿开
四、初步了解flash软件
1、教学如何打开软件
点击桌面上的flah图标即可打开软件
简单介绍面板:主菜单栏,工具箱,浮动面板,属性面板。
2、动画的帧与层
动画是由一幅一幅的连续呈现的画面组成的,每一幅画就是一帧,帧连续播放也就形成了动画片。
层是一个动作不能在一张画面上完全表现,需要在上下几张透明的胶片上画出来,这时的每一张胶片就叫一层。
3、关键帧
在传统动画片中一些对造型或运动效果等方面起决定作用的画面,是由高技术的画师完成的,其余的中间画面可以由普通画工模仿、添补绘制完成。
在电脑动画创作中也有一些帧被定为关键帧。
4、演示动画关键帧(变形动画)
三、作业:请上网搜索并下载保存一个你最喜欢的公益广告动画。
四、互相播放欣赏。
五、课上小结。
第二课时
一、欣赏导入:
播放上一节课自己下载的喜欢的公益广告。(选两个较好的全体观看)
师:你们想制作这样的动画吗?我们从这节课开始学习动画制作工具FLASH。
二、学生看书自学下面内容:
(一)Flash MX的工作界面如下图
Flash mx工作界面主要分为 标题栏、常用工具栏、时间轴、工具栏、主工作区、浮动面板、属性面板及动作面板等。
(二)部分绘图工具的使用
箭头工具:用于选定工作区中的点阵图或矢量图,并可对点阵图进行一定的编辑;
副选工具:可对所绘路径进行精确调节;
直线工具:用于绘制直线;
索套工具:创建任何形态的选区;
钢笔工具:可以精确绘制直线或曲线路径;
文本工具:用于创建文本或文本域;
椭圆工具:绘制椭圆或圆;
矩形工具:绘制矩形或正方形;
铅笔工具:可以绘制任意线条或图形;
刷子工具:用于着色的一种工具,可以创造任意特殊效果;
墨水瓶工具:用于填充线条或图形边框的颜色;
油漆桶工具:改变物体的填充色;
吸管工具:用于拾取颜色;
橡皮擦工具:用于移动窗口中显示的视图。
……
三、学习使用工具进入绘画。
四、本课小结
   本课主要讲述了Flash的基本界面特征,强调工具的作用及其使用方法,为以后进一步深入学习Flash动画制作打下了一定的基础。
六、课外作业
上机操作,使用工具箱中的工具绘出喜欢的图形。
第二课 职业生涯第一步
教学目标:1.会设置动画背景,能够正确使用画图工具
2.能够利用矩形工具在舞台上画出一片绿色草地
3.能够利用线条工具在舞台上画出一棵小树,并变形。
教学重、难点:调整线条画出小树并变形
教学内容:初步使用画图工具画出草地及绿树。
教学过程:
第一课时
一、欣赏教师做好的动画
二、向学生介绍下面知识点:
Flash中的时间轴主要由图层、帧组成。
A帧(frame):传统意义上的动画是由一张张单独的胶片组成,将这些静止画面连续播放,利用人眼的视觉暂留,就产生连续运动的动画效果,而Flash的帧就如同电影胶片,按时间轴窗格中每一帧画面的顺序播放就产生了动画效果。
B图层(layer):动画中的每一帧都是由多个图层中的图片重叠组成的,不同图层的画面元素,可以分别施加动画效果。图层可以用透明的玻璃纸来比喻,当上面图层和下面图层的内容相重叠时,上面图层上的内容将遮挡住下面图层上的内容,所以有时需要调整图层的叠放顺序。
三、制作绿色草地
通过屏幕演示操作过程:
1、打开Flash新建一个Flash电影文档;
2、执行“修改”“文档”命令,设置尺寸为775×600,背景色为浅蓝色#3399FF,帧频12,点击确定。
3、单击工具栏中的矩形工具,即选定矩形工具,打开属性面板,笔触为无色,填充打开颜色选择器,在颜色文本框中输入(红:102,绿204,蓝0),点击确定。
3、在舞台中部,从左侧向右下方拖动鼠标,绘制一个宽带与舞台相近的矩形,在属性面板中精确设定(宽度:775,高度275,实例位置:X:0.0, Y:326.0).
4、将鼠标指针靠近矩形的上边缘,指针变成带圆弧的形状。
5、向左上方拖动鼠标,使矩形上边缘成为曲线,当曲线形状合乎要求时松开鼠标。
6、沿水平或竖直方向拖动鼠标可以进一步调整曲线的形状和起伏程度。如果对线条形状不满意,可以执行“编辑”---“撤销改变形状”或者Ctrl+Z撤销前面的操作。
四、学生练习操作:
五 本课小结
在这一课中,学习如何制作Flash的第一个动画,同时掌握了矩形绘图的应用,更深一步地了解了Flash制作动画的方式方法。
六、课外作业
学生熟练操作本课内容。
第二课时
一、上节课作业展示
教师用屏幕演示学生上节课所画的绿色草地,并进行点评。
二、讨论鼠绘技巧
使用鼠标画图必须先树立一个观念,那就是你不可能把一条线一次性的画好,所以作画的方法也和在纸上画画有很大的不同:每花一份时间来画一条线,就需要花两份或者更多的时间去调整这条线。
1. 要有耐心
2. 要有一个灵敏的鼠标。
三、制作绿树
通过屏幕演示操作过程:
1. 选择线条工具,在属性面板中设置笔触颜色为#336600,样式为实线,笔触高度为2.25,按确认。
2. 向下拖动鼠标在草地上方画出一条竖线(按住shift键拖动鼠标,可将线条限制为垂直、水平等45度整数倍的方向。)
3. 用选择工具将竖线中部向左侧拖动,调节成圆弧形状。
4. 用线条工具连接弧线两端,再用选择工具调整成向右的弧线。
5. 将笔触高度变成5画出中间作为树干的线条。
6. 用线条工具画出一些短线条作为树枝。
7. 选择颜料桶工具,设置填充颜色#009900,单击“选项”栏下的“封闭小空隙”按钮,选择“封闭大空隙”。将鼠标指针移动到小树上,在空隙中单击,为小树填充颜色。
8. 选择刷子工具,设置填充色为#FFFF00,单击“刷子大小”设置圆形,在小树适当位置画几个圆点作为点缀。
四、学习复制变形
教师通过屏幕演示
1. 用选择工具,自小树的左上角向右下角拖出一个矩形区域。
2. 松开鼠标,被选中部分变成了麻麻点,按住shift键,单击树干中没有被选中的部分,完全选中小树。执行“编辑”“复制”,再进行一下粘贴。
3. 单击“任意变形工具”,复制的小树周围出现黑色边框,将鼠标移动到控制点,拖动进行变形,当达到符合要求的大小时松开鼠标。
4. 将鼠标移动到小树中间,指针变成箭头加十字的时候,拖动小树到合适位置。
5. 保存作品。
五、课堂小结
这结课我们学习了用线条作画,和如何调整线条,以及利用任意变形工具进行变形。
六、课外作业
学生熟练操作本课内容。
第三课 智慧之花齐绽放
教学目标:1.能够实用椭圆工具绘制花瓣
2.能够正确实用混色器面板调整颜色
3.了解库,并能够使用库中的元件
教学重、难点:绘制花瓣
教学内容:初步使用画图工具画出花瓣,并制作出不同颜色的花朵
教学过程:
第一课时
一、教师介绍元件
在我们要制作的广告背景中,有很多美丽的花朵,逐一制作这些颜色不同、姿态各异的小花是一件很烦的工作。化繁为简的办法之一就是先将一朵小花制成元件,然后再根据需要对小花元件加以复制和简单变形。
“元件”又称“符号”,是flash中的基本元素,包括影片剪辑、按钮、图形等。在制作动画时,把将要重复应用到的动画元素制成元件存放在元件库中。
二、制作小花元件
1.执行“插入”“新建元件”命令,弹出创建新元件对话框,输入元件名称“红花”,选择行为为“图形”,单击确定。
2.选择“椭圆工具”,属性面板设置笔触颜色#FF9900,笔触高度为2,笔触样式为“实线”,填充色为无,在编辑区画一个空心椭圆。
3.执行“窗口”“设计面板”“混色器”命令,打开混色器设置填充样式为线性,颜色左端滑块为红色#F21A02,右端为浅黄色#FEFE5A。
(单击颜色条,可以增加颜色滑块的数量,向下拖动滑块,可以将滑块删除)
3. 选择颜料桶工具,单击椭圆的中心略偏下的地方,将刚才设置的颜色填充,变成花瓣,
4. 选择“填充变形工具”,拖动角上的圆形手柄顺时针方向转动,旋转填充颜色方向变成上红下黄。
5. 向下拖动填充色中心点圆,使渐变色的位置稍微向下。
6. 利用选择工具,拖动椭圆的边缘将其调整为花瓣的形状。
7. 选择“任意变形工具”,选中整个图形,将变形方框中间的圆圈向下拖动到下边缘中间位置。
8. 执行“窗口”“设计面板”“变形”,选择“旋转”选项,输入角度30度,连续单击“复制并应用变形按钮”11次。
9. 选择椭圆工具,设置笔触为白色,高度3.5,类型为点描,点大小设置为小,点变化为不同大小,密度为稀疏,确定。
10.设置填充色为无色,按shift画一个空心圆。
11.在混色器中设置填充为放射状,左端滑块白色#FFF9F9,右端滑块浅黄色#FBFB59,选择颜料桶单击中心略向下的地方,填充花心。
12.将花心移动到合适位置。
13.用线条工具喝选择工具绘制枝干和叶子。
三、课堂小结
这节课我们学习了用椭圆工具绘图,还学习了用混色器面板调制颜色,以及如何应用变形复制。
四、课外作业
熟练操作课上所学技巧
第二课时
一、讲评展示上节课作品
注意表扬有创意的学生,以及能够按照要求完成作品的同学。
同时对于作业上有错误的要及时指出并要求学生改正。
二、绘制其他花朵
1.执行“插入”“新建元件”命令,新建一个“黄花”图形元件。
2.执行“窗口”“库”命令,打开库面板
3.库也称“元件库”,是flash中用来存放、管理可以反复使用的素材和元件的地方。
元件预览窗口可以从中拖动元件到舞台进行编辑,也可以双击元件缩略图进入元件编辑状态。
4.双击红花进入该元件编辑状态,选中整个图形,执行“编辑”“复制”命令。
5.双击“黄花”元件,进入它的编辑状态,执行“编辑”“粘贴到当前位置”命令。
6.用“选择工具”在花的边缘线条上双击,选中所有花瓣边缘的线条,单击“笔触颜色”按钮,选择颜色#FFCC00,鼠标在花朵外面的任意位置单击,花瓣的线条颜色就改好了。
7.在混色器中设置“填充样式”,为放射状,单击左端的颜色滑块,设置为浅黄色#FCEAAD,右端为黄色#FDEAOB,鼠标在花朵外面的任意位置单击,花瓣的颜色就改好了。
8.学生自己动手绘制蓝色小花元件。
三、学生完成自学,教师巡视
四、讲解鼠标绘图技巧
步骤一:画出轮廓(铅笔工具)
1. 勾出大概的形状。
2. 根据大概的形状勾出轮廓
步骤二:调整轮廓(选择工具)
主要用于调整线条的位置和形状。
五、课堂小结
这节课我们学习了如何利用库中的元件快速绘制一个颜色不同的其他元件,以及如何修改边框及填充颜色。
六、课外作业
熟练操作本课内容
第四课 破壳而出鸡宝宝
教学目标:1.会布置动画背景,能够正确调用库中元件
2.认识时间轴,了解各种帧
3.能够制作逐帧动画
教学重、难点:多图层的运用
教学内容:认识时间轴,能够制作逐帧动画
教学过程:
第一课时
一、布置背景
为了让背景更加漂亮,我们要把前面制作的不同颜色的花朵放置到背景中作为点缀。
由于在后面的情节中有小鸡踩踏花朵及花朵变形、消失等环节,因此要将花朵、小鸡和背景分别放置在不同的图层中。
“图层”就像透明的画布,画出了图形的地方就不再透明,而在不包含内容的图层区域中,可以看到下面图层的内容。
1. 单击插入图层2,双击图层名称,将图层1该为“背景”,图层2改为“花朵”。
2. 将“库”中各种花朵的元件拖入到舞台上。
3. 利用任意变形工具,调整花朵的大小及方向。
4. 也可以利用复制粘贴功能
二、介绍时间轴
“时间轴”是决定画面出现先后顺序以及所在层次的工具,是动画播放的“指挥官”。
我们就是利用时间轴来组织和控制文档内容在一定时间内播放的图层数和帧数的。下面我们就来认识时间轴面板。
“关键帧”“普通帧”“空白关键帧”“播放头”“当前帧”“帧频”
“播放动画所需要的时间”
三、画蛋壳
1.新建图层“蛋壳”
2.选中“椭圆工具”,在舞台上单击,然后在“属性”面板中设置笔触颜色为#999999,笔触高度为2.5,样式为实线。
3.在混色器中设置“填充样式”为线性,单击左侧滑块设置为#FAD3AF,右侧滑块为#FFFDF9.
4.在舞台左侧画出一个椭圆并调整为蛋壳形状。
四、延长图层帧
1.分别单击“背景”“花朵”图层上的“锁定/解除锁定图层”按钮,解除锁定。
2.单击选择“背景”图层,向右拖动时间轴上的滑块,使时间轴显示出第280帧。
3.单击第280帧,单击鼠标右键,执行“插入帧”命令,将背景图层的时间轴延长到了280帧,也可用F5.
4.单击选中花朵图层,在第90帧“插入关键帧”也可用F6.
5.用同样的方法在蛋壳图层第15帧“插入关键帧”。
第二课时
一、制作逐帧动画
将图层“背景”“花朵”锁定,我们开始制作逐帧动画
1.选中“刷子工具”,设置填充颜色为#999999,设置刷子大小与蛋壳边缘粗细相近,样式为圆形。
2.拖动鼠标在蛋壳上画出一条锯齿线。锯齿线一定要横穿蛋壳,两端要稍稍越过蛋壳边缘线,否则在后边的步骤中将无法按需要进行选择。
3.选中“选择工具”,按住shift键依次单击蛋壳上半部分的填充色及上半部分的边缘线,将上半部分蛋壳选中。
4.连续按动键盘上的方向键向上移动被选中的上半部分蛋壳至适当高度。
5.选中“墨水瓶”工具,设置线条颜色、笔触高度等属性与蛋壳边缘线一致。
6.用“墨水瓶工具”在蛋壳下边缘单击,为其添加线条颜色。
7.单击第20帧,按F6键,插入关键帧。
8.用“选择工具”选中蛋壳的上半部分,按动键盘上的方向键向下移动被选中的部分,使其回到原来的位置。
9.单击时间轴上第一帧,按下回车就可以预览效果。
10.参考课本35页图设置蛋壳开合位置。
二、课堂小结
这节课我们学习了逐帧动画,制作了蛋壳的开合
三、课外作业
阅读课本36页鼠绘技巧
第五课 小小妙计一点通
教学目标:1.学会导入素材
2.再次熟练制作逐帧动画
3. 完成小鸡出壳动画
教学重、难点:完成小鸡出壳动画
教学内容:学会导入素材,完成小鸡出壳动画
教学过程:
第一课时
一、布置背景
在公益广告的创作过程中,作品的设计者要围绕主线、把握主题,将作品的主题灵魂表现在视觉形象中。其中最基本的要求就是要寻找作品的基调。
二、导入素材
对于初学者或者没有美术基础的人来说,要想用手工绘制Flash作品中的所有素材确实有一定的难度,因此可以选择采用一些别人绘制好的图片来完成比较简单的flash作品。
注意:选择图片素材要依照作品的主题、内容、情节的表现进行。
1.执行文件、导入、导入到舞台命令,弹出导入对话框。
2.选择桌面上的小鸡图片,单击打开按钮。
导入的小鸡图形出现在舞台上,与此同时库中也出现了一个小鸡的位图。
第二课时
一、逐帧动画
素材导入完毕后,在图层“花朵”的上方新建一个图层“小鸡一”。
1.单击“场景1”按钮,进入场景编辑状态。
2.先将三个图层全部锁定,然后单击图层“花朵”。
3.单击“插入图层”按钮,在图层“花朵”上方新建一个图层,并将其更名为“小鸡一”
4.从库中选择图形元件小鸡一,拖动鼠标将其移动到场景中。
5.用“任意变形工具”单击选中元件小鸡一。
6.按住shift键拖动右上角的缩放控制点,将该元件缩小到恰好能被蛋壳遮着。
7.在该图层的第27、45、50、60、63、70、73帧依次插入关键帧,按照课本41页图调整小鸡位置。
二、调整动画
将播放头移动到第一帧按回车键测试,发觉动作太快,继续调整。
1.双击“帧频率”窗口,弹出“文档属性”对话框。
2.将“帧频”改为8fps。
3.单击确定。
这样一来,每秒钟播放的帧数减少了,动画中小鸡的动作速度自然就减慢了。
三、制作小鸡乱跑
1.在图层小鸡一和花朵的第93帧分别“插入关键帧”。
2.将小鸡移动到花朵上方。
3.用“任意变形工具”对花朵进行旋转和变形。
4.在图层小鸡一和花朵的第101帧分别“插入关键帧”。
将小鸡移动到43页图示位置并水平翻转。
6.选中在93帧中被小鸡踩坏的花朵,按Del键将其删除。
7.将小鸡下方的花朵进行变形。
这样就可以完成鸡宝宝踩踏花朵这段动画了。
四、课堂小结
这节课我们基本完成了小鸡的动画
五、课外作业
阅读43页《逐帧动画》
第六课 今天我来做导演
教学目标:1.了解影片剪辑元件
2.认识动作补间
3.学会调整Alpha值
教学重、难点:学习动作补间以及调整Alpha值
教学内容:学习动作补间以及调整Alpha值
教学过程:
第一课时
一、了解影片剪辑元件
动画片既可以直接在主时间轴上制作,也可以先将该片段内容制作成元件,然后再将其运用到场景之中。今天我们就用影片剪辑元件来制作一朵会哭会笑的花。
1.在图层1中画出一朵花。
2.新建图层2,用“铅笔工具”颜色为#663333在花上画出弯弯的眼睛和嘴巴。
3.再新建一个图形元件“哭脸”,哭脸的绘制方法和笑脸相似。
组成哭脸的花朵可以直接从元件“笑脸”中复制,哭脸上的眼泪轮廓线的“线条样式”可以用“点描”。
二、制作花朵绽放
1.打开库,单击选中图形元件“笑脸”,拖动鼠标将其放置到舞台的中央,并将该图层更名为“笑脸”。
2.单击第15帧,按F6键“插入关键帧”。
3.单击第1帧选中整个花朵,按照Alt键用“任意变形工具”将图形缩小。
4.单击图层“笑脸”1—15帧之间的任一帧,单击鼠标右键,从弹出的快捷菜单中选择“创建补间动画”。
三、了解补间动画
“补间动画”效果只需要制作连续动作的起始帧和终止帧,中间的过渡帧会由Flash自动完成。
在运用这种效果时应该注意,构成“动作补间动画”的元素必须是元件,且起始帧和终止帧必须为同一个元件。
元件变化速度的快慢由“补间动画”的总帧数控制。两个关键帧之间的过渡帧数越多,元件变化的速度越慢。
试着调整一下“笑脸”图层时间轴上两个关键帧之间的时间间隔和元件“笑脸”的始末关键帧中图形大小,让动画效果更逼真。
注意:始末两个关键帧的大小和形状必须和补间动画的持续时间相互配合,才能使花儿绽放的动画效果更加自然。
第二课时
一、制作花朵笑脸渐变
1.在图层“笑脸”的第34和56帧“插入关键帧”
2.执行“窗口”“属性”命令,打开“属性”面板。
3.单击选中第56帧后,再单击舞台上的整个图形,设置元件“颜色”样式为Alpha,设置“Alpha”值为0%。
4.在图层“笑脸”的34—56帧之间创建“动作补间动画”。
注意:Alpha值表示的是元件的透明度,Alpha值为100%,表示元件完全不透明,Alpha值为0%则表示元件完全透明。
二、制作花朵哭脸渐变
1.新建图层“哭脸”,单击该图层的第34帧“插入关键帧”。
2.将库中的图形元件“哭脸”拖动到舞台中间与“笑脸”重合的位置。
3.在图层“哭脸”的第56帧“插入关键帧”。
4.单击第34帧,重新选中元件“哭脸”,在“属性”面板中设置元件“颜色”样式为Alpha,值为0%。
5.在图层“哭脸”的34—56帧之间创建“动作补间动画”。
由于哭脸要持续一段时间,所以,要进一步增加两个图层的帧数
6.按住Shift键依次单击图层“笑脸”和“哭脸”的第115帧,将两帧同时选中。
7.按F6键在两图层上同时“插入关键帧”。
8.用同样的方法在两图层的第134帧“插入关键帧”。
9.在两图层的115—134帧之间创建“动作补间动画”。
10.单击图层“笑脸”的第210帧,按F5键插入帧。
三、完成动画
1.切换到“场景1”中,在图层“蛋壳”上方新建图层“花儿绽放”。
2.单击第75帧,按F6键插入关键帧。
3.单击库中的影片剪辑元件“花儿绽放”,拖动鼠标将其放置到图示位置,该图层的时间轴也自动延长到280帧。
4.视元件尺寸大小,用“任意变形工具”将元件调整至适当大小。
注意:影片剪辑中元件在场景中播放时,必须要有充足的时间,因此在元件所在图层的时间轴上插入的帧数至少要和影片剪辑持续的帧数相同。
四、影片测试
执行“控制”“测试影片”命令,或者同时按下Ctrl加Enter键。
五、课堂小结
这节课我们又学习了动作补间以及调整Alpha值。
六、课外作业
阅读课本50页《动画片中动作的节奏》
第七课 画龙点睛广告词
教学目标:1.学会汉字的制作
2.了解遮罩层
3.学会制作文字动画
教学重、难点:利用遮罩层制作文字动画
教学内容:利用遮罩层制作文字动画
教学过程:
第一课时
一、建立文字元件
1.选择文本工具
2.在“属性”面板中设置“文本类型”为静态文本,字体为楷体,字体大小为36,文本颜色我#FFFFFF,并将文字加粗、倾斜。
3.在元件编辑区单击,出现文字区域,文字区域中有一个不停闪烁的文字插入点。
注意:
用这种方法在文字区域输入文字时,如果不换行,文字区域会随着文字数量的增加不断增大:需要换行输入时,可以按“Enter”键换行。
文本输入错误,或者文字的字体、字号及颜色需要修改时,用“文本工具”选中需哎哟修改的文字,然后重新输入或者设置就可以了。
二、制作遮罩层
1.新建图层2.
2.用“矩形工具”画出一个长度和宽度都略大于文字区域的矩形,矩形的颜色不限(最好不是黑色)。
3.选中整个矩形,按“转换为元件”的快捷键F8,弹出“转换为符号”对话框。
4.将该元件命名为“遮罩”,设定“行为”为图形。
5.单击确定,矩形转换为元件。
三、学习遮罩
1.将图层1的帧数延长到115帧。
2.单击选中“图层2”的第1帧,将矩形移动到文字左侧。
3.在图层2 的第60帧插入关键帧。
4.将矩形向右移动到完全遮住文字的位置。
5.在图层2的1—60帧之间创建“动作补间动画”。
6.在图层2的名称上单击选中该图层。
7.单击鼠标右键,从弹出的快捷菜单中选中执行“遮罩层”命令,将图层2设置为遮罩层。
注意:
如果想取消“遮罩层”,只需要的那几鼠标右键,在快捷菜单中“遮罩层”前面的对勾上单击即可。
四、介绍遮罩
所谓遮罩就是遮挡住下面的对象,Flash中的遮罩层有两个用途:
1.用在整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见;
2.用来遮罩住某一元件的一部分,从而实线一些特殊的效果。
注意:
遮罩层中的图形对象在播放时是看不见的,而被遮罩层中的对象只能透过遮罩层中的对象被看到。如果你测试后不满意,还想重新编辑,就要先对他们“解锁”,解锁后,遮罩效果就会自动隐藏,要再次显示遮罩效果,只要将遮罩层和被遮罩层重新锁定即可。
五、完成文字动画
1. 单击场景1返回到场景编辑状态。
2.新建图层“广告词”。
3.单击该图层的第170帧,按F6键插入关键帧。
4.将影片剪辑元件“广告词”拖动到舞台上方。
六、课堂小结
这节课我们学习了利用遮罩层制作文字动画。
七、课外作业
阅读课本56页《广告中的文字》。
第八课 蝴蝶翩翩入画来
教学目标:1.学习引导路径动画
2.了解引导层
3.利用引导层制作蝴蝶飞
教学重、难点:利用引导层制作蝴蝶飞
教学内容:利用引导层制作蝴蝶飞
教学过程:
第一课时
一、了解引导层
将一个或多个图层链接到一个运动引导层,使一个或多个对象沿着同一条路径运动的动画形式被称为“引导路径动画”。这种动画可以使一个或多个元件完成曲线或不规则运动。
引导层用来指示元件运动路径,而“被引导层”中的对象是跟着引导线走的。
由于引导线是一种运动轨迹,因此“被引导层”中最常用的动画形式是“动作补间动画”,当播放动画时,一个或数个元件沿着运动路径移动。
二、导入蝴蝶
1.新建名称为蝴蝶,行为为影片剪辑的元件。
2.执行文件、导入、导入到舞台命令,打开“导入”对话框。
3.选择桌面上的“蝴蝶.gif”,单击打开。
三、制作引导层
1.在图层“广告词”上方新建图层“蝴蝶1”。
2.单击“添加引导层”按钮,在图层“蝴蝶1”上方添加一个自动命名为“引导层:蝴蝶1”的图层。
3.单击选中引导层,在第五帧“插入关键帧”。
4.选择“铅笔工具”,在选项栏中设置“笔触”为平滑,笔触的大小及颜色不限。
5.从舞台的右上角向左下角画出一条光滑的曲线。
四、制作蝴蝶运动
1.在图层蝴蝶1的第5帧“插入关键帧”。
2.将“影片剪辑”元件“蝴蝶”放置到舞台右上角,并用任意变形工具将蝴蝶适当缩小。
3.按下“对其对象”按钮,将鼠标指针指向元件的中心点,拖动鼠标使影片剪辑元件的中心对其曲线的端点。
4.在图层蝴蝶1的第65帧插入关键帧,将蝴蝶移动到舞台的左下角,并将其适当放大。
5.将元件的中心点与曲线的重点对其。
6.在5—65帧之间创建动作补间动画。
第二课时
一、测试蝴蝶飞动画
按回车键测试动画效果,可以看到蝴蝶沿着指定的轨迹飞翔了。
注意:在制作引导路径动画时,引导线只起到编辑作用,在动画最后输出时,引导线是不显示的。
二、制作蝴蝶纷飞
1.在“引导层:蝴蝶1”上方新建图层“蝴蝶2”和引导层“引导层:蝴蝶2”。
2.在图层“蝴蝶2”和“引导层:蝴蝶2”的第10帧分别插入关键帧。
3.在引导层中画出一条从左上角到右下方的曲线作为引导线。
4.将“影片剪辑”元件蝴蝶放置到舞台左上角,并执行“修改—变形—水平翻转”命令,改变蝴蝶的方向。
5.复制两只同样的蝴蝶,然后将其大小做适当调整。
6.执行“修改—组合”命令,使三只蝴蝶成为一个整体。
注意:这样以来,引导层中的引导线就成为三只蝴蝶共同的运动轨迹了,只要设置好三只蝴蝶的始末位置并创建动作补间动画就可以了。
7.在图层“蝴蝶2”的第80帧插入关键帧,并将三只蝴蝶移动到61页图示位置(与曲线终点对齐)。
8.将起点和终点的三只蝴蝶组合的中心点分别与引导线的两个端点对齐。
9.在图层“蝴蝶2”的10—80帧之间创建动作补间动画。
三、课堂小结
这节课我们学习了如何利用引导层完成动画
四、课外作业
阅读62页《怎样才能尽快提高动画制作水平》完成成长日记。
第九课 演绎快乐主旋律
教学目标:1.学习使用背景音乐
2.了解flash中声音的应用
教学重、难点:学习flash中声音的应用
教学内容:学习flash中声音的应用,插入背景音乐
教学过程:
第一课时
一、学习flash中声音的应用
1.在flash中应用声音主要包括以下几个重要内容:
导入声音、引用声音、编辑声音、压缩声音。
2.能直接导入flash中的声音文件主要包括wav和mp3两种格式。
二、导入声音
1.在图层“背景”下方新建图层“音乐”。
2.执行文件—导入—导入到库命令,弹出“导入到库”对话框。
3.选择桌面上的“春天在哪里.mp3”,文件类型为mp3,单击打开。
导入后可以在库中看到波形。
三、引用声音
1.选择图层“音乐”的第1帧,然后将库中的“春天在哪里.mp3”声音对象拖入到场景中。
2.单击选中图层“音乐”的第1帧,在属性面板中“同步”选项后的下拉列表中选择“数据流”。
注意:这样以来就实现了音乐和画面的同步。
3. 你还可以在属性面板的效果选项中设置声音的效果,或者单击编辑按钮对声音做更进一步的编辑。
四、课堂小结
今天我们学习了flash中声音的导入和音乐,为我们的动画配上了洞庭的音乐。
五、课后作业
阅读课本66页《广告音乐的作用》,完成成长日记。
第十课 成功喜悦共分享
教学目标:1.学习简单命令的使用
2.了解flash中按钮的应用
教学重、难点:学习flash中声音的应用
教学内容:学习flash中声音的应用,插入背景音乐
教学过程:
第一课时
一、 了解动作面板
在flash程序中,如果需要对flash影片进行播放顺序的控制或者根据观赏者的需求呈现不同的内容,就需要依靠“动作脚本语言”了。
运用flash动作脚本语言,不但能实现时间轴无能为力的一些特殊效果,而且它与flash的基本技巧相结合制作出来的动画效果将会更加精彩纷呈。
执行窗口—开发面板—动作命令,打开动作面板,这里有动作工具箱,脚本导航器等。
二、学习简单的命令
1.单击图层“背景”的最后一帧,按F6插入关键帧。
2.打开动作面板,选择动作工具箱中的“全局函数”“时间轴控制”双击动作代码“stop”。
这样一来当影片播放完毕后音乐、画面就都停止了,可是广告词和花儿绽放两个动画还在不停的重复播放。因为stop只对主时间轴上播放的动画起到控制作用。
3.分别进入影片剪辑“花儿绽放”和“广告词”的最后一帧插入命令stop。
三、学习按钮的使用
1.插入—新建元件命令,新建一个行为是按钮,名称为“重播”的元件,进入按钮编辑区。
注意:按钮元件的时间轴与图形元件及影片剪辑元件不同,它的时间轴分为四个帧,每一帧代表按钮的一种状态。“弹起”表示鼠标指针不在按钮上时的状态;“指针经过”表示鼠标指针在按钮上的状态:“按下”表示鼠标单击按钮时的状态;“点击”用来定义鼠标做出反应的区域。
2.用“椭圆工具”在舞台中间画出一个椭圆(笔触颜色无,填充颜色浅绿线性渐变。)
3.用“文本工具”输入文字“重播”(楷体22号,深绿色加粗、倾斜)
4.单击“指针经过”帧,插入空白关键帧,用“椭圆工具”在舞台中间画出一个比上一帧更大的椭圆,填充颜色不变。
5.用“文本工具”输入文字“Replay”(字体颜色不变,字号26)。
6.单击“按下”帧,按F6插入关键帧,用“任意变形工具”将椭圆及文字同时适当缩小。
7.单击“点击”帧,按F5插入帧。
8.单击场景按钮回到场景1,单击选中图层“背景”的最后一帧,从库中拖入按钮,放到舞台右下角。
9.执行“控制”“启用简单按钮”命令,按回车键在编辑状态下检测按钮。
10.选中按钮元件“重播”,在动作面板中输入以下语句
On(release){gotoAndPlay(1);}
这个语句的含义是,当用户单击gotoAndPlay()动作所分配到的按钮时,播放头将转到当前场景中的第一帧并开始播放。
四、发布
1.执行文件—发布设置命令,弹出“发布设置”对话框。
2.在格式选项卡下,选择要发布的文件格式,如flash,html等。
3.单击“发布”按钮,弹出“正在发布”进度显示窗口。
4.“发布”进程结束,单击确定按钮。
5.双击文件“公益广告.swf”就可以欣赏你自己制作的动画了。
五、课堂小结
这节课我们学习了按钮及命令的使用,并发布了自己制作的动画。
六、课外作业
阅读课本73页《从flash中导出透明背景的gif动画》,完成成长日记。
第十一课 精彩创意无
教学目标:1.学生自行设计一个动画
2.学习文件的压缩
教学重、难点:学生自己设计一个简单动画
教学内容:学生自己设计一个简单动画,并能够压缩上传
教学过程:
第一课时
一、 教师提出活动要求
1. 作品限采用flash软件制作
2. 作品开头制作播放按钮,制作者班级名字以字幕方式出现在作品结尾。
3. 作品格式:*.fla和*.swf。
4. 作品大小:画幅比例不超过600×400px,播放时间不少于30秒。
5. 作品内容健康,主题明确,创意新颖独特。
二、参考选题
1.以“科技走近公众,建设和谐社会”为主题,围绕河北本土特有的如地形地貌、河流、海洋、动植物及习性等,结合生活百科、信息技术、环保科学、地球科学等知识。
2.选择一个词,如“熊猫”“荷花”“李白”“纳米技术”等,选择多幅图制作动画效果,每幅图添加适当的文字表达自己的观点,要有背景音乐。
3.以“我爱祖国”“劳动创造世界”“让世界充满爱”“诚信价更高”“规矩成方圆”“勤俭成大业”“励志能成才”等为主题,制作一个公益广告。
三、学生制作、教师巡视指导
第二课时
一、学习使用压缩文件
下载文件的格式有很多,其中压缩格式的文件占大多数,最常见的有*.rar和*.zip两种压缩格式的文件。
安装winrar软件后,执行开始程序这个程序的命令,就可以打开winrar窗口,主要有标题栏、菜单栏、工具栏、状态栏组成。
压缩步骤:
1. 单击打开指定的文件夹
2. 单击选择要压缩的文件“公益广告.fla”。
3. 单击“添加”按钮,弹出“压缩文件名和参数”对话框。
4. 单击浏览按钮,选择生成的压缩文件保存在磁盘上的具体位置和名称。
5. 在“压缩选项”中勾选“创建固定压缩文件”选项。
6. 在“压缩文件格式”中选择RAR选项。
7. 单击确定按钮,弹出“正在创建压缩文件”对话框。
8. 压缩完成后增加了一个文件名为“公益广告.rar”的压缩文件。
解压缩步骤:
1. 单击选中要解压缩的文件。
2. 单击“解压到”按钮,弹出“解压路径和选项”对话框。
3. 单击“显示”按钮,选择压缩文件解压后保存在磁盘上的具体位置和名称。
4. 单击去定按钮对压缩文件进行解压缩。
二、作品的交流与评价
作品评价要求
项 目 内 容
主题内容 有明确的主题
内容健康向上,有一定的教育效果
选材巧妙
创意风格 创意新颖,有自己的风格,体现个性
动画场景生动有趣,引人入胜
构图有序,布局合理
视觉美感 场景美术效果突出、色彩搭配合理、富于美感
图片素材处理得当
自创图画特殊鲜明
音效 选取音效生动
对选取音乐的处理恰到好处
技术难度 动画进程、音乐、场景控制协调
动画中使用动作语言程度适当
含有其他特色技术
第二单元 网上梅园诗意浓
第12课 网络世界快乐行
教学目标:1.欣赏各种精美网页的制作
2.初识Frontpage,能够打开软件,认识各个部分组成。
3.通过对网页的欣赏进而对网页的制作产生浓厚的兴趣。
教学重、难点: 欣赏网页,了解网页的大体制作步骤
教学内容:观看各种网页,了解网页的制作过程
教学过程:
第一课时
一、激趣导入:
网络的大潮波涛汹涌,仿佛眨眼之间就扑到了人们的眼前,不断地改变着人们的生活。越来越多的人开始参与“编网织梦”,Frontpage、Macromedia网页三剑客等成了网页爱好者们茶余饭后的热门话题。在享受网络带给我们的周到服务的同时,那些设计精美的网页还给我们以美的享受。
二、欣赏课本上提到的网页
1.这个网页的布局方式很有创意,地面上的画架、树枝上的一串木牌以及飘带,看似随意但却营造出一种浓浓的生活情趣。这不仅是在布局一个网页,也是在布局自己的生活方式。
2.这是一个卡通网站的首页,虽然栏目很多,但精心的设计使得各个栏目醒目而不凌乱;图片均使用圆角,统一但并不呆板。
3.这个网页的特点主要是空白的使用,它给人以空灵和舒服的空间感。
4.网页使用曲线与直线的结合;色彩运用巧妙:蓝绿主色调使得画面清新而淡雅;通过色块对页面进行分割,简单明了。
三、欣赏学生作品“梅园诗画”
这是一个以梅花为主题的网页,制作者按照“问梅”、“赏梅”、“咏梅”、“画梅”等不同专题对梅花文化进行分类展示。
在网页设计中,借鉴了我国传统绘画中的写意手法,体现出典雅而不失灵动、简约而又极富韵味的整体风格,将古典与现代元素巧妙地结合起来。
四、了解网站的组成
网站通常有一个首页页面和一些分栏目的页面,分栏目的页面中一般还有很多个分页面。这就像一本书,需要有封面、封底和内容。
下面就是网站“梅园诗画”的层次结构以及内容描述:
首页页面:梅园诗画
二级页面:问梅、赏梅、咏梅、画梅
内容描述:梅花小知识、梅花摄影作品欣赏、咏梅诗词、梅花绘画作品
五、课堂小结
今天我们欣赏了各种网站,并简单了解了网站的制作层次
六、课外作业
阅读课本86页《网页设计的风格》
第二课时
一、激趣导入:
上节课我们欣赏了各种漂亮的网站,今天我们就来简单了解一下他们的制作过程
二、简介Frontpage
1、启动FrontPage 2000
单击任务栏上的“开始”按钮,从“程序” 菜单中选择“Microsoft FrontPage”单击。
2、FrontPage 2000的界面说明
FrontPage 2000的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口4大部分。
①、菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、【工具】、【表格】、【框架】、【窗口】、【帮助】等10个菜单。
工具栏单击【查看】菜单,选择【工具栏】,在出现的下拉菜单中列出了几种不同的②、工具栏,如果菜单项前面有一个对钧号“√”,表明在界在上已显示此菜单项。如果再单击一下,将取消这一项的显示。
③、视图栏中摆列着各种管理器的图标,这些管理器包括网页管理器、文件夹管理器、报表管理器、导航管理器、超链接管理器和任务管理器等。单击管理器图标以切换到相应的管理器。
④、主编辑窗口在编辑网页时,有3种显示方式,即普通、HTML和预览。
普通显示方式是最常用的显示方式,一般是在此方式下工作。
HTML显示方式在需要直接编辑或查看网页文件的HTML代码时使用,一般是为了实现某种特殊效果(如在网页中动态显示时间)而经常使用。
预览显示方式在需要预先观察网页的显示效果时使用。当使用管理功能时,主编辑窗口相应地会显示各种任务下的文件或站点信息。
什么是站点?
站点一般简写为“Web”,实际上就是把一些信息通过Web网页的方式相互链接起来,存放在一台被称为“服务器”的计算机中,别人可以通过Web浏览器查看网页信息。站点一般以国际通用的Internet地址来表示,例如:http://www.21cn.com或http://www.等,进入某个站点所见到的第一页一般称为“HomePage”,中文的意思是“主页”。
什么是主页?
主页的英文名称为“HomePage”,一般认为某个站点的第一个网页叫做主页,文件名通常是“index.htm”(index.html)或“default.htm”(default.html),也就是在Web浏览器“地址”栏内输入一个网址后,用户浏览到的第一个网页。用户再通过该主页的链接可以浏览到其他网页信息。
三、网页制作程序
网页的制作工具软件虽然各不相同,但基本制作程序大体相似,通常是:
1.确定主题,为网站命名
2.网站整体风格创意设计
3.布局规划
4.收集加工素材
5.选择网页制作工具进行制作
6.发布并管理网页
四、课堂小结
这节课我们简单了解了一下网页的制作,接下来的课程我们就要学习如何制作网页了。
五、课外作业
完成拓展空间和成长日记
第13课 建造网上小天地
教学目标:1.了解站点的建立
2.能够自己建立主页并为主页设置背景
3.能够设计出属于自己风格的站点。
教学重、难点:建立属于自己风格的站点
教学内容:为自己的站点设置首页
教学过程:
第一课时
一、导入
网页设计作为一种视觉语言,要讲究编排和布局,版式设计要做到主题鲜明,要点突出,以简洁的文字和画面体现出网站的风格,通过文字、图形的空间组合,表达出和谐与美。
二、站点简介
当我们规划设计好自己的网站,并准备开始着手制作的时候,首先就需要新建一个“站点”。
站点一般简写为“Web”,实际上就是把一些信息通过Web网页的方式相互链接起来,存放在一台被称为“服务器”的计算机中,别人可以通过Web浏览器查看网页信息。站点一般以国际通用的Internet地址来表示,例如:http://www.21cn.com或http://www.等,进入某个站点所见到的第一页一般称为“HomePage”,中文的意思是“主页”。
什么是主页?
主页的英文名称为“HomePage”,一般认为某个站点的第一个网页叫做主页,文件名通常是“index.htm”(index.html)或“default.htm”(default.html),也就是在Web浏览器“地址”栏内输入一个网址后,用户浏览到的第一个网页。用户再通过该主页的链接可以浏览到其他网页信息。
三、新建站点
实例:使用【只有一个网页的站点】模板创建一个Web站点。
操作步骤:
(1)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【站点】菜单项,出现一个【新建】对话框,在对话框的【指定新站点的位置】项中输入新站点的存放位置。
(2)提示:新站点的存放位置选择是磁盘存储方式,是因为考虑到实践操作中的方便。而一个站点要让在Internet上的用户正常浏览的话,应该通过FrontPage的站点发布功能或FT文件传送方式,把该站点内容传送至能提供存放空间的Web服务器上去。
(3)单击【确定】按钮。此时FrontPage会自动以新站点名建立一个站点,并显示一个正在创建站点的提示对话框,之后该站点很快便创建好了。
新建的站点只有一个主页index.htm文件,该主页还是空的,需要对它进行编辑添加内容。同时也可以添加一些网页到该站点中去。此外,我们发现该站点中包含有两个子文件夹。一个是_private文件夹,一般用来存放一些私人的文件,这些文件不会被别人看到。另一个是images文件夹,是FrontPage专门创建用来存放图像文件的文件夹,因为FrontPage扩展服务器的图像文件的默认目录为images。
4、关闭站点
打开【文件】菜单,选择【关闭站点】菜单项,则当前站点被关闭。
5、打开站点
站点内容需要修改或添加时,必须把该站点打开。操作过程如下:
打开【文件】菜单,在下拉菜单选择【打开站点】,出现一个对话框,在对话框的【文件夹】项中输入该站点的存放位置,然后单击【打开】按钮,站点将被重新打开。
6、收集图片
拷贝图片到新建站点的图片文件夹images中。
单击选择“images”文件夹,执行文件—导入命令,弹出导入对话框,然后执行一下操作:
(1)单击添加文件按钮,弹出将文件添加到导入列表对话框。
(2)在查找范围中逐级依次打开素材文件夹。
(3)按下ctrl+A快捷键,选中所有文件。
(4)单击打开按钮,返回导入对话框。
第二课时
一、导入
当准备工作完成遗憾,及可以开始制作我们的第一个网页---网站的首页了。
首页的作用就是为了吸引读者浏览网站的内容,在设计上应醒目、简明,令读者一目了然,留下良好的印象。
二、首页类型介绍
1. 形象展示型首页
文字信息较少,图像信息较多,通过艺术造型和设计布局,利用一系列与网站风格和服务内容有关的图像、文字信息,组成一幅生动的画面,向浏览者展示一种形象、一个氛围,从而吸引浏览者进入浏览。
2. 信息罗列型首页。
在首页中罗列出网站的主要内容分类、重点信息、网站导航等,这种风格比较适合信息量大、内容丰富的网站。
三、制作首页
下面我们来制作“梅园诗意”网站的首页,其中包含了网站的名称、导航栏及网页制作人员组成等信息。
双击文件“index.htm”在网页编辑区打开空白的“index.htm”文件,按照一下方法为网页添加背景图片。
1. 执行格式—背景命令,打开“网页属性”对话框。
2. 单击选中背景图片。
3. 单击浏览按钮,弹出“选择背景图片”对话框。
4. 在站点根文件夹“D:\mysite”的images子文件夹中选择要插入的图片文件“bj.jpg”。
5. 单击确定按钮。
6. 还可以为网页设置背景颜色和默认的文本颜色,再单击确定。
为网页添加了背景图片后,可以将窗口左侧的“试图栏”及“文件夹列表”暂时关闭,以便更好的观察插入图片后的效果。如果你对网页效果感到满意,就可以将这个网页文件保存起来了。
执行文件—另存为,输入网页标题,单击确定,设置首页文件名为index.htm选择保存类型为web页。
四、课堂小结
选择恰当的图片作为网页背景,易于表现网页的主题与风格,创造出新颖、独特的视觉效果。但是浏览一下大型商业网站,你会发现它们更多运用的是白色、蓝色、黄色或其他颜色的搭配,因为这样的做法可以大大加快网页的载入速度。
五、课外作业
阅读《网页色彩的搭配》
第14课 网上梅园诗意浓
教学目标:1.能够在网页中加入文字
2.能够正确处理网页上图片的颜色
3.小组合作完成
教学重、难点:通过小组合作使自己网页的色彩美观
教学内容:初步建立网页上的文字及图片
教学过程:
第一课时
一、激趣导入
网页中少不了文字和图片,把这些网页元素布局在自己希望的位置,一个网页就做出来了。其实制作网页就是这么简单,马上开始行动吧!
二、为网页添加图片
1、执行文件—打开站点命令,弹出打开站点对话框。
2、单击选择打开下拉列表,从中选择站点所在的mysite文件夹。
3、单击打开按钮,打开梅园诗画站点。
4、双击文件夹列表中的index.htm,打开前面制作的网站首页文件。执行插入--图片--来自文件命令,将网站名称的图片文件“wzhmch.gif”插入到网页中。
5、单击选中插入的图片,编辑窗口弹出图片工具栏,按下图片工具栏中的“绝对定位”按钮。
6、当鼠标指针指向图片,当指针变成十字形状时,按住鼠标左键,将图片拖放到适当的位置,在网页编辑区中该图片以外的任意处单击,即可以关闭绝对定位功能。
三、修改图片
“网站名称”图片上有一部分没有处理掉的白色背景,插入到网页中后,图片和背景图片不能很好地融合,怎么办呢?利用“图片”工具栏中的“设置透明的颜色”工具,就可以使图片和网页背景浑然一体。
1.按下图片工具栏中的设置透明的颜色按钮。
2.将鼠标指针移动到图片上,用黑色的小箭头指向图片的白色背景,单击鼠标,将白色背景部分设置为透明。
第二课时
一、激趣导入
这节课给你一个大显身手的机会。请你在网页背景的留白处依次插入首页的重要元素----导航图片,并利用绝对定位工具条将起拖放到网页的适当位置。
二、插入文字
从工具栏中的【字体样式】下拉菜单选择“标题1”,然后从键盘输入“这是我的第一个主页”,按回车键。
从【字体样式】下拉菜单选择“标题2”,输入“网页制作”,然后按shift加回车键。接着输入“姓 名:小明”,按回车键。
提示:我们在输入文本的时候使用了两种按回车键的方式:直接按回车键,按Shift键加回车键。大家可以在实际操作中自己体会一下这两种方式的区别。
从【字体样式】下拉菜单选择“标题2”,输入“联系信息”,然后按回车键。接着输入“地 址:唐山市路南区郑家庄小学”,按Shift键加回车键;输入“邮政编码:063001”,按Shift键加回车键;输入“电 话:(0315)2961427”,按Shift键加回车键;输入“电子邮箱:xxxxx@21cn.com”,按回车键。输入“很高兴能认识您,希望能和您交朋友!”,按回车键;输入“谢谢您参观我的网页,再见!”,按回车键。
三、字体设置
(1)、选定文字 选定文字的方法有两种:
①一种方法是将鼠标指针移到待选文字段的开头,按住鼠标左键,不要松手,然后向右下方拖动,将该段文字涂黑;
②另外一种方法就是用键盘上的光标箭头将插入点移到选定文字的开头,然后左手按着Shift键,右边按光标移动键(如←、↑、→、↓键),也可将所选定文字涂黑。
(2)、修饰文字
修饰文字是指文字的字体、字型、大小(字号)、颜色、效果的设置。
例:选定“这是我的第一个主页”文字后,设定文字属性的操作有以下两种:
①单击【格式】菜单项,选择【字体】后出现字体对话框;
②或单击鼠标右键,在弹出的对话框中单击【字体】选项,也将出现字体对话框。
③这时在对话框中的字体设为“隶书”,字型为“加粗”,大小为“6 (24磅)”,颜色为“红色”,效果为默认。单击【确定】按钮即可完成文字修饰。例中其他字体修饰的操作也类似进行。
四、保存网页
单击常规工具栏上的“ ”,或单击【文件】菜单再选择【保存文件】,就可以把正在编辑的网页保存起来。或直接按Ctrl+S键也可以保存网页。
如果你是在修改已经保存过的网页,修改过的网页将被重新保存。但如果是新建的网页,单击“ ”后会出现对话框。
在对话框中的【文件名】栏内输入网页的文件名(如“First”),单击【保存】按钮,该网页就会保存到当前的站点上。FrontPage 2000保存文件的类型主要有网页文件(.htm)、FrontPage模板(.tem)、文本文件(.txt)、超文本模板文件(.htt)等。
五、关闭网页
(1)、单击【文件】菜单并选择【关闭】,或直接按Alt+F4键,如果此时网页文件未保存,就会出现一个提示对话框。
(2)、当单击对话框中的【是】按钮时,将出现保存网页对话框,输入网页文件名并单击【保存】按钮后,网页文件将被关闭;当单击【否】按钮时,该网页文件不保存并关闭;当单击【取消】按钮时,该网页文件不关闭,并返回主编辑窗口。
六、打开网页
(1)、单击“ ”工具图标,或单击【文件】菜单并选择【打开】,或直接按Alt+O键,出现一个打开文件对话框。
(2)、在对话框中单击【查找范围】下拉列表框,选择文件路径。在文件列表区中列出被选中该文件路径下的所有文件。
(3)、选中一个文件,然后单击【打开】按钮,或直接双击该文件名即可打开文件。
七、预览网页
网页编辑完成后,可以用浏览器预览一下网页的效果。有两种预览网页的方式:
(1)、一种是单击FrontPage 2000主编辑窗口下面的【预览】标签,就打开一个FrontPage编辑器自带的浏览器,看完之后,单击【普通】标签,又切换到编辑状态。
(2)、另一种是单击【常规】工具栏的“ ”图标按钮(或直接按Ctrl+Shift+B键,或单击【文件】菜单并选择【在浏览器中预览】菜单项),将启动已安装好的浏览器并打开该网页。如果在预览之前没有把修改后的或新建的网页保存起来,则将弹出一个对话框提示你应该首先保存该网页。
注意:在预览窗口中看到的是网页在发布后的大致样式。要看到网页在WWW浏览器中的真实情形,必须使用【在浏览器预览】菜单项查看。而且,即使是在WWWW浏览器中浏览通过,不同的浏览器产生的效果不一样。在发布到Internet上的前后,最好使用不同的浏览器多浏览几次。
八、课堂小结
这节课我们学习了如何利用图片和文字完善自己的网页。
六、课外作业
熟练操作本课内容
第15课 页面规划秒管家
教学目标:1.能够合理规划自己的网页
2.能够利用表格制作网页
3.能够为网页上的表格设置正确美观的格式
教学重、难点:利用表格美化自己的网页
教学内容:利用表格美化自己的网页
教学过程:
第一课时
一、激趣导入
一个简洁明快的网页往往使人印象深刻,更容易吸引浏览者的目光,今天我们就来学习如何设计网页。
二、简单介绍表格
表格是网页制作中一种非常有用的工具,不仅可以用来存放数据,还可以用来组织数据,甚至组织整个网页,实现网页的精细排版,我们先来简单了解一下表格。
表格的几个部分组成:
表头:表格的首行,表示表格各列的名称。
行:表格的一行,水平方向。
列:表格的一列,垂直方向。
单元格:在表格中,每个方格称为一个单元格(Cell),可以为每个单元格设置不同的属性。
边框:在表格的四周,可设置有无。
在每个单元格中,除了可以填写文本之外,还可以放置图片、表单等,表格的最大好处是能分类显示数据,同时还能利用表格来组织网页的整体布局。
三、建立“问梅”网页
1、执行文件→ 新建→网页命令,弹出新建对话框。
2、在常规选项卡中选择“普通网页”。
3、单击确定按钮,创建一个空白网页文件。
四、插入表格
在FrontPage 2000中插入一张表格的方法有三种:
1、使用【插入表格】工具按钮
(1)将光标移到你要插入表格的位置,即插入点。
(2)在常用工具栏中单击“ ”图标工具,在下方出现一个“4×5”的表格小方框。
(3)按住鼠标左键,同时朝右下方拖动鼠标,在方框底部显示相应的表格行数和列数。
(4)松开鼠标左键,在插入点处自动出现一张空的表格。
2、使用【表格】菜单命令
(1)将光标移到你要插入表格的位置,即插入点。
(2)单击【表格】菜单,选择【插入】选项,并在选择项中单击【表格】选项,出现插入表格对话框。
(3)在对话框中,在“行数”输入需要的行数(例中为5),在“列数”输入需要的列数(例中为4),同时设置好“对齐方式”、“边框粗细”、“单元格边框”、“单元格间距”。
(4)最后单击【确定】按钮,屏幕上就会出现一张空的表格。
说明:如果在对话框中“边框粗细”值设置为0时,则该表格线在浏览网页时不会被显示出来。
3、使用手工绘制表格
如果想在网页中插入一张不规则的表格,可以采用以下步骤:
(1)将插入点移到你要添加表格的地方。
(2)在【表格】菜单中选择【绘制表格】选项,或单击表格工具栏上的“ ”。
(3)此时光标变成笔的形状。按住鼠标左键,然后向右下方拖动,到达适当位置的时候松开鼠标左键后,将会出现“1×1”的表格。
(4)如果要在表格内添加表格的行和列,可以利用这支笔在表格内画水平或垂直线。
(5)单击工具栏上的“ ”擦除按钮,可以删除表格内的任意一条线。
4、嵌套表格
很多时候,我们要在一张表格中插入另一张表格,其做法与前面所介绍的插入表格操作并没有太大的区别,只是在插入表格之前应该把插入点定位在单元格内。利用这种做法,我们将可以制作出非常复杂却符合我们要求的表格来。
第二课时
一、设计网站标志
1、在表格的第一行所在的单元格内单击。
2、执行插入→高级→插件命令,弹出“插件属性”对话框。
3、单击浏览按钮,在弹出的“选择插件数据流”对话框中打开“images”文件夹,选择要插入的文件“wm.swf”。
4、设置插件的大小,高度为80,宽度为100.
5、设置完毕,单击确定按钮。
二、预览
1、选中整个表格,按下“绝对定位”按钮,然后将鼠标指针移动到表格边框线上,当指针变成十字形状时,将整个表格拖放到页面顶部。
2、单击“预览”,查看网页在发布后的大致模样。
(在预览模式下,用于页面布局的表格线不见了,这是我们将表格边框粗细设置为0产生的效果。)
三、表格的属性
1、选定表格元素
选定表格元素指选择表格的单元格、一行或一列、多行或多列、整个表格。在表格元素被选定后,才能修改单元格属性、表格属性、复制和删除等操作。
选定整个表格。其操作方法:单击【表格】菜单,选择【选定】单击【表格】选项,则整个表格反色显示,表示已被选定了整个表格。
选定表格的行。其操作方法主要有以下两种:
将光标移到表格中某一行的左边,当光标变成向右的“ ”黑色小箭头时,单击鼠标左键。此时该行反色显示,表示该行已被选中。
将光标移到表格中某一行的任意一个单元格内,然后单击【表格】菜单,选择【选定】后再单击【行】选项,则该行被选定。
选定表格的列。其操作方法主要也有两种:
将光标移到表格中某一列的最上边,当光标变成一个向下的“ ”黑色小箭头时,单击鼠标左键,此时该列被选中。
将光标移到表格中某一行的任意一个单元格内,然后单击【表格】菜单,选择【选定】后再单击【列】选项,则该列被选定。
选定单元格
选定一个单元格。将光标移到某单元格内,单击【表格】菜单,选择【选定】后再单击【单元格】选项,则该单元格被选定。
选定多个单元格。在选定一个单元格后,用手按住Ctrl键,不要松开,然后单击要选定的其他单元格。
选定表格的多行或多列。用与“选定多个单元格”的类似方式来操作。
2、设置表格的属性
设置整个表格的多种属性,其操作步骤如下:
将光标移到表格中,单击【表格】菜单,选择【属性】,再单击【表格】选项,或在表格上单击鼠标右键,接着选择【表格属性】,出现一个对话框。
对齐方式。该设置是整个表格在网页内的对齐方式,开始设为默认,可设置为左对齐、右对齐、水平居中、两端对齐。
单元格边距。单元格边界与内容之间的距离。该值越大,单元格内的文字与表格线的距离越大。
单元格间距。单元格与单元格之间的距离。
边框粗细。设置表格外边框的宽度。如不显示外边框,可将此值设为0。
此外,在【表格属性】对话框中,也可以设置表格的背景颜色、背景图片、整个表格的宽度与高度,只要单击相应按钮,就可以为表格设置各种属性。
3、设置单元格的属性
设置某个单元格的属性,也可同时设置多个单元格的属性。步骤如下:
(1)选定要设置属性的单元格(如果只须设置某个单元格的属性,只需将光标移到该单元格内,无需选定该单元格);
(2)单击【表格】菜单,选择【属性】,然后单击【单元格】选项,或单击鼠标右键,选择【单元格属性】选项,将会出现一个对话框。
(3)在单元格属性对话框中,我们可以设置单元格的多种属性。
(4)设置完毕后,单击【应用】按钮,可以预览一下设置效果。
(5)单击【确定】按钮,设置结束。
在这个对话框中,我们可以设置单元格的属性有:
单元格布局
水平对齐方式。有五个选项:默认左对齐、左对齐、右对齐、水平居中、两端对齐。
垂直对齐方式。有五个选项:默认靠上、靠上、居中、基线、靠下。
行跨距。即单元格跨越的行数。例如此数设为2,则这个单元格就对应两行单元格的高度。
列跨距。即单元格跨越的列数。例如此数设为2,则这个单元格就对应两行单元格的宽度。
标题栏。如果选择了此项,表格的第一行就变成了表格的标题。
不换行。设置此项后,这个单元格中的文字不会随着表格大小的变化而自动换行。
指定宽度。该单元格的最小宽度。可以是像素(Pixels)或百分数(in percent)。如果是百分比方式,该值是指该单元格占整个表格宽度的百分比。
指定高度。该单元格的最小高度,一般无需指定。浏览器会根据显示窗口的大小而自动调整。
边框
边框颜色。设置边框的颜色,默认为黑色。
亮边框。单元格内右边与下边框的颜色。
暗边框。单元格内左边与上边框的颜色。
背景
单击“颜色”下拉列表框右边的箭头,可以指定每个单元格的背景颜色。没有指定时,浏览器采用默认颜色。也可以为每个单元格指定不同的背景图案,单击“浏览”按钮就可以实现这一点。
第三课时
一、插入与删除、合并与拆分
一张表格创建后,可以在单元格内输入文字、符号等,也可以删除单元格中的任何内容,这与在网页中的操作方式完全相同。以表格为例输入内容。
此外,可通过插入、删除、合并、拆分表格或单元格,得到需要的新表格。
1、插入行或列
创建一张表格后,觉得表格的行数或列数不够,就用到插入行或列的功能。
实例:把表格扩大,最下方插入3行,最右方插入2列。
(1)在表格中插入行。其操作方法有以下两种:
使用菜单命令:
将光标定位在待插入行的任意单元格内;
然后单击【表格】菜单,选择【插入】菜单项,在子菜单中单击【行或列】选项,出现对话框;
在对话框中选择【行】单选按钮。在【行数】框内输入要插入的行数(例如3),并在【位置】栏中选择“所选区域下方”单选按钮。
单击【确定】按钮,在光标所在行的下方插入了新的行(设为3)。
使用【表格】工具栏
选定一行后,单击工具栏上的“ ”插入行图标,也可以在选定行的上方插入新的一行。
(2)在表格中插入列。
其操作方法与插入行类似,也有以下两种:
使用菜单命令:
将光标定位在待插入列的任意单元格中;
然后单击【表格】菜单,选择【插入】菜单项,在子菜单中单击【行或列】选项,出现对话框;
在对话框中选择【列】单选按钮。在【列数】框内输入要插入的列数(设为2),并在【位置】栏中选择“所选区域右方”单选按钮。
单击【确定】按钮,则在当前所在列的右方插入了新的列(2列)。
使用【表格】工具栏
选定一行后,单击工具栏上的“ ”插入列图标,则可以在选定列的左方插入新的一行。
经过上述插入行和列的操作步骤,得到表格中插入3行、2列后的效果.
2、删除行、列或单元格
当表格中某行或某列数据多余,或某不需要单元格时,应把它们删除。
实例:以表格为例,把表格中新插入的3行、2列删除。
通过删除行、列进行。操作步骤如下:
先删除行:
选定行:将光标移到表格中要删除的行的最左边,光标变成向右的“ ”小箭头时,单击鼠标左键,该行反色显示被选中。
删除行:单击“ ”图标工具,则选中行被删除。
重复上述A)、B)两步骤把其余两行也删除。
再删除列:
选定列:将光标移到表格中要删除的列的最上边,光标变成向下的“ ”黑色小箭头时,单击鼠标左键。此时该列被选中。
删除列:单击“ ”图标工具,则选中列被删除。
重复上述a)、b)两个步骤把另一列也删除。
通过删除单元格进行。其操作步骤如下:
选定一个单元格:单击【表格】菜单项,选择【选定】,单击【单元格】选项。
选定多个单元格:选定一个单元格后,用手按住Ctrl键,不要松开,然后单击要选定的其他所有需要删除的单元格。
删除单元格:单击【表格】菜单,选择【删除单元格】选项,则选中的所有单元格都会被删除。
3、合并单元格
将多个单元格合并成一个单元格。下面通过一个实例来说明,其操作步骤:
(1)在表格中,选定第一列的后面的三个单元格。
(2)单击“ ”图标工具,或单击【表格】菜单项,选择【合并单元格】选项,这时选定的三个单元格合并为一个单元格。
(3)选中最后一行的后两个单元格,采用上述(2)中的操作也可以把它们合并为一个单元格。
4、拆分单元格
将一个单元格拆分成多个单元格,这与合并单元格的操作正好相反。拆分单元格有两种不同的方式:一种是按行拆分,即把单元格按行拆分为多个单元格;另一种是列拆分,即把单元格按列拆分为多个单元格。
下面我们通过一个实例来说明,其操作步骤如下:
(1)在网页中插入一个2×2的空表格。
(2)将光标定位在第一行第一列的单元格内。
(3)单击鼠标右键,弹出一个快捷菜单,也可以单击【表格】菜单项。此时选择【拆分单元格】菜单项,出现一个对话框。(或单击“ ”图标工具)
(4)在【拆分单元格】对话框中,选择【拆分为行】单选按钮。
(5)把【行数】的值设为2(默认值),单击【确定】按钮。此时表格第一行第一列的单元格被拆分为两行,左上角两个单元格。
(6)将光标定位在第一行右边的单元格内。
(7)再次单击鼠标右键,选择【拆分单元格】菜单项,出现一个拆分单元格对话框。
(8)在对话框中,选择【拆分为列】单选按钮。
(9)把【列数】的值设为2(默认值),单击【确定】按钮。此时表格第一行第二列的单元格被拆分为两列,得最后结果。
二、表格的妙用
我们除了用表格组织来数据之外,还有就是用表格来组织网页内容。
下面用实例来说明如何设计由一个表格所组织的网页,其操作步骤如下:
(1)在空白网页中插入一个2×2的表格,将表格的边界大小设置为0;
(2)在表格第一行第一列的单元格和第二行第二列的单元格中输入内容;
(3)在表格中第一行第二列的单元格和第二行第一列的单元格中插入图片;得最后的效果。
三、课外作业
阅读课本《网页中文字信息的设计和编排》,完成拓展练习和成长日记。
第16课 一剪梅花万样娇
教学目标:1.能够合理规划自己的网页
2.能够利用缩略图处理图片
3.能够为网页上的表格添加图片
教学重、难点:利用缩略图美化自己的网页
教学内容:利用缩略图美化自己的网页
教学过程:
第一课时
一、激趣导入
精美的图片可以为网页增添色彩,吸引浏览者,给人以美的享受。但一般来说,图像越大、越多,传送页面的时间就越长。如果载入时间超过十至十五秒,很多浏览者就会等得不耐烦,那么,在实际应用中,如何解决这一矛盾呢?
二、自动缩略图
Frontpage2000软件提供了一种自动缩略图方式,帮助我们解决了这一难题。
所谓的自动缩略图,是指它能自动将图片重新取样,使图片的尺寸减小,并将图片另存,在网页中自动将小图链接到原图。这样,就使带有图片的页面在浏览器中打开的速度加快,并且当访问者访问页面时,可以通过浏览缩略图来决定是否需要浏览原图。
三、设置页面背景
1、先插入一个2行1列的表格,对齐方式选择默认,边框粗细为0,单元格边距,单元格间距为1,指定宽度为993像素。
2、在表格第2行所在单元格中插入一个5行1列的小表格,对齐方式选择水平居中,边框粗细为0,单元格边距为1,单元格间距为20,指定宽度为75百分比。
3、执行表格→拆分单元格命令,分别将小表格第2、3、5行所在单元格拆分为6列。
4、在大表格第1行所在单元格内放置网站logo,在插件属性对话框内设置插件高度为80,宽度为993。小表格第4行所在单元格内需要插入一条水平线。
四、制作图片缩略图
1、执行工具→网页选项命令,弹出对话框。
2、单击自动缩略图选项卡。
3、设置缩略图的显示大小(例如宽度为90像素)
4、单击确定。
5、单击准备插入图片的单元格,插入图片文件
6、单击选中插入的图片,在图片工具栏下按自动缩略图按钮。
7、在图片外任意位置单击,完成操作。
说明:实际上,Frontpage的自动缩略图技术对图片进行了两方面的处理:一是将比较大的原图另存为一幅体积比较小的图片;二是自动将小图链接到原图。这两方面的处理都是自动完成的,极大的提高了网页的制作效率。
第17课 互联互接超链接
教学目标:1.学习超链接的制作方法
2.掌握超链接的制作技巧
3.能够为网页上设置合理的超链接
教学重、难点:能够为网页上设置合理的超链接
教学内容:能够为网页上设置合理的超链接
教学过程:
第一课时
一、激趣导入
每当我们在浏览网页时,都会发现当鼠标指针移动到某些文字或图片时,就会变成一只手掌“ ”的样子,这时只需单击鼠标左键就可以打开另一网页了。这就是我们将要讲述的网页“超链接”方式。正是由于有了“超链接”,因特网才会如此神奇和流行!网页上的超链接主要有三种:一种是相对网址的超链接;第二种是与绝对网址(如http://www.)的超链接;第三种是指在同一网页内的超链接。
二、同一网站内的超链接——相对网址的超链接
下面我们以一个实例来说明,其效果。
其操作步骤如下:
(1)创建一个新网站,并在网站内新建几个网页文件:主页“index.htm”、兴趣“interest.htm”、相册“photo.htm”、喜爱站点“myfav.htm”等文件。
(2)打开主页文件“index.htm”,输入文字内容,并单击“ ”插入图片按钮,从“剪贴画库→学院”中插入图片。
(3)选定网页内的文字“兴趣”,单击“ ”超链接工具按钮,出现【编辑超链接】对话框。在对话框的文件列表中选择“interest.htm”网页文件。
(4)与(3)操作类似,对文字“相册”、“喜爱站点”分别设置超链接到文件“photo.htm”、“myfav.htm”。
(5)为邮箱设置超链接:选定文字“chinaboyo@21cn.com”,单击“ ”超链接按钮,出现“编辑超链接”对话框。然后单击“ ”按钮(在对话框“URL”栏右边),出现“创建电子邮件超链接”对话框。在文字框内输入邮箱地址(如chinaboyo@21cn.com),连续单击【确定】按钮,就可以创建一个超链接到邮箱地址。
(6)最后保存文件到主页“index.htm”。
三、绝对网址的超链接
下面通过一个实例来说明,其效果。
其操作步骤如下:
(1)在上例所创建的网站中,打开喜爱站点“myfav.htm”网页文件。
(2)输入标题“我喜爱的站点”,“文字链接:”,按回车键。
(3)单击“ ”工具按钮,建立项目符号列表。
(4)文字上的超链接:输入“中文搜狐”,选定这段文字,然后单击超链接工具按钮,在所出现的对话框“URL”栏内输入“http://www.”,最后单击【确定】按钮。就可以创建了文字上的超链接;
(5)与(4)操作类似,创建超链接:广州视窗(http://www./index.html)、中华-国中网(http://www.)、碧海银沙(http://www.);
(6)输入文字“图片链接:”,单击“ ”工具图标,出现对话框。依次选择在images目录中已准备好待设置超链接的图片:“chinaschool.gif”(中国国讯网校)、“netease.jpg”(广州网易)、“sina.gif”(新浪网)、“yongth.gif”(中国青年报)。
(7)图片上的超链接: 选定刚插入的图片 ,单击“ ”超链接工具按钮,在出现的对话框中的“URL”栏内输入网址“ http://www./”。单击【确定】按钮。这样,也就创建了一个图片上的超链接。
(8)采用与(5)类似的方式,分别设置其他图片的超链接。例如,广州网易(http:///)、新浪网(http:///)、中国青年报(http:///zqb/home/GB/home.htm)。
(9)输入文字“[返回主页]”,创建一个超链接到主页文件“index.htm”。
(10)保存网页文件到喜爱站点“myfav.htm”。
第二课时
一、同一网页内的超链接——书签
当一个网页文件比较长的时候,为了便于浏览,我们往往在网页中使用书签。在网页中使用书签的步骤分为两步:第一步是先定义书签,即在网页中某位置上定义一个书签;接下来是使用书签,即定义一个超链接到该书签。下面通过一个实例来说明,其效果。其操作过程如下:
(1)新建一个网页,并在网页中输入文字等内容。
(2)定义书签:
a.将光标移到主编辑区第三行的“个人信息”前面,然后单击【插入】菜单项,选择【书签】选项,出现一个对话框。在【书签名称】框内输入“aaa”,单击【确定】按钮,则一个书签被定义了。
b.采用上述类似方法,在“兴趣爱好”、“喜爱站点”前面分别定义书签名称为:bbb、ccc。
(3)使用书签:定义完书签后,下面我们要创建超链接到这些书签了。链接书签的操作基本与前面所述超链接的操作相同。只是在【创建超链接】对话框中不使用URL,而是使用书签。
a.用鼠标选定第二行的文字“个人信息”,然后单击“ ”超链接工具按钮,出现【编辑超链接】对话框。
b.在对话框中的【可选】区域中,打开【书签】下拉列表框,出现上面所定义过的三个书签名称:aaa、bbb、ccc。选中“aaa”后单击【确定】按钮,则第二行上的“个人信息”被链接到“aaa”书签上。
c.用同样的方法将“兴趣爱好”、“喜爱站点”分别链接到“bbb”、“ccc”书签。
(4)将网页文件保存起来,并在浏览器中浏览。当单击第二行上的“个人信息”、“兴趣爱好”、“喜爱站点”时,屏幕会自动滚动到相应的书签位置并显示内容。
二、超链接的编辑
修改超链接目的端
右击链接源→超链接属性→编辑超链接对话框→选择要链接的目的端→ok
设置超链接颜色
右击网页空白处→主题→修改→颜色→自定义→项目→超链接→颜色→ok→另存为→保存主题→ok
删除超链接
方法1:选中超链接文本或图片→delete
方法2:右击超链接(在网页视图模式下)→超链接属性→在url地址栏中,删除其内容→ok
三、课外作业
阅读课本《创建电子邮件超链接》完成成长日记和拓展空间。
第18课 灵活布局新主张
教学目标:1.学习框架网页的制作方法
2.掌握框架网页的制作技巧
3.能够为网页上设置合理的框架
教学重、难点:能够为网页上设置合理的框架
教学内容:能够为网页上设置合理的框架
教学过程:
第一课时
一、激趣导入
上网的时候,你一定看到过这样的网页:页面上有一部分内容总是固定不变的,而页面的其他区域会随着点击的超链接的不同而发生相应的变化,这种网页其实是一种有着框架结构的网页。
二、框架页的基本组成
框架页是一种特殊格式的网页,主要由边框、网页、滚动条组成。在框架页中,每个框架都有一个网页相连接。当打开框架页时,则同时载入每个框架所相连的网页文件。
在框架页中显示的是三个独立的网页组成的(实际下载了四个网页,还包括框架页本身这个网页)。主体框一般用来显示正文内容的。
三、创建框架页
FrontPage 2000提供了10个框架网页向导帮助我们创建框架页。其操作步骤如下:
(1)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【网页】菜单项,出现新建对话框。
(2)在对话框中单击【框架网页】选项卡。
(3)在选项卡中选择【目录】,此时在【预览】栏中会显示被选中的框架结构图,并在上方显示说明情况。
(4)单击【确定】按钮后,出现框架结构图。
(5)新创建的框架结构共有2个网页窗口,其中一个在左边,另一个在右边。这时单击【新建网页】按钮后,我们可以在当前框架网页中输入文字、图片等内容了。(如果这时单击【设置初始网页】按钮后,将弹出一个“创建超链接”的对话框,可以为所在的框架超链接到指定的网页上去。)
(6)框架的保存:单击“ ”工具按钮,出现【另存为】对话框。
保存左边框的网页文件。在对话框右面的框架示意图中,单击左边框后为蓝色,表示左边框中的网页正准备保存。在“URL”中输入文件名“in1”,单击【确定】按钮后,此时左边框的网页文件被保存起来。
保存右边框的网页文件。紧接着,在对话框的框架示意图中,右边框显示为蓝色。在“URL”中输入文件名“in2”,单击【确定】按钮后,右边框的网页文件也被保存起来。
保存框架本身网页。在对话框中整个框架示意图的边框为蓝色,在“URL”中输入文件名“index.htm”,单击【确定】按钮后,此时保存的是整个框架页文件。
第二课时
一、框架及框架页的属性
1、设置框架的属性
框架有很多属性,例如框架的名称、宽度、高度、边距、滚动条、可调整性、间距等。以框架页为例说明,其具体操作方法如下:
单击要设置属性的框架,然后单击【框架】菜单,再单击【框架属性】菜单项,出现对话框。可以在此对话框中修改框架的属性了。
2、框架页的属性
以上是设置每个框架的属性,而修改整个框架页的属性,其具体操作如下:
在【框架属性】对话框中,单击【框架网页】按钮,会出现“网页属性”对话框。
在这个对话框中的“框架”选项卡中只有两项:
“框架间距”:指框架之间的边框的宽度,默认值为2。
如果框架不要显示出边框时,可单击“显示边框”前面的单选框,取消“√”。
二、框架页的编辑
在框架页中,当要拆分某一框架时,单击框架→拆分框架→选择并确定。当要删除某一框架时,单击框架→删除框架→选择并确定。
三、框架页的超链接
在框架页中,当单击左边的超链接时,在右边框中显示该超链接网页的内容。下面我们将以框架页为例,说明怎样实现框架网页之间的超链接。其操作步骤如下:
(1)在左边的框架中选择要设置超链接的“ ”图片(或文字)。
(2)单击“ ”超链接工具按钮,出现【编辑超链接】对话框。这时在对话框的文件列表中选择“jbxx.htm”。
(3)在对话框右下角“目标框架”栏,单击“ ”按钮,出现一个对话框。
在对话框中,单击框架示意图中不同的区域,也可以单击右边列表框的选项,在对话框的“目标设置”栏中就相应显示所选定的区域名称。其中:
网页默认值(main):超链接的网页将显示在右边框(即“main主体”)。
相同框架:在左边框单击某个超链接时,其链接网页也将显示在左边框。
整页:单击某个超链接时,只显示所链接的网页,原来框架不再显示。
新建窗口:单击某超链接时,所链接的网页将显示在新打开的浏览器中。
父框架:单击某个超链接时,将返回上一级的框架。
四、课外作业
阅读课本《中国画的形式》完成成长日记和拓展空间
第19课 一目了然乐其中
教学目标:1.学习框架网页的制作方法
2.掌握框架网页的制作技巧
3.能够为网页的导航栏设置合理的链接
教学重、难点:能够为网页的导航栏设置合理的链接
教学内容:能够为网页的导航栏设置合理的链接
教学过程:
第一课时
一、激趣导入
网页的框架结构最大的优势在于,一个框架中的超链接内容可以在同页面中的另一个框架中打开,使浏览者可以在一个页面上看到更多的信息,这是提高网页界面设计质量的一个强大的设计手段,它可以把网页从接近于传统的纸张文本逐级地转变为更加生动活泼的计算机界面。
二、建立导航栏连接
1、拖动鼠标选中文字“红梅顽石图”,单击鼠标右键,执行“超链接”命令,弹出“创建超链接”对话框。
2、单击选中mywebs子文件夹。
3、单击选中网页文件hmwsht.htm
4、单击“更改目标框架”按钮,弹出“目标框架”对话框。
5、单击选择“网页默认值”
6、单击“当前框架网页”栏中的右框架图标,使其变成蓝色。
7、单击“确定”按钮,返回“创建超链接”对话框。
8、设置完毕,单击确定按钮。
三、用同样的方法学生自己为导航栏中其他文字设置超链接。
注意设置完毕要保存,也可以在IE浏览器中测试设置后的实际效果。
四、课堂小结
在具体制作网页时,不但要准确判断在什么情况下使用框架来创建网页,而且要选择适当的框架结构,只有这样才能充分发挥框架的作用,使网页结构更合理,界面更美观。
五、课外作业
阅读课本《写意水墨画》完成拓展空间及成长日记。
第20课 古韵清幽赏梅花
教学目标:1.为网页添加背景音乐
2.为网页添加滚动字幕
3.设置网页过渡效果
教学重、难点:能够为网页添加合理的动态效果
教学内容:能够为网页添加合理的动态效果
教学过程:
第一课时
一、激趣导入
让自己的网站与众不同、充满个性,一直是网页制作者不懈追求的目标。在多媒体技术大行其道的今天,网页不仅仅可以有色,还可以有声。
二、添加背景音乐
1、单击选中“mysite”文件夹。
2、执行“文件→导入”命令,弹出导入对话框。
3、单击“添加文件夹”按钮,弹出“浏览文件夹”对话框。
4、单击选择需要添加的文件夹,单击确定。
5、单击浏览按钮,在文件夹music下选择声音文件mhsn.wav
6、选择“不限次数”或指定音乐循环播放的次数。
7、单击确定。
8、切换到预览模式,婉转悠扬的古琴曲酒开始萦绕在耳边了。
三、添加动态元素
图片、音乐的使用可以增加网页的视听效果,而在网页中适当添加一些动态元素,则可使网页更加生动活泼。
1、 输入字幕文本“万花敢向雪中出,一树独先天下春。”
2、 设置滚动字幕“方向”“速度”“表现方式”“文本对齐方式”。
3、 设置字幕宽度为250像素,高度为40像素。
4、 指定重复属性为连续。
5、 设置完毕单击确定按钮。
四、设置网页过渡效果
不少同学对幻灯片切换时的各种动画效果印象很深,所谓网页过渡其实就类似于幻灯片的切换,即当网页打开和关闭时,整个网页发生的动画效果。
1、 在网页“赏梅”中执行“格式”→“网页过渡”命令,打开对话框。
2、 单击打开下拉列表,从中选择“网页过渡”效果在什么时候发生。
3、 输入效果持续时间。
4、 选择“过渡效果”
5、 设置完毕,单击确定按钮并保存网页。
五、课外作业
阅读课本《梅花三弄》完成拓展空间和成长日记。
第21课 厚积薄发出佳作
教学目标:1.学生小组合作制作网页
2.为网页添加各种效果
3.网页制作要有创意
教学重、难点:学生自己动手设计网页
教学内容:学生动手设计网页
教学过程:
第一课时
一、激趣导入
一学期的课程结束了,下边我们就来自己动手设计制作一个贴近我们学习和生活实际的班级主题网页。
二、参考选题
1、六*班—我们共同的家
终于到了毕业的一天,长大的我们要走向一个崭新的世界,记忆中曾留下无数难忘的故事,那段美好的少年时光值得我们用心珍藏。让我们在网上建造一个共同的家,记录那些与老师、同学携手并肩的日子,记录那些永恒的泪水和欢笑。
2、环保小卫士—行动起来
迄今为止,地球是我们发现的唯一拥有生命存在的星球。地球因生命而孤独,地球也因生命而美丽。然而,在长期的掠夺资源之后,人们终食恶果—大自然向人类亮起了红灯。
环保小卫士,行动起来吧!保护地球,你和你的朋友们能做什么?
3、拯救濒危动物-- ****
野生动物是自然界的有机组成部分,任何一种野生动物的灭绝都有可能造成局部平衡的破坏,一旦生态平衡被破坏,将会影响到人类自身的生存环境,只有了解更多的自然界野生动物知识,才能更加热爱自然、保护自然,善待动物、保护动物。
三、作品要求
1、主题积极健康。
2、层次结构清晰,界面友好,页面整体和谐统一。
3、无错别字及语法错误。
4、图文和谐,相得益彰,合理有序。
5、色彩的运用,动画、音乐、滚动字幕等动态元素的使用应与主页主体风格协调统一,以充分表达网页主题以及作者的设计思想、个人风格、个人文学艺术等方面的修养和审美情趣。
6、网页的深度至少包括二级页面。
7、页面包含的超链接描述正确,操作有效。
第二课时
一、 制作要点
1、 成功网站的最大秘诀在于让浏览者感到网站的内容对他们非常有用。主题和栏目确定下来以后,需要我们广泛收集素材。在收集素材过程中,首先要注意素材的分类;其次文件名要易懂易记,便于调用;最后,要注意尊重知识产权,避免侵犯他人的版权。
2、 在我们制作的主题网页中,最好能有一些视角独特的原创作品。
3、 网页设计切忌雷同,一定要有设计个性。
二、 站点发布
在校园网上发布站点,可以使老师和同学们在学校里任何一台与校园网相连的电脑上浏览这个网站。
三、 作品交流与评价
1、 组内自我评价。
2、 组间交流赏析。
3、 修改完善作品
四、 课堂小结
同课章节目录