图层在网页设计中的应用

1元素的定位

在网页设计中，用来定位页面元素技术一般包括：表格和图层。其中表格在网页的整体布局中使用应该是最广泛的，尤其是布局表格和布局单元格应用，使页面布局更方便。但如果在页面元素上面放置对象时，表格就不能胜任了，这时需要用图层来排版。网页设计初学者往往喜欢用图层来进行页面定位，层的定位方便且随意。层的定位是由绝对坐标值实现定位的，而表格的定位是由相对坐标值实现的。层设计的网页在不同分辨率显示器上显示时会出现错位现象，不能准确定位，很难进行调整。如果在网页元素中非要采用图层定位，通过网页中层的相对定位技术或者将排好的层转换为表格(Modify/LayoutMode/ConventLayerstoTable)。

2图层在制作网页动态效果中的应用

A、时间轴与图层结合制作漂浮广告

时间轴是由许多帧构成的，这些帧在页面中的连续播放就构成了时间轴动画。时间轴使用动态HTML通过帧的变化来改变层的位置、大小、叠放顺序和可见性等属性来创建动画。使用层中的内容在一定的时间内，按照设计好的路线显示在页面中。由于时间轴实现网页动画时没有用到ActiveX、任何插件或Java Applent。必须在IE4.0或更高版本的浏览器中浏览。下面介绍漂浮广告制作步骤：

在页面中绘制图层：在“插入栏”中单击布局选项卡中“绘制层”按钮，在页面中拖拽一个图层；
在图层中插入一个图片。把光标定位在图层中插入图片或动画，然后调整图层大小或调整图片大小：
记录层路径。选中层，把层的起点位置确定好，在选中的层上(不是图片)单击鼠标右键，弹出菜单中选择“记录路径”，然后拖动图层，如图2所示。
设置时间轴参数：Fps设为15，选中“自动播放”和“循环”复选框，如要调节播放速度，可调整Fps的值；
按F12浏览网页

B、行为与图层结合应用动态导航条菜单

行为是事件和由该事件触发的动作的组成。事件是由浏览器定义的，浏览器响应用户的某些操作而成为事件。一般事件总是面向页面元素或标记的。如浏览者用鼠标单击一个按钮时，浏览器就会生成一个Onclick事件。动作由一段写好的JavaScript代码所组成，该代码能执行各种特殊任务，如播放声音、显示与隐藏图层等。动态导航条菜单可以节省页面空间，使页面显得比较干净。下面介绍层结合行为制作动态导航菜单的步骤。

在页面插入一个1行3列的表格，设置表格属性宽度为80％，对齐为居中对齐，填充为0，间距为0；
绘制层，在“专业介绍”下面绘制一个层，在层中插入一个“6行1列”的表格，在表格中输入文本，如果暂无链接，也可不设置；
其他导航条的图片下方绘制层，并插入表格和输入文本；操作步骤与第(2)步相同；
添加行为，选中“专业介绍”图片，打开“行为”面板，在“行为”面板中单击“+”按钮，在弹出的下拉菜单中选择“显示一隐藏层”选项，把层Layerl设置“显示”，其他层设置为“隐藏”；
选择事件，把动作为“显示一隐藏层”，事件改为“OnMouseOver”，同时为其他的图层设置相同的行为和选择事件；
设置图层起始状态为“隐藏”，在层面板中通过单击“眼睛”图标，使各个层关闭；
按F12键浏览效果，保存页面，在IE中浏览效果，当单击相应的文本内容后。会弹出下拉菜单，如果在下拉菜单中设置了链接，单击相应超级链接到相应的页面。

做好的下拉菜单有个缺陷：当下拉菜单在单击出现后，不会消失。在实际应用中希望动态下拉菜单的功能：当鼠标移动到导航条上时出现下拉菜单，鼠标移开时则下拉菜单消失。为了进一步完善下拉菜单的功能，依次选中各个图层，分别对每个图层添加两个行为。一个是OnMouseOver行为，设置动作为“显示一隐藏层”，设置选中的层为“显示”，其他层为“隐藏”；另一个是OnMouseOut事件，同样设置动作为“显示一隐藏层”，设置选中的层为“隐藏”，其他层为“显示”。

3结束语

为了使网站吸引更多浏览者，网页元素紧紧停留在平面二维是不够的，可以进一步发挥图层在空间设置上优越性，再配合行为和时间线两者结合应用，制作出更多三维网页效果，如放大图片，交替显示图片广告等。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/89.html