第10章 使用AP元素和行为

1、 网页制作实例教程（第网页制作实例教程（第3版）版） 网页制作实例教程（第网页制作实例教程（第3版）版） AP元素是容器对象，HTML文件正文中的对象都能包含在AP元素中， 所以AP元素能用来实现页面布局。 AP元素的位置是可重叠的，设计者不仅能控制AP元素的前后位置， 也能控制AP元素的显示或隐藏。 AP元素在页面中的位置不受限制，可以用来给HTML页面元素分配 绝对位置，对应的HTML 标记是“div”。 网页制作不一定必须使用网页制作不一定必须使用APAP元素，但掌握了元素，但掌握了APAP元素的使用方法，元素的使用方法， 能够大大加强网页设计的灵活性，给网页添加意想不到的效果。能够大大

2、加强网页设计的灵活性，给网页添加意想不到的效果。 网页制作实例教程（第网页制作实例教程（第3版）版） 1 1用命令菜单用命令菜单 “插入”菜单“布局对 象”“AP Div”， 系 统在当前光标位置自 动插入一个默认大小 的AP元素。 网页制作实例教程（第网页制作实例教程（第3版）版） 2 2用功能面板用功能面板 打开“插入”面板的 “布局”选项组单击 “标准”按钮单击“绘 制AP Div”拖动鼠标在 “设计”视图画一块区域， 松开鼠标后网页中显示AP 元素的范围。 网页制作实例教程（第网页制作实例教程（第3版）版） 3 3插入嵌套的插入嵌套的APAP元素元素 光标置于AP元素中 单击“插入”面

3、板的“绘 制AP Div”图标 拖动 鼠标在AP元素内部画出一 块区域，松开鼠标后显示 嵌套的AP元素。 网页制作实例教程（第网页制作实例教程（第3版）版） “编辑”菜单“首选参数” “分类”列表选“AP元素”设置选项。 网页制作实例教程（第网页制作实例教程（第3版）版） 页面中插入AP元素以后，页面左上角会显示AP Div标识，嵌套的AP元素 左上角也会显示AP Div标识。按住Alt键单击标识会显示AP元素的名称。 如果标识没有显示，进行以下操作使标识显示出来。 （1）定义“首选参数”的“不可见元素” “编辑”菜单“首选参数”“分类”列表选“不可见元素”右边选 项列表中勾选“AP元素的锚点

4、”单击“确定”按钮。 （2）定义“可视化助理” “查看”菜单“可视化助理”使“不可见元素”前有对勾。 网页制作实例教程（第网页制作实例教程（第3版）版） 1 1，单个，单个APAP元素的属性面板元素的属性面板 2 2，多个，多个APAP元素的属性面板元素的属性面板 网页制作实例教程（第网页制作实例教程（第3版）版） “AP元素”面板显示当前网页所有AP元素 。 （1）勾选“防止重叠”，AP元素 互不重叠。 （2）“眼睛”列定义AP元素在 “设计”窗口是否可见。 （3）“ID”列定义AP元素名字， 双击名字后可以更换名字。 （4）“Z”列定义AP元素的显示 级别，数字大的显示在数字小的 元素上面

5、。这个数字是相对值。 网页制作实例教程（第网页制作实例教程（第3版）版） 1，选中AP元素 2，调整AP元素大小 3，移动AP元素 4，对齐多个AP元素 网页制作实例教程（第网页制作实例教程（第3版）版） “修改”菜单“转换”级联菜单中选择相应命令 。 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-1在网页中使用在网页中使用AP元素元素 网页制作实例教程（第网页制作实例教程（第3版）版） 1 1定义定义APAP元素位置元素位置 （1）position，取值有absolute（绝对定位）和relative（相对定位）。 （2）left，定义AP元素在页面左端的位置，单位是像素。

6、（3）top，定义AP元素在页面顶端的位置，单位是像素。 2 2定义定义APAP元素大小元素大小 （1）width，定义AP元素的宽度，单位是像素。 （2）height，定义AP元素的高度，单位是像素。 3 3定义定义APAP元素的显示层次元素的显示层次 z-index，值是相对值，z-index数值高的AP元素显示在z-index的数值 低的AP元素上层。 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-2定义定义AP元素位置的样式元素位置的样式 位置样式 网页制作实例教程（第网页制作实例教程（第3版）版） 我是黑猫！ 网页制作实例教程（第网页制作实例教程（第3版）版） 例例1

7、0-3定义定义AP元素是否显示元素是否显示 显示样式 不管白猫黑猫逮住老鼠就是好猫 网页制作实例教程（第网页制作实例教程（第3版）版） 猫1 猫2 我是黑猫 我也是黑猫 网页制作实例教程（第网页制作实例教程（第3版）版） 行为是“事件”和“动作”的结合。例如，当鼠标移动到网页的图片上时， 图片变小，此时，鼠标移动称为“事件”，图像变化称为“动作”。 事件是浏览器生成的消息，反映该页的访问者所执行的操作。例如：用鼠 标单击文字打开信息框，浏览器为该行为生成一个“onClick”事件。 动作是一组预先编写好的JavaScript代码，这些代码能完成特定任务。例 如：交换图像、打开浏览器窗口等。Dr

8、eamweaver CS4提供了很多动作，可以 在“行为”面板的“行为”菜单中中查看。 网页制作实例教程（第网页制作实例教程（第3版）版） “行为”面板提供行为，面板上方有6个按钮，从左到右依次为：显示当 前对象的行为、显示全部行为、添加行为、删除行为、向上移动行为、向下移 动行为。 网页制作实例教程（第网页制作实例教程（第3版）版） 在“行为”面板单击“添加行为”按钮，显示“行为”菜 单。 “效果”级联菜单 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-4打开网页弹出信息框打开网页弹出信息框 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-5打开浏览器窗口打开浏

9、览器窗口 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-6交换图像交换图像 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-7显示显示-隐藏隐藏AP元素元素 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-8动态地改变动态地改变AP元素的背景色元素的背景色 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-9使用使用AP元素效果元素效果 “增大增大/ /收缩收缩”效果效果 “遮帘遮帘”效果效果 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-10设置状态栏文本设置状态栏文本 网页制作实例教程（第网页制作实例教程（第3版）版）

10、 1 1JavaScriptJavaScript简介简介 JavaScript是一种基于对象和事件驱动、并具有安全性能的脚本语言， 用来编写功能模块，前面介绍的各种行为就是用JavaScript编写的。 嵌入到HTML文档的脚本要包括在标记和中，脚本 代码可以放在HTML文档的任何位置，但为了程序清晰方便阅读，通常将脚 本放在文档头部。 JavaScriptJavaScript脚本区分大小写。脚本区分大小写。 如果把和括起来的脚本放到HTML的注释标记之间，那么遇到不支持JavaScript语言的浏览器，脚本语句也不会 显示出来。 网页制作实例教程（第网页制作实例教程（第3版）版） 2 2编程

11、标记编程标记 是HTML的编程标记，与用来界定程序的 开始和结束，之间的部分是脚本代码和相关函数。 标记有2个重要属性： （1）languagelanguage属性，属性，定义脚本程序的类型，属性值可以是JavaScript或 VBScript。 （2）srcsrc属性，属性，指出脚本源程序的URL。单独的JavaScript源程序文件以 js为扩展名，用src属性链接。如果没有src属性，浏览器默认所有 JavaScript源代码都在与之间。 3 3嵌入式嵌入式JavaScriptJavaScript脚本脚本 位于与之间JavaScript脚本称为嵌入式JavaScript脚本。 网页制作实

12、例教程（第网页制作实例教程（第3版）版） 例例10-11 嵌入式嵌入式JavaScript脚本脚本 第1个JavaScript程序 document.write(编写第1个JavaScript程序) alert(欢迊使用JavaScript语言) 网页制作实例教程（第网页制作实例教程（第3版）版） 4 4外部外部JavaScriptJavaScript脚本脚本 建立以“js”为扩展名的脚本文件，存放在脚本文件中的JavaScript脚 本称为“外部JavaScript脚本”。 如果HTML文档中既调用了外部脚本，也使用嵌入式脚本，则由src属性指 定的脚本先被处理，然后再处理嵌入在HTML文档

13、中的脚本。 第1个JavaScript程序 document.write(编写第1个JavaScript程序) alert(欢迊使用JavaScript语言) 脚本文件脚本文件 网页文件网页文件 网页制作实例教程（第网页制作实例教程（第3版）版） 5 5用事件触发用事件触发JavaScriptJavaScript脚本脚本 如果把脚本放在函数中，就能用事件触发函数，从而执行脚本内容。 （1）函数 函数是能够完成某种功能的语句集合。函数由设计人员自己定义，可以 在程序中反复调用。 （2）定义函数的格式 function function 函数名（参数表）函数体函数名（参数表）函数体; return

14、 ; return 表达式表达式; ; （3）定义函数的说明 对函数的调用通过函数名实现，函数名区分大小写。 参数表是可选部分，如果多于一个参数，之间用逗号分隔。 函数体是脚本代码，用花括号括起来。 return语句用来返回函数值，如果函数无返回值，return语句省略。 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-13 10-13 用事件触发用事件触发JavaScriptJavaScript函数函数 第1个JavaScript程序 function abc() document.write(编写第1个JavaScript程序) alert(欢迊使用JavaScript语言)

15、 脚本文件脚本文件 网页文件网页文件 网页制作实例教程（第网页制作实例教程（第3版）版） 例例10-14 “10-14 “调用调用JavaScript”JavaScript”行为行为 网页制作实例教程（第网页制作实例教程（第3版）版） 使用菜单使用菜单使用面板使用面板 网页制作实例教程（第网页制作实例教程（第3版）版） 网页制作实例教程（第网页制作实例教程（第3版）版） today=new Date(); y=today.getFullYear(); m=today.getMonth()+1; d=today.getDate(); w=today.getDay(); document.writ

16、e(今天是：+y+年+m+月+d+号+); switch (w) case 1: document.write(星期一);break; case 2: document.write(星期二);break; case 3: document.write(星期三);break; case 4: document.write(星期四);break; case 5: document.write(星期五);break; case 6: document.write(星期六);break; case 0: document.write(星期日); 网页制作实例教程（第网页制作实例教程（第3版）版） 网页制作实例教程（第网页制作实例教程（第3版）版） 网页制作实例教程（第网页制作实例教程（第3版）版） 风景如画 function ShowDiv(Tdiv) document.all.aa.style.display=none; document.all.bb.style.display=none; document.all.cc.style.display=none; document.all.dd.style.display=none; Tdiv.style.display=; #aaposition:relative; width:500p