动态网站第四讲

1、动态网站第四讲第1页，共39页，2022年，5月20日，15点15分，星期一本次课程教学内容：项目三 网站主页设计与制作 子项目3-2 主页制作（特殊效果设计与制作） 第2页，共39页，2022年，5月20日，15点15分，星期一本次课程教学目标：能力目标： 会使用行为技术完成主页中背景音乐的插入； 会使用Marquee标签制作滚动字幕； 会利用AP元素、时间轴和行为技术完成运动广告的制作； 会使用Javascript代码完成图片轮番显示、无缝滚动效果的制作；知识目标： 知道什么是行为？ 知道marquee标签的使用方法 知道AP元素作用第3页，共39页，2022年，5月20日，15点15分，

2、星期一工作任务列表任务一：为主页插入背景音乐任务二：制作滚动公告栏任务四：制作图片轮番显示效果任务五：制作图片连续滚动效果任务三：制作运动广告效果展示第4页，共39页，2022年，5月20日，15点15分，星期一准备工作1、将带走的ClassWeb压缩包解压,并设ClassWeb文件夹为主目录；2、建立名为“Myclass”的动态站点；3、在站点文件夹下新建media文件夹，并在media文件下新建music文件夹；4、利用搜索引擎搜索自己喜欢的背景音乐（mid格式或wav格式，不要采用mp3格式），将搜索到的背景音乐以bg.mid（或bg.wav）为文件名存于music文件夹下。第5页，共3

3、9页，2022年，5月20日，15点15分，星期一给网站主页插入背景音乐步骤1、在DreamWeaver中打开存于站点文件夹ClassWeb下的index.html文件，进入“设计”视图方式，然后选择页面左下角的标签，以选中整个页面（表示将行为添加给整个文档body部分）；步骤2、执行“窗口”/“行为”命令，在窗口的右侧打开行为面板。在行为面板中单击 按钮，在弹出的菜单中选择“播放声音”命令，弹出“播放声音”对话框，如图所示。 工作任务1为主页插入背景音乐第6页，共39页，2022年，5月20日，15点15分，星期一步骤3、单击“播放声音”对话框中的“浏览”按钮，弹出“选择文件”对话框，在对话

4、框中选择存放于music文件夹中的bg.mid(或bg.wav) 文件，单击“确定”按钮。步骤4、检查“行为”面板中的事件是否为“onLoad”（表示主页加载就播放声音），若不是，在事件下拉列表框中选取该事件。工作任务1为主页插入背景音乐第7页，共39页，2022年，5月20日，15点15分，星期一步骤5、选择插入的声音文件（一般位于所插背景音乐的主页下方），在“属性”面板中单击“参数”按钮，打开参数窗口，设置其参数，后按“确定”按钮，如图所示。1、选取该声音文件2、单击“参数”按钮3、设置以下参数工作任务1为主页插入背景音乐第8页，共39页，2022年，5月20日，15点15分，星期一各参数

5、的含义：LOOP 音乐是否循环播放AUTOSTART 音乐是否自动播放MASTETSOUND 允许将多个标识组合起 来，作为一个进行控制HIDDEN 是否完全隐藏媒体播放器，若没 有隐藏，则会显示出系统默认的媒体播放插件工作任务1为主页插入背景音乐第9页，共39页，2022年，5月20日，15点15分，星期一认识行为： 1、什么是行为？ 行为的特点是强大的网页交互功能。它是事件与动作的彼此结合。是基于JavaScript来实现动态网页和交互的。一个行为是由一个事件触发一个动作组成的，因此行为的基本元素有两个：事件和动作。 例如，插入背景音乐，此时的页面加载称为事件，播放音乐称为动作，一般的行为

6、都是要由事件来激活动作。完成工作任务一所需的知识第10页，共39页，2022年，5月20日，15点15分，星期一2、行为面板：在Dreamwaever中，对行为的添加和控制主要通过“行为”面板来实现。选择“窗口”/“行为”命令，打开行为面板，如图所示。显示设置事件完成工作任务一所需的知识第11页，共39页，2022年，5月20日，15点15分，星期一3、添加行为：用户可以将行为添加给整个文档（body部分），也可以添加给链接、图像、表单等对象或任何其他HTML元素。 每个事件可以指定多个动作。动作按顺序列表依次发生。各事件的含义如下表所示：完成工作任务一所需的知识第12页，共39页，2022年

7、，5月20日，15点15分，星期一常见行为事件及含义事件（Events）说 明OnBlur取消选中对象时OnClick单击对象OndblClick双击对象OnError发生错误时OnFocus选中指定对象时OnKeyDown按下任意键盘键时OnKeyPress按下并释放任意键盘键时OnKeyUp按下键盘键后释放时OnLoad图像或页面载入完成时OnMouseDown按下光标键时OnMouseMove光标在指定对象上移动时OnMouseOut光标离开指定对象时OnMouseOver光标刚开始指向指定对象时OnMouseUp释放按下的光标键OnSubmit提交表单时onUnload离开页面时 注：

8、NS表示Netscape Navigator, IE表示Internet Explorer, 表示选中项。完成工作任务一所需的知识第13页，共39页，2022年，5月20日，15点15分，星期一4、编辑行为：在添加了行为以后，可以改变触发动作的事件、添加或删除动作以及改变动作的参数等。修改事件：只需在事件下拉列表框中进行选取即可修改动作：在行为面板中右击（或双击）欲修改的动作，在弹出的快捷菜单中选取“编辑行为”命令，在弹出的窗口中进行修改即可。完成任务所需的知识第14页，共39页，2022年，5月20日，15点15分，星期一工作任务一课堂实践 为自己的班级网站主页添加弹出信息窗口，使之在主页面

9、加载时即弹出信息，如下图所示。第15页，共39页，2022年，5月20日，15点15分，星期一制作滚动公告栏步骤1、将需制作滚动通知处的原来切片删除，在删除之前记下其高度和宽度；步骤2、选择“插入”/“标签”命令，在HTML标签下的页元素右侧选取marquee，单击“插入”按钮，如图所示。 工作任务2制作滚动公告栏第16页，共39页，2022年，5月20日，15点15分，星期一步骤3、切换到代码视图方式，将光标定位于标签之间，输入滚动的文字,当滚动的文字多行时，每一行文字后加html换行标识符；步骤4、使用“窗口”/“标签检查器”命令，单击“属性”选项卡，单击“属性”中“未分类”前的“+”，展

10、开marquee标签的属性，进行属性设置，如图所示。属性值各参数设置如下：behavior：alternatedirection：rightloop： -1style： font:14px; color:red; 工作任务2制作滚动公告栏第17页，共39页，2022年，5月20日，15点15分，星期一direction 参数：表示滚动的方向，默认为left 工作任务2制作滚动公告栏第18页，共39页，2022年，5月20日，15点15分，星期一Behavior参数：表示滚动的方式工作任务2制作滚动公告栏第19页，共39页，2022年，5月20日，15点15分，星期一loop 表示循环的次数，值

11、是正整数，默认为无限循环，默认值为无限。“-1”也为无限工作任务2制作滚动公告栏第20页，共39页，2022年，5月20日，15点15分，星期一scrollamount 表示运动速度，值是正整数，单位为像素，默认为6，即每次移动6像素的距离,数值越小移动速度越慢。Scrolldelay 用于设定两次滚动操作之间的间隔时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。height、width 表示运动区域（滚动字幕）的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度。Style 设置字幕内容的样式。如设置字幕文字大小为12像素，则输入

12、“font:12px;”。工作任务2制作滚动公告栏第21页，共39页，2022年，5月20日，15点15分，星期一步骤5、各参数设置完毕，设置鼠标行为。进入“行为”面板，单击“显示所有事件”按钮，出现事件，选取其中的onMouseOver和onMouseOut两个事件显示所有事件按钮onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。设置为this.stop();onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。设置为this.start(); 工作任务2制作滚动公告栏第22页，共39页，2022年，5月20日，15点15分，星期一制作运动广告(需

13、用到层和时间轴)1、 制作简单路径的运动广告步骤1、准备工作：自己制作或网上搜索二幅用来制作运动广告效果的图片，将其以move1和move2为文件主名存于站点根目录（ClassWeb）下的images文件夹中；步骤2、打开需放置运动广告的网页文件：打开index.html网页文件；步骤3、插入层：选择“插入”/“布局对象”/“AP Div”命令，在网页文件中插入层；（插入层的另一种方法：选择“窗口”/“插入”命令，在文档编辑窗口的上方将出现如下图所示的工具栏，选中其中的“布局”项，选取其中的“绘制图”按钮）工作任务3运动广告的制作绘制层按钮就是我第23页，共39页，2022年，5月20日，15

14、点15分，星期一步骤4：向层中插入图像：选中层，使用“插入”/“图像”命令，在弹出的“图像标签辅助功能属性”对话框的“替换文件”框中输入文本（也可以不输），详细说明框中可根据需要进行输入或不输，这里我们在替换文本框中输入“班级活动”后按“确定”按钮。工作任务3运动广告的制作第24页，共39页，2022年，5月20日，15点15分，星期一步骤5：将图像移入层中，调整层的大小与图像的大小一致；步骤6：选中层及其内的图像，使用“修改”/“时间轴”/“增加对象到时间轴”命令（或选中层及其内的图像，右击，在弹出的快捷菜单中选取“添加到时间轴”命令），此时将在窗口下方弹出“时间轴”属性对话框；工作任务3运

15、动广告的制作第25页，共39页，2022年，5月20日，15点15分，星期一步骤7：插入一个关键帧：将最后一帧拖长到50帧，将“播放头”拖到10帧处，右击动画条，在弹出的菜单中选“增加关键帧”命令（或按下Ctrl键，在动画条上单击，这时就在10帧处插入了一个关键帧）。同样的分别在20帧、30帧和40帧处增加关键帧。步骤8：选中第10帧，将层（包括图像）拖向合适位置；在时间轴上选第20帧，将层（包括图像）拖向另一合适位置；在时间轴上选第30帧，将层（包括图像）拖向另一合适位置；在时间轴上选第40帧，将层（包括图像）拖向另一合适位置；在时间轴上选第50帧，将层（包括图像）拖回起始位置。步骤9：若希

16、望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置。工作任务3运动广告的制作第26页，共39页，2022年，5月20日，15点15分，星期一步骤12：按中时间轴中部的“ ”按钮，即可观察动画效果。步骤13：按F12键预览效果我们发现广告图像运动的速度较快，如何改变运动的速度呢？改变速度的方法：工作任务3运动广告的制作步骤11：勾选时间轴属性中的自动播放和循环两个选项。第27页，共39页，2022年，5月20日，15点15分，星期一步骤15：给时间轴加入交互（当鼠标放到图像上时，图像停止运动，当鼠标离开图像时，图像继续运动）（1）选中动画条，打开行为面板，单击行为面板中的添加行为按钮“ ”

17、，在弹出的快捷菜单中选“播放时间轴”动作，从弹出的“播放时间轴”对话框中选择要播放的时间轴，单击“确定”按钮，如图所示：工作任务3运动广告的制作步骤14：改变广告运动的速度： 将时间轴属性栏中的Fps(Frame per second)框中的值改小（默认值为15），即可改变运动速度。第28页，共39页，2022年，5月20日，15点15分，星期一（2）将默认的鼠标事件改变为onMouseOut事件（即鼠标离开时，图像运动）。同样操作，再次选“停止时间轴”动作，改变onclick事件为onMouseOver事件。 （即鼠标放到图像上时，图像停止运动）；这样就完成了当鼠标指针移到图像上时，图像停止

18、，当鼠标移开图像进，图像运动，完成交互的效果。工作任务3运动广告的制作第29页，共39页，2022年，5月20日，15点15分，星期一2 制作复杂路径的动画若按上述方法创建一个复杂路径的动画，创建一个个关键帧的方法比较麻烦，我们通过使用录制层的时间轴运动路径的方法来完成：步骤1 使用“插入”/“布局对象”/“AP Div”命令，插入一个新层；步骤2 选中刚插入的层，使用“插入”/“图像”命令，依据图像的大小调整层的大小；(若是在同一页面上对不同的层图像进行动画的设置，需新建时间轴：使用“修改”/“时间轴”/“添加时间轴”)步骤3 保持层处于被选择状态；步骤4 使用“修改”/“时间轴”/“记录A

19、P元素的路径”命令；工作任务3运动广告的制作第30页，共39页，2022年，5月20日，15点15分，星期一步骤5 在页面上拖动层（包含图像在内的层），创建想要的运动路径；这样Dreamweaver便自动添加一个动画条到时间轴中，同时也添加了适当数量的关键帧；步骤6 在“时间轴”面板中，单击“回首帧”按钮，勾选“自支播放”和“循环”选项，即完成复杂路径动画的制作。3 广告图片的交替变换步骤1 选中要交替图像的AP元素及图像；步骤2 进入“行为”面板，单击“添加行为”按钮，在弹出的快捷菜单中选“交换图像”；工作任务3运动广告的制作第31页，共39页，2022年，5月20日，15点15分，星期一步

20、骤3 在弹出的交换图像对话框中的”浏览“按钮，把当鼠标移动上去替换的图像选中，单击”确定“按钮；确保预先载入图像选项是被勾选状态；到此图像替换效果制作完毕。工作任务3运动广告的制作第32页，共39页，2022年，5月20日，15点15分，星期一步骤4 再次单击“添加行为”按钮，在弹出的快捷菜单中选“恢复交换图像”，从而完成鼠标离开后又变回原来的图章 像；步骤5 为运动广告加入超链接，使之链接到对应的页面中。（1）选中层内的图像。 （2）在图像“属性”面板的“链接”后的文本框中单击浏览按钮，选中所要链接的网页文件，若想链接到其他网站中，在文本框内输入网址即可，如要链接到新浪网，则在文本框中输入即

21、可。 工作任务3运动广告的制作第33页，共39页，2022年，5月20日，15点15分，星期一方法：代码+flash步骤1：进入/wz/dw/000.htm网站，网站提供了在Dreamweaver中制作图片轮番显示效果的十种方法，选择其中一种来制作图片轮番显示效果，这里我们选择第九种方法。 步骤2:将效果图中需设置图片轮番显示的切片删除，删除之前记下要删切片的高和宽；步骤3:根据主页效果图中放置图片轮番显示处的位置的大小，把要轮番显示的几幅图片在photoshop中进行裁切，要求大小一样 ；工作任务4制作图片轮番显示效果第34页，共39页，2022年，5月20日，15点15分，星期一步骤4: 将裁切好的图片分别以01.jpg; 02.jpg等为文件名保存于站点文件夹ClassWeb下的images文件夹中；步骤5:在站点文件夹ClassWebmedia文件夹下新建flash文件夹，把在网站中下载的flash文件（focus.swf）放置到该文件夹中。步骤6:将网站中用于实现轮番显示的代码复制到记事本中，并将代码中设置的图片的高度、宽度依据切片的高与宽进行设置，去除其中不需要的功能代码，并依据flash文件夹的放置位置对代码进行更改。步骤7:光标置于删除切片的图片框中，切