论文部分内容阅读
摘要 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）播放时间轴。
（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.
关键词 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）播放时间轴。
（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.