网页设计中层和行为的应用案例分析
摘要：本文通过介绍层和行为的概念、表格和层的区别、创建层的方法、表格和层的转换、拖动层行为的设置等内容，讲述了层和行为的一些应用在网页中制作一个简单的拼图游戏。
关键词：网页制作层行为  拼图游戏
dreamweaver 的最大特点是可视化地提供了组件、行为、样式表、时间线，用户不需亲自动手编程，就能快速地得到令其它软件所无法比及的效果。
1、层的概念
图层是网页的一个区域，在一个网页中可以有多个图层存在，它最大的魅力在于各个图层可以重叠，并且可以决定每个图层是否可见，同时也能够自定义各图层之间的层次关系。在熟练掌握了图层技术之后，就可以给网页提供强大的页面控制能力。
通过 dreamweaver，可以使用层来设计页面的布局，可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层，可以在一个层中放置背景图像，然后在该层的前面放置第二个层，它包含带有透明背景的文本。
2、表格和层的区别
大家都知道表格和层都是用于网页设计布局工具，那它们之间又有怎样的区别呢？表格和层不同点是表格不能重叠，层可以重叠；表格不能随意移动、位置固定不可以精确定位，层可放置在任意位置。
3、行为
行为是被用来动态响应用户操作、改变当前页面效果或是执行特定任务的一种方法。一个行为是由一个事件（event）和一个动作（action）构成的。例如，当用户把鼠标移动至一张图片上时（这被称为一个事件）的时候，这个图片会发生预定义好的变化（这被称为是动作）。事实上行为是由预先书写好的javascript代码构成的，使用它可以完成诸如打开新浏览窗口、播放背景音乐、控制shockwave文件的播放等任务。事件是为大多数浏览器理解的通用代码，例如，onmouseover，onmouseout和onclick都是用户在浏览器中对浏览页面的操作，而浏览器通过一定的释译执行来响应用户的动作。举个例子，当把鼠标移动至一个链接上时，浏览器获取了一个onmouseover事件，并通过调用事先已经写好的与此事件关联的javascript语言来响应这个动作。
4、利用层和行为制作拼图游戏
在浏览网页时，经常发现网页上的某些图片（或文字）可以用鼠标随意拖动，特别是一些拼图类简单游戏，更增添了网页无穷乐趣。下面就用dreamweaver来制作一个简单的拼图游戏，相信你跟着做完后，会发出这样的感叹：制作是如此简单啊。
4.1 准备阶段
准备图片若干张（能拼成一张大图），如没有可用fireworks进行切片操作，操作步骤如下：（1）启动fireworks软件，打开一张图片，选“切片”工具，并切为九块（如图1所示）。（2）执行菜单“文件”→“导出”命令，在对话框中确认“保存类型”为“html和图像”，勾选“将图像放入子文件夹”，文件名为index.htm，并选择保存在自己建立的文件夹中。（3）将index.htm文件在原位置复制、粘贴一份，并改名为index1.htm
4.2 制作阶段
（1）在dreamweaver中打开网页文件index.htmt和index1.htm。（2）在index.htm文件中，执行“修改”→“转换”→“表格到层”项，在弹出“转换表格为层”的对话框。注意勾选其中的“防止
层重叠”和“显示层面板”，不要勾选另两项（如图2所示）。在弹出的“层”面板中可见到九个单元格各自成了九个层，层名分别是layer1-layer9。（3）在index.htm文件中，将这九个层都移动到视图的右边，在左边为拼图游戏加些说明文字。（4）在index1.htm文件中，删除各单元格中的图像，使之成为一个空表格。（5）在index1.htm文件中，为各单元格中添加不同的背景，以各颜块区分各单元格。（6）在index1.htm文件中，选定整个表格后复制。（7）在index.htm文件中，选定插入光标点后进行粘贴，则表格已复制到了index.htm网页中了。（8）将各层移到表格中相应的单元格上，拼成原来图片。（9）点击层layer1，选中其中的图像，在属性面板上的链接文本框中输入“#”，表示链接到本页。再点击“行为”面板上的“+”按钮，在相应的下拉菜单中执行“拖动层”命令（注意要选择body标签才能使用），弹出“拖动层”对话框。（10）在“拖动层”对话框中，在 “层”下拉列表中选择“层layer1”，“移动”为“不限制”，并点击“取得目前位置”按钮，取得layer1的目标位置“左”为11，“上”为163，默认的“靠齐距离”为50px，点击“确定”按钮。“拖动层”对话框的“基本”标签中各项具体含义是：层：可以是下拉列表中选择要拖动的层。移动：可选择“不限制”或“限制”。“不限制”指可以在任何地方移动，常用拼图或拖放游戏；“限制”则是可限制移动范围。放下目标：左和上确定了拖动层的目标点。点击“取得目前位置”按钮，可以获得当前点的位置。靠齐距离：是
确定拖动层放目标点多近才算是到目标点，这里像素越大，就越容易放到位。（11）将“行为”面板上的“onload”改为“onmouseover”。（12）依次将layer2、layer3……中的图形，重复第9～11步骤，要注意的是，各层的图像只拖动各自的层。（13）全部设置好后，将各层从目标位置任意移开。（14）保存网页，按f12键启动浏览器浏览测试。
5、结语
拼图游戏仅仅是网页设计与制作中的层和行为应用的一个简单应用，还有更多的功能和应用等着进一步去开发，让网页设计得更精彩吧！网页设计与制作代码案例

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