9 层
Dreamweaver中的层，与Photoshop中的图层，既有相同之处，也有不同之处，如果在学习中注意两者之间的异同之处，能收到事半功倍的学习效果。
以前在网页中，元素是无法重叠出现的，引入了层之后，就可以重叠，从而显示重叠效果。
由于层可以游离在常规网页之上，所以可以利用层来精确定位网页元素（包括文本、图像）。因此，FrontPage 2000中，将层的创建、设置等包含在“定位”部分。
层有一项非常特殊的功能，就是通过应用JavaScript，可以使层移动和变换，在层中放置一些图片或者文本，就能够实现动画效果。
层可以转换成表格，为不支持层的浏览器提供解决方法。
9．1 创建层（top）
创建层的方法有三种，
⑴将光标移至需插入层处，单击“插入”·“布局对象”·“层”。默认插入一个默认大小的（宽200像素、高115像素）层。
⑵将插入工具栏“布局”页上的“描绘层”按钮拖至需插入层处。同样插入一个默认大小的层。
⑶单击插入工具栏“布局”页上的“描绘层”按钮后，用鼠标到网页中拖动创建一个所需大小的层。
9．2 选定层（top）
选定层的方法有多种：
⑴单击文档窗口中，层右上角的标记。
⑵将光标移入层内，单击状态栏上的层标记（如，<div>）。
⑶光标移至层的边框，变成带向外箭头的十字形后单击。
⑷单击层面板上的层名称。
若要显示两以上的层，按Shift键后，再用上述方法。
9．3 层属性（top）
选定一个层后，属性面板就成为层属性面板。
“层编号”，若要使用JavaScript控制层，则一定要用层编号。且应该使用英文。
“左”，层左边界距离浏览器窗口左边界的距离。
“上”，层上边界距离浏览器窗口上边界的距离。
“宽”，层的宽度。
“高”，层的高度。
“Z轴”，在垂直方向上，层的顺序。
“显示”，层的可见性，default（默认）、inherit（继承父层的属性）、visible（可见）、hidden（隐藏）4个选项之一。
“背景图像”，设置层的背景图像。
“背景色”，设置层的背景色。
“溢出”，当标签参数设为DIV或SPAN时才出现，设置当层内容超过层大小时，的显示方式，即，
visible，按照内容的尺寸，向右、向下扩大层，以显示层内的全部内容。
hidden，无论内容多少，层的尺寸不改变。当内容多时，部分内容将被隐藏。
scroll，增添滚动条，无论是否需要（内容是否超出层范围）。
auto，只有在内容超出层范围时，才添加滚动条。
“剪辑”，“左”、“右”、“上”、“下”框输入的数值是，层中内容与层边线的间距。单位为像素。
提示：上面附图是单个层的属性面板，多个层的属性面板与它基本相似。
9．4 层的默认设置（top）
层的默认设置，也就是层插入时的默认设置，在“参数选择”对话框上修改。
单击“编辑”·“参数选择”，在“参数选择”对话框的“分类”框中，选中“层”后，即可在右侧修改有关设置。
“标签”、“显示”、“宽”、“高”、“背景颜色”、“背景图像”等设置与层属性面板上的相同。
“嵌套”，选中，则只要层出现重叠时，就采用嵌套方式。
“Netscape4兼容性”，选中，则插入层时固定大小。
9．5 层面板（top）
在“层”面板中，可以实现的功能是：
选定一个或多个层（与选择一个、多个文件的方法基本相同，不一样的是选择多个层时，按Shift键）
将一个层嵌套入另一个层
修改层的Z轴顺序
禁止层重叠（“选中防止重叠”复选框）
9．6 层操作（top）
9．6．1 缩放层（top）
直观的方法是：选中层后，用鼠标拖动控制点。
精确的方法是：选中层后，修改层面板上的“宽”、“高”值。此种方法可以用于设定，同时选中的多个层。
键盘方法是：选中层，按Ctrl键后，每按一次方向键，层宽（或高）改变1个像素；按Shift+Ctrl键后，每按一次键，层宽（或高）改变10个像素。
9．6．2 移动层（top）
鼠标拖动，选中层，鼠标移至边框上，变成带向外箭头的十字形后拖动即可。
键盘方法，选中层，按Shift键后，每按一次方向键，层移动1个像素；选中层，按Shift键后，每按一次方向键，层移动10个像素
9．6．3 对齐层（top）
选定需对齐的层后，利用“修改”·“对齐”的次级菜单中的命令（左对齐、右对齐、对齐上缘、下方）对齐。对齐的标准是最后选中的层。
9．6．4 改变层的可见性（top）
在“层”面板中，单击（每层）最左侧的眼睛图标列，可改变层的可见性。显示：
睁开眼睛图标，表示可见。属性面板中“显示”框中为visible。
闭着眼睛图标，表示不可见。属性面板中“显示”框中为hidden。
无眼睛图标，表示可见性为默认。属性面板中“显示”框中为default。
单击眼睛图标的“标题”，可以同时改变所有层的可见性。
9．6．5 改变层的Z轴顺序（top）
在“层”面板中，拖动层的顺序即可。如同在Photoshop的图层面板中拖动图层一样。
9．6．6 嵌套层（top）
将光标移入一层中，再创建一个层，后者就嵌套入前者中。
嵌套层之间存在着继承关系。选定子层，在属性面板中“显示”框中，选定inherit，则嵌套层存在继承关系，子层的可见性与父层保持一致，相对位置不变。
9．7 利用层设计表格（top）
9．7．1 层转换为表格（top）
此项功能是，先使用层将网页元素精确定位，然后再将层转换成表格。
为了使层的定位，更加直观，可单击“查看”·“网格”·“显示网格”，在文档窗口中显示网格。
层转换成表格的操作步骤：
用层将网页元素定位到所需的位置（在“层”面板中，选中“防止重叠”复选框）。
单击“修改”·“转换”·“层到表格”。
在“转换层为表格”对话框上，
“表格布局”一组单选按钮：
“最精确”，精确方式转换，为每个层建立一个单元格，并创建所有附加单元格，以保证各单元之间的距离；
“最小”，以最小方式转换，去掉宽度或高度小于指定像素数目的空单元格。也就是，当某些层的位置坐标比较接近时，使它们对齐。这样可做可减少空单元的数量，从而减小网页文件的大小，但这样转换后，与原来位置有一些差别。
“使用透明GIF”复选框，选中，则保证在各种浏览器中外观相同。
“置于页面中央”复选框，选中，则转换后的表格在页面中居中对齐；否则为左对齐。
“防止层重叠”，如果层相距较近，则应选中。
“显示层面板”、“显示网格”、“靠齐到网格”等，根据需要确定是否选中。
层转换成表格后，层由纵横交错的表格替代，虽然有一些不必要的单元格存在，但可确保网页元素的精确定位。
9．7．2 表格转换成层（top）
如果要改变网页中各元素的布局，使用表格则不够灵活，最灵活的方法就是将元素置于层内，然后移动层来改变网页的布局，这就需要将表格转换为层。具体操作方法是：
将光标移入表格（任意一个单元格）中，单击“修改”·“转换”·“转换表格为层”，然后单击“转换表格为层”对话框上的”确定即可。
转换是将有内容的单元格原地转换成层。
“转换表格为层”对话框上的四个复选框，可根据需要选中。全部不选也可。
9．8 层应用例题－拼图游戏
9．8．1 说明
本文讲解一个利用层来制作拼图游戏的实例。 故请先打开拼图游戏实例，供参考！
首先，利用Photoshoop或者Fireworks等，将所需的图像制作好。
为便于游戏者拼图，图像的尺寸，不宜过大。本例使用一幅300×225像素的图像。
整幅图像等分成9小块（3×3），每块100×75像素。
9．8．2 拼图游戏制作步骤
⑴先制作网页刊头、网页标题（拼图游戏）等。
⑵插入一个用于控制网页元素位置的表格，1行、3列。表格属性：设置间距为“0”、边框为“0”；左右两侧单元格的宽度均为300像素。
⑶左侧单元格中，插入一个3行、3列的 拼图表格 。单元格的宽度均为100像素、高度均为75像素、间距为“0”、边框为“1”、边框颜色为“＃00FF00”；右侧单元格中，插入整幅的图像（为拼图者提供参考）；中间单元格中，插入文字（拼图方法 直接用鼠标将小图拖至适当位置即可）。
⑷插入9个层（单击“插入”·“布局对象”·“层”），层的属性：高75像素、宽100像素、Z轴分别为1－9。
 ⑸在9个层中，分别插入事先准备好的小块图像，然后将它们排列在上述表格的下方。
提示： 排列层时，应该打乱图像的次序。
⑹单击“行为”面板上“＋”按钮，然后单击“拖动”。
⑺在“拖动层”对话框上，“层”框中，选定需添加动作的层名，然后单击“确定”。
⑻重复上一步，8次，分别给9个层添加动作脚本。
至此，拼图游戏网页就制作完成了。怎么样？很容易吧！你也试试。
9．8．3 注意事项
第一点，如果需要给游戏者提示，即限制层的摆放位置，则应该先将9个层摆放到拼图表格中，组成完整的图像，然后再进行第⑹－⑻。而且，须在“拖动层”对话框上，单击“确定”按钮前，先单击“取得目前位置”按钮。
为层添加动作脚本后，将它们乱序地摆放到表格下方。
第二点，低版本浏览器不支持拖动层的行为，而Dream weaver MX 2004版默认显示的低版本浏览器支持的行为。因此，需要先单击“行为”面板上“＋”按钮，然后单击“显示事件”·“IE6.0”。
第三点，添加“拖动层”行为时，不要选中“层”。
主页 （top）
|