中职 计算机专业 《Dreamweaver 网页制作》课件 第5章 学习网页布局之层.pptVIP

不论是由表格布局还是由层布局，在浏览器中显示的网页文档都是完全相同的。 5.2.2 表格转换为层 通过层进行布局的页面，可以转换为表格，对话框如下图所示。 5.2.3 知识拓展 对话框中各项内容说明如下： 最精确：为每个层创建一个单元格，并增添一些单元格来保持相邻的层之间的距离，精确地保持转换之后的位置。 最小：当一些层的坐标位置接近的时候去掉一些宽高小于指定像素的空单元格，这样能减小HTML文档，但转换后页面会有一定的差别。  5.2.3 知识拓展 使用透明GIF：生成一个透明的GIF格式的图像并填充在表格最后一行，用于确保在任何浏览器中都有一致的外观。 置于页面中央：选中后表格在页面居中对齐，默认为左对齐。 防止层重叠：选中该项能够防止层的重叠，假如有重叠发生将无法转换，在层到表格的转换中该复选框应该选中。 5.2.3 知识拓展 显示层面板、显示网格、靠齐到网格：这几项主要为了便于布局设计，可根据需要决定是否选取。 5.2.3 知识拓展 第5章 学习网页布局之层 层的基本操作 5.1 层与表格的转换 5.2 5.1 层的基本操作 5.1.1 创建层 5.1.2 创建嵌套层 5.1.3 激活和选中层 5.1.4 调整层的大小和位置 5.1.5 显示或隐藏层 5.1.6 更改层的重叠顺序 5.1.7 删除层 5.1.8 知识拓展 5.1.1 创建层 层是一种网页元素定位技术，使用层可以精确定位页面元素，可以方便地进行页面布局。层就像含有文字或图片等元素的透明胶片，一张张按顺序叠放在一起，组合起来形成三维效果，使网页具有了空间感。 　　层是被特殊定义的区域，在层中可以输入文本或插入图像，也可以插入其他层、表格、动画等元素，如下图所示。 5.1.1 创建层 1．插入法 　　先将光标放置于要插入层的位置，然后在菜单栏选择“插入”→“布局对象” → “层”命令，则在页面光标位置处出现一个层，如下图所示。对应地，此时在编辑区中出现一个层和一个层标记。 5.1.1 创建层 5.1.1 创建层 　2．拖放法 拖动“布局”选项卡中的“绘制层”按钮，并在需要插入层的位置释放，如下图所示。 5.1.1 创建层 3．绘制法 　　单击“布局”选项卡中的“绘制层”按钮 ，此时光标变为“+”形状，在网页编辑区中选择插入层的位置，拖动鼠标便可绘制一个层。 　　若要连续绘制多个层，则需按住Ctrl键，单击“布局”选项卡中的“绘制层”按钮 ，然后把鼠标移到文档窗口中单击或拖动，即可连续绘制多个层。 5.1.1 创建层 显示或隐藏层代码标记，可以选择 “查看”菜单?“可视化助理”?“不可见元素”命令。 显示或隐藏层边框，可以选择“查看”菜单?“可视化助理”?“层外框”命令。 5.1.1 创建层 5.1.2 创建嵌套层 创建嵌套层就是在一个层内插入另外的层。嵌套层可称为子层，包含嵌套层的那个层称为父层，嵌套层的属性与上一级层的属性有一定的继承关系。 　　方法1：创建嵌套层首先要在文档中插入一个层，将光标移到已建好的层中，继续插入层，则在已建的层中插入一个嵌套层，如下图所示。 5.1.2 创建嵌套层 方法2：打开“层”面板，从中选择需要嵌套的层。此时，在按住Ctrl键的同时把要作为子层的层拖动到要设定为父层的层上，直到出现如下图所示图标后，释放Ctrl键和鼠标，这样就转换为嵌套层了，父层移动时，子层也会同时移动。 5.1.2 创建嵌套层 5.1.2 创建嵌套层 5.1.3 激活和选中层 层在被激活后，才能插入文本、图像、表格等网页元素。 　　1．激活层的方法 2．选择层的方法 5.1.4 调整层的大小和位置 1．调整层的大小 2．移动层 3．对齐层 5.1.5 显示或隐藏层 层具有显示或隐藏的属性，该属性经常用于动画的制作过程中。 （1）显示或隐藏层的相关属性可以在层面板中设定，也可以在层属性面板中设定，如下图所示。 5.1.5 显示或隐藏层 （2）单击闭眼图标，说明选定的层被设定为隐藏，如下图所示。 5.1.5 显示或隐藏层 （3）按F12键，打开浏览器后，可以确定图像不可见，如下图所示。 5.1.5 显示或隐藏层 （4）返