动态网站第四讲PPT讲稿.ppt

《动态网站第四讲PPT讲稿.ppt》由会员分享，可在线阅读，更多相关《动态网站第四讲PPT讲稿.ppt（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、动态网站第四讲第1页，共39页，编辑于2022年，星期五本次课程教学内容：本次课程教学内容：项目三项目三 网站主页设计与制作网站主页设计与制作 子项目子项目3-2 3-2 主页制作（特殊效果设计与制作）主页制作（特殊效果设计与制作）第2页，共39页，编辑于2022年，星期五本次课程教学目标：本次课程教学目标：能力目标：能力目标：会使用行为技术完成主页中背景音乐的插入；会使用行为技术完成主页中背景音乐的插入；会使用会使用Marquee标签制作滚动字幕；标签制作滚动字幕；会利用会利用AP元素、时间轴和行为技术完成运动广告的制作；元素、时间轴和行为技术完成运动广告的制作；会使用会使用Javascri

2、pt代码完成图片轮番显示、无缝滚动效果的制作；代码完成图片轮番显示、无缝滚动效果的制作；知识目标：知识目标：知道什么是行为？知道什么是行为？知道知道marquee标签的使用方法标签的使用方法 知道知道AP元素作用元素作用第3页，共39页，编辑于2022年，星期五工作任务列表工作任务列表任务一：为主页插入背景音乐任务一：为主页插入背景音乐任务二：制作滚动公告栏任务二：制作滚动公告栏任务四：制作图片轮番显示效果任务四：制作图片轮番显示效果任务五：制作图片连续滚动效果任务五：制作图片连续滚动效果任务三：制作运动广告任务三：制作运动广告效果展示效果展示第4页，共39页，编辑于2022年，星期五准备工作

3、准备工作1 1、将带走的、将带走的ClassWebClassWeb压缩包解压压缩包解压,并设并设ClassWebClassWeb文件夹文件夹为主目录；为主目录；2 2、建立名为、建立名为“MyclassMyclass”的动态站点；的动态站点；3 3、在站点文件夹下新建、在站点文件夹下新建mediamedia文件夹，并在文件夹，并在mediamedia文件下新文件下新建建musicmusic文件夹；文件夹；4 4、利用搜索引擎搜索自己喜欢的背景音乐（、利用搜索引擎搜索自己喜欢的背景音乐（midmid格式或格式或wavwav格式，不要采用格式，不要采用mp3mp3格式格式），将搜索到的背景音），将

4、搜索到的背景音乐以乐以bg.midbg.mid（或（或bg.wavbg.wav）为文件名存于）为文件名存于musicmusic文件夹下。文件夹下。第5页，共39页，编辑于2022年，星期五给网站主页插入背景音乐给网站主页插入背景音乐步骤步骤1 1、在在DreamWeaverDreamWeaver中打开存于站点文件夹中打开存于站点文件夹ClassWebClassWeb下的下的index.htmlindex.html文件，文件，进入进入“设计设计”视图方式视图方式，然后然后选择页面左选择页面左下角的下角的标签，以选中整个页面（表示将行为添加给标签，以选中整个页面（表示将行为添加给整个文档整个文档b

5、odybody部分）部分）；步骤步骤2 2、执行执行“窗口窗口”/“行为行为”命令，在窗口的右侧打开行为面命令，在窗口的右侧打开行为面板。在行为面板中单击板。在行为面板中单击 按钮，在弹出的菜单中选择按钮，在弹出的菜单中选择“播播放声音放声音”命令，弹出命令，弹出“播放声音播放声音”对话框，如图所示。对话框，如图所示。工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第6页，共39页，编辑于2022年，星期五步骤步骤3 3、单击单击“播放声音播放声音”对话框中的对话框中的“浏览浏览”按钮，弹出按钮，弹出“选择文件选择文件”对话框，在对话框中选择存放于对话框，在对话框中选择存放于musicm

6、usic文件文件夹中的夹中的bg.mid(bg.mid(或或bg.wav)bg.wav)文件，单击文件，单击“确定确定”按钮。按钮。步骤步骤4 4、检查检查“行为行为”面板中的事件是否为面板中的事件是否为“onLoadonLoad”（表（表示主页加载就播放声音），若不是，在事件下拉列表框中示主页加载就播放声音），若不是，在事件下拉列表框中选取该事件。选取该事件。工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第7页，共39页，编辑于2022年，星期五步骤步骤5 5、选择插入的声音文件（一般位于所插背景音乐的选择插入的声音文件（一般位于所插背景音乐的主页下方），在主页下方），在“属性属性”

7、面板中单击面板中单击“参数参数”按钮，打开按钮，打开参数窗口，设置其参数，后按参数窗口，设置其参数，后按“确定确定”按钮，如图所示。按钮，如图所示。1、选、选取取该该声声音音文文件件2、单击、单击“参数参数”按钮按钮3、设置以下参数、设置以下参数工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第8页，共39页，编辑于2022年，星期五各参数的含义：各参数的含义：LOOP LOOP 音乐是否循环播放音乐是否循环播放AUTOSTART AUTOSTART 音乐是否自动播放音乐是否自动播放MASTETSOUND MASTETSOUND 允许将多个允许将多个标识组合起标识组合起 来，作来，作为一

8、个进行控制为一个进行控制HIDDEN HIDDEN 是否完全隐藏媒体播放器，若没是否完全隐藏媒体播放器，若没 有有隐藏，则会显示出系统默认的媒体播放插件隐藏，则会显示出系统默认的媒体播放插件工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第9页，共39页，编辑于2022年，星期五认识行为认识行为：1 1、什么是行为？、什么是行为？行为的特点是强大的网页交互功能。它行为的特点是强大的网页交互功能。它是事件与动作的彼是事件与动作的彼此结合此结合。是。是基于基于JavaScriptJavaScript来实现动态网页和交互的。一个行来实现动态网页和交互的。一个行为是由一个事件触发一个动作组成的，

9、因此行为的为是由一个事件触发一个动作组成的，因此行为的基本元素基本元素有两个：事件和动作。有两个：事件和动作。例如，插入背景音乐，此时的页面加载称为事件，播放音例如，插入背景音乐，此时的页面加载称为事件，播放音乐称为动作，一般的行为都是要乐称为动作，一般的行为都是要由事件来激活动作由事件来激活动作。完成工作任务一所需的知识完成工作任务一所需的知识第10页，共39页，编辑于2022年，星期五2 2、行为面板、行为面板：在在DreamwaeverDreamwaever中，对行为的添加和控制主要通过中，对行为的添加和控制主要通过“行为行为”面板来实现。选择面板来实现。选择“窗口窗口”/“行为行为”命

10、令，命令，打开行为面板，如图所示。打开行为面板，如图所示。显示设置事件显示设置事件完成工作任务一所需的知识完成工作任务一所需的知识第11页，共39页，编辑于2022年，星期五3 3、添加行为、添加行为：用户可以将行为添加给整个文档（用户可以将行为添加给整个文档（bodybody部分），也可以添加给部分），也可以添加给链接、图像、表单等对象或任何其他链接、图像、表单等对象或任何其他HTMLHTML元素。元素。每个事件可以指定多个动作。动作按顺序列表依次发生。每个事件可以指定多个动作。动作按顺序列表依次发生。各事件的含义如下表所示各事件的含义如下表所示：完成工作任务一所需的知识完成工作任务一所需的

11、知识第12页，共39页，编辑于2022年，星期五常见行为事件及含义事件（事件（Events）说说 明明OnBlur取消选中对象时OnClick单击对象OndblClick双击对象OnError发生错误时OnFocus选中指定对象时OnKeyDown按下任意键盘键时OnKeyPress按下并释放任意键盘键时OnKeyUp按下键盘键后释放时OnLoad图像或页面载入完成时OnMouseDown按下光标键时OnMouseMove光标在指定对象上移动时OnMouseOut光标离开指定对象时OnMouseOver光标刚开始指向指定对象时OnMouseUp释放按下的光标键OnSubmit提交表单时onUn

12、load离开页面时 注：NS表示Netscape Navigator,IE表示Internet Explorer,表示选中项。完成工作任务一所需的知识完成工作任务一所需的知识第13页，共39页，编辑于2022年，星期五4 4、编辑行为、编辑行为：在添加了行为以后，可以改变触发动作的事件、添加或在添加了行为以后，可以改变触发动作的事件、添加或删除动作以及改变动作的参数等。删除动作以及改变动作的参数等。修改事件修改事件：只需在事件下拉列表框中进行选取即可：只需在事件下拉列表框中进行选取即可修改动作修改动作：在行为面板中右击（或双击）欲修改的动作，在弹：在行为面板中右击（或双击）欲修改的动作，在弹出

13、的快捷菜单中选取出的快捷菜单中选取“编辑行为编辑行为”命令，在弹出的窗口中进行命令，在弹出的窗口中进行修改即可。修改即可。完成任务所需的知识完成任务所需的知识第14页，共39页，编辑于2022年，星期五工作任务一课堂实践工作任务一课堂实践为自己的班级网站主页添加弹出信息窗口，使之为自己的班级网站主页添加弹出信息窗口，使之在主页面加载时即弹出信息，如下图所示。在主页面加载时即弹出信息，如下图所示。第15页，共39页，编辑于2022年，星期五制作滚动公告栏制作滚动公告栏步骤步骤1 1、将需制作滚动通知处的原来切片删除，在删除之前记下将需制作滚动通知处的原来切片删除，在删除之前记下其高度和宽度；其高

14、度和宽度；步骤步骤2 2、选择选择“插入插入”/“标签标签”命令，在命令，在HTMLHTML标签下的页元素标签下的页元素右侧选取右侧选取marqueemarquee，单击，单击“插入插入”按钮，如图所示。按钮，如图所示。工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第16页，共39页，编辑于2022年，星期五步骤步骤3 3、切换到代码视图方式，将光标定位于切换到代码视图方式，将光标定位于标签之标签之间，输入滚动的文字间，输入滚动的文字,当滚动的文字多行时，当滚动的文字多行时，每一行文字后加每一行文字后加htmlhtml换行换行标识符标识符；步骤步骤4 4、使用使用“窗口窗口”/“标签检查器

15、标签检查器”命令，单击命令，单击“属性属性”选项卡，单选项卡，单击击“属性属性”中中“未分类未分类”前的前的“+”，展开，展开marqueemarquee标签的属性，进标签的属性，进行属性设置，如图所示。行属性设置，如图所示。属性值各参数设置如下：属性值各参数设置如下：behaviorbehavior：alternatealternatedirectiondirection：rightrightlooploop：-1 -1stylestyle：font:14px;color:red;font:14px;color:red;工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第17页，共39页，编

16、辑于2022年，星期五direction direction 参数：参数：表示滚动的方向，默认为表示滚动的方向，默认为left left 工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第18页，共39页，编辑于2022年，星期五BehaviorBehavior参数：表示滚动的方式参数：表示滚动的方式工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第19页，共39页，编辑于2022年，星期五looploop 表示循环的次数，值是正整数，默认为无限循环，默认值为表示循环的次数，值是正整数，默认为无限循环，默认值为无限。无限。“-1-1”也为无限也为无限工作任务工作任务2 2制作滚动公告栏制作

17、滚动公告栏第20页，共39页，编辑于2022年，星期五scrollamountscrollamount 表示运动速度，值是正整数，单位为像素，默认为表示运动速度，值是正整数，单位为像素，默认为6 6，即每次移动，即每次移动6 6像素的距离像素的距离,数值越小移动速度越慢。数值越小移动速度越慢。Scrolldelay Scrolldelay 用于设定两次滚动操作之间的间隔时间，单位为用于设定两次滚动操作之间的间隔时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。毫秒。如果要让滚动看起来流畅，数值应该尽量小。heightheight、widthwidth 表示运动区域（滚动字幕）的高度和宽

18、度，值是正整数表示运动区域（滚动字幕）的高度和宽度，值是正整数（单位是像素）或百分数，默认（单位是像素）或百分数，默认width=100%heightwidth=100%height为标签内元素的高为标签内元素的高度。度。Style Style 设置字幕内容的样式。如设置字幕文字大小为设置字幕内容的样式。如设置字幕文字大小为1212像素，则像素，则输入输入“font:12px;font:12px;”。工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第21页，共39页，编辑于2022年，星期五步骤步骤5、各参数设置完毕，设置鼠标行为。各参数设置完毕，设置鼠标行为。进入进入“行为行为”面板，单击

19、面板，单击“显示所显示所有事件有事件”按钮，出现事件，选取按钮，出现事件，选取其中的其中的onMouseOver和和onMouseOut两个事件两个事件显显示示所所有有事事件件按按钮钮onMouseOveronMouseOver事件设置鼠标移动到滚动字事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。设置幕时的动作，常设置为停止滚动。设置为为this.stop();this.stop();onMouseOutonMouseOut事件设置鼠标离开滚动事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。字幕时的动作，常设置为开始滚动。设置为设置为this.start();this.start(

20、);工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第22页，共39页，编辑于2022年，星期五制作运动广告制作运动广告(需用到层和时间轴需用到层和时间轴)1 1、制作简单路径的运动广告制作简单路径的运动广告步骤步骤1 1、准备工作：、准备工作：自己制作或网上搜索自己制作或网上搜索二幅二幅用来制作运动广告效果的图用来制作运动广告效果的图片，将其以片，将其以move1move1和和move2move2为文件主名存于站点根目录（为文件主名存于站点根目录（ClassWebClassWeb）下的）下的imagesimages文件夹中；文件夹中；步骤步骤2 2、打开需放置运动广告的网页文件：、打开需放

21、置运动广告的网页文件：打开打开index.htmlindex.html网页文件；网页文件；步骤步骤3 3、插入层：、插入层：选择选择“插入插入”/“布局对象布局对象”/“AP DivAP Div”命令，在网命令，在网页文件中插入层；（插入层的另一种方法：选择页文件中插入层；（插入层的另一种方法：选择“窗口窗口”/“插入插入”命令，在文档编辑窗口的上方将出现如下图所示的工具栏，选中其命令，在文档编辑窗口的上方将出现如下图所示的工具栏，选中其中的中的“布局布局”项，选取其中的项，选取其中的“绘制图绘制图”按钮）按钮）工作任务工作任务3 3运动广告的制作运动广告的制作绘制层按钮就是我绘制层按钮就是我

22、第23页，共39页，编辑于2022年，星期五步骤步骤4 4：向层中插入图像：向层中插入图像：选中层，使用选中层，使用“插入插入”/“图像图像”命令，命令，在弹出的在弹出的“图像标签辅助功能属性图像标签辅助功能属性”对话框的对话框的“替换文件替换文件”框中框中输入文本（也可以不输），详细说明框中可根据需要进行输入或输入文本（也可以不输），详细说明框中可根据需要进行输入或不输，这里我们在替换文本框中输入不输，这里我们在替换文本框中输入“班级活动班级活动”后按后按“确定确定”按按钮。钮。工作任务工作任务3 3运动广告的制作运动广告的制作第24页，共39页，编辑于2022年，星期五步骤步骤5 5：将图

23、像移入层中，调整层的大小与图像的大小一致；将图像移入层中，调整层的大小与图像的大小一致；步骤步骤6 6：选中层及其内的图像，使用选中层及其内的图像，使用“修改修改”/“时间轴时间轴”/“增加对增加对象到时间轴象到时间轴”命令（或选中层及其内的图像，右击，在弹出的快捷命令（或选中层及其内的图像，右击，在弹出的快捷菜单中选取菜单中选取“添加到时间轴添加到时间轴”命令），此时将在窗口下方弹出命令），此时将在窗口下方弹出“时间时间轴轴”属性对话框；属性对话框；工作任务工作任务3 3运动广告的制作运动广告的制作第25页，共39页，编辑于2022年，星期五步骤步骤7 7：插入一个关键帧：插入一个关键帧：将

24、最后一帧拖长到将最后一帧拖长到5050帧，将帧，将“播放头播放头”拖到拖到1010帧处，右击动画条，在弹出的菜单中选帧处，右击动画条，在弹出的菜单中选“增加关键帧增加关键帧”命令（或按命令（或按下下CtrlCtrl键，在动画条上单击，这时就在键，在动画条上单击，这时就在1010帧处插入了一个关键帧）帧处插入了一个关键帧）。同样的分别在。同样的分别在2020帧、帧、3030帧和帧和4040帧处增加关键帧。帧处增加关键帧。步骤步骤8 8：选中第选中第1010帧，将层（包括图像）拖向合适位置；在时间轴上选第帧，将层（包括图像）拖向合适位置；在时间轴上选第2020帧，将层（包括图像）拖向另一合适位置；

25、在时间轴上选第帧，将层（包括图像）拖向另一合适位置；在时间轴上选第3030帧，将帧，将层（包括图像）拖向另一合适位置；在时间轴上选第层（包括图像）拖向另一合适位置；在时间轴上选第4040帧，将层（包括帧，将层（包括图像）拖向另一合适位置；在时间轴上选第图像）拖向另一合适位置；在时间轴上选第5050帧，将层（包括图像）拖帧，将层（包括图像）拖回起始位置。回起始位置。步骤步骤9 9：若希望有更复杂的动画路径，可多定义一些关键帧及在画面若希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置。中的位置。工作任务工作任务3 3运动广告的制作运动广告的制作第26页，共39页，编辑于2022年，星期五

26、步骤步骤1212：按中时间轴中部的按中时间轴中部的“”按钮，即可观察动画效果。按钮，即可观察动画效果。步骤步骤1313：按按F12F12键预览效果键预览效果我们发现广告图像运动的速度较快，如何改变运动的速度呢？改变速我们发现广告图像运动的速度较快，如何改变运动的速度呢？改变速度的方法：度的方法：工作任务工作任务3 3运动广告的制作运动广告的制作步骤步骤1111：勾选时间轴属性中的自动播放和循环两个选项。勾选时间轴属性中的自动播放和循环两个选项。第27页，共39页，编辑于2022年，星期五步骤步骤1515：给时间轴加入交互（当鼠标放到图像上时，图像停：给时间轴加入交互（当鼠标放到图像上时，图像停

27、止运动，当鼠标离开图像时，图像继续运动）止运动，当鼠标离开图像时，图像继续运动）（1 1）选中动画条，打开行为面板，单击行为面板中的添加行选中动画条，打开行为面板，单击行为面板中的添加行为按钮为按钮“”，在弹出的快捷菜单中选，在弹出的快捷菜单中选“播放时间轴播放时间轴”动作动作，从弹出的，从弹出的“播放时间轴播放时间轴”对话框中选择要播放的时间轴，对话框中选择要播放的时间轴，单击单击“确定确定”按钮，如图所示：按钮，如图所示：工作任务工作任务3 3运动广告的制作运动广告的制作步骤步骤1414：改变广告运动的速度：改变广告运动的速度：将时间轴属性栏中的将时间轴属性栏中的Fps(Frame per

28、 second)Fps(Frame per second)框中的值改小框中的值改小（默认值为（默认值为1515），即可改变运动速度。），即可改变运动速度。第28页，共39页，编辑于2022年，星期五（2 2）将默认的鼠标事件改变为将默认的鼠标事件改变为onMouseOutonMouseOut事件（即鼠标离开时，事件（即鼠标离开时，图像运动）。图像运动）。同样操作，再次选同样操作，再次选“停止时间轴停止时间轴”动作，改变动作，改变onclickonclick事件为事件为onMouseOveronMouseOver事件。事件。（即鼠标放到图像上时，图像停止运动）；（即鼠标放到图像上时，图像停止运动

29、）；这样就完成了当鼠标指针移到图像上时，图像停止，当鼠标移开这样就完成了当鼠标指针移到图像上时，图像停止，当鼠标移开图像进，图像运动，完成交互的效果。图像进，图像运动，完成交互的效果。工作任务工作任务3 3运动广告的制作运动广告的制作第29页，共39页，编辑于2022年，星期五2 2 制作复杂路径的动画制作复杂路径的动画若按上述方法创建一个复杂路径的动画，创建一个个关键帧的方法比较麻若按上述方法创建一个复杂路径的动画，创建一个个关键帧的方法比较麻烦，我们通过使用烦，我们通过使用录制层的时间轴运动路径录制层的时间轴运动路径的方法来完成：的方法来完成：步骤步骤1 1使用使用“插入插入”/“布局对象

30、布局对象”/“AP DivAP Div”命令，插入一个新层；命令，插入一个新层；步骤步骤2选中刚插入的层，使用选中刚插入的层，使用“插入插入”/“图像图像”命令，依据图像的大小调命令，依据图像的大小调整层的大小；整层的大小；(若是在同一页面上对不同的层图像进行动画的设置，需新若是在同一页面上对不同的层图像进行动画的设置，需新建时间轴：使用建时间轴：使用“修改修改”/“时间轴时间轴”/“添加时间轴添加时间轴”)步骤步骤3保持层处于被选择状态；保持层处于被选择状态；步骤步骤4使用使用“修改修改”/“时间轴时间轴”/“记录记录APAP元素的路径元素的路径”命令；命令；工作任务工作任务3 3运动广告的

31、制作运动广告的制作第30页，共39页，编辑于2022年，星期五步骤步骤5 5在页面上拖动层（包含图像在内的层），创建想要的运动路在页面上拖动层（包含图像在内的层），创建想要的运动路径；这样径；这样DreamweaverDreamweaver便自动添加一个动画条到时间轴中，同时也便自动添加一个动画条到时间轴中，同时也添加了适当数量的关键帧；添加了适当数量的关键帧；步骤步骤6 6在在“时间轴时间轴”面板中，单击面板中，单击“回首帧回首帧”按钮，勾选按钮，勾选“自支播自支播放放”和和“循环循环”选项，即完成复杂路径动画的制作。选项，即完成复杂路径动画的制作。3 3 广告图片的交替变换广告图片的交替变

32、换步骤步骤1 1选中要交替图像的选中要交替图像的APAP元素及图像；元素及图像；步骤步骤2 2进入进入“行为行为”面板，单击面板，单击“添加行为添加行为”按钮，在弹出的按钮，在弹出的快捷菜单中选快捷菜单中选“交换图像交换图像”；工作任务工作任务3 3运动广告的制作运动广告的制作第31页，共39页，编辑于2022年，星期五步骤步骤3 3在弹出的交换图像对话框中的在弹出的交换图像对话框中的”浏览浏览“按钮，把当按钮，把当鼠标移动上去替换的图像选中，单击鼠标移动上去替换的图像选中，单击”确定确定“按钮；确保按钮；确保预先载入图像选项是被勾选状态；到此图像替换效果制作预先载入图像选项是被勾选状态；到此

33、图像替换效果制作完毕。完毕。工作任务工作任务3 3运动广告的制作运动广告的制作第32页，共39页，编辑于2022年，星期五步骤步骤4 4 再次单击再次单击“添加行为添加行为”按钮，在弹出的快捷菜单中选按钮，在弹出的快捷菜单中选“恢恢复交换图像复交换图像”，从而完成鼠标离开后又变回原来的图章，从而完成鼠标离开后又变回原来的图章 像；像；步骤步骤5 5 为运动广告加入超链接，使之链接到对应的页面中。为运动广告加入超链接，使之链接到对应的页面中。（1 1）选中层内的图像。）选中层内的图像。（2 2）在图像）在图像“属性属性”面板的面板的“链接链接”后的文本框中单击浏览按后的文本框中单击浏览按钮，选中

34、所要链接的网页文件，若想链接到其他网站中，在文钮，选中所要链接的网页文件，若想链接到其他网站中，在文本框内输入网址即可，如要链接到新浪网，则在文本框中输入本框内输入网址即可，如要链接到新浪网，则在文本框中输入http:/http:/即可。即可。工作任务工作任务3 3运动广告的制作运动广告的制作第33页，共39页，编辑于2022年，星期五方法：代码方法：代码+flash+flash步骤步骤1 1：进入进入http:/ 4制作图片轮番显示效果制作图片轮番显示效果第34页，共39页，编辑于2022年，星期五步骤步骤4:4:将裁切好的图片分别以将裁切好的图片分别以01.jpg;02.jpg01.jpg

35、;02.jpg等为文件名保等为文件名保存于站点文件夹存于站点文件夹ClassWebClassWeb下的下的imagesimages文件夹中；文件夹中；步骤步骤5:5:在站点文件夹在站点文件夹ClassWebmediaClassWebmedia文件夹下新建文件夹下新建flashflash文件夹，把在网文件夹，把在网站中下载的站中下载的flashflash文件（文件（focus.swffocus.swf）放置到该文件夹中。）放置到该文件夹中。步骤步骤6:6:将网站中用于实现轮番显示的代码复制到记事本中，并将代将网站中用于实现轮番显示的代码复制到记事本中，并将代码中设置的图片的高度、宽度依据切片的高

36、与宽进行设置，去码中设置的图片的高度、宽度依据切片的高与宽进行设置，去除其中不需要的功能代码，并依据除其中不需要的功能代码，并依据flashflash文件夹的放置位置对代文件夹的放置位置对代码进行更改。码进行更改。步骤步骤7:7:光标置于删除切片的图片框中，切换到代码视图中，将记事本中光标置于删除切片的图片框中，切换到代码视图中，将记事本中修改好后的代码复制到光标所在位置处。修改好后的代码复制到光标所在位置处。工作任务工作任务4 4制作图片轮番显示效果制作图片轮番显示效果第35页，共39页，编辑于2022年，星期五实现图片无缝滚动显示实现图片无缝滚动显示工作任务工作任务5 5制作图片无缝滚动效

37、果制作图片无缝滚动效果步骤步骤1 1：光标定位于要设置图片滚动的图片处，切换到代码视图状光标定位于要设置图片滚动的图片处，切换到代码视图状态；选择态；选择“插入插入”/“标签标签”命令，在命令，在HTMLHTML标签下的页元素右侧找到标签下的页元素右侧找到marqueemarquee标签，标签，在图片两侧加入在图片两侧加入marqueemarquee标签，即用标签，即用marqueemarquee标签将图标签将图片所在的片所在的处的代码包围起来；处的代码包围起来；步骤步骤2 2：存盘后浏览，观察发现，在滚动的过程中有空隙，不是我存盘后浏览，观察发现，在滚动的过程中有空隙，不是我们想要的效果。们

38、想要的效果。设置图片无缝滚动，单独用设置图片无缝滚动，单独用marqueemarquee标签无能为力，需使用代码标签无能为力，需使用代码完成。完成。第36页，共39页，编辑于2022年，星期五使用代码的方法设置图片无缝滚动的方法步骤为：使用代码的方法设置图片无缝滚动的方法步骤为：步骤步骤1:1:将效果图中需设置图片无缝滚动显示的切片删除，将效果图中需设置图片无缝滚动显示的切片删除，删除之前记下要删除的切片的高度和宽度。删除之前记下要删除的切片的高度和宽度。步骤步骤2 2：使用搜索引擎搜索使得图片无缝滚动的代码，将代使用搜索引擎搜索使得图片无缝滚动的代码，将代码复制下来，并根据需要将代码进行修改

39、，图片的大小，码复制下来，并根据需要将代码进行修改，图片的大小，存放位置等都需根据自己的情况进行修改。存放位置等都需根据自己的情况进行修改。垂直无缝滚动参考网址：垂直无缝滚动参考网址：http:/ http:/ 5制作图片无缝滚动效果制作图片无缝滚动效果第37页，共39页，编辑于2022年，星期五步骤步骤3 3：将光标置于删除切片图像的框内，切换到代码视图状态，将光标置于删除切片图像的框内，切换到代码视图状态，将修改后的代码复制进来；将修改后的代码复制进来；步骤步骤4 4：存盘预览效果存盘预览效果工作任务工作任务5 5制作图片无缝滚动效果制作图片无缝滚动效果第38页，共39页，编辑于2022年，星期五总结与作业总结与作业作业作业总结总结DreamweaverDreamweaver中行为、层、时间轴的使用中行为、层、时间轴的使用1 1、在自己的班级网站主页上完成课堂中所讲的特殊效果、在自己的班级网站主页上完成课堂中所讲的特殊效果2 2、预习管理员登录部分内容、预习管理员登录部分内容第39页，共39页，编辑于2022年，星期五