（中职）中文Dreamweaver CS3案例教程（第二版）第八章教学课件.ppt

《（中职）中文Dreamweaver CS3案例教程（第二版）第八章教学课件.ppt》由会员分享，可在线阅读，更多相关《（中职）中文Dreamweaver CS3案例教程（第二版）第八章教学课件.ppt（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、（中职）中文Dreamweaver CS3案例教程（第二版）第八章ppt课件中文中文Dreamweaver CS3案例教程案例教程（第二版）（第二版）8.1 【案例33】“2008年北京奥运”网页案例效果案例效果主要由图像组成，其中网页上边第1行左起第1幅图像是网页标题，右起第1幅是一个长城的GIF动画，不断切换长城的各幅画面，其他图像是北京名胜的图片。第1行下边是各种体育运动图像。在第1行背景图像之上，有一个运动员不断地从左向右奔跑。操作步骤操作步骤（1）创建一个围住整个网页的绿色矩形的布局表格。（2）依次创建多个布局单元格。（3）在布局表格的各个单元格内插入不同的图像或GIF动画。（4）创

2、建一个AP Div，插入一个名称为“人跑.gif”的GIF动画。（5）将“人跑”的GIF动画所在的AP Div拖动到时间轴内，制作动画。（6）选中“时间轴”面板中的“循环”和“自动播放”复选框。第第8章章 时间轴和行为时间轴和行为相关知识相关知识1“时间轴”面板单击“窗口”“时间轴”菜单命令或按【Alt+F9】组合键2直线移动动画的制作8.2 【案例案例34】“北京欢迎您北京欢迎您”网页网页案例效果案例效果在“2008年北京奥运”网页的基础之上添加了一个沿着曲线移动的“北京欢迎您”文字和一个沿着另一条曲线移动的“我和你”文字。单击移动的“北京欢迎您”文字，会弹出一个网页，该网页内背景是一幅奥运

3、场馆图像，图像之上有红色的立体“北京欢迎您”文字。单击移动的“我和你”文字，会弹出一个网页内是一个Flash动画。操作步骤操作步骤1制作第1个沿曲线移动的动画（1）创建一个AP Div，它的名称自动设置为apDiv2，然后调整“apDiv2”AP Div的大小，使它刚好包含“北京欢迎您”文字。（2）创建动画。（3）创建链接。2制作第2个沿曲线移动的动画（1）创建一个AP Div，名称自动设置为apDiv3。调整“apDiv3”AP Div的大小，使它刚好包含“我和你”文字。（2）创建动画。相关知识相关知识1添加关键帧2制作沿曲线路径移动的动画3动画的重命名、删除、复制和移动8.3 【案例35】

4、“世界名花简介2”网页案例效果案例效果操作步骤操作步骤1修改“TOP1.htm”网页2制作弹出式菜单相关知识相关知识1动作名称及其作用2事件名称及其作用3设置行为的其他操作4“显示隐藏元素”动作8.4 【案例案例36】“交替显示的图像交替显示的图像”网页网页案例效果案例效果操作步骤操作步骤（1）新建一个网页文档，插入“PIC01.jpg”图像，将图像拖动到“时间轴”面板内，形成一条动画条。（2）制作AP Div的直线移动动画。（3）依次选中图像动画条上的各个关键帧，同时也选中图像。（4）用时间轴动画技术制作的”文字提示信息。相关知识相关知识1“弹出信息”动作2“设置文本”动作8.5 【案例案例

5、37】“弹出浏览器窗口弹出浏览器窗口”网页网页案例效果案例效果“弹出浏览器窗口”网页显示后，会看到同一位置处交替显示10幅图像，它们周而复始地循环切换，显示效果与【案例36】“交替显示的图像”网页的显示效果一样。同时，还会在另一个浏览器窗口内弹出一个“图像切换.html”网页，该网页内显示一个“图像切换.swf”的Flash动画。操作步骤操作步骤打开“【案例37】弹出浏览器窗口”文件夹内的“弹出浏览器窗口.html”网页，单击窗体左下角的标签。此时，标签变为粗体，窗体内全部内容都被选中。单击“动作”菜单中的“打开浏览器窗口”菜单命令，弹出“打开浏览器窗口”对话框。完成“打开浏览器窗口”的设置。

6、相关知识相关知识1“打开浏览器窗口”动作2“改变属性”动作8.6 【案例案例38】图像链接翻转图像链接翻转案例效果案例效果页面上有4幅图像。当鼠标指针移到右边第1幅图像时，这4幅图像会变为另外4幅图像。操作步骤操作步骤（1）在“设置导航栏图像”对话框“基本”选项卡内进行设置（2）切换到“设置导航栏图像”对话框内的“高级”选项卡，进行设置。（3）选中“同时设置图像”显示框内的“图像PHOTO2”选项，再在“变成图像文件”文本框内输入JPG/PB2.jpg（4）选中“同时设置图像”显示框内的“图像PHOTO3”选项，再在“变成图像文件”文本框内输入JPG/PC2.jpg，（5）单击“设置导航栏图像

7、”菜单命令，弹出“设置导航栏图像”（基本）对话框。进行设置。（6）选中右边第1幅图像，设置对话框“设置导航栏图像”，弹出“行为”面板，将新增加的onClick事件改为onMouseOut事件，onMouseOver事件是自动生成的，双击“行为”面板内的“预先载入图像”文字，弹出“预先载入图像”对话框。相关知识相关知识1“设置导航栏图像”动作2“交换图像”动作3“恢复交换图像”动作8.7 【案例案例39】“世界名花简介世界名花简介3”网页网页案例效果案例效果本案例介绍使用“跳转菜单”动作的方法来制作LEFT1.htm网页文件。操作步骤操作步骤1“跳转菜单”动作在表单域内创建一个跳转菜单，编辑修改

8、跳转菜单设置。2“跳转菜单开始按钮”动作“选择跳转菜单”下拉列表框内是“跳转菜单”的名称Menu。相关知识相关知识1“检查表单”动作2“检查插件”动作3“检查浏览器”动作8.8 【案例案例40】“控制播放控制播放Flash动画和动画和MIDI音乐音乐”网页网页案例效果案例效果单击“Flash播放”文字上边的图像后，“图像切换”Flash动画开始播放。单击“Flash暂停”文字上边的图像后，“图像切换”Flash动画停止播放。单击“播放MIDI”文字上边的图像后，开始播放MIDI音乐。操作步骤操作步骤（1）将“图像切换.swf”文件导入（2）单击“Flash播放”、“Flash暂停”文字上边的图

9、像设置“控制Shockwave或Flash”动作。（3）单击“播放MP3音乐”文字上边的图像，再单击“播放声音”菜单命令，利用该对话框选择MIDI/MIDI0.MID选项。相关知识相关知识1“控制Shockwave或Flash”动作2“播放声音”动作3“调用JavaScript”动作8.9 【案例案例41】“活动菜单活动菜单”网页网页案例效果案例效果单击“活动菜单”文字，会从浏览器左框外边慢慢移入一个菜单，单击菜单内的菜单命令，可以弹出相应的网页。操作步骤操作步骤（1）创建一个名字为apDiv1的AP Div，设置属性。（2）选中表格，利用表格的“属性”栏，设置属性。（3）创建一个名字为apD

10、iv2的AP Div。（4）单击“窗口”“时间轴”菜单命令，将选定的“apDiv1”AP Div插入到名字为Timeline1的“时间轴”面板动画通道中。（5）完成时间轴Timeline1动画播放的设置。（6）设置“播放时间轴”和“转到时间轴帧”动作的相应事件。相关知识相关知识1“时间轴”动作2“转到URL”动作8.10 【案例案例42】“拼图拼图”网页网页案例效果案例效果网页上面有4幅等待移动的拼图图像，网页中间有一个表格，表格有4个正方形的单元格，表示拼图图像要移到的区域。单击手指图像，在表格的左上方会显示出拼图的效果图，并给出拼图提示。将鼠标指针移出手指图像时，表格左上方的效果图会自动消

11、失。操作步骤操作步骤（1）在页面内创建4个AP Div。（2）在拼图图像的下面创建一个名字为apDiv5的AP Div，在AP Div中插入一个2行2列的表格。（3）再在表格的左上方创建一个名字为apDiv6的AP Div，其内插入拼图效果图像。（4）将4幅拼图图像拖动到表格的正确位置。（5）在“AP 元素”下拉列表框中选择“divapDiv1”选项，再单击“取得目前位置”按钮，可将“apDiv1”AP Div的当前位置数值自动填入其左边的两个文本框内。完成对“apDiv2”、“apDiv3”和“apDiv4”AP Div的设置。（6）选中手指图像，弹出的“行为名称”菜单中“显示-隐藏元素”菜单命令，进行设计。（7）再进行一次手指图像的行为设置，设置“apDiv6”AP Div为不显示。（8）回到“行为”面板中进行设置。相关知识相关知识1“拖动AP元素”动作2“预先载入图像”动作