网页设计制作.pptx

《网页设计制作.pptx》由会员分享，可在线阅读，更多相关《网页设计制作.pptx（20页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第6章 网页行为语言JavaScript第1页/共20页主要内容一 JavaScript简介二 行为三 制作JavaScript特效四 实训第2页/共20页 脚本（脚本（脚本（脚本（ScriptScript）：）：）：）：实际上就是一段程序，用来完实际上就是一段程序，用来完成某些特殊的功能。成某些特殊的功能。服务器脚本，例如服务器脚本，例如ASPASP脚本、脚本、PHPPHP脚本等脚本等客户端脚本（在浏览器端运行）客户端脚本（在浏览器端运行）JavaScriptJavaScript：是一种基于对象和事件驱动并具有是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与安全性能的脚本语

2、言。使用它的目的是与HTMLHTML、CSSCSS一起实现在一个一起实现在一个WebWeb页面中链接多个对象，与页面中链接多个对象，与WebWeb客户交互的作用。客户交互的作用。6.1 JavaScript简介简介第3页/共20页网页中插入JavaScript的方法：HTML中嵌入JavaScriptJavaScript语言代码链接JavaScript文件6.1 JavaScript简介简介第4页/共20页6.2.1 6.2.1 行为的基本概念行为的基本概念行为的基本概念行为的基本概念 行为是行为是DreamweaverDreamweaver内置的内置的JavaScriptJavaScript

3、程序库，可以通过行程序库，可以通过行为面板进行调用。为面板进行调用。事件：是页面的访问者已执行了某种操作。例如：事件：是页面的访问者已执行了某种操作。例如：onLoadonLoad事件、事件、onMouseOveronMouseOver事件和事件和onClickonClick事件。事件。动作：是一段预先编写好的动作：是一段预先编写好的JavaScriptJavaScript代码，可用于执代码，可用于执行以下常见的任务：打开浏览器窗口、显示或隐藏行以下常见的任务：打开浏览器窗口、显示或隐藏APAP元素、弹出信息、设置导航栏图像、播放声音或影片等。元素、弹出信息、设置导航栏图像、播放声音或影片等。

4、6.2 行为行为第5页/共20页6.2.2 6.2.2 行为面板行为面板行为面板行为面板 Dreamweaver CS4Dreamweaver CS4中，行为面板默认的位置位于中，行为面板默认的位置位于“标签检标签检查器查器”组合面板中，可以使用下面的方法打开行为面板。组合面板中，可以使用下面的方法打开行为面板。执行执行“窗口窗口”“”“行为行为”命令；命令；按按ShiftShift+F4F4组合键。组合键。使用使用“行为行为”面板可以将行为附加到页面元素，并可以修面板可以将行为附加到页面元素，并可以修改以前所附加行为的参数。已附加到当前所选页面元素的行改以前所附加行为的参数。已附加到当前所选

5、页面元素的行为显示在行为列表中，并按事件以字母顺序列出。如果针对为显示在行为列表中，并按事件以字母顺序列出。如果针对同一个事件列有多个动作，则会按在列表中出现的顺序执行同一个事件列有多个动作，则会按在列表中出现的顺序执行这些动作；如果行为列表中没有显示任何行为，则表示没有这些动作；如果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元素。行为附加到当前所选的页面元素。6.2 行为行为第6页/共20页6.3.1 6.3.1 利用行为面板设置弹出窗口页面利用行为面板设置弹出窗口页面利用行为面板设置弹出窗口页面利用行为面板设置弹出窗口页面 弹出窗口页面是使用弹出窗口页面是使用“打开浏览

6、器窗口打开浏览器窗口”行为实现的，是行为实现的，是指在一个新的窗口中打开一个广告效果的页面，用户可以指指在一个新的窗口中打开一个广告效果的页面，用户可以指定新窗口的大小、特性（是否可以调整大小、是否具有菜单定新窗口的大小、特性（是否可以调整大小、是否具有菜单栏等）和名称。栏等）和名称。如果不设置该窗口的任何属性，在打开该窗口时它的大小如果不设置该窗口的任何属性，在打开该窗口时它的大小和属性与打开它的窗口相同，指定窗口的任何属性都将自动和属性与打开它的窗口相同，指定窗口的任何属性都将自动关闭所有其它未明确设置的属性。例如，如果用户不设置窗关闭所有其它未明确设置的属性。例如，如果用户不设置窗口的任

7、何属性，窗口将以口的任何属性，窗口将以10241024像素像素768768像素的大小打开，并像素的大小打开，并具有导航条、地址工具栏、状态栏和菜单栏。如果用户将窗具有导航条、地址工具栏、状态栏和菜单栏。如果用户将窗口宽度设置为口宽度设置为640640像素、高度设置为像素、高度设置为480480像素，但不设置其它像素，但不设置其它属性，则该窗口将以属性，则该窗口将以640640像素像素480480像素的大小打开，并且不显像素的大小打开，并且不显示工具栏。示工具栏。6.3 页面对象行为页面对象行为第7页/共20页6.3.2 6.3.2 利用行为面板设置弹出信息框利用行为面板设置弹出信息框利用行为面

8、板设置弹出信息框利用行为面板设置弹出信息框“弹出信息弹出信息”行为显示一个包含指定信息的行为显示一个包含指定信息的JavaScriptJavaScript警告。警告。因为因为JavaScriptJavaScript警告对话框只有一个警告对话框只有一个“确定确定”按钮，所以使用按钮，所以使用此行为可以提供用户信息，但不能为用户提供选择操作。此行为可以提供用户信息，但不能为用户提供选择操作。设置弹出信息框的方法如下。设置弹出信息框的方法如下。选择页面对象，然后从选择页面对象，然后从“行为行为”面板的面板的“添加行为添加行为”菜单菜单中选择中选择“弹出信息弹出信息”，打开，打开“弹出信息弹出信息”对

9、话框，如图对话框，如图6-76-7所所示。示。在对话框的在对话框的“消息消息”文本框中输入用户希望显示的消息。文本框中输入用户希望显示的消息。单击单击“确定确定”按钮，此时在按钮，此时在“行为行为”面板中会自动添加一面板中会自动添加一个单击对象的个单击对象的onClickonClick事件，如图事件，如图6-86-8所示。所示。6.3 页面对象行为页面对象行为第8页/共20页6.3.3 6.3.3 案例一：制作曙光大学网站首页弹出窗口页面案例一：制作曙光大学网站首页弹出窗口页面案例一：制作曙光大学网站首页弹出窗口页面案例一：制作曙光大学网站首页弹出窗口页面【案例综述案例综述】制作伴随曙光大学网

10、站首页打开而自动打开的广告窗口页制作伴随曙光大学网站首页打开而自动打开的广告窗口页面。面。【案例展示案例展示】当曙光大学网站首页在浏览器中打开时，广告页面在宽度当曙光大学网站首页在浏览器中打开时，广告页面在宽度为为400400、高度为、高度为300300的窗口中自动打开，实例效果如图所示。的窗口中自动打开，实例效果如图所示。6.3 页面对象行为页面对象行为第9页/共20页6.4.1 6.4.1 对象及相关概念对象及相关概念对象及相关概念对象及相关概念1 1对象对象（1 1）对象的概念）对象的概念（2 2）对象的使用）对象的使用2 2对象的属性对象的属性3 3对象的事件对象的事件4 4对象的方法

11、对象的方法6.4 基于对象的基于对象的JavaScript脚本语言脚本语言第10页/共20页6.4.2 DHTML6.4.2 DHTML对象模型简介对象模型简介对象模型简介对象模型简介 在在DHTMLDHTML模型中，最顶层的对象是模型中，最顶层的对象是WindowWindow对象，其他对对象，其他对象可以看做是象可以看做是WindowWindow对象的属性，如图对象的属性，如图6-156-15所示。其中，对所示。其中，对于编程最重要的属性是于编程最重要的属性是DocumentDocument对象。对象。DocumentDocument对象表示浏对象表示浏览器中当前览器中当前HTMLHTML文

12、档，通过该对象能够获得关于当前文档文档，通过该对象能够获得关于当前文档的信息，可以检测和修改当前的信息，可以检测和修改当前HTMLHTML文档的元素，还可以响文档的元素，还可以响应事件。应事件。6.4 基于对象的基于对象的JavaScript脚本语言脚本语言WindowScreenFramesHistoryNavigatorLocationScriptsDocumentLinkAnchorsForms第11页/共20页6.5.1 6.5.1 对象事件的分类对象事件的分类对象事件的分类对象事件的分类在在JavaScriptJavaScript中，事件是预先定义好的、能够被对象识别的动中，事件是预

13、先定义好的、能够被对象识别的动作，事件定义了用户与网页交互时产生的各种操作。例如，作，事件定义了用户与网页交互时产生的各种操作。例如，单击按钮时，就产生一个事件，告诉浏览器发生了需要进行单击按钮时，就产生一个事件，告诉浏览器发生了需要进行处理的单击操作。浏览器自己的一些动作也可能产生事件，处理的单击操作。浏览器自己的一些动作也可能产生事件，例如，浏览器载入例如，浏览器载入个网页时，就会产生个网页时，就会产生LoadLoad事件。当事件事件。当事件发生时，发生时，JavaScriptJavaScript将检测两条信息，即发生的是哪种事件和将检测两条信息，即发生的是哪种事件和哪个对象接收了事件。哪

14、个对象接收了事件。对象事件有三类：对象事件有三类：用户引起的事件，如网页装载、表单提交等。用户引起的事件，如网页装载、表单提交等。引起页面之间跳转的事件，主要是超级链接。引起页面之间跳转的事件，主要是超级链接。表单内部与界面对象的交互，包括界面对象的改变等。这表单内部与界面对象的交互，包括界面对象的改变等。这类事件可以按照应用程序的具体功能自由设计。类事件可以按照应用程序的具体功能自由设计。6.5 对象事件对象事件第12页/共20页6.5.2 6.5.2 常用的事件及处理程序常用的事件及处理程序常用的事件及处理程序常用的事件及处理程序1 1浏览器事件浏览器事件浏览器事件主要由浏览器事件主要由L

15、oadLoad、unLoadunLoad、DragDropDragDrop以及以及SubmitSubmit等事等事件组成。件组成。2 2鼠标事件鼠标事件3 3键盘事件键盘事件 6.5 对象事件对象事件第13页/共20页6.6.1 6.6.1 案例二：制作曙光大学网站首页滚动友情链接院校信息案例二：制作曙光大学网站首页滚动友情链接院校信息案例二：制作曙光大学网站首页滚动友情链接院校信息案例二：制作曙光大学网站首页滚动友情链接院校信息【案例综述】使用字幕技术和JavaScript脚本语言修改曙光大学网站首页友情链接栏目的展示形式。【案例展示】使用循环向上滚动的字幕展示友情链接的院校信息。当浏览者将

16、鼠标移动到字幕区域后，字幕停止运动，让浏览者清晰地看到相关信息。6.6 制作制作JavaScript特效特效第14页/共20页marquee的html属性Height/weight:高度、宽度behavior:用于设定滚动的方式，主要由三种方式：scroll:表示由一端滚动到另一端；slide:表示由一端滚动到另一端，且不再重复；alternate:表示在两端之间来回滚动。direction:left左(默认值);right 右;up 上;down 下;bgcolor:背景颜色scrollamount:滚动的速度scrolldelay:延迟时间loop:循环次数onmouseout=“this

17、.start()”:运动onmouseover=this.stop():停止第15页/共20页6.6.2 6.6.2 案例三：制作曙光大学网站首页循环滚动图片广告案例三：制作曙光大学网站首页循环滚动图片广告案例三：制作曙光大学网站首页循环滚动图片广告案例三：制作曙光大学网站首页循环滚动图片广告【案例综述】使用字幕技术和JavaScript脚本语言修改曙光大学网站首页学校风采展示图片的展示形式。【案例展示】使用循环向左滚动的字幕展示学校风采的系列图片。当浏览者将鼠标移动到字幕区域后，字幕停止运动；当浏览者将鼠标移出字幕区域后，字幕继续运动。该字幕是不间断循环滚动的，本案例的效果如图所示。6.6

18、制作制作JavaScript特效特效第16页/共20页6.6.3 6.6.3 案例四：制作曙光大学网站首页幻灯切换广告案例四：制作曙光大学网站首页幻灯切换广告案例四：制作曙光大学网站首页幻灯切换广告案例四：制作曙光大学网站首页幻灯切换广告【案例综述】制作曙光大学网站首页幻灯切换广告，展示学校最新的新闻图片。【案例展示】制作学校新闻栏目中的幻灯切换广告。每隔一段时间，广告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相应的画面；用户单击链接文字，可以打开相应的网页。6.6 制作制作JavaScript特效特效第17页/共20页6.7.1 6.7.1 实训一：制作实训一：制作实训一：制

19、作实训一：制作“爱家美食爱家美食爱家美食爱家美食”网站菜谱弹出信息框网站菜谱弹出信息框网站菜谱弹出信息框网站菜谱弹出信息框【实训综述】读者在学习了Dremweaver内置行为的基础上，进一步加强内置行为的练习，制作更多的网页交互功能。【实训展示】制作“爱家美食”网站菜谱弹出信息框，当浏览者用鼠标单击菜谱图像后，弹出一个信息框，显示菜谱的简介信息，效果如图所示。6.7 实训实训第18页/共20页6.7.2 6.7.2 实训二：制作实训二：制作实训二：制作实训二：制作“爱家美食爱家美食爱家美食爱家美食”网站首页的幻灯切换广告网站首页的幻灯切换广告网站首页的幻灯切换广告网站首页的幻灯切换广告【实训综述】读者在学习了JavaScript脚本语言的基础上，进一步加强使用代码制作网页特效的练习。【实训展示】修改“爱家美食”网站首页的静态广告图片为动态的幻灯切换广告，本实训要求不使用Flash动画playswf.swf实现幻灯切换广告效果，采用纯JavaScript代码的形式实现这一功能，效果如图所示。6.7 实训实训第19页/共20页感谢您的观看！第20页/共20页