《网页开发工具》第七讲层和框架.pptVIP

第七讲 层和框架 * 《网页开发工具》第七讲 层和框架 7.1 层 在以前的网页中，元素是无法重叠出现的，除非将重叠的元素制作成背景图像，而有了层以后，就可以将元素放置在层中，因为层可以重叠，所以也就产生了许多重叠的效果。 在层中可以放置文字、图像、插件或其他层，层可以放在网页的任意未知，并且可以移动和隐藏。 当在一个页面上创建多个层时，可以将这些层产生平铺、重叠或嵌入的效果。 所谓平铺式层，是指绘制的多个层之间没有重复交叠，平铺在页面上。在层的面板中选中“放置重叠”复选框即可。 重叠式层正好与平铺式层相反，即多个层之间是相互重复交叠的。 嵌入式层是指新建的层包含在其他层（父层）中，移动父层时子层也随之移动，而移动子层时父层却不会移动。当光标放置在父层中，使用平铺式层或重叠式层的方法都可以创建嵌入式层。 《网页开发工具》第七讲 层和框架 7.1.1 层的种类 方法一：使用“插入”面板 打开“插入面板”，选择“布局”选项卡，直接将“绘制层”按钮 拖到页面中。 方法二：使用菜单命令 单击“插入”|“层”命令，就可以插入一个层了。 方法三：插入多个层 按住Ctrl键的同时，单击“插入”面板上的“绘制层”按钮，可在页面中一次插入多个层。 《网页开发工具》第七讲 层和框架 7.1.2 插入层并设置属性 《网页开发工具》第七讲 层和框架 多个层的插入及排列操作步骤如下： 1)单击“编辑”|“首选参数”命令，选择分类列表中的“层”选项，对层的参数进行设置。 2)选择插入面板中布局选项卡的“绘制层”按钮，按住Ctrl键，画出四个层。 3)按住shift键同时单击各个层，可同时选中多个层。 单击“修改”|“排列顺序”命令，再选择“对齐上缘”、“设成宽度相同”、“设成高度相同”命令，可对多个层进行排列。 4)如果想将多个层的间距设置为等距，选中任意一个层，在层的属性面板中对“左对齐”参数进行设置即可。 1)层的缩放：单个层的缩放只需拖拽缩放手柄（层周围出现的小方块）即可；如果是多个层，则先同时选中多个层，然后在属性面板的“宽”|“高”中输入以像素为单位的数值就可以对多个层进行统一的调整。 2)层的移动：通过鼠标拖动进行，也可通过上下左右四个方向键进行。按一次方向键，层移动一个像素位置；按住shift键再按方向键则一次移动10个像素位置。 3)层的对齐：选中多个层，单击“修改”|“排列顺序”中的左对齐、右对齐等方式即可。 《网页开发工具》第七讲 层和框架 7.1.3 层的操作(缩放\移动\对齐\改变Z轴顺序等) 4)改变层的可见性：单击“窗口”|“层”命令打开层面板，单击眼睛图标可以修改层的可见性；在层的属性面板中将可见性参数选为hidden，也可将层设为不可见。 5)层的Z轴顺序：Z轴值最大的层在最上面，在层面板中拖动层或是在属性面板中输入Z轴数值都可以改变层的Z轴顺序。例：阴影文字制作。 6)层的嵌套：将光标置于一个层内，再继续插入一个层，就得到了嵌套层。子层与父层的Z轴顺序是一样的，父层移动时子层也将移动，而子层移动时父层不会移动。嵌套层之间存在继承的关系(inherit)，即子层的可见性和父层保持一致以及保持与父层的相对位置不变。 《网页开发工具》第七讲 层和框架 《网页开发工具》第七讲 层和框架 7.1.4 层与表格的相互转换 1.层到表格：层能够精确定位页面元素，在定位完成后可以将层转换为表格，以免在低版本的浏览器中不能精确显示页面。插入层后，单击“修改”|“转换”|“层到表格”命令，在打开的对话框中设置有关表格的参数，点击确定按钮即可。 《网页开发工具》第七讲 层和框架 参数说明如下： 最精确：将所有层转换为表格，如果层之间有间距，则插入适当的单元格。 最小：如果层之间的距离很小，会将这些层转换为相邻的单元格，可以在后面的文本框中输入层之间的最小距离，单位为像素。 使用透明GIF：将转换后的表格最后移行填充为透明的GIF图像，这样在所有的浏览器中，表格后具有相同的显示效果，此时不能拖动表格的边框来改变表格的大小。 置于页面中央：转换后的表格在页面中居中对齐，否则居左对齐。 《网页开发工具》第七讲 层和框架 2.表格到层 布局时使用表格灵活性要受到一定的限制，如果要改变网页中各元素的布局， 需要将表格转换为层，然后通过移动层来改变网页的布局。选中表格，单击“修改”|“转换”|“表格到层”命令，在出现的对话框中设置完毕，单击“确定”按钮，表格就转换为层了。 在一个网站中，通常会有许多元素重复地出现在不同的网页文档中，如网页标题、导航栏等。如果在每个网页都添加这些相同的部分，就会浪费很多的时间，而访