内置行为与JavaScript

 

 

1 掌握行为和事件的概念。

2 掌握使用内置行为制作简单的网页特效。

3 掌握使用Spry构件制作网页下拉菜单的方法。

4 了解使用JavaScript脚本语言制作简单网页特效的方法。

 

HTML语言主要是用于显示网页内容,功能较为简单,要丰富网页的功能还需借助其他计算机语言来实现。JaveScript就是一种流行于网页的、功能较强的脚本语言。

Dreamweaver内置的“行为”机制,是基于JaveScript来实现动态网页和交互的。但具体使用时不需书写代码,在Dreamweaver可视化环境中通过对话框和按钮的操作就能很快实现丰富的动态页面效果,其相应的JaveScript代码由Dreamweaver自动生成。

SpryAdobe公司推出的JavaScript框架并将其集成在Dreamweaver CS3中。使用Spry框架构建的网页可以实现丰富的显示效果,使用Spry表单构件可实现完善的数据验证功能。



※任务分析

本项目要使用Dreamweaver CS3的内置行为制作网页特效,以home.html为例,要求:

1.当鼠标移动到图片上时图片变亮。如图8-1中圆圈部分所示。

2.当打开此网页时,显示“欢迎光临!”提示框;当关闭此网页时,显示“欢迎下次光临!”提示框。如图8-2所示。

3.网页载入后浏览器左下角的状态栏中显示——欢迎来到“每味美味”。如图8-3左下角圆圈内所示。

8-1  鼠标指向食物图片时,该图片变亮

 

     8-2  关闭网页时显示提示框               8-3  浏览器状态栏中显示欢迎信息

※相关知识

一.事件与动作

事件可以理解为由浏览器生成的消息。绝大部分的事件是由访问者浏览网页时执行某种操作(如,移动鼠标等)引发的,也有极少数事件是由系统自动发生的。

动作是Dreamweaver CS3是先编写好的JavaSript脚本程序,这些代码是由Dreamweaver工程师精心编写而成的,提供了较全面的跨浏览器兼容性。这些动作代码可以执行特定的任务,如打开浏览器窗口、隐藏或者显示对象、播放声音或者停止Shockwave音频播放等等。

常见的网页事件如下所示:

onLoad当图像或网页载入完成时发生。

onUnload当访问者离开网页时发生。

onClick当访问者在指定的元素上单击时发生。

onMouseOut当鼠标从指定元素上移开时发生。

onMouseOver当鼠标移动到指定元素时发生。

二.行为的概念及常用行为

一个完整的“行为”由“事件”和该事件所触发的“动作”两个部分组成。如弹出一个对话框、交换图片、播放音乐等。当网页中发生某“事件”时,就会执行该事件”所对应的“动作”。

例如,当访问者将鼠标移动到某个图像上时,浏览器引发一个该图像的0nMouseOver事件,浏览器检查是否存在一个为该图像发生事件时所对应的JavaScript程序。也就是判断是否有一个预先设定的“动作”,如果有,执行该程序,这样就完成了整个行为。

一般来说行为只能对具有明确ID值的网页元素起作用。所以在设置行为前要为元素设置ID值,以便在对应的脚本代码中能被正确引用。

三.在页面中添加行为

在设计视图中选中需要添加行为的对象(图像、文本、整个页面等),应使用“行为”面板来实现。若“行为”面板未曾打开,则单击“窗口”菜单→“行为”,打开“行为”面板。

单击“行为”面板上的“添加行为”按钮,即可打开“行为”菜单。可以看到菜单中提供的各种行为,如:拖动AP元素、效果、时间轴等。

选择某个行为后(如选择“弹出信息”),在“行为”面板中出现行为列表,如图8-4所示。行为列表由事件(如,onLoad)和动作(如,弹出信息)两部分组成。此行为的操作对象为整个页面(可以通过面板“标签”后的“<body>”看出)

如果要删除行为,需要先选择行为列表中的行为,单击行为面板中的“删除事件”按钮进行删除。

四.时间轴

时间轴是一系列帧的集合,个帧就是网页的一个瞬态图。使用时间轴创建网页的动画效果不需要任何插件、JavaApplet动画、ActiveX控件,只需要更改层和图像在一段时间内的属性即可。时间轴面板如图8-5所示。

 

◆图8-5  时间轴面板

※任务实施

一.制作用于替换的图片素材

1.在站点文件夹mwmw中的images文件夹中建立一个light文件夹。

2.使用图像处理软件(如FireworksPhotoshop等),将网页中所要产生变亮效果的图片进行亮化处理。并将这些亮图片存放light文件夹中。

本例中需要处理的图片是食品图片c01.jpgc02.jpg……c12.jpg,并已经存放于light文件夹中了。

二.为网页元素设置ID

由于home.html网页中的图片在插入时没有为其设置ID值,为了能正确设置图片的行为效果,先为其设置ID值。

1.打开站点example中的home.html文件。

2.选中一个图片,如食品列表中的第一个图片(c01.jpg)。

3.在“属性”面板的ID框中输入“c01作为其ID值。如图8-6圆圈中所示。

◆图8-6  为图片设置ID

4.同样的方法为其他的图片设置相应的ID值,分别为c02c03c04

三.制作图片的交替效果

1.选中IDc01的图片。

2单击“行为”面板中的“添加行为”按钮,在弹出的菜单中选择“交换图像”。弹出“交换图像”对话框,如图8-7所示。

3.单击“浏览”按钮,设置替换的图片为images/light/c01.jpg。如图8-8所示。

4.逐一选中IDc02c03c04的图片,为其设置替换图片为images/light文件夹中的c02.jpgc03.jpgc04.jpg

 

◆图8-7  “交换图像”对话框                         ◆图8-8  设置替换的图片

四.制作提示框

1.在“标签选择器”中选中<body>标签。

2单击“行为”面板中的“添加行为”按钮,在弹出的菜单中选择“弹出信息”。弹出“弹出信息”对话框,如图8-9所示。

3.在对话框中输入提示信息——欢迎光临。单击“确定”按钮。

4.行为面板中增加了一项行为——“弹出信息”。其默认事件为onLoad

5.同样的方法添加一个弹出信息框,提示的信息是——欢迎下次光临。其默认事件为onLoad,单击其下拉列表选择事件onUnload。如图8-10所示。

 

         ◆图8-9  “弹出信息”对话框             ◆图8-10  选择onUload事件

五.状态栏提示信息

1.在“标签选择器”中选中<body>标签。

2单击“行为”面板中的“添加行为”按钮,在弹出的菜单中选择“设置文本”→“设置状态栏文本”。弹出“设置状态栏文本”对话框,输入文本内容,如图8-11所示。

◆图8-11  “设置状态栏文本”对话框

3.保存并浏览网页。

※任务拓展

要求:在home.html网页的下部制作一个从左向右移动的图片(“欢迎订餐”),当用户点击图片时打开mark.html网页进行在线订餐。

1.选择“布局”工具栏中的“绘制AP Div”工具,在网页下部绘制一个AP Div层。

2.在“属性”面板中设置该Div的大小为:宽130像素,高70像素。具体设置如图8-12所示。可以看到该层的ID已经使用了一个默认的名称“apDiv1

◆图8-12  AP Div属性设置

3.从images文件夹中插入一张图片mark.jpg到该层中。

4.选中该图片,设置其超链接为mark.html。如图8-13所示。

◆图8-13  apDiv1中图片的属性设置

5.保持apDiv1为选中状态,右击时间轴,在快捷菜单中选择“记录AP元素的路径”。按住鼠标左键拖动apDiv1,方向为从左到右。拖动到右侧后,放开鼠标。形成一定的曲线路径。编辑区会显示出这条路径。同时在时间轴中也会形成若干关键帧,用以记录层的移动信息。如图8-14所示。

◆图8-14  apDiv1的运行路径及在时间轴中记录的关键帧

6.如果要修改路径,不需要重新拖拽,可以在时间轴面板中通过修改关键帧来实现。时间轴中小圆圈所在的帧就是关键帧。对关键帧的操作有增加关键帧、移除关键帧、改变对象等。

7.按F12保存文件,并在浏览器中测试效果。

 



※任务分析

该任务使用Spry框架中的Spry菜单栏制作网页导航中的下拉菜单,并且当鼠标经过菜单项时,菜单背景颜色发生变化,效果如图8-15所示。

此网页的左侧还建有另一个菜单,当鼠标指向时,横向显示子菜单项。制作方法与制作下拉菜单相同。

◆图8-15  利用Spry制作网页下拉菜单

※相关知识

一.Spry框架概述

Spry框架是一个JavaScript库,网站设计人员使用它可以为用户提供更丰富的网页,向各种页面元素中添加不同种类的效果。

二.Spry框架中的构件

除了与XML相结合使用的构件外,Spry框架中还有制作页面特效的Spry菜单栏、Spry选项卡式面板、Spry折叠式和Spry可折叠面板构件,这些构件都可以通过CSS进行控制。

三.Spry的使用

选择插入栏上的“Spry”中的各选项,就可以使用Spry框架中的构件了,如图8-16所示。其中后四项按钮依次是Spry菜单栏、Spry选项卡式面板、Spry折叠式和Spry可折叠面板构件。

◆图8-16  Spry构件

※任务实施

1.在Windows环境下,使用“我的电脑”,将本教材“项目素材”文件夹中“project08/task02中的exchange文件夹复制到站点文件夹mwmw中;将“project08/task02/images”中的图片文件全部复制到mwmw中的images文件夹中。

2.运行Dreamweaver CS3,打开站点example。展开其中的exchange文件夹,双击“exchange.html”文件,对其进行编辑。

该网页的布局已经制作完成,还剩下两个导航菜单需要添加。如图8-17红色圆圈标注的位置。先制作水平菜单。

一.制作水平菜单

1.删除导航菜单中“此处插入水平菜单”文本,将光标定位在该单元格。选择“Spry”工具栏中的“Spry菜单栏”工具*,屏幕上弹出“Spry菜单栏”对话框。如图8-18所示。选择“水平”,单击“确定”按钮。

   

 ◆图8-17 圆表示导航菜单所在的位置                 ◆图8-18  Spry菜单栏

2.光标处显示出一个Spry菜单栏。如图8-19所示。同时在“属性”面板中也会出现与此菜单对应的菜单项。“属性”面板中的菜单条共有三个区域组成,分别是主菜单、二级菜单、三级菜单。如图8-20所示。

3.选中“主菜单”区域中的“项目1”,在右侧的“文本”中输入“厨艺技巧”,在链接中输入目标网页“cyjq.html”,制作菜单的第一项。如图8-20红色圆圈部分所示。

◆图8-19  Spry菜单栏

◆图8-20  “属性”面板中的三个区域

4.“厨艺技巧”菜单没有子菜单项,故此要将其二级菜单删除。单击相应区域上方的“-”按钮可以删除菜单项。如图8-21。删除“项目11”等三项。

◆图8-21  删除菜单项的按钮

5.选中主菜单中的“项目2”,在右侧的“文本”中输入“中华美食”。

6.单击在二级菜单区域上方的“+”按钮,在二级菜单中添加菜单项,在右侧的“文本”中输入“家常菜”。

以此类推,添加“川 菜”、“粤 菜”、“闽 菜”、“徽 菜”、“苏 菜”、“浙 菜”、“湘 菜”、“鲁 菜”等项。如图8-22所示。

◆图8-22  添加菜单项

7.同样的方法建立其他菜单项,除“国外美食”外,其他菜单项均没有子菜单。如图8-23所示。

8.菜单制作完成后,按Ctrl+S保存网页文件。屏幕中将弹出“复制相关文件”对话框,如图8-24所示。对话框中所列的文件都是用以支持菜单运行的必备文件。单击“确定”按钮,这些文件就被复制到站点文件夹中的“SpryAssets”文件夹中。

◆图8-23  导航菜单的其他菜单项

◆图8-24  复制相关文件对话框

此时菜单的背景色是灰色,与网页的色调不协调。如图8-25所示。可以通过修改菜单的CSS样式来调整显示效果。

◆图8-25  导航菜单的背景色与网页色调不协调

9.在“CSS样式”面板中展开“SpryMenuBarHorizontal.css”项,可以看到其中包含有很多样式。双击“ul MenuBarHorizontal a”样式,在打开的“CSS规则定义”对话框中修改文本大小、颜色、背景颜色属性值,其他属性不变。如图8-26、图8-27所示。

 

◆图8-26  修改文本大小和颜色属性                  ◆图8-27  修改菜单的背景颜色属性

这样水平菜单就创建好了。接下来,使用同样的方法建立左侧的垂直菜单。

二.制作垂直菜单

1.删除左侧菜单位置处“此处插入垂直菜单”文本,将光标定位在该单元格。选择“Spry”工具栏中的“Spry菜单栏”工具*,屏幕上弹出“Spry菜单栏”对话框,选择“垂直”,单击“确定”按钮。

2.对照图8-15所示,制作菜单,此菜单的主菜单只有四项,各主菜单的子菜单与前述相同。制作方法也相同。不再赘述。

垂直菜单的CSS样式中背景色的设置与水平菜单有所不同。方法是:

3.在“CSS样式”面板中展开“SpryMenuBarVertical.css”项,双击“ul MenuBarVertical a”样式,在打开的“CSS规则定义”对话框中修改文本大小、颜色、背景颜色属性值,其他属性不变。如图8-28、图8-29所示。

 

◆图8-28  修改垂直菜单中文本大小和颜色属性        ◆图8-29  修改垂直菜单中的背景颜色属性

4.按F12保存文件,并在浏览器中测试效果。

※任务拓展

8-30所示的折叠式菜单也是网页中常用的效果。当鼠标单击其中的上项时折叠或展开该项的下一级内容,同时展开或折叠原先的内容。

该效果是使用“Spry工具栏”中的“Spry折叠式”工具插入折叠面板来实现的。具体做法如下:

1.在当前站点文件夹mwmw中新建一个子文件夹oa

2.新建一个空白网页文件,单击“Spry”工具栏中的“Spry折叠式”工具,屏幕弹出“保存文档”的提示对话框。如图8-31所示。

3.单击对话框中的“确定”按钮,以“leftmenu.html”为文件名将此网页文件保存oa文件夹中。

       

◆图8-30  折叠式菜单                ◆图8-31  保存文件提示对话框

4.此时网页中自动插入了一个对象“Spry折叠式:Accordion1如图8-32所示。同时CSS校式文件SpryAccordion.cssJavaScript脚本文件SpryAccordion.js被自动添加到站点中的文件夹SpryAssets中。

◆图8-32  折叠式对象“Spry折叠式:Accordion1

5.将其中的“Label1文本串改成“文章管理”,将其下方的“内容1改成“添加文章”,并继续输入“修改文章、审核文章、内容关键字、删除评论/审核评论”共五行文本。

6.输入第一个菜单后,鼠标移动到第二个菜单的右侧,此时菜单行中会显示“”,单击它展开当前菜单。

7.同样的方式,修改菜单为“公告管理”,并将“内容2”删除,重新输入“添加公告、修改公告、审核公告、内容关公告”共四行。

8.默认状态下,折叠菜单只有两个栏目,要增加更多的栏目可在“属性”面板中添加。如图8-33所示。使用按钮添加或删除栏目,使用按钮调整栏目次序。

◆图8-33  在“属性”面板中添加和编辑折叠栏目

9.参照项目素材文件夹中的“project08/task02/oa”中的leftmenu.html文件,完成剩余菜单项的输入。

10.设置折叠面板的样式。折叠面板相应的CSS样式保存在SpryAccordion.css文件中,在“CSS面板”中可以看到所包含的样式项。将“.Accordion”样式中的“方框”的宽度设置为200像素,这样设置了菜单的宽度,菜单就不会横向占满整个浏览窗口。

11.根据自己的喜好,还可以更改其他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时,代码需要放在<script></script>标记之间,并将其加入到HTML文档的相应位置,书写格式如下所示:

<script type="text/JavaScript"><script language=JavaScript>均用以表明当前程序是用JavaScript编写的,需要调用相应的解释程序进行解释执行。

二.使用JavaScript制作网页特效

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

例如,下面这段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">

<!--

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>

7.并在<body>Onload事件中添加getwindowsize();restarte();在<body>OnResize事件中添加getwindowsize()。参照如下:

<body OnLoad="getwindowsize();restarte()" OnResize="getwindowsize()">

8.按F12保存文件,并在浏览器中测试效果。

 



 


1.参照任务1所介绍的方法,将练习文件夹exercisehome.html页面中的图片部分制作交替图片效果,如图8-36所示。图片素材在images中的light文件夹的。

◆图8-36 交替图片效果

2.运行IE浏览器,在地址栏中输入http://www.baidu.com,打开“百度”搜索页,输入关键字“网页特效代码”。可以搜索到很多提供“网页特效代码”的网站,看看都有哪些网页特效呢?这么多的特效,你能模仿哪几种呢?

 



一、填空题

1.动作是Dreamweaver CS3是先编写好的___________________________

2.常见的网页事件有_________________________________________________

3.行为有两部分组成,即_______________,通过_______响应进而执行对应的______

4.打开“行为”面板的方法是,单击________菜单→_______命令。

5使用Spry菜单栏制作菜单完成后,保存网页文件时,屏幕中会弹出________对话框,单击“确定”按钮,这些文件会被复制到站点文件夹中的______________文件夹中。

6.在网页中使用JavaScript时,代码需要放在______________________标记之间。

二.选择题

1.下列常见事件中,(    )是鼠标指向对免是发生的事件,(    )单击对象时发生的。

AonLoad        BonClick      ConMouseOut       DonMouseOver

2.关于Spry框架的叙述不正确的是(    )。

ASpry框架是一个JavaScript库。

B)使用Spry框架可以制作页面特效。

CSpry框架的代码由网页制作人员书写。

DSpry框架可以使用CSS对其进行控制。

3.关于JavaScript的叙述不正确的是(    )。

AJavaScript是一种解释性的基于对象的脚本语言。

BJavaScript只能在网页中使用。

C)在网页客户端运行JavaScript,可以大大减少服务器的负荷。

D)使用JavaScript可以制作多种多样的网页特效。

三.简答

1.什么是事件和动作?

2.简述行为的概念及特点。