网页的设计制作6.pptVIP

* 网页设计与制作 —— 关巍 第6章 网页行为语言——JavaScript 主要内容 一 JavaScript简介 二 行为 三 制作JavaScript特效 四 实训 脚本（Script）：实际上就是一段程序，用来完成某些特殊的功能。 服务器脚本，例如ASP脚本、PHP脚本等 客户端脚本（在浏览器端运行） JavaScript：是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML、CSS一起实现在一个Web页面中链接多个对象，与Web客户交互的作用。 6.1 JavaScript简介 网页中插入JavaScript的方法： HTML中嵌入JavaScript script language=“JavaScript” JavaScript语言代码 …… /script 链接JavaScript文件 head script type=text/javascript src=test.js /script /head 6.1 JavaScript简介 6.2.1 行为的基本概念 行为是Dreamweaver内置的JavaScript程序库，可以通过行为面板进行调用。 事件：是页面的访问者已执行了某种操作。例如： onLoad事件、onMouseOver事件和onClick事件。 动作：是一段预先编写好的JavaScript代码，可用于执行以下常见的任务：打开浏览器窗口、显示或隐藏AP元素、弹出信息、设置导航栏图像、播放声音或影片等。 6.2 行为 6.2.2 行为面板 Dreamweaver CS4中，行为面板默认的位置位于“标签检查器”组合面板中，可以使用下面的方法打开行为面板。 ? 执行“窗口”→“行为”命令； ? 按〈Shift〉+〈F4〉组合键。 使用“行为”面板可以将行为附加到页面元素，并可以修改以前所附加行为的参数。已附加到当前所选页面元素的行为显示在行为列表中，并按事件以字母顺序列出。如果针对同一个事件列有多个动作，则会按在列表中出现的顺序执行这些动作；如果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元素。 6.2 行为 6.3.1 利用行为面板设置弹出窗口页面 弹出窗口页面是使用“打开浏览器窗口”行为实现的，是指在一个新的窗口中打开一个广告效果的页面，用户可以指定新窗口的大小、特性（是否可以调整大小、是否具有菜单栏等）和名称。 如果不设置该窗口的任何属性，在打开该窗口时它的大小和属性与打开它的窗口相同，指定窗口的任何属性都将自动关闭所有其它未明确设置的属性。例如，如果用户不设置窗口的任何属性，窗口将以1024像素×768像素的大小打开，并具有导航条、地址工具栏、状态栏和菜单栏。如果用户将窗口宽度设置为640像素、高度设置为480像素，但不设置其它属性，则该窗口将以640像素×480像素的大小打开，并且不显示工具栏。 6.3 页面对象行为 6.3.2 利用行为面板设置弹出信息框 “弹出信息”行为显示一个包含指定信息的JavaScript警告。因为JavaScript警告对话框只有一个“确定”按钮，所以使用此行为可以提供用户信息，但不能为用户提供选择操作。 设置弹出信息框的方法如下。 ① 选择页面对象，然后从“行为”面板的“添加行为”菜单中选择“弹出信息”，打开“弹出信息”对话框，如图6-7所示。 ② 在对话框的“消息”文本框中输入用户希望显示的消息。 ③ 单击“确定”按钮，此时在“行为”面板中会自动添加一个单击对象的onClick事件，如图6-8所示。 6.3 页面对象行为 6.3.3 案例一：制作曙光大学网站首页弹出窗口页面 【案例综述】制作伴随曙光大学网站首页打开而自动打开的广告窗口页面。 【案例展示】当曙光大学网站首页在浏览器中打开时，广告页面在宽度为400、高度为300的窗口中自动打开，实例效果如图所示。 6.3 页面对象行为 6.4.1 对象及相关概念 1．对象 （1）对象的概念 （2）对象的使用 2．对象的属性 3．对象的事件 4．对象的方法 6.4 基于对象的JavaScript脚本语言 6.4.2 DHTML对象模型简介 在DHTML模型中，最顶层的对象是Window对象，其他对象可以看做是Window对象的属性，如图6-15所示。其中，对于编程最重要的属性是Document对象。Document对象表示浏览器中当前HTML文档，通过该对象能够获得关于当前文档的信息，可以检测和修改当前HTML文档的元素，还可以响应事件。 6.4 基于对象的JavaScript脚本语言 Window Scr