《动态网站第四讲优秀PPT.ppt》由会员分享，可在线阅读，更多相关《动态网站第四讲优秀PPT.ppt（39页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、动态网站第四讲第1页，本讲稿共39页本次课程教学内容：本次课程教学内容：项目三项目三 网站主页设计与制作网站主页设计与制作 子项目子项目3-2 3-2 主页制作（特殊效果设计与制作）主页制作（特殊效果设计与制作）第2页，本讲稿共39页本次课程教学目标：本次课程教学目标：能力目标：能力目标：会使用行为技术完成主页中背景音乐的插入；会使用行为技术完成主页中背景音乐的插入；会使用会使用Marquee标签制作滚动字幕；标签制作滚动字幕；会利用会利用AP元素、时间轴和行为技术完成运动广告的制作；元素、时间轴和行为技术完成运动广告的制作；会使用会使用Javascript代码完成图片轮番显示、无缝滚动效果的
2、制作；代码完成图片轮番显示、无缝滚动效果的制作；知识目标：知识目标：知道什么是行为？知道什么是行为？知道知道marquee标签的使用方法标签的使用方法 知道知道AP元素作用元素作用第3页，本讲稿共39页工作任务列表工作任务列表任务一：为主页插入背景音乐任务一：为主页插入背景音乐任务二：制作滚动公告栏任务二：制作滚动公告栏任务四：制作图片轮番显示效果任务四：制作图片轮番显示效果任务五：制作图片连续滚动效果任务五：制作图片连续滚动效果任务三：制作运动广告任务三：制作运动广告效果展示效果展示第4页，本讲稿共39页准备工作准备工作1 1、将带走的、将带走的ClassWebClassWeb压缩包解压压缩
3、包解压,并设并设ClassWebClassWeb文件夹为文件夹为主目录；主目录；2 2、建立名为、建立名为“MyclassMyclass”的动态站点；的动态站点；3 3、在站点文件夹下新建、在站点文件夹下新建mediamedia文件夹，并在文件夹，并在mediamedia文文件下新建件下新建musicmusic文件夹；文件夹；4 4、利用搜索引擎搜索自己喜欢的背景音乐（、利用搜索引擎搜索自己喜欢的背景音乐（midmid格式格式或或wavwav格式，不要采用格式，不要采用mp3mp3格式格式），将搜索到的背景音），将搜索到的背景音乐以乐以bg.midbg.mid（或（或bg.wavbg.wav）
4、为文件名存于）为文件名存于musicmusic文件夹下。文件夹下。第5页，本讲稿共39页给网站主页插入背景音乐给网站主页插入背景音乐步骤步骤1 1、在在DreamWeaverDreamWeaver中打开存于站点文件夹中打开存于站点文件夹ClassWebClassWeb下的下的index.htmlindex.html文件，文件，进入进入“设计设计”视图方式视图方式，然后然后选择页面左下角选择页面左下角的的标签，以选中整个页面（表示将行为添加给整个文档标签，以选中整个页面（表示将行为添加给整个文档bodybody部分）部分）；步骤步骤2 2、执行执行“窗口窗口”/“行为行为”命令，在窗口的右侧打开
5、行为命令，在窗口的右侧打开行为面板。在行为面板中单击面板。在行为面板中单击 按钮，在弹出的菜单中选择按钮，在弹出的菜单中选择“播放声音播放声音”命令，弹出命令，弹出“播放声音播放声音”对话框，如图所示。对话框，如图所示。工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第6页，本讲稿共39页步骤步骤3 3、单击单击“播放声音播放声音”对话框中的对话框中的“浏览浏览”按钮，弹出按钮，弹出“选择文件选择文件”对话框，在对话框中选择存放于对话框，在对话框中选择存放于musicmusic文文件夹中的件夹中的bg.mid(bg.mid(或或bg.wav)bg.wav)文件，单击文件，单击“确定确定”
6、按钮。按钮。步骤步骤4 4、检查检查“行为行为”面板中的事件是否为面板中的事件是否为“onLoadonLoad”（表（表示主页加载就播放声音），若不是，在事件下拉列表框示主页加载就播放声音），若不是，在事件下拉列表框中选取该事件。中选取该事件。工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第7页，本讲稿共39页步骤步骤5 5、选择插入的声音文件（一般位于所插背景音乐的选择插入的声音文件（一般位于所插背景音乐的主页下方），在主页下方），在“属性属性”面板中单击面板中单击“参数参数”按钮，打按钮，打开参数窗口，设置其参数，后按开参数窗口，设置其参数，后按“确定确定”按钮，如图所按钮，如图所
7、示。示。1、选、选取取该该声声音音文文件件2、单击、单击“参数参数”按钮按钮3、设置以下参数、设置以下参数工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第8页，本讲稿共39页各参数的含义：各参数的含义：LOOP LOOP 音乐是否循环播放音乐是否循环播放AUTOSTART AUTOSTART 音乐是否自动播放音乐是否自动播放MASTETSOUND MASTETSOUND 允许将多个允许将多个标识组合起标识组合起 来，作为来，作为一个进行控制一个进行控制HIDDEN HIDDEN 是否完全隐藏媒体播放器，若没是否完全隐藏媒体播放器，若没 有有隐藏，则会显示出系统默认的媒体播放插件隐藏，则
8、会显示出系统默认的媒体播放插件工作任务工作任务1为主页插入背景音乐为主页插入背景音乐第9页，本讲稿共39页认识行为认识行为：1 1、什么是行为？、什么是行为？行为的特点是强大的网页交互功能。它行为的特点是强大的网页交互功能。它是事件与动作的是事件与动作的彼此结合彼此结合。是。是基于基于JavaScriptJavaScript来实现动态网页和交互的。一个行来实现动态网页和交互的。一个行为是由一个事件触发一个动作组成的，因此行为的为是由一个事件触发一个动作组成的，因此行为的基本元素有两个：基本元素有两个：事件和动作。事件和动作。例如，插入背景音乐，此时的页面加载称为事件，播放音乐例如，插入背景音乐
9、，此时的页面加载称为事件，播放音乐称为动作，一般的行为都是要称为动作，一般的行为都是要由事件来激活动作由事件来激活动作。完成工作任务一所需的知识完成工作任务一所需的知识第10页，本讲稿共39页2 2、行为面板、行为面板：在在DreamwaeverDreamwaever中，对行为的添加和控制主要通过中，对行为的添加和控制主要通过“行为行为”面板来实现。选择面板来实现。选择“窗口窗口”/“行为行为”命令，打开行为命令，打开行为面板，如图所示。面板，如图所示。显示设置事件显示设置事件完成工作任务一所需的知识完成工作任务一所需的知识第11页，本讲稿共39页3 3、添加行为、添加行为：用户可以将行为添加
10、给整个文档（用户可以将行为添加给整个文档（bodybody部分），也可以添部分），也可以添加给链接、图像、表单等对象或任何其他加给链接、图像、表单等对象或任何其他HTMLHTML元素。元素。每个事件可以指定多个动作。动作按顺序列表依次发生。每个事件可以指定多个动作。动作按顺序列表依次发生。各事件的含义如下表所示各事件的含义如下表所示：完成工作任务一所需的知识完成工作任务一所需的知识第12页，本讲稿共39页常见行为事件及含义事件（事件（Events）说说 明明OnBlur取消选中对象时OnClick单击对象OndblClick双击对象OnError发生错误时OnFocus选中指定对象时OnKey
11、Down按下任意键盘键时OnKeyPress按下并释放任意键盘键时OnKeyUp按下键盘键后释放时OnLoad图像或页面载入完成时OnMouseDown按下光标键时OnMouseMove光标在指定对象上移动时OnMouseOut光标离开指定对象时OnMouseOver光标刚开始指向指定对象时OnMouseUp释放按下的光标键OnSubmit提交表单时onUnload离开页面时 注：NS表示Netscape Navigator,IE表示Internet Explorer,表示选中项。完成工作任务一所需的知识完成工作任务一所需的知识第13页，本讲稿共39页4 4、编辑行为、编辑行为：在添加了行为以
12、后，可以改变触发动作的事件、添加或在添加了行为以后，可以改变触发动作的事件、添加或删除动作以及改变动作的参数等。删除动作以及改变动作的参数等。修改事件修改事件：只需在事件下拉列表框中进行选取即可：只需在事件下拉列表框中进行选取即可修改动作修改动作：在行为面板中右击（或双击）欲修改的动作，：在行为面板中右击（或双击）欲修改的动作，在弹出的快捷菜单中选取在弹出的快捷菜单中选取“编辑行为编辑行为”命令，在弹出的窗命令，在弹出的窗口中进行修改即可。口中进行修改即可。完成任务所需的知识完成任务所需的知识第14页，本讲稿共39页工作任务一课堂实践工作任务一课堂实践为自己的班级网站主页添加弹出信息窗口，使之
13、在为自己的班级网站主页添加弹出信息窗口，使之在主页面加载时即弹出信息，如下图所示。主页面加载时即弹出信息，如下图所示。第15页，本讲稿共39页制作滚动公告栏制作滚动公告栏步骤步骤1 1、将需制作滚动通知处的原来切片删除，在删除之前记下其高度将需制作滚动通知处的原来切片删除，在删除之前记下其高度和宽度；和宽度；步骤步骤2 2、选择选择“插入插入”/“标签标签”命令，在命令，在HTMLHTML标签下的页元素标签下的页元素右侧选取右侧选取marqueemarquee，单击，单击“插入插入”按钮，如图所示。按钮，如图所示。工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第16页，本讲稿共39页步骤步
14、骤3 3、切换到代码视图方式，将光标定位于切换到代码视图方式，将光标定位于标签之间，输入滚动的文字标签之间，输入滚动的文字,当滚动的文字多行时，当滚动的文字多行时，每一行文字后每一行文字后加加htmlhtml换行标识符换行标识符；步骤步骤4 4、使用使用“窗口窗口”/“标签检查器标签检查器”命令，单击命令，单击“属性属性”选项卡，选项卡，单击单击“属性属性”中中“未分类未分类”前的前的“+”，展开，展开marqueemarquee标签的属性，标签的属性，进行属性设置，如图所示。进行属性设置，如图所示。属性值各参数设置如下：属性值各参数设置如下：behaviorbehavior：alternat
15、ealternatedirectiondirection：rightrightlooploop：-1 -1stylestyle：font:14px;color:red;font:14px;color:red;工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第17页，本讲稿共39页direction direction 参数：参数：表示滚动的方向，默认为表示滚动的方向，默认为left left 工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第18页，本讲稿共39页BehaviorBehavior参数：表示滚动的方式参数：表示滚动的方式工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第19
16、页，本讲稿共39页looploop 表示循环的次数，值是正整数，默认为无限循环，默认值为无表示循环的次数，值是正整数，默认为无限循环，默认值为无限。限。“-1-1”也为无限也为无限工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第20页，本讲稿共39页scrollamountscrollamount 表示运动速度，值是正整数，单位为像素，默认表示运动速度，值是正整数，单位为像素，默认为为6 6，即每次移动，即每次移动6 6像素的距离像素的距离,数值越小移动速度越慢。数值越小移动速度越慢。Scrolldelay Scrolldelay 用于设定两次滚动操作之间的间隔时间，单位为毫秒。用于设定两
17、次滚动操作之间的间隔时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。如果要让滚动看起来流畅，数值应该尽量小。heightheight、widthwidth 表示运动区域（滚动字幕）的高度和宽度，值是表示运动区域（滚动字幕）的高度和宽度，值是正整数（单位是像素）或百分数，默认正整数（单位是像素）或百分数，默认width=100%heightwidth=100%height为为标签内元素的高度。标签内元素的高度。Style Style 设置字幕内容的样式。如设置字幕文字大小为设置字幕内容的样式。如设置字幕文字大小为1212像素，则输像素，则输入入“font:12px;font:12px;
18、”。工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第21页，本讲稿共39页步骤步骤5、各参数设置完毕，设置鼠标行为。各参数设置完毕，设置鼠标行为。进入进入“行为行为”面板，单击面板，单击“显示所显示所有事件有事件”按钮，出现事件，选取按钮，出现事件，选取其中的其中的onMouseOver和和onMouseOut两个事件两个事件显显示示所所有有事事件件按按钮钮onMouseOveronMouseOver事件设置鼠标移动到滚动字事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。设置幕时的动作，常设置为停止滚动。设置为为this.stop();this.stop();onMouseOuton
19、MouseOut事件设置鼠标离开滚动事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。字幕时的动作，常设置为开始滚动。设置为设置为this.start();this.start();工作任务工作任务2 2制作滚动公告栏制作滚动公告栏第22页，本讲稿共39页制作运动广告制作运动广告(需用到层和时间轴需用到层和时间轴)1 1、制作简单路径的运动广告制作简单路径的运动广告步骤步骤1 1、准备工作：、准备工作：自己制作或网上搜索自己制作或网上搜索二幅二幅用来制作运动广告效用来制作运动广告效果的图片，将其以果的图片，将其以move1move1和和move2move2为文件主名存于站点根目录为文件主名存
20、于站点根目录（ClassWebClassWeb）下的）下的imagesimages文件夹中；文件夹中；步骤步骤2 2、打开需放置运动广告的网页文件：、打开需放置运动广告的网页文件：打开打开index.htmlindex.html网页文件；网页文件；步骤步骤3 3、插入层：、插入层：选择选择“插入插入”/“布局对象布局对象”/“AP DivAP Div”命令，在网页命令，在网页文件中插入层；（插入层的另一种方法：选择文件中插入层；（插入层的另一种方法：选择“窗口窗口”/“插入插入”命令，命令，在文档编辑窗口的上方将出现如下图所示的工具栏，选中其中的在文档编辑窗口的上方将出现如下图所示的工具栏，选
21、中其中的“布局布局”项，选取其中的项，选取其中的“绘制图绘制图”按钮）按钮）工作任务工作任务3 3运动广告的制作运动广告的制作绘制层按钮就是我绘制层按钮就是我第23页，本讲稿共39页步骤步骤4 4：向层中插入图像：向层中插入图像：选中层，使用选中层，使用“插入插入”/“图像图像”命令，命令，在弹出的在弹出的“图像标签辅助功能属性图像标签辅助功能属性”对话框的对话框的“替换文件替换文件”框中输入框中输入文本（也可以不输），详细说明框中可根据需要进行输入或不输，这里文本（也可以不输），详细说明框中可根据需要进行输入或不输，这里我们在替换文本框中输入我们在替换文本框中输入“班级活动班级活动”后按后按
22、“确定确定”按钮。按钮。工作任务工作任务3 3运动广告的制作运动广告的制作第24页，本讲稿共39页步骤步骤5 5：将图像移入层中，调整层的大小与图像的大小一致；将图像移入层中，调整层的大小与图像的大小一致；步骤步骤6 6：选中层及其内的图像，使用选中层及其内的图像，使用“修改修改”/“时间轴时间轴”/“增增加对象到时间轴加对象到时间轴”命令（或选中层及其内的图像，右击，在弹出的命令（或选中层及其内的图像，右击，在弹出的快捷菜单中选取快捷菜单中选取“添加到时间轴添加到时间轴”命令），此时将在窗口下方弹出命令），此时将在窗口下方弹出“时间轴时间轴”属性对话框；属性对话框；工作任务工作任务3 3运动
23、广告的制作运动广告的制作第25页，本讲稿共39页步骤步骤7 7：插入一个关键帧：插入一个关键帧：将最后一帧拖长到将最后一帧拖长到5050帧，将帧，将“播放头播放头”拖拖到到1010帧处，右击动画条，在弹出的菜单中选帧处，右击动画条，在弹出的菜单中选“增加关键帧增加关键帧”命令命令（或按下（或按下CtrlCtrl键，在动画条上单击，这时就在键，在动画条上单击，这时就在1010帧处插入了一帧处插入了一个关键帧）。同样的分别在个关键帧）。同样的分别在2020帧、帧、3030帧和帧和4040帧处增加关键帧。帧处增加关键帧。步骤步骤8 8：选中第选中第1010帧，将层（包括图像）拖向合适位置；在时间轴上
24、选帧，将层（包括图像）拖向合适位置；在时间轴上选第第2020帧，将层（包括图像）拖向另一合适位置；在时间轴上选第帧，将层（包括图像）拖向另一合适位置；在时间轴上选第3030帧，将层（包括图像）拖向另一合适位置；在时间轴上选第帧，将层（包括图像）拖向另一合适位置；在时间轴上选第4040帧，帧，将层（包括图像）拖向另一合适位置；在时间轴上选第将层（包括图像）拖向另一合适位置；在时间轴上选第5050帧，将层帧，将层（包括图像）拖回起始位置。（包括图像）拖回起始位置。步骤步骤9 9：若希望有更复杂的动画路径，可多定义一些关键帧及在画若希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置。面中的位
25、置。工作任务工作任务3 3运动广告的制作运动广告的制作第26页，本讲稿共39页步骤步骤1212：按中时间轴中部的按中时间轴中部的“”按钮，即可观察动画效果。按钮，即可观察动画效果。步骤步骤1313：按按F12F12键预览效果键预览效果我们发现广告图像运动的速度较快，如何改变运动的速度呢？改我们发现广告图像运动的速度较快，如何改变运动的速度呢？改变速度的方法：变速度的方法：工作任务工作任务3 3运动广告的制作运动广告的制作步骤步骤1111：勾选时间轴属性中的自动播放和循环两个选项。勾选时间轴属性中的自动播放和循环两个选项。第27页，本讲稿共39页步骤步骤1515：给时间轴加入交互（当鼠标放到图像
26、上时，图像停止运：给时间轴加入交互（当鼠标放到图像上时，图像停止运动，当鼠标离开图像时，图像继续运动）动，当鼠标离开图像时，图像继续运动）（1 1）选中动画条，打开行为面板，单击行为面板中的添加行为按钮选中动画条，打开行为面板，单击行为面板中的添加行为按钮“”，在弹出的快捷菜单中选，在弹出的快捷菜单中选“播放时间轴播放时间轴”动作，从弹出的动作，从弹出的“播放时间轴播放时间轴”对话框中选择要播放的时间轴，单击对话框中选择要播放的时间轴，单击“确定确定”按钮，如图所示：按钮，如图所示：工作任务工作任务3 3运动广告的制作运动广告的制作步骤步骤1414：改变广告运动的速度：改变广告运动的速度：将时
27、间轴属性栏中的将时间轴属性栏中的Fps(Frame per second)Fps(Frame per second)框中的值改小框中的值改小（默认值为（默认值为1515），即可改变运动速度。），即可改变运动速度。第28页，本讲稿共39页（2 2）将默认的鼠标事件改变为将默认的鼠标事件改变为onMouseOutonMouseOut事件（即鼠标离开事件（即鼠标离开时，图像运动）。时，图像运动）。同样操作，再次选同样操作，再次选“停止时间轴停止时间轴”动作，改变动作，改变onclickonclick事件为事件为onMouseOveronMouseOver事件。事件。（即鼠标放到图像上时，图像停止运动
28、）；（即鼠标放到图像上时，图像停止运动）；这样就完成了当鼠标指针移到图像上时，图像停止，当鼠标移这样就完成了当鼠标指针移到图像上时，图像停止，当鼠标移开图像进，图像运动，完成交互的效果。开图像进，图像运动，完成交互的效果。工作任务工作任务3 3运动广告的制作运动广告的制作第29页，本讲稿共39页2 2 制作复杂路径的动画制作复杂路径的动画若按上述方法创建一个复杂路径的动画，创建一个个关键帧的方法比较麻烦，若按上述方法创建一个复杂路径的动画，创建一个个关键帧的方法比较麻烦，我们通过使用我们通过使用录制层的时间轴运动路径录制层的时间轴运动路径的方法来完成：的方法来完成：步骤步骤1 1使用使用“插入
29、插入”/“布局对象布局对象”/“AP DivAP Div”命令，插入一个新层；命令，插入一个新层；步骤步骤2选中刚插入的层，使用选中刚插入的层，使用“插入插入”/“图像图像”命令，依据图像的大小调命令，依据图像的大小调整层的大小；整层的大小；(若是在同一页面上对不同的层图像进行动画的设置，需新建时若是在同一页面上对不同的层图像进行动画的设置，需新建时间轴：使用间轴：使用“修改修改”/“时间轴时间轴”/“添加时间轴添加时间轴”)步骤步骤3保持层处于被选择状态；保持层处于被选择状态；步骤步骤4使用使用“修改修改”/“时间轴时间轴”/“记录记录APAP元素的路径元素的路径”命令；命令；工作任务工作任
30、务3 3运动广告的制作运动广告的制作第30页，本讲稿共39页步骤步骤5 5在页面上拖动层（包含图像在内的层），创建想要的运在页面上拖动层（包含图像在内的层），创建想要的运动路径；这样动路径；这样DreamweaverDreamweaver便自动添加一个动画条到时间轴中，便自动添加一个动画条到时间轴中，同时也添加了适当数量的关键帧；同时也添加了适当数量的关键帧；步骤步骤6 6在在“时间轴时间轴”面板中，单击面板中，单击“回首帧回首帧”按钮，勾选按钮，勾选“自支播自支播放放”和和“循环循环”选项，即完成复杂路径动画的制作。选项，即完成复杂路径动画的制作。3 3 广告图片的交替变换广告图片的交替变换
31、步骤步骤1 1选中要交替图像的选中要交替图像的APAP元素及图像；元素及图像；步骤步骤2 2进入进入“行为行为”面板，单击面板，单击“添加行为添加行为”按钮，在弹出的按钮，在弹出的快捷菜单中选快捷菜单中选“交换图像交换图像”；工作任务工作任务3 3运动广告的制作运动广告的制作第31页，本讲稿共39页步骤步骤3 3在弹出的交换图像对话框中的在弹出的交换图像对话框中的”浏览浏览“按钮，把当鼠按钮，把当鼠标移动上去替换的图像选中，单击标移动上去替换的图像选中，单击”确定确定“按钮；确保预先按钮；确保预先载入图像选项是被勾选状态；到此图像替换效果制作完毕。载入图像选项是被勾选状态；到此图像替换效果制作
32、完毕。工作任务工作任务3 3运动广告的制作运动广告的制作第32页，本讲稿共39页步骤步骤4 4 再次单击再次单击“添加行为添加行为”按钮，在弹出的快捷菜单中选按钮，在弹出的快捷菜单中选“恢复恢复交换图像交换图像”，从而完成鼠标离开后又变回原来的图章，从而完成鼠标离开后又变回原来的图章 像；像；步骤步骤5 5 为运动广告加入超链接，使之链接到对应的页面中。为运动广告加入超链接，使之链接到对应的页面中。（1 1）选中层内的图像。）选中层内的图像。（2 2）在图像）在图像“属性属性”面板的面板的“链接链接”后的文本框中单击浏览按钮，后的文本框中单击浏览按钮，选中所要链接的网页文件，若想链接到其他网站
33、中，在文本框内输入选中所要链接的网页文件，若想链接到其他网站中，在文本框内输入网址即可，如要链接到新浪网，则在文本框中输入网址即可，如要链接到新浪网，则在文本框中输入http:/http:/即可。即可。工作任务工作任务3 3运动广告的制作运动广告的制作第33页，本讲稿共39页方法：代码方法：代码+flash+flash步骤步骤1 1：进入进入http:/ 4制作图片轮番显示效果制作图片轮番显示效果第34页，本讲稿共39页步骤步骤4:4:将裁切好的图片分别以将裁切好的图片分别以01.jpg;02.jpg01.jpg;02.jpg等为文件名保存于等为文件名保存于站点文件夹站点文件夹ClassWeb
34、ClassWeb下的下的imagesimages文件夹中；文件夹中；步骤步骤5:5:在站点文件夹在站点文件夹ClassWebmediaClassWebmedia文件夹下新建文件夹下新建flashflash文件夹，文件夹，把在网站中下载的把在网站中下载的flashflash文件（文件（focus.swffocus.swf）放置到该文件夹）放置到该文件夹中。中。步骤步骤6:6:将网站中用于实现轮番显示的代码复制到记事本中，并将网站中用于实现轮番显示的代码复制到记事本中，并将代码中设置的图片的高度、宽度依据切片的高与宽进行设将代码中设置的图片的高度、宽度依据切片的高与宽进行设置，去除其中不需要的功能
35、代码，并依据置，去除其中不需要的功能代码，并依据flashflash文件夹的放置文件夹的放置位置对代码进行更改。位置对代码进行更改。步骤步骤7:7:光标置于删除切片的图片框中，切换到代码视图中，将记事光标置于删除切片的图片框中，切换到代码视图中，将记事本中修改好后的代码复制到光标所在位置处。本中修改好后的代码复制到光标所在位置处。工作任务工作任务4 4制作图片轮番显示效果制作图片轮番显示效果第35页，本讲稿共39页实现图片无缝滚动显示实现图片无缝滚动显示工作任务工作任务5 5制作图片无缝滚动效果制作图片无缝滚动效果步骤步骤1 1：光标定位于要设置图片滚动的图片处，切换到代码视图状态；光标定位于
36、要设置图片滚动的图片处，切换到代码视图状态；选择选择“插入插入”/“标签标签”命令，在命令，在HTMLHTML标签下的页元素右侧找到标签下的页元素右侧找到marqueemarquee标签，标签，在图片两侧加入在图片两侧加入marqueemarquee标签，即用标签，即用marqueemarquee标签将图片标签将图片所在的所在的处的代码包围起来；处的代码包围起来；步骤步骤2 2：存盘后浏览，观察发现，在滚动的过程中有空隙，不是我们想要存盘后浏览，观察发现，在滚动的过程中有空隙，不是我们想要的效果。的效果。设置图片无缝滚动，单独用设置图片无缝滚动，单独用marqueemarquee标签无能为力，
37、需使用代码完成。标签无能为力，需使用代码完成。第36页，本讲稿共39页使用代码的方法设置图片无缝滚动的方法步骤为：使用代码的方法设置图片无缝滚动的方法步骤为：步骤步骤1:1:将效果图中需设置图片无缝滚动显示的切片删除，删除将效果图中需设置图片无缝滚动显示的切片删除，删除之前记下要删除的切片的高度和宽度。之前记下要删除的切片的高度和宽度。步骤步骤2 2：使用搜索引擎搜索使得图片无缝滚动的代码，将代码复制使用搜索引擎搜索使得图片无缝滚动的代码，将代码复制下来，并根据需要将代码进行修改，图片的大小，存放位置等都下来，并根据需要将代码进行修改，图片的大小，存放位置等都需根据自己的情况进行修改。需根据自
38、己的情况进行修改。垂直无缝滚动参考网址：垂直无缝滚动参考网址：http:/ http:/ 5制作图片无缝滚动效果制作图片无缝滚动效果第37页，本讲稿共39页步骤步骤3 3：将光标置于删除切片图像的框内，切换到代码视图状态，将光标置于删除切片图像的框内，切换到代码视图状态，将修改后的代码复制进来；将修改后的代码复制进来；步骤步骤4 4：存盘预览效果存盘预览效果工作任务工作任务5 5制作图片无缝滚动效果制作图片无缝滚动效果第38页，本讲稿共39页总结与作业总结与作业作业作业总结总结DreamweaverDreamweaver中行为、层、时间轴的使用中行为、层、时间轴的使用1 1、在自己的班级网站主页上完成课堂中所讲的特殊效果、在自己的班级网站主页上完成课堂中所讲的特殊效果2 2、预习管理员登录部分内容、预习管理员登录部分内容第39页，本讲稿共39页