第10章 层、Div标签、时间轴（课件）-高二《网页设计与制作》同步教学（人民邮电版）

第10章 层、Div标签、时间轴 层 10.1 关于层的操作 10.2 实例──拼图游戏 10.3 Div标签 10.4 综合实例──运用层和Div标签布局网页 10.5 第10章 层、Div标签、时间轴 【时间轴】面板 10.6 10.1 层 10.1.1 创建层 10.1.2 选定层 10.1.3 层属性 10.1.4 层的默认设置 10.1.5 【层】面板 10.1.1 创建层 打开文档窗口，可以使用下列3种方法中的任何一种来创建层。 将光标置于文档窗口中欲插入层的位置，然后选择主菜单中的【插入】／【布局对象】／【层】命令，插入一个默认的层。 将【插入】／【布局】面板上的 按钮拖动到文档窗口，插入一个默认的层。 单击【插入】／【布局】面板上的 按钮，将鼠标光标移至文档窗口中，这时鼠标光标变为十字形，此时拖动鼠标光标画出一个自定义大小的层。 10.1.2 选定层 选定层有如下几种方法。  单击文档中的按钮 来选定层。  将光标置于层内，然后在文档窗口底边标签条中选择“<div>”标签。  单击层的边框线。  在【层】面板中单击层的名称。  如果要选定两个以上的层，只要按住Shift键，然后逐个单击层手柄，就将层同时选定了。 10.1.3 层属性 10.1.4 层的默认设置 10.1.5 【层】面板 在【层】面板中可以实现以下功能。  将一个层嵌套入另一个层。  选定一个或多个层。  修改层的z轴顺序。  修改可见属性。  禁止层重叠。 10.2 关于层的操作 10.2.1 缩放层 10.2.2 移动层 10.2.3 对齐层 10.2.4 层的可见性 10.2.5 层的z轴顺序 10.2.6 嵌套层 10.2.1 缩放层 缩放单个层有以下几种方法。  先选定层，然后拖动缩放手柄（层周围出现的小方块）来改变层的尺寸。拖动下手柄改变层的高度，拖动右手柄改变层的宽度，拖动右下角的缩放点同时改变层的宽度和高度。  先选定层，然后按住Ctrl键，每按一次方向键，层就被改变一个像素值。  先选定层，然后同时按住Shift＋Ctrl键，每按一次方向键，层就被改变10个像素值。 10.2.2 移动层 下面介绍几种移动层的方法。  选定层后，鼠标光标靠近缩放手柄时，出现十字箭头，按住鼠标左键拖动鼠标光标，层将跟着鼠标光标的移动而发生位移。  选定层，然后按4个方向键向4个方向移动层。每按一次方向键，将使层移动一个像素值的距离。  选定层，按住Shift键，然后按4个方向键向4个方向移动层。每按一次方向键，将使层移动10个像素值的距离。 10.2.3 对齐层 共有以下4种对齐方式。  【左对齐】：以最后选定的层的左边线为标准，对齐排列层。  【右对齐】：以最后选定的层的右边线为标准，对齐排列层。  【对齐上缘】：以最后选定的层的顶边为标准，对齐排列层。  【对齐下缘】：以最后选定的层的底边为标准，对齐排列层。 10.2.4 层的可见性 层内可以包含所有的网页元素，通过改变层的可见性，就可以控制层内元素的显示与隐藏，可以通过【层】面板，也可以在层的【属性】面板中来改变层的可见性。 10.2.5 层的z轴顺序 层与表格相比，在定位元素方面各有各的优势，但层最大的优势在于可以重叠，而表格只能嵌套。层的重叠为制作一些特殊效果提供了非常方便的途径，而其重叠次序通常是用z轴顺序来表示的。它的意思就是，除了屏幕的x、y坐标之外，逻辑上增加了一个垂直于屏幕的z轴，z轴顺序就好像层在z轴上的坐标值。这个坐标值可正可负，也可以是0，数值大的在最顶层。 10.2.6 嵌套层 层的嵌套和重叠不一样。嵌套的层与父层是有一定关系的，而重叠的层除视觉上会有一些联系外，其他根本没有什么关系。 嵌套层之间还存在着继承关系。选定子层，打开其【属性】面板，【显示】选项的下拉列表中有【default】（默认）、【inherit】（继承）、【visible】（可见）和【hidden】（隐藏）4个选项。 10.3 实例──拼图游戏 本例展示了层的显示、隐藏、浮动等特性，在制作过程中可以看到，层的显示、隐藏、浮动的实现是在“行为”的帮助下完成的。目前还没有完整地对“行为”这一功能进行学习，但这并不影响对层的功能的理解，只要记住“行为”是制作层的显示、隐藏、浮动必不可少的因素就可以了。 10.4 Div标签 层与Div标签是同一个网页元素不同的表现形态，通过CSS样式使二者可以相互转换。这指的是CSS样式中【定位】分类属性的【绝对】类型，这也是层与Div标签转换的关键“咒语”。