collapse">
此时，在设计视图中仍显示为粗线边框，但预览可看到细线表格。
6.1.5立体表格特效
通过设置表格标签Table的两个属性borderColorDark（边框暗影）、borderColorLight（边框亮影），并加上适当背景bgcolor，就可以制作出三维立体表格表格。
效果1：
（1）插入表格，设置边框为5，间距为0。
（2）打开代码视图，修改Table标签，增加borderColorLight、boderColorDark、bgcolor三个颜色值，参考如下：
预览，效果如图6-6所示：
图6-6立体表格效果一
（3）将代码改为：
预览，效果如图6-7所示。
图6-7立体表格效果二
6.1.6圆角表格
在Dreamweaver8中并无直接的圆角表格，但在网页设计中，设计者常常喜欢用一些圆角表格以获得布局表现上的特别感觉。
如何获得圆角表格效果，常用的方法是使用圆角的图形来实现。
（1）使用Photoshop等软件，制作如图6-8所示的四个圆角图形。
图6-8
（2）插入3行3列表格，并设边框、边距、间距均为0。
（3）在表格四个角的单元格，分别插入1.gif、2.gif、3.gif、4.gif，并调整单元格的大小与圆角图表一致，如图6-9。
图6-9
（4）第1行第2列、第3行第2列，均使用与圆角图形相同的颜色进行填充。
（5）合并第2行的三个单元格。
插入一个1行1列的内嵌表格，设置边框为1，表格线颜色与圆角相同，并调整宽度为100%，高度与外表格相同。
即可得到如图6-10所示的圆角表格。
图6-10圆角表格效果
6.1.7本节小结
在网页上插入表格，通过设置属性，可以达到编辑表格的目的。
通过在代码中更进一步的设置表格的属性，可以增强表格的效果。
6.2层
“层”可以比作一张透明的纸，网页的元素可以画在这张纸上，当将多张这样的纸重叠在一起，上层有元素的地方，就会遮住下层，下层的元素可以透过上层透明的地方显示出来。
层的上下顺序通过设置“Z”轴的数值来设定，数值大的在上层，数值小的在下层。
6.2.1插入层
插入层，可使用布局工具栏的【绘制层】工具，在编辑的页面“画”出一个层，也可以使用菜单【插入】|【布局对象】|【层】。
图6-11使用布局工具“绘制层”
如果要连续绘制多个层，只需按住Ctrl键，就可以使用“绘制层”工具，“画”出多个层，这在使用层进行布局时是十分有用的。
6.2.2层面板
执行菜单【窗口】|【层】，显示出层面板，如图6-12所示。
图6-12层面板
左边（小眼睛）为控制层的显示/隐藏，缺省为显示。
“张开眼睛”图标为显示，“合上眼睛”为隐藏。
单击左列可控制眼睛的开合，达到控制层的显示/隐藏的目的。
名称Layer1、Layer2……为层的名称，右边显示的是层的Z层数值。
通过数值的调整可控制层重叠的顺序。
如图6-13所示。
图6-13层的Z轴数值对重叠顺序的影响
6.2.3嵌套层
层与层之间可以嵌套，被嵌套层称为子层，嵌套层称为父层。
当父层移动时，子层随之移动，反之，子层的移动不影响父层的位置。
（1）插入嵌套层
当光标位于层里面时，执行菜单【插入】|【布局对象】|【层】，则插入的新局成为嵌套层。
在层面板中可看到以下嵌套关系，如图6-14所示。
图6-14在层面板中的嵌套关系
（2）撤消嵌套关系
在层面板中，将子层拖出，即可撤消嵌套关系。
嵌套层的子层随父层的位置改变，在对象定位方面有一定的用处，但建议尽量少用，因为有些浏览器（如Netscape）不支持嵌套层。
6.2.4层的属性设置
在属性面板中，可以直接设置层的一般层性，如层编号（名称）、背景、可见性、溢出、剪辑等，如图6-12所示。
图6-15面属性面板
（1）溢出：
溢出选项共有4个。
当层内部的内容过多时，进行设置。
Visuble:
：
使超出部分显示。
Hidden：
将超出部分隐藏。
Scroll：
无论是否超出，均显示滚动条
Auto：
自动，当超出时，显示滚动条。
见图6-16所示。
图6-16当图象超出层的大小时，显示滚动条
（2）剪辑
当层内的对象（如图片）尺寸大于层的大小时，使用剪辑设置其显示的区域。
6.2.5层与表格的转换
层与表格是可以相互转换的，通过执行菜单【修改】|【转换】，可以选择【层到表格】也可以选择【表格到层】，可以实现表格与层的相互转换。
但层转为表格时，必须清楚不存在有重叠、嵌套，否则转换将无法进行。
6.2.6本节小结
本节简单介绍插入层及设置层的属性。
6.3行为
首先我们对行为做一个简单的了解，一个行为是由一个事件触发一个动作组成的，因此行为由两个基本元素构成：
事件和动作。
举一个例子：
事件是访问者对网页的某个对象所做的事情，比如把鼠标移动到一个链接上，这就生一个鼠标经过的事件，这个事件触发浏览器去执行一段JavaSceipt代码，这就是动作，然后产生了JavaScript设计的效果，可能是显示信息，包可能是打开窗口等，这就是行为。
6.3.1行为面板
执行菜单【窗口】|【行为】或使用Shift+F4可以打开行为面板，如图6-17所示。
图6-17行为面板
（1）窗口上方显示行为面板对象操作按钮，包括：
显示设置事件；仅显示所设计的事件。
显示所有事件：
显示浏览器支持的所有事件
添加行为：
添加一个行为
删除行为：
删除选定的行为
上移行为/下移行为：
调整行为触发的顺序
（2）面板左边显示页面对象可用的动作，根据所选触发动作的源对象，可以包括不同的动作，如onClick、onMouseOut等。
（3）面板右边显示选用的动作，如弹出信息、交换图像等
6.3.2事件
触发行为的对象可以是文字、图像、表格，甚至是整个页面等，根据选定的触发源的不同，可以有不同的事件，常用的事件有：
OnLoad：
当图像或页面结束载入进产生。
OnUnload：
当访问者离开页面时产生。
OnClick：
当访问者单击指定的元素（比如一个链接、按钮或图像地图）时产生。
单击直到访问者释放鼠标按键时才完成，只要按下onMouseDown按钮便会令某些现象发生。
OnDblClick：
当访问者双击指定的元素时产生（双击是指向元素时迅速按下及释放鼠标按键）。
OnMouseDown：
当访问者按下鼠标按键时产生（访问者不必释放鼠标按键以产生这个事件）。
OnMouseMove：
当访问者在指向一个特定元素并移动鼠标时产生（那是指光标停留在元素的边界以内）。
OnMouseOut：
当光标从特定的元素（该特定元素通常是一个图像或一个附加于图像的链接）移走时产生。
这个事件经常被用来和“恢复交换图像（SwapImageRestore0“动作关联，当访问者不再指向一个图像时，把它返回到其初始状态。
OnMouseOver：
当鼠标首次指向特定元素时产生（指当光标从不是指向该元素到指向该元素），该特定元素通常是一个链接。
OnMouseUp：
当一个被按下的鼠标按键被释放时产生。
OnSelect：
当访问者在一个文本区域内选择文本时产生
……
6.3.3动作
当在【行为面板】上按下“+”按钮添加行为时，弹出可选用的各种动作，如图6-18所示。
图6-18行为
6.3.4行为应用示例——网页菜单的制作
对于较多页面的网站，常使用菜单导航，菜单的制作方法很多，使用行为中的“显示弹出式菜单”制作菜单是一种较简单的方法，下面介绍使用“显示弹出式菜单制作”网页菜单的步骤。
（1）新建网页menu.html，插入1行7列表格（边框线粗细0、边距0、间距0），输入一级菜单文字，并设置各一级菜单文字链接到“#”，即空链接。
系部简介
师资力量
专业介绍
实训环境
作品欣赏
学子风采
网络教程
（2）作为示例，选中“专业介绍”，在【行为】面板中，按下“+”添加“显示弹出式菜单”行为，进入如图6-19所示的菜单编辑面板。
图6-19弹出式菜单内容选项面板
在【内容】选项中，提供有相关操作按钮，依次为增加菜单项、删除菜单项、左缩进项、缩进项、上移、下移等。
在文本中逐条输入菜单项文字，如“电脑艺术设计”，并设置链接文件及目标。
通过缩进调整按钮，可设置次级菜单项，如图6-19中的环境艺术设计专业下分为室内设计方向、景观规划设计方向等，作为“环境艺术设计”下的两个次级菜单。
在【外观】选项中，可设置菜单的放置方式“垂直菜单”/“水平菜单”，以及文字的大小、颜色等属性。
图6-20弹出式菜单外观面板
在【高级】选项中，可设置边框、单元格高度及间距等。
在【位置】选项中，可设置弹出式菜单的具体位置。
制作完毕，按下“确定”按钮，完成一个弹出式菜单制作。
（3）重复步骤
（2）设置其它菜单文字对应的二级菜单项。
（4）如果需要修改，则打开行为面板，选中“onMouseOver|显示弹出式菜单”行为，双击即可进行修改。
（5）制作完毕，预览。
效果如图6-21所示。
图6-21弹出式菜单示例
6.3.5本节小结
本节简单介绍了行为的使用，使用Dreamweaver88中的行为，就可以方便地完成菜单、弹出信息、检查插件等较复杂的功能。
本节着重讲述了关于“行为”的定义和基本功能。
我们知道行为就是由一段段JaveScript代码组成的，它主要是为更好地控制其他网页中的元素而设置的，因此严格来说，行为不是网页中的元素。
Dreamweaver8提供了22种行为动作，对于普通使用者来说已经足够了，当然行为的扩展是无限制的，只要掌握了JaveScript，就可以编写行为了，也可以从Dreamweave的官方网站中获得。
6.4时间轴
在浏览网页时，常常会看到有些小广告在页面上随意游动，这是如何实现的呢？
将浮动的广告作为一个层，然后通过时间轴来控制其游动路线，就是一个十分简单的方法，这种方法创建的动画又称为时间轴动画。
这种动画是如何实现的呢？
与电影的原理是一样的，电影是通过连续放映不同的图像，从而在人的眼中加以看到运动的画面。
时间轴动画就是通过时间的变化而不断改变层的位置所产生的动画效果。
6.4.1时间轴面板
要了解时间轴的使用，首先认识一下时间轴面板。
执行菜单【窗口】|【时间轴】，即可将时间轴面板显示出来，为了方便起见，我们先建立一个图层，然后拖动图层的“选择柄”到时间轴上，结果如图6-22所示。
图6-22时间轴面板
下面介绍时间轴面板各控件的功能：
●播放开始：
显示当前页面上的层是时间轴的哪一帧开始播放。
●时间轴下拉菜单：
指定当前显示在“时间轴”面板中的是文档的哪一条时间轴。
●动画条：
显示每个对象的动画持续时间。
一行可包含多个代表不同对象的动画条，不同的动画条不能控制同一帧中同一对象。
●当前帧：
表示当前帧的序列号。
●播放速度：
即每秒钟播放的帧数来控制动画的持续时间，通常的默认设置是每秒钟播放15帧，这对于运行在Window系统上的大多数浏览器是一个较好的平均速率。
速率并不是越快越好，太快的速率不一定能提高性能浏览器总是播放动画的每一帧，即使它们不能达到用户系统上指定的帧速率，高于浏览器可管理速率的帧速率将被忽略。
●自动播放：
选中后，在浏览器打开该页面，动画就自动播放。
●循环播放：
选中后在浏览器中会无限循环播放，在行为通道中可以看到循环的标签，双击标签可以修改行为的参数和循环次数。
6.4.2创建浮动广告
要创建一个时间轴动画，第一步就是在页面中插入一个层；第二步在层中插入图像、文字或动画（GIF动画、Flash动画）；第三步使用时间轴窗口改变层的位置，创建时间轴动画。
其详细步骤如下：
（1）在网页编辑窗口插入一个层，并在层中插入一幅图片、文字或动画，并设置相应的链接，如图6-23所示。
图6-23图层
（2）执行菜单【窗口】|【时间轴】，显示出【时间轴】面板
（3）拖动图层左上角的选择柄到时间轴第1行第1帧上，结果在时间轴上形成了动画条，共有15帧。
（4）在时间轴面板上拖动动画条的结束帧至60帧位置。
按缺省的15Fps的速度，则共有4秒钟的动画。
（5）在时间轴面板第1帧是单击，然后在网页上拖动图层到设定的初始位置。
（6）在时间轴面板最后一帧（即60帧）上单击，然后在网页上拖动图层到设定的结束位置。
可看到在网页上形成一条从初始位置到结束位置的直线，表示此时图层将作直线运动。
（7）在时间轴面板的第10帧位置右击，在弹出的菜单中选择“增加关键帧”，然后在网页上拖动图层到另一个位置，可看到原来的直线轨迹发生了变化。
如图6-24所示。
图6-24增加了关键帧的图层轨迹
（8）根据需要可重复步骤（7）分别在第20、30、40、50帧位置增加关键帧，并改变图层的位置，结果可得到一个曲线运动的轨迹线。
如图6-25所示。
图6-25增加了多个关键帧后的图层运动轨迹线
（9）勾选时间轴上的“自动播放”、“循环”，按下F12进行预览。
可看到图层在页面上循环浮动。
实际上，还有更简单快捷的办法，在拖动图层到时间轴后，右击时间轴，在弹出的菜单中选择“录制层路径”，然后在页面中拖动图层随意游动，此时会将游动的路径自动记录下来，如图6-26所示。
在预览时可看到图层按照记录好的路径“游动”。
图6-26录制层路径
6.4.3本节小结
制作网页浮动广告多见于商业类网站中，在一般的网站中也常用浮动广告作为一些重要提示或最新消息提示，本节主要介绍使用时间轴来制作浮动广告。
在这种时间轴广告中，广告就是一个层，通过在时间轴中设置关键帧，并改变页面中广告在关键帧中的位置，从而设定了广告的运动轨迹。
6.5同步训练
6.5.1填空题
（1）插入表格，如果不设定表格的间距，则默认值为。
（2）如果一次要绘制多个层，需要按住键盘上的键。
6.5.2问答题
（1）选择整个表格与选择表格所有单元格有何不同？
（2）表格边框的属性borderColorDark、borderColorLight的作用分别是什么？
如何利用这两个属性制作三维立体表格表格？
6.5.3实训题
（1）练习用3种方法制作1像素细线表格
（2）参考光盘中char62.html，练习制作如图6-27的菜单，一级菜单“ABOUTME”、“设计作品”、“策划方案”、“设计思考”，当鼠标移动一级菜单项（如图中的设计作品）时，在下一行位置显示二级菜单项（如图中的广告作品、包装作品、室内设计、工艺设计）。
图6-27菜单示例
（3）练习制作一浮动广告，使其在页面上循环浮动。
升级会员 