浅谈APDiv层与行为的应用
摘要 apdiv层在网页设计中是非常灵活，能用于对网页元素的定位；特别是与行为的结合使用，能制作出很多动力效果。本文将介绍apdiv层与行为结合使用的三个实例，分别为：滚动新闻制作、下拉菜单制作、图片切换。这三种效果用在网页中制作的使用频率非常高，所以学会这几种效果的制作也是非常必要的。
关键词 ap div层 行为 子层
apdiv层在网页设计中是非常灵活，能用于对网页元素的定位；特别是与行为的结合使用，能制作出很多动力效果。本文将介绍apdiv层与行为结合使用的三个实例，分别为：滚动新闻制作、下拉菜单制作、图片切换。
实例一：滚动新闻主要在页面中显示4条新闻，并滚动显示，当鼠标移上去时，停止滚动，鼠标离开新闻继续滚动。鼠标单击相应链接跳转到相应的新闻页面。操作步骤如下：
（1）制作层：插入层layer1，设置层layer1属性，宽为：200px，高为：100px。
（2）插入子层：在层layer1中插入子层layer2，设置layer2的属性，宽为：200px，高为：200px.。
（3）插入表格：选中子层，在子层layer2中插入表格（8行，1列，宽为200px），设置每个单元格的高度为：25px，背景为白。
（4）表格中添加内容。分别为：计算机教学部、汽车教学部、经贸教学部、机电教学部、计算机教学部、汽车教学部、经贸教学部、机电教学部。再添加相应的链接。
（5）将子层添加到时间轴：选中子层layer2，右击，选择“添加到时间轴”，将最后一帧移动到第100帧。设置子层layer2位置，左为：0px，上为：-100px（使子层layer2向上移动与父层高度相等的距离：100px）。时间轴上选择自动播放和循环属性。
（6）隐藏溢出区域：选择父层layer1，在属性面板中，溢出选项中选择：hidden。
（7）添加行为：选中子层layer2，在行为面板中单击“”添加行为。选择时间轴，再选择“停止时间轴”，选择相应时间轴，这里选timeline1。事件选择：onmouseover。用相同方法设置当鼠标离开（onmouseout）播放时间轴。
html下拉菜单的制作方法
（8）预览，效果如下图所示：
实例二：下拉菜单制作，当鼠标移动到相应的父菜单时，显示子菜单。离开子菜单时隐藏子菜单。单击子菜单的相应链接跳转到相应的页面。操作步骤如下：
（1）制作导航：在网页中插入表格（2行6列，宽：720px），设置表格属性（背景、单元格宽度：120px）。设置第二行的单元格对齐方式（水平：默认，垂直：顶端）。
（2）插入层：在相应的菜单下面插入层layer1。宽度为父菜单的宽度（720px/6=120px），高度（行数*行高：4*25px=100px）。
（3）插入表格及内容：选中层layer1，在层中插入表格（4行1列，宽度为：120px）。设置单元格的高度为：25px。表格背景为：白。设置对齐方式，输入内容。
（4）添加行为：选择父菜单所在单元格，在行为面板中选择“显示/隐藏”，选择子菜单所在层，选择“显示”，设置事件为：onmouseover。选择父菜单所在单元格，在行为面板中选择“显示/隐藏”选择子菜单所在层，选择“隐藏”。设置事件为：onmouseout。然后对子层进行相同的设置，设置层layer1的可见性为hidden。
（5）预览效果如下图所示：
实例三：
（1）插入4行2列的表格，将第二行合并。设置表格属性。在第一行的中制作图片交换。
（2）在第二行单元格中插入三个层：layer1，layer2，layer3。并分别在三个层中插入图片。并设置插入图片的大小（600px?？00px）。设置layer2，layer3可见性为：hidden。
（3）选中第一行第一个单元格，单击添加行为按钮“”，选择显示—隐藏层。在对话框中选择layer1层，单击按钮，在行为中选择“onmouseover”。再单击添加行为按钮“”，选择显示—隐藏层。在对话框中选择layer1层，单击按钮，在行为中选择“onmouseout”。
（4）按照步骤（3）完成第一行第二个单元格、第三个单元格的显示隐藏层制作。对应的为：第二个单元格显示layer2，第三个单元格显示layer3。效果如下图所示。
（作者单位：河源理工学校）
参考文献：
[1]丛书编委会.网页设计与制作——dreamweavercs3+fireworkscs3中文版[m].清华大学出版社，2009.
[2]温谦编著.html+css网页设计与布局从入门到精通[m].人民邮电出版社，2008.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。