浅谈层与行为在网页设计中的应用研究

摘 要：网页设计是网站建设中的一个主体部分，要使设计的网页具有较高的灵活、生动性，掌握层和行为的概念、用法是必不可少的。重点叙述层结合行为、时间轴在制作网页动态效果的应用。

关键词：层 行为 时间轴

中图分类号：TP393 文献标识码：A 文章编号：1007-3973（2013）010-102-02

1 层的概念

层是网页中用来放置文本、图像、动画、表单、插件等网页元素的载体。层在网页编辑区中可以自由移动，改变层在网页中的位置，便可实现层中网页元素位置的改变。实际上，层的应用技术也是一种网页元素的定位技术，利用层能够精确对页面元素定位。

1.1 创建层的方法

（1）插入层：把光标置于网页制作软件Dreamweaver 的文档编辑窗口中想插入层的地方，然后选择菜单[插入][布局对象][层]命令。

（2）拖放层：把插入栏中的层按钮拖到文档编辑窗口中。

（3）创建多个层：单击[插入][布局对象][层]按钮，按下Ctrl 键的同时，在文档编辑窗口中画出一个层。只要不释放Ctrl 键，可以连续创建多个层。

1.2 层的应用介绍

在层中单击鼠标左键，将光标置于矩形框内，再单击插入元素的按钮，弹出选择元素对话框，选择要插入的元素，单击确认按钮确定。

2 行为

2.1 行为的概念

行为是将javascript代码放置在文档中，以允许访问者与web页实现人机对话，从而更改页面或引起某些任务的执行。行为是事件和由该事件触发的动作构成，事件是浏览器生成的消息，指示该页的访问者执行的操作。动作是Dreamweaver预先编写好执行特定任务的JavaScript代码组成。

2.2 给对象添加行为的方法

（1）在设计窗口中，选中对象，可以是层、图像、有链接的文本。

（2）单击“窗口/行为”面板中的按钮，在弹出的菜单栏中选择“显示-隐藏层”行为。

（3）在打开的设置对话框中，对参数进行设置。

（4）单击“确定“按钮，即可将增加的行为添加到行为列表中。

（5）单击“onClick”，在下拉列表框中选择行为的事件。

3 层和行为应用技巧实例

网页下拉菜单的制作有很多方法。根据网页类型的不同，有动态网页下拉菜单、静态网页下拉菜单。本文使用dreamweaver的层和行为面板制作下来菜单。

层和行为制作下拉菜单时，利用网页制作中的javascript脚本中的 onmouseover和onmouseout事件来触发层的显示和隐藏，从而实现下拉子菜单的隐藏和显示。具体操作步骤如下：

首先，利用HTML语言中的表格标签制作主菜单。其次，对各主菜单利用层、表格作下拉菜单，实现下拉菜单纵向排列。最后，实现下拉菜单的显示、主菜单项及子菜单项的超链接的各项属性配置。

按照上述步骤。层和行为方式制作下拉菜单的实现代码步骤如下：

（1）利用HTML代码中的表格标签实现网页的主菜单。核心源代码如下：

首页