制作"文学作品"网页

6.1【任务一】制作“文学作品”网页

6.1.1任务目标

AP Div是Dreamweaver 中的一种页面元素，通过AP Div可对文档内容进行精确定位。AP Div中可以包含文本、图像、表单、对象插件等。在网页中经常会看见到一些动态的效果和交互功能，行为事件与AP Div 的结合可以做出一些常用的动态效果，例如：显示/隐藏菜单、漂浮广告等，都可以通过对AP Div添加行为事件来做响应。

通过本次任务的完成，达到以下目标：

1. 理解AP Div的用途

2. 掌握AP Div的创建、AP Div的设置

3. 熟练运用行为实现对AP Div的操纵

6.1.2任务内容

本次任务是要制作“文学作品”栏目网页，通过添加AP Div及“行为”来实现文章正文内容隐藏/显示的动态效果。

6.1.3任务实现

1. 创建网页文件

(1) 应用小熊网站的子页模板创建“zuopin/wenxue.html”网页文件。

(2) 修改“zuopin/wenxue.html”网页文件的标题, 设置栏目名称。

(3) 在正文标题下新建一个2行4列的表格，并表格的第2行的4个单元格合并一个单元格，在第一行的单元格分别插入文章的标题。

(4) 使用内部样式表设置第2行的单元格的高度以及背景图像，最终效果如图6.1.1所示。

图6.1.1 用样式表设置单元格背景

2. 插入AP 元素

AP Div可以嵌套，即将AP Div创建在另一个AP Div之中，作为其子集。这里创建一个名为layer_all的AP Div，它包含着其他四个AP Div元素，这四个AP Div元素中添加四篇文档的文本。

(1) 插入一个名为“layer_all”的AP Div元素

执行“插入> 布局对象>AP Div”命令，在CSS-P 元素中修改为“Layer_all”如图

6.1.2所示。选中layer_all用鼠标调整其位置和大小。

图6.1.2设置layer_allAP元素的属性

(2) 插入“飘雨的季节”对应的AP Div元素：apDiv1，并单击眼睛图标，设置此元素的可见性设置为“hidden ”，如图6.1.3所示。

图6.1.3添加了嵌套AP Div元素的“AP 元素”面板

(3) 在apDiv1内插入“飘雨的季节”文章文本，如图6.1.4所示。

图6.1.4插入“飘雨的季节”apDiv1AP 元素

当“Layer_all”AP 元素包含了“apDiv1”后，“apDiv1”就相对与“Layer_all”定位了。

(4) 类似地用同样的方法继续插入“困惑的心情、羞涩的蓓蕾、蓝色的小屋”文章的AP 元素“apDiv 2、apDiv 3、apDiv 4”，如图6.1.5所示。向这三个元素中添加文章文本。

图6.1.5 插入多个AP Div

3. 设置AP 元素行为

(1) 显示“行为”面板：执行“窗口>行为”命令。

(2) 选择“飘雨的季节”标题文本，在行为面板选择行为选项，点击

在下拉菜单中选择“显示-隐藏元素”，如图6.1.6所示。 按钮添加行为，

图6.1.6 建立“显示-隐藏元素”行为

(3) 在弹出“显示-隐藏元素” 对话框中对 “元素”列表中的div “AP Div1”项设置“显示”，单击“显示”按钮后，点击“确定”按钮，如图6.1.7所示。

图6.1.7设置“显示-隐藏元素”的“显示”属性

(4)

点击“确定”后在标签面板的行为列表显示出已经添加的行为，将行为事件改为

onMouseOver （当鼠标移动到某对象范围的上方时触发的事件），如图6.1.8所示。

图6.1.8 添加onMouseOver 行为

(5) 类似地，设置鼠标离开标题时元素AP Div1“隐藏”。完成后，在行为列表中添加了“onMouseOut ”（当鼠标离开某对象范围时触发的事件），如图6.1.9所示。

图6.1.9 添加onMouseOut 行为

(6) 上面的操作步骤已经完成了“飘雨的季节”文章的“显示-隐藏元素”的行为，用同样的制作方法，也分别对“困惑的心情、羞涩的蓓蕾、蓝色的小屋”等三篇文章设置“显示-隐藏元素”行为。

4. 预览与调试“文学作品”栏目的网页文件。

6.1.4任务要点

AP 元素（绝对定位元素）是分配有绝对位置的HTML 页面元素，就是Div 标签或其他任何标签。AP 元素可以包含文本、图像或其他任何可以放置到HTML 文档正文中的内容。

用户可以将AP 元素放置到其他AP 元素的前后，或隐藏某些AP 元素而显示其他AP 元素，以及在屏幕上移动AP 元素。以实现页面布局和一些浮动的特效。

1. 创建AP 元素

1）插入AP 元素：在“插入”工具栏“布局”选项中单击“绘制AP Div 标签”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是AP 元素的大小，释放鼠标后AP 元素就会出现在页面中，如图6.1.10所示。

6.1.10使用布局工具栏绘制AP 元素

2）创建嵌套AP 元素

创建嵌套AP 元素就是在一个AP 元素内插入另外的AP 元素。

方法一：将光标放入某AP 元素内，选择菜单栏“插入>布局对象>AP元素”命令，即可在改AP 元素内插入一个AP 元素，如图6.1.11所示。

图6.1.11 插入嵌套AP 元素

3）AP 元素属性设置

选中要设置的AP 元素，就可以在属性面板中设置AP 元素的属性了，如图6.1.12所示。

图6.1.12 AP元素属性设置面板

◆ CSS-P 元素：给AP 元素命名，以便在“元素”面板和JavaScript 代码中标识该AP 元素。

◆ 左、上：指定AP 元素的左上角相对于页面（如果嵌套，则为父AP 元素）左上角的位置。

◆ 宽、高：指定AP 元素的宽度和高度。如果AP 元素的内容超过指定大小，AP 元素的底边缘（按照在Dreamweaver 设计视图中的显示）会延伸以容纳这些内容。（如果“溢出”属性没有设置为“可见”，那么当AP 元素在浏览器中出现时，底边缘将不会延伸。

◆ Z 轴：设置AP 元素的AP 元素次属性。在浏览器中，编号较大的AP 元素出现在编号较小的AP 元素的前面。值可以为正，也可以为负。当更改AP 元素的堆叠顺序时，使用“AP 元素”面板要比输入特定的 z 轴值更为简便。

◆ 可见性：在“可见性”下拉列表中，设置AP 元素的可见性。使用脚本语言如JavaScrip 可以控制AP 元素的动态显示和隐藏。有四个选项：

✓ Default ——选择该选项，则不指明AP 元素的可见性。

✓ Inherit ——选择该选项，可以继承父AP 元素的可见性。

✓ Visible ——选择该选项，可以显示AP 元素及其包含的内容，无论其父级AP 元素是否可见。

✓ Hidden ——选择该选项，可以隐藏AP 元素及其包含的内容，无论其父级AP 元素是否可见。

◆ 背景颜色：用来设置AP 元素的背景颜色。

◆ 背景图像——用来设置AP 元素的背景图像。

◆ 溢出——选择当AP 元素内容超过AP 元素的大小时的处理方式。有四个选项：

✓ Visible （显示）：选择该选项，当AP 元素内容超出AP 元素的范围时，可自动增加AP 元素尺寸。

✓ hidden （隐藏）: 选择该选项，当AP 元素内容超出AP 元素的范围时，保持AP 元素尺寸不变，隐藏超出部分的内容。

✓ scroll （滚动条）: 选择该选项，则AP 元素内容无论是否超出AP 元素的范围，都会自动增加滚动条。

✓ auto （自动）: 选择该选项，当AP 元素内容超出AP 元素的范围时，自动增加滚动条（默认）

◆ 剪辑：设置AP 元素的可视区域。通过上、下、左、右文本框设置可视区域与AP 元素边界的像素值。AP 元素经过“剪辑”后，只有指定的矩形区域才是可见的。 ◆ 类：在类的下拉列表中，可以选择已经设置好的CSS 样式或新建CSS 样式。

注意：位置和大小的默认单位为像素 (px)。也可以指定以下单位：pc (pica)、pt （点）、in （英寸）、mm （毫米）、cm （厘米）或 %（父AP 元素相应值的百分比）。单位的缩写必须紧接在其值的后面。中间不能有空格。

使用AP 元素制作特效我们在创建网页的时候，可以发现AP 元素可以在网页上随意改变位置，在设定AP 元素的属性的时，可以知道AP 元素有显示隐藏的功能，通过这两个特点可以实现很多令人激动的网页动态效果。

2. AP 元素面板应用

“AP 元素面板”是文档中AP 元素的可见视图，可以控制文档中的所有AP 元素。单击“窗口>AP元素”命令（或按F2键），可以打开AP 元素面板，如图6.1.13所示。

在AP 元素面板中，AP 元素按照堆栈的方式管理文档窗口中的所有AP 元素。先创建的AP 元素名称显示在堆栈的最底部，最后建立的AP 元素名称显示在堆栈的顶部。每个AP 元素的名称右边的Z 轴的值表示这个AP 元素的叠放次序。如果要重命名AP 元素，可以双击AP 元素名称。

单击显示/隐藏所有AP Div

闭眼：此AP Div隐藏

无眼睛：由浏览器默认决定

开眼：此AP Div显示

图6.1.13AP 元素面板

通过AP 元素面板可以方便地完成选取AP 元素，设置AP 元素的叠放，改变AP 元素的可见性，防止AP 元素重叠，嵌套AP 元素等操作。

除此之外，单击AP 元素面板上的眼睛图标，如图6.1.13所示，单击某个眼睛图标改变相应AP 元素的可见性，单击“名称”左边列表项的眼睛，可以一次更改所有AP 元素的可见性属性。

3. 行为的应用

Dreamweaver 的“行为”机制可以实现丰富的动态页面效果，实现人与页面的简单交互。行为是事件与动作的彼此结合。例如，当鼠标移动到网页的图像上方时，图像高亮显示，此时的鼠标移动称为时间，图像的变化称为动作，一般的行为都是要有事件来激活动作。动作时由预先写好的能够执行某种任务的JavaScript 代码组成，而事件是由浏览器前用户的操作相关，如单击鼠标、鼠标上滚等。

(1) 了解行为

“行为”可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像) ，就导致发生了一个动作。与行为相关的有三个重要的部分——对象、事件和动作。

✧ 对象(Object)

对象是产生行为的主体，很多网页元素都可以成为对象，如图像、文字、多媒体文件等，甚至是整个页面。

✧ 事件(Event)

事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML 标记中。一个事件总是针对页面元素或标记而言的，例如：将鼠标移到图像上、把鼠标放在图像之外、单击鼠标，是与鼠标有关的三个最常见的事件(onMouseOver、onMouseOut 、onClick) 。不同的浏览器支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。

✧ 动作(Action)

行为通过动作来完成动态效果，如：图像翻转、打开浏览器、播放声音都是动作。动作通常是一段JaveScript 代码，在Dreamweaver 中使用Dreamweaver 内置的行为往页面中添加JaveScript 代码，就不必自己编写。

✧ 事件与动作

将事件和动作组合起来就构成了行为，例如，将onClick 行为事件与一段JaveScript 代码相关联，单击鼠标时就可以执行相应的JaveScript 代码(动作) 。一个事件可以同多个动作相关联(1：n) ，即发生事件时可以执行多个动作。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。

(2) 应用行为

1）行为面板

在Dreamwaever 中，对行为的添加和控制主要通过“行为”面板来实现。选择“窗口>行为”命令，打开行为面板，如图6.1.14所示。

图6.1.14 行为轴面板

在行为面板上可以进行如下操作：

单击“+”按钮，打开动作菜单，添加行为；单击“-”按钮，删除行为。

添加行为时，从动作菜单中选择一个行为项。

单击事件列右方的三角，打开事件菜单，可以选择事件。

单击" 向上" 箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。

2）创建行为

一般创建行为有三个步骤：选择对象、添加动作、调整事件。

我们通过一个“打开浏览器窗口”实例说明如何创建行为。我们需要的效果是，在网页上单击一幅小图像，打开一个新窗口显示放大的图像。

① 打开“xinde/xingwei.html”网页文件，选中“打开浏览器窗口”。

② 单击行为面板上的“+”按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的对话框中设置参数。

③ 在“要显示的URL”文本框中，单击“浏览按钮”选择在新窗口中载入的目标的URL 地址(可以是网页也可以是图像) 。

④ 窗口宽度设为400px ，窗口高度设为300px 。

⑤ 窗口名称为“放大图像”。

⑥ 当我们添加行为时，系统自动为我们选择了事件onClick(单击鼠标) ，现在，我们单击行为面板上的事件菜单按钮，打开事件菜单，重新选择一个触发行为的事件。把onClick(单击鼠标) 的事件改为onMouseOver(鼠标滑过) ，如图6.1.15所示：

图6.1.15 添加行为事件

⑦ 按F12键预览打开新窗口的效果。

3）行为的应用

利用播放声音的动作，可以在网页中播放声音文件，如背景音乐，或单击某个按钮(文字或图像) 播放一段声音。

添加背景音乐

① 打开“xinde/xingwei.htm”网页文件，，单击编辑窗口状态栏上的标记，选中整个网页。

② 打开行为面板，单击按钮，在菜单中选择“播放声音”。

③ 在弹出的菜单中输入音乐文件的路径，单击“确定”。

④ 把事件调整为onLoad(载入页面后) 。

给图像添加声音，方法同上。

设置状态行文本

浏览器下端的状态行通常显示当前状态的提示信息，利用“设置状态栏文本”行为，可以重新设置状态行信息。

① 选中要附加行为的对象，如网页的标记，或一个链接。

② 单击行为面板上的按钮，在打开的动作菜单。

③ 选择“设置文本>设置状态文本”命令，在打开的“信息”对话框中输入需要的文本。

④ 按F12键，可以看到打开网页后，浏览器下端的状态行上有了新输入的信息。 交换图像

① 打开“xinde/xingwei.htm”网页文件, 在网页中插入“bt1.jpg ”图像文件，如图

6.1.26所示。

② 选择“bt1.jpg ”图像文件，单击行为面板上的

“交换图像”，如图6.1.16所示。 按钮，在打开的动作菜单，选择

图6.1.16 设置“交换图像”行为

③ 在打开“交换图像”窗口中选择要替换的图像“bt2.jpg ”，如图6.1.17所示。

图6.1.17 选择“交换图像”文件

④ 保存文件，按F12浏览效果。