制作“文学作品”网页教程.docx

6.1【任务一】制作“文学作品”网页 6.1.1任务目标 AP Div是Dreamweaver中的一种页面元素，通过AP Div可对文档内容进行精确定位。AP Div中可以包含文本、图像、表单、对象插件等。在网页中经常会看见到一些动态的效果和交互功能，行为事件与AP Div的结合可以做出一些常用的动态效果，例如：显示/隐藏菜单、漂浮广告等，都可以通过对AP Div添加行为事件来做响应。 通过本次任务的完成，达到以下目标： 理解AP Div的用途 掌握AP Div的创建、AP Div的设置 熟练运用行为实现对AP Div的操纵 6.1.2任务内容 本次任务是要制作“文学作品”栏目网页，通过添加AP Div及“行为”来实现文章正文内容隐藏/显示的动态效果。 6.1.3任务实现 创建网页文件 应用小熊网站的子页模板创建“zuopin/wenxue.html”网页文件。 修改“zuopin/wenxue.html”网页文件的标题,设置栏目名称。 在正文标题下新建一个2行4列的表格，并表格的第2行的4个单元格合并一个单元格，在第一行的单元格分别插入文章的标题。 使用内部样式表设置第2行的单元格的高度以及背景图像，最终效果如图6.1.1所示。 图6.1.1 用样式表设置单元格背景 插入AP元素 AP Div可以嵌套，即将AP Div创建在另一个AP Div之中，作为其子集。这里创建一个名为layer_all的AP Div，它包含着其他四个AP Div元素，这四个AP Div元素中添加四篇文档的文本。 插入一个名为“layer_all”的AP Div元素 执行“插入 布局对象AP Div”命令，在CSS-P元素中修改为“Layer_all” 如图6.1.2所示。选中layer_all用鼠标调整其位置和大小。 图6.1.2设置layer_all AP元素的属性 插入“飘雨的季节”对应的AP Div元素：apDiv1，并单击眼睛图标，设置此元素的可见性设置为“hidden”，如图6.1.3所示。 图6.1.3添加了嵌套AP Div元素的“AP元素”面板 在apDiv1内插入“飘雨的季节”文章文本，如图6.1.4所示。 图6.1.4插入“飘雨的季节” apDiv1AP元素 当“Layer_all”AP元素包含了“apDiv1”后，“apDiv1”就相对与“Layer_all”定位了。 类似地用同样的方法继续插入“困惑的心情、羞涩的蓓蕾、蓝色的小屋”文章的AP元素“apDiv2、apDiv3、apDiv4”，如图6.1.5所示。向这三个元素中添加文章文本。 图6.1.5 插入多个AP Div 设置AP元素行为 显示“行为”面板：执行“窗口 行为”命令。 选择“飘雨的季节”标题文本，在行为面板选择行为选项，点击按钮添加行为，在下拉菜单中选择“显示-隐藏元素”，如图6.1.6所示。 图6.1.6 建立“显示-隐藏元素”行为 在弹出“显示-隐藏元素” 对话框中对 “元素”列表中的div “AP Div1”项设置“显示”，单击“显示”按钮后，点击“确定”按钮，如图6.1.7所示。 图6.1.7设置“显示-隐藏元素”的“显示”属性 点击“确定”后在标签面板的行为列表显示出已经添加的行为，将行为事件改为onMouseOver（当鼠标移动到某对象范围的上方时触发的事件），如图6.1.8所示。 图6.1.8 添加onMouseOver行为 类似地，设置鼠标离开标题时元素AP Div1“隐藏”。完成后，在行为列表中添加了 “onMouseOut”（当鼠标离开某对象范围时触发的事件），如图6.1.9所示。 图6.1.9 添加onMouseOut行为 上面的操作步骤已经完成了“飘雨的季节”文章的“显示-隐藏元素”的行为，用同样的制作方法，也分别对“困惑的心情、羞涩的蓓蕾、蓝色的小屋”等三篇文章设置“显示-隐藏元素”行为。 预览与调试“文学作品”栏目的网页文件。 6.1.4任务要点 AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，就是Div标签或其他任何标签。AP元素可以包含文本、图像或其他任何可以放置到HTML文档正文中的内容。 用户可以将AP元素放置到其他AP元素的前后，或隐藏某些AP元素而显示其他AP元素，以及在屏幕上移动AP元素。以实现页面布局和一些浮动的特效。 创建AP元素 1）插入AP元素：在“插入”工具栏“布局”选项中单击“绘制AP Div标签”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键，拖动出一个矩形，矩形的大小就是AP元素的大小，释放鼠标后AP元素就会出现在页面中，如图6.1.10所示。 6.1.10使用布局工具栏绘制AP元素 2）创建嵌套AP元素 创建嵌套AP元素就是在一个AP元素内插入另外的AP元素。