项目8 内置行为与JavaScript
任务3 使用JavaScript制作网页特效 任务1 使用内置行为制作网页特效点 任务2 使用Spry框架制作动态导航菜单 项目8 内置行为与JavaScript 任务3 使用JavaScript制作网页特效 项目总结 技能巩固
任务1 使用内置行为制作网页特效 任务分析 本项目要使用Dreamweaver CS3的内置行为制作网页特效，以home.html为例，要求： 1．当鼠标移动到图片上时图片变亮。如图8-1中圆圈部分所示。 2．当打开此网页时，显示“欢迎光临！”提示框；当关闭此网页时，显示“欢迎下次光临！”提示框。如图8-2所示。 3．网页载入后浏览器左下角的状态栏中显示——欢迎来到“每味美味”。如图8-3左下角圆圈内所示。
任务1 使用内置行为制作网页特效 ◆图8-1 鼠标指向食物图片时，该图片变亮
任务1 使用内置行为制作网页特效 ◆图8-2 关闭网页时显示提示框 ◆图8-3 浏览器状态栏中显示欢迎信息
任务1 使用内置行为制作网页特效 一．相关知识 1.事件与动作 任务1 使用内置行为制作网页特效 一．相关知识 1.事件与动作 事件可以理解为由浏览器生成的消息。绝大部分的事件是由访问者浏览网页时执行某种操作（如，移动鼠标等）引发的，也有极少数事件是由系统自动发生的。 动作是Dreamweaver CS3是先编写好的JavaSript脚本程序，这些代码是由Dreamweaver工程师精心编写而成的，提供了较全面的跨浏览器兼容性。这些动作代码可以执行特定的任务，如打开浏览器窗口、隐藏或者显示对象、播放声音或者停止Shockwave音频播放等等。 常见的网页事件如下所示： onLoad：当图像或网页载入完成时发生。 onUnload：当访问者离开网页时发生。 onClick：当访问者在指定的元素上单击时发生。 onMouseOut：当鼠标从指定元素上移开时发生。 onMouseOver：当鼠标移动到指定元素时发生。
任务1 使用内置行为制作网页特效 一．相关知识 2.行为的概念及常用行为 任务1 使用内置行为制作网页特效 一．相关知识 2.行为的概念及常用行为 一个完整的“行为”由“事件”和该事件所触发的“动作”两个部分组成。如弹出一个对话框、交换图片、播放音乐等。当网页中发生某“事件”时，就会执行该“事件”所对应的“动作”。 例如，当访问者将鼠标移动到某个图像上时，浏览器引发一个该图像的0nMouseOver事件，浏览器检查是否存在一个为该图像发生事件时所对应的JavaScript程序。也就是判断是否有一个预先设定的“动作”，如果有，执行该程序，这样就完成了整个行为。 一般来说行为只能对具有明确ID值的网页元素起作用。所以在设置行为前要为元素设置ID值，以便在对应的脚本代码中能被正确引用。
任务1 使用内置行为制作网页特效 一．相关知识 3.在页面中添加行为 任务1 使用内置行为制作网页特效 一．相关知识 3.在页面中添加行为 ◆图8-4 “行为”面板中的行为 在设计视图中选中需要添加行为的对象(图像、文本、整个页面等)，应使用“行为”面板来实现。若“行为”面板未曾打开，则单击“窗口”菜单→“行为”，打开“行为”面板。 单击“行为”面板上的“添加行为”按钮，即可打开“行为”菜单。可以看到菜单中提供的各种行为，如：拖动AP元素、效果、时间轴等。 选择某个行为后（如选择“弹出信息”），在“行为”面板中出现行为列表，如图8-4所示。行为列表由事件(如，onLoad)和动作(如，弹出信息)两部分组成。此行为的操作对象为整个页面(可以通过面板“标签”后的“<body>”看出)。 如果要删除行为，需要先选择行为列表中的行为，单击行为面板中的“删除事件”按钮进行删除。
任务1 使用内置行为制作网页特效 一．相关知识 4.时间轴 ◆图8-5 时间轴面板 任务1 使用内置行为制作网页特效 一．相关知识 4.时间轴 时间轴是一系列帧的集合，—个帧就是网页的一个瞬态图。使用时间轴创建网页的动画效果不需要任何插件、JavaApplet动画、ActiveX控件，只需要更改层和图像在一段时间内的属性即可。时间轴面板如图8-5所示。 ◆图8-5 时间轴面板
任务1 使用内置行为制作网页特效 任务实施 一.制作用于替换的图片素材 1．在站点文件夹mwmw中的images文件夹中 任务1 使用内置行为制作网页特效 任务实施 一.制作用于替换的图片素材 1．在站点文件夹mwmw中的images文件夹中 建立一个light文件夹。 2．使用图像处理软件（如Fireworks、Photoshop等）， 将网页中所要产生变亮效果的图片进行亮化处理。并将这些 亮图片存放light文件夹中。 本例中需要处理的图片是食品图片c01.jpg、 c02.jpg……c12.jpg，并已经存放于light文件夹中了。
任务1 使用内置行为制作网页特效 任务实施 二.为网页元素设置ID值 由于home.html网页中的图片在插入时没有为其设置ID值， 任务1 使用内置行为制作网页特效 任务实施 二.为网页元素设置ID值 由于home.html网页中的图片在插入时没有为其设置ID值， 为了能正确设置图片的行为效果，先为其设置ID值。 1．打开站点example中的home.html文件。 2．选中一个图片，如食品列表中的第一个图片（c01.jpg）。 如图8-6圆圈中所示。 3 ．在“属性”面板的ID框中输入“c01”作为其ID值。 4 ．同样的方法为其他的图片设置相应的ID值，分别为c02、 c03、c04。
◆图8-6 为图片设置ID值
任务1 使用内置行为制作网页特效 任务实施 三.制作图片的交替效果 1．选中ID为c01的图片。 任务1 使用内置行为制作网页特效 任务实施 三.制作图片的交替效果 1．选中ID为c01的图片。 2．单击“行为”面板中的“添加行为”按钮，在弹出的菜单中选 择“交换图像”。弹出“交换图像”对话框，如图8-7所示。 3 ．单击“浏览”按钮，设置替换图片为images/light/ c01.jpg。如图8-8所示。 4 ．逐一选中ID为c02、c03、c04的图片，为其设置替换 图片为images/light文件夹中的c02.jpg、c03.jpg、 c04.jpg。
◆图8-7 “交换图像”对话框 ◆图8-8 设置替换的图片 ◆图8-7 “交换图像”对话框 ◆图8-8 设置替换的图片
任务1 使用内置行为制作网页特效 任务实施 四.制作提示框 1．在“标签选择器”中选中<body>标签。 任务1 使用内置行为制作网页特效 任务实施 四.制作提示框 1．在“标签选择器”中选中<body>标签。 2．单击“行为”面板中的“添加行为”按钮，在弹出的菜单中选 择“弹出信息”。弹出“弹出信息”对话框，如图8-9所示。 ◆图8-9 “弹出信息”对话框 3 ．在对话框中输入提示信息——欢迎光临。单击“确定”按钮。 4 ．行为面板中增加了一项行为——“弹出信息”。其默认事件 为onLoad。
任务1 使用内置行为制作网页特效 任务实施 四.制作提示框 5 ．同样的方法添加一个弹出信息框，提示的信息是——欢迎 任务1 使用内置行为制作网页特效 任务实施 四.制作提示框 5 ．同样的方法添加一个弹出信息框，提示的信息是——欢迎 下次光临。其默认事件为onLoad，单击其下拉列表选择事件 onUnload。如图8-10所示。 ◆图8-10 选择onUload事件
任务1 使用内置行为制作网页特效 任务实施 五.状态栏提示信息 1．在“标签选择器”中选中<body>标签。 任务1 使用内置行为制作网页特效 任务实施 五.状态栏提示信息 1．在“标签选择器”中选中<body>标签。 2．单击“行为”面板中的“添加行为”按钮，在弹出的菜单中 选择“设置文本”→“设置状态栏文本”。弹出“设置状态栏文本” 对话框，输入文本内容，如图8-11所示。 3 ．保存并浏览网页。 ◆图8-11 “设置状态栏文本”对话框
任务1 使用内置行为制作网页特效 任务拓展 ◆图8-12 AP Div属性设置 任务1 使用内置行为制作网页特效 任务拓展 要求：在home.html网页的下部制作一个从左向右移动的图片 （“欢迎订餐”），当用户点击图片时打开mark.html网页进行在线订餐。 1．选择“布局”工具栏中的“绘制AP Div”工具，在网页下部绘制一个AP Div层 2．在“属性”面板中设置该Div的大小为：宽130像素，高70像素。具体设置 如图8-12所示。可以看到该层的ID已经使用了一个默认的名称“apDiv1”。 ◆图8-12 AP Div属性设置
任务1 使用内置行为制作网页特效 任务拓展 3．从images文件夹中插入一张图片mark.jpg到该层中。 任务1 使用内置行为制作网页特效 任务拓展 3．从images文件夹中插入一张图片mark.jpg到该层中。 4．选中该图片，设置其超链接为mark.html。如图8-13所示。 ◆图8-13 apDiv1中图片的属性设置
任务1 使用内置行为制作网页特效 任务拓展 5．保持apDiv1为选中状态，右击时间轴，在快捷菜单中选择“记录 任务1 使用内置行为制作网页特效 任务拓展 5．保持apDiv1为选中状态，右击时间轴，在快捷菜单中选择“记录 AP元素的路径”。按住鼠标左键拖动apDiv1，方向为从左到右。拖 动到右侧后，放开鼠标。形成一定的曲线路径。编辑区会显示出这条 路径。同时在时间轴中也会形成若干关键帧，用以记录层的移动信息。 如图8-14所示。 ◆图8-14 apDiv1的运行路径及在时间轴中记录的关键帧
任务1 使用内置行为制作网页特效 任务拓展 6．如果要修改路径，不需要重新拖拽，可以在时间轴面板中通过修改关 任务1 使用内置行为制作网页特效 任务拓展 6．如果要修改路径，不需要重新拖拽，可以在时间轴面板中通过修改关 键帧来实现。时间轴中小圆圈所在的帧就是关键帧。对关键帧的操作有增 加关键帧、移除关键帧、改变对象等。 7．按F12保存文件，并在浏览器中测试效果。 返回
任务2 使用Spry框架制作动态导航菜单 任务分析 该任务使用Spry框架中的Spry菜单栏制作网页导航中的下拉菜单，并且当鼠标经过菜单项时，菜单背景颜色发生变化，效果如图8-15所示。 此网页的左侧还建有另一个菜单，当鼠标指向时，横向显示子菜单项。制作方法与制作下拉菜单相同。 ◆图8-15 利用Spry制作网页下拉菜单
任务2 使用Spry框架制作动态导航菜单 相关知识 一．Spry框架概述 Spry框架是一个JavaScript库，网站设计人员使用它可以为用户提供 更丰富的网页，向各种页面元素中添加不同种类的效果。 二．Spry框架中的构件 除了与XML相结合使用的构件外，Spry框架中还有制作页面特效的 Spry菜单栏、Spry选项卡式面板、Spry折叠式和Spry可折叠面板 构件，这些构件都可以通过CSS进行控制。
任务2 使用Spry框架制作动态导航菜单 相关知识 三．Spry的使用
任务2 使用Spry框架制作动态导航菜单 任务实施 ◆图8-17 圆表示导航菜单所在的位置 1．在Windows环境下，使用“我的电脑”，将本教材“项目素材”文件 夹中“project08/task02”中的exchange文件夹复制到站点文件夹 mwmw中；将“project08/task02/images”中的图片文件全部 复制到mwmw中的images文件夹中。 2．运行Dreamweaver CS3，打开站点example。展开其中的 exchange文件夹，双击“exchange.html”文件，对其进行编辑。 该网页的布局已经制作完成，还剩下两个导航菜单需要添加。 如图8-17红色圆圈标注的位置。先制作水平菜单。
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 1．删除导航菜单中“此处插入水平菜单”文本，将光标定位在 该单元格。选择“Spry”工具栏中的“Spry菜单栏”工具，屏幕 上弹出“Spry菜单栏”对话框。如图8-18所示。选择“水平”， 单击“确定”按钮。 ◆图8-18 Spry菜单栏
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 也会出现与此菜单对应的菜单项。“属性”面板中的菜单条共有三个区域组成， 分别是主菜单、二级菜单、三级菜单。如图8-20所示。 ◆图8-19 Spry菜单栏
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 3．选中“主菜单”区域中的“项目1”，在右侧的“文本”中输入 “厨艺技巧”，在链接中输入目标网页“cyjq.html”，制作菜单 的第一项。如图8-20红色圆圈部分所示。 主菜单 二级菜单 三级菜单 ◆图8-20 “属性”面板中的三个区域
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 4．“厨艺技巧”菜单没有子菜单项，故此要将其二级菜单删除。 单击相应区域上方的“-”按钮可以删除菜单项。如图8-21。 删除“项目1．1”等三项。 ◆图8-21 删除菜单项的按钮
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 5．选中主菜单中的“项目2”，在右侧的“文本”中输入“中华美食”。 6．单击在二级菜单区域上方的“+”按钮，在二级菜单中添加菜单项，在 右侧的“文本”中输入“家常菜”。 以此类推，添加“川 菜”、“粤 菜”、“闽 菜”、“徽 菜”、“苏 菜”、“浙 菜”、“湘 菜”、“鲁 菜”等项。如图8-22所示。 ◆图8-22 添加菜单项
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 7．同样的方法建立其他菜单项，除“国外美食”外，其他菜单项 均没有子菜单。如图8-23所示 ◆图8-23 导航菜单的其他菜单项
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 8．菜单制作完成后，按Ctrl+S保存网页文件。屏幕中将弹出 “复制相关文件”对话框，如图8-24所示。对话框中所列的文件 都是用以支持菜单运行的必备文件。单击“确定”按钮，这些文件 就被复制到站点文件夹中的“SpryAssets”文件夹中。 ◆图8-24 复制相关文件对话框
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 此时菜单的背景色是灰色，与网页的色调不协调。如图8-25 所示。可以通过修改菜单的CSS样式来调整显示效果。 ◆图8-25 导航菜单的背景色与网页色调不协调
任务2 使用Spry框架制作动态导航菜单 任务实施 一．制作水平菜单 9．在“CSS样式”面板中展开“SpryMenuBarHorizontal.css” 项，可以看到其中包含有很多样式。 双击“ul MenuBarHorizontal a”样式，在打开的“CSS规 则定义”对话框中修改文本大小、颜色、背景颜色属性值，其他属 性不变。如图8-26、图8-27所示。 ◆图8-26 修改文本大小和颜色属性 ◆图8-27 修改菜单的背景颜色属性 这样水平菜单就创建好了。接下来，使用同样的方法建立左侧的垂直菜单。
任务2 使用Spry框架制作动态导航菜单 任务实施 二．制作垂直菜单 1．删除左侧菜单位置处“此处插入垂直菜单”文本，将光标定位在该单元 格。选择“Spry”工具栏中的“Spry菜单栏”工具，屏幕上弹出“Spry菜单 栏”对话框，选择“垂直”，单击“确定”按钮。 2．对照图8-15所示，制作菜单，此菜单的主菜单只有四项，各主菜单 的子菜单与前述相同。制作方法也相同。不再赘述
任务2 使用Spry框架制作动态导航菜单 任务实施 二．制作垂直菜单 垂直菜单的CSS样式中背景色的设置与水平菜单有所不同。方法是： 3．在“CSS样式”面板中展开“SpryMenuBarVertical.css”项，双 击“ul MenuBarVertical a”样式，在打开的“CSS规则定义”对话框中 修改文本大小、颜色、背景颜色属性值，其他属性不变。 如图8-28、图8-29所示。
任务2 使用Spry框架制作动态导航菜单 任务实施 二．制作垂直菜单 4．按F12保存文件，并在浏览器中测试效果。 ◆图8-28 修改垂直菜单中文本大小和颜色属性 ◆图8-29 修改垂直菜单中的背景颜色属性 4．按F12保存文件，并在浏览器中测试效果。
任务2 使用Spry框架制作动态导航菜单 任务拓展 图8-30所示的折叠式菜单也是网页中常用的效果。当鼠标单 击其中的上项时折叠或展开该项的下一级内容，同时展开或折 叠原先的内容。 ◆图8-30 折叠式菜单
任务2 使用Spry框架制作动态导航菜单 任务拓展 1．在当前站点文件夹mwmw中新建一个子文件夹oa。 该效果是使用“Spry工具栏”中的“Spry折叠式”工具 插入折叠面板来实现的。 具体做法如下： 1．在当前站点文件夹mwmw中新建一个子文件夹oa。 2．新建一个空白网页文件，单击“Spry”工具栏中的“Spry折叠式”工 具，屏幕弹出“保存文档”的提示对话框。如图8-31所示。 ◆图8-31 保存文件提示对话框
◆图8-32 折叠式对象“Spry折叠式:Accordion1” 任务拓展 3．单击对话框中的“确定”按钮，以“leftmenu.html”为文件名将此网页 文件保存oa文件夹中。 4．此时网页中自动插入了一个对象“Spry折叠式:Accordion1”。如图 8-32所示。同时CSS校式文件SpryAccordion.css和JavaScript脚 本文件SpryAccordion.js被自动添加到站点中的文件夹SpryAssets中。 ◆图8-32 折叠式对象“Spry折叠式:Accordion1”
任务2 使用Spry框架制作动态导航菜单 任务拓展 5．将其中的“Label1”文本串改成“文章管理”，将其下方的“内容1”改成“添 加文章”，并继续输入“修改文章、审核文章、内容关键字、删除评论/审核评 论”共五行文本。 6．输入第一个菜单后，鼠标移动到第二个菜单的右侧，此时菜单行中会显 示“”，单击它展开当前菜单。 7．同样的方式，修改菜单为“公告管理”，并将“内容2”删除，重新输入“添 加公告、修改公告、审核公告、内容关公告”共四行。
任务2 使用Spry框架制作动态导航菜单 任务拓展 8．默认状态下，折叠菜单只有两个栏目，要增加更多的栏目可在“属性”面板 中添加。如图8-33所示。使用按钮 添加或删除栏目，使用 按钮调整栏 目次序。 ◆图8-33 在“属性”面板中添加和编辑折叠栏目
任务2 使用Spry框架制作动态导航菜单 任务拓展 9．参照项目素材文件夹中的“project08/task02/oa”中的 leftmenu.html文件，完成剩余菜单项的输入。 10．设置折叠面板的样式。折叠面板相应的CSS样式保存在 SpryAccordion.css文件中，在“CSS面板”中可以看到所包含的 样式项。将“.Accordion”样式中的“方框”的宽度设置为200像素， 这样设置了菜单的宽度，菜单就不会横向占满整个浏览窗口。 11．根据自己的喜好，还可以更改其他CSS样式项。不再赘述。
◆图8-34 SpryAccordion.css文件 任务拓展 12．修改CSS样式其实就是修改SpryAccordion.css文件，所以要及时 保存它。该文件标签在leftmenu.html文件标签的右侧。如图8-34所示。 ◆图8-34 SpryAccordion.css文件 13．保存文件，浏览网页，用鼠标单击栏目时，会出现折叠|展开效果就成功了。 返回
任务3 使用JavaScript制作网页特效 任务分析 我们常常会在一些网页中看到自由漂浮的图片。本任务就使用JavaScript来实现这种图片漂浮效果，如图8-35所示的“诚聘英才”图片就是这种效果。 ◆图8-35 网页的整体布局
任务3 使用JavaScript制作网页特效 相关知识 一．JavaScript简介 JavaScript是一种解释性的基于对象的脚本语言，如今已经越来越广 泛地应用于网页制作，用它可以编写出各种应用于网页动态效果的程序。在 HTML基础上，使用JavaScript可以开发交互式Web网页，不仅增添网 页和用户之间实时、动态、交互的功能，还能让网页包含更多活跃的元素 和更加精彩的内容。 JavaScript短小精悍，主要是在客户端运行，这样就大大减少了服务 器的负荷，提高了网页的浏览速度和交互能力。同时也就要求网页浏览器能 支持JavaScript语言。目前我们所使用的浏览器均能非常友好地支持 JavaScript语言。
任务3 使用JavaScript制作网页特效 相关知识 一．JavaScript简介 在网页中使用JavaScript时，代码需要放在<script>…</script>标记 之间，并将其加入到HTML文档的相应位置，书写格式如下所示： <script type="text/JavaScript"> <!-- 此处为JavaScript语句 //--> </script> <script language="JavaScript"> <!-- 此处为JavaScript语句 //--> </script> <script type="text/JavaScript">或<script language=JavaScript> 均用以表明当前程序是用JavaScript编写的，需要调用相应的解释程序进行解释 执行。
任务3 使用JavaScript制作网页特效 相关知识 二．使用JavaScript制作网页特效 JavaScript常用来给HTML网页添加动态功能，比如响应用户的各种操作等。 JavaScript使网页增加互动性，能及时响应用户的操作。一般来说，可以在 想添加特效的地方直接添加特效代码，或将特效代码添加在<head>……</head> 之间即可。有些特效使用的代码不止一处，还需要在别的地方添加其他代码， 相互配合运行。响应用户操作的特效需要在相应的HTML标记中添加事件触发语句。
任务3 使用JavaScript制作网页特效 相关知识 二．使用JavaScript制作网页特效 例如，下面这段JavaScript程序就可实现在标题栏中显示“闪烁”文字的特效。 <script language=javascript > var title_i=0; function title_text() { if(title_i==0){ document.title='◇欢◇迎◇光◇临◇每味美味◇'; title_i=1;} else{ document.title='◆欢◆迎◆光◆临◆每味美味◆'; title_i=0;} setTimeout("title_text()", 500); } title_text(); </script>
任务3 使用JavaScript制作网页特效 任务实施 1．打开站点example中的home.html文件。 2．选择“布局”工具栏中的“绘制AP Div”工具 ，在网页下部绘制一个 AP Div层。 3．在“属性”面板中设置该Div的大小为：宽100像素，高105像素。 并设置ID为“job”。 4．从images文件夹中插入一张图片cpyc.jpg到该层中。
任务3 使用JavaScript制作网页特效 任务实施 5．选中该图片，设置其超链接为job.html。 6．切换到代码视图，将如下代码复制到<head>…</head>之间。
<script type="text/javascript"> <!-- var wwidth, wheight; var jobydir = '++'; var jobxdir = '++'; var jobx = 1; var joby = 1; function getwindowsize() { wwidth = document.body.clientWidth - 100; wheight = document.body.clientHeight - 105; } function restarte() { eval('jobx'+jobxdir); eval('joby'+jobydir); document.all.job.style.pixelLeft = jobx+document.body.scrollLeft; document.all.job.style.pixelTop = joby+document.body.scrollTop; if (document.all.job.style.pixelTop <= 5+document.body.scrollTop) jobydir = '++'; if (document.all.job.style.pixelTop >= wheight+document.body.scrollTop) jobydir = '--'; if (document.all.job.style.pixelLeft >= wwidth+document.body.scrollLeft) jobxdir = '--'; if (document.all.job.style.pixelLeft <= 5+document.body.scrollLeft) jobxdir = '++'; setTimeout('restarte()', 30); //--> </script>
任务3 使用JavaScript制作网页特效 任务实施 7.并在<body>的Onload事件中添加getwindowsize();restarte()； 在<body>的OnResize事件中添加getwindowsize()。参照如下： <body OnLoad="getwindowsize();restarte()" OnResize="getwindowsize()"> 8.按F12保存文件，并在浏览器中测试效果。 返回
本项目介绍了使用Dreamweaver CS3内置行为制作网页特效的方法，认识了网页对象的事件、行为及由JavaScript语言编写相应的行为程序。虽然网页的各种显示效果和数据处理离不开程序，但Dreamweaver CS3的内置行为、Spry工具为我们提供了极大的帮助，避免了书写大量程序的繁琐工作，在交互方式下就能建立丰富的网页脚本。 通过简单的JavaScript实例学习，使我们认识了脚本程序的书写方法，学好JavaScript语言是提高网页制作水平的必然途径之一。 项 目 总 结 返回
技能巩固 1．参照任务1所介绍的方法，将练习文件夹exercise中home.html页面中 的图片部分制作交替图片效果，如图8-36所示。图片素材在images中的light 文件夹的。 ◆图8-36 交替图片效果 2．运行IE浏览器，在地址栏中输入http://www.baidu.com，打开“百 度”搜索页，输入关键字“网页特效代码”。可以搜索到很多提供“网页特效代 码”的网站，看看都有哪些网页特效呢？这么多的特效，你能模仿哪几种呢？ 返回