中文DreamweaverCS3案例教程（第二版）作者沈大林等第八章课案.pptVIP

中文Dreamweaver CS3案例教程（第二版） 沈大林 主编 8.1 【案例33】“2008年北京奥运”网页 案例效果 主要由图像组成，其中网页上边第1行左起第1幅图像是网页标题，右起第1幅是一个长城的GIF动画，不断切换长城的各幅画面，其他图像是北京名胜的图片。第1行下边是各种体育运动图像。在第1行背景图像之上，有一个运动员不断地从左向右奔跑。 操作步骤 （1）创建一个围住整个网页的绿色矩形的布局表格。 （2）依次创建多个布局单元格。 （3）在布局表格的各个单元格内插入不同的图像或GIF动画。 （4）创建一个AP Div，插入一个名称为“人跑.gif”的GIF动画。 （5）将“人跑”的GIF动画所在的AP Div拖动到时间轴内，制作动画。 （6）选中“时间轴”面板中的“循环”和“自动播放”复选框。 第8章 时间轴和行为 相关知识 1．“时间轴”面板 单击“窗口”→“时间轴”菜单命令或按【Alt+F9】组合键 2．直线移动动画的制作 8.2 【案例34】“北京欢迎您”网页 案例效果 在“2008年北京奥运”网页的基础之上添加了一个沿着曲线移动的“北京欢迎您”文字和一个沿着另一条曲线移动的“我和你”文字。 单击移动的“北京欢迎您”文字，会弹出一个网页，该网页内背景是一幅奥运场馆图像，图像之上有红色的立体“北京欢迎您”文字。单击移动的“我和你”文字，会弹出一个网页内是一个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】“世界名花简介2”网页 案例效果 操作步骤 1．修改“TOP1.htm”网页 2．制作弹出式菜单 相关知识 1．动作名称及其作用 2．事件名称及其作用 3．设置行为的其他操作 4．“显示—隐藏元素”动作 8.4 【案例36】“交替显示的图像”网页 案例效果 操作步骤 （1）新建一个网页文档，插入“PIC01.jpg”图像，将图像拖动到“时间轴”面板内，形成一条动画条。 （2）制作AP Div的直线移动动画。 （3）依次选中图像动画条上的各个关键帧，同时也选中图像。 （4）用时间轴动画技术制作的”文字提示信息。 相关知识 1．“弹出信息”动作 2．“设置文本”动作 8.5 【案例37】“弹出浏览器窗口”网页 案例效果 “弹出浏览器窗口”网页显示后，会看到同一位置处交替显示10幅图像，它们周而复始地循环切换，显示效果与【案例36】“交替显示的图像”网页的显示效果一样。同时，还会在另一个浏览器窗口内弹出一个“图像切换.html”网页，该网页内显示一个“图像切换.swf”的Flash动画。 操作步骤 打开“【案例37】弹出浏览器窗口”文件夹内的“弹出浏览器窗口.html”网页，单击窗体左下角的BODY标签。此时，BODY标签变为粗体，窗体内全部内容都被选中。 单击“动作”菜单中的“打开浏览器窗口”菜单命令，弹出“打开浏览器窗口”对话框。完成“打开浏览器窗口”的设置。 相关知识 1．“打开浏览器窗口”动作 2．“改变属性”动作 8.6 【案例38】图像链接翻转 案例效果 页面上有4幅图像。当鼠标指针移到右边第1幅图像时，这4幅图像会变为另外4幅图像。 操作步骤 （1）在“设置导航栏图像”对话框“基本”选项卡内进行设置 （2）切换到“设置导航栏图像”对话框内的“高级”选项卡，进行设置。 （3）选中“同时设置图像”显示框内的“图像‘PHOTO2’”选项，再在“变成图像文件”文本框内输入JPG/PB2.jpg （4）选中“同时设置图像”显示框内的“图像‘PHOTO3’”选项，再在“变成图像文件”文本框内输入JPG/PC2.jpg， （5）单击“设置导航栏图像”菜单命令，弹出“设置导航栏图像”（基本）对话框。进行设置。 （6）选中右边第1幅图像，设置对话框“设置导航栏图像”，弹出“行为”面板，将新增加的onClick事件改为onMouseOut事件，onMouseOver事件是自动生成的，双击“行为”面板内的“预先载入图像”文字，弹出“预先载入图像”对话框。 相关知识 1．“设置导航栏图像”动作 2．“交换图像”动作 3．“恢复交换图像”动作 8.7 【案例39】“世界名花简介3”网页 案例效果 本