项目8 内置行为与JavaScript.

项目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．保存文件，浏览网页，用鼠标单击栏目时，会出现折叠|展开效果就成功了。返回

任务分析我们常常会在一些网页中看到自由漂浮的图片。本任务就使用JavaScript来实现这种图片漂浮效果，如图8-35所示的“诚聘英才”图片就是这种效果。 ◆图8-35 网页的整体布局

相关知识一．JavaScript简介 JavaScript是一种解释性的基于对象的脚本语言，如今已经越来越广泛地应用于网页制作，用它可以编写出各种应用于网页动态效果的程序。在 HTML基础上，使用JavaScript可以开发交互式Web网页，不仅增添网页和用户之间实时、动态、交互的功能，还能让网页包含更多活跃的元素和更加精彩的内容。 JavaScript短小精悍，主要是在客户端运行，这样就大大减少了服务器的负荷，提高了网页的浏览速度和交互能力。同时也就要求网页浏览器能支持JavaScript语言。目前我们所使用的浏览器均能非常友好地支持 JavaScript语言。

相关知识一．JavaScript简介在网页中使用JavaScript时，代码需要放在<script>…</script>标记之间，并将其加入到HTML文档的相应位置，书写格式如下所示： <script type="text/JavaScript">  </script> <script language="JavaScript">  </script> <script type="text/JavaScript">或<script language=JavaScript> 均用以表明当前程序是用JavaScript编写的，需要调用相应的解释程序进行解释执行。

相关知识二．使用JavaScript制作网页特效 JavaScript常用来给HTML网页添加动态功能，比如响应用户的各种操作等。 JavaScript使网页增加互动性，能及时响应用户的操作。一般来说，可以在想添加特效的地方直接添加特效代码，或将特效代码添加在<head>……</head> 之间即可。有些特效使用的代码不止一处，还需要在别的地方添加其他代码，相互配合运行。响应用户操作的特效需要在相应的HTML标记中添加事件触发语句。

相关知识二．使用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>

任务实施 1．打开站点example中的home.html文件。 2．选择“布局”工具栏中的“绘制AP Div”工具，在网页下部绘制一个 AP Div层。 3．在“属性”面板中设置该Div的大小为：宽100像素，高105像素。并设置ID为“job”。 4．从images文件夹中插入一张图片cpyc.jpg到该层中。

任务实施 5．选中该图片，设置其超链接为job.html。 6．切换到代码视图，将如下代码复制到<head>…</head>之间。

<script type="text/javascript">
 </script>

任务实施 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浏览器，在地址栏中输入度”搜索页，输入关键字“网页特效代码”。可以搜索到很多提供“网页特效代码”的网站，看看都有哪些网页特效呢？这么多的特效，你能模仿哪几种呢？返回

项目8 内置行为与JavaScript.

Similar presentations

Presentation on theme: "项目8 内置行为与JavaScript."— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

项目8 内置行为与JavaScript.

Similar presentations

Presentation on theme: "项目8 内置行为与JavaScript."— Presentation transcript:

Similar presentations

About project

反馈