网页设计与制作教学课件邬锦霞第10章 层与时间轴.ppt

《网页设计与制作教学课件邬锦霞第10章 层与时间轴.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章层与时间轴本章导读本章介绍了层与时间轴的相关知识，主要内容包括：如何创建和使用层；对层的基本操作；层与表格之间的互相转换；最后简单介绍了时间轴的使用。本章要点层的创建与使用层的基本操作层与表格的相互转换时间轴的使用层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素，层可以自由移动，层与层之间还可以重叠。层体现了网页技术从二维空间向三维空间的一种延伸，综合层和行为的使用还可以制作出动画效果，而不必使用任何Ja

2、vaScript或HTML代码。10.1层的创建与使用在Dreamweaver8中，可以通过层来设计网页的布局，实现对隐藏和显示的控制。还可以在文档设计视图中移动层，以及在两个层中设置层的背景图像。利用层可以让位置的设置变得更加灵活和机动，同时还可以实现层和表格的相互转换。在网页中放置层时，代码以

3、.1.2层面板的使用利用层面板可以设置层是否可见、是否可以重叠，还可以改变层的顺序。（1）层的可见性打开层的属性面板，在层的眼睛图标列内单击，可以更改对应层在“设计”视图中的可见性：眼睛睁开表示该层是可见的。眼睛闭合表示该层是不可见的。如果没有眼睛图标，该层通常会继承其父级的可见性（如果层没有嵌套，父级就是文档正文，而文档正文始终是可见的）。单击眼睛图标列，可以同时改变所有层的可见性，如图3所示。图3（2）防止层重叠有2种方法可防止层重叠：选择菜单命令【修改】》【排列顺序】》【防止层重叠】。打开层面板，选中【防止层重叠】复选框。在文档中创建了多个层时，设置了防止层重叠

4、，则在拖动层时，只能沿着已有层的边界拖动，如图4所示。图4但如果是建立了重叠层之后才选中此复选框，以前发生的层重叠是不能改变的，此时，需要通过选中层来进行移动，把重叠的层分开。在选择了本选项和吸附功能被启用的情况下，如果吸附会导致两个层重叠，此时层不是被吸附到网格，而是被吸附到最靠近的层边缘（3）改变层的顺序改变层的堆叠顺序方法如下：选择层面板中的Z列，单击后面的数字，可以让其处于可编辑状态。改变数字可以改变层的顺序，顺序的前后和数字的大小一致，数字小的靠前，数字大的靠后。10.1.3层的属性除了可以使用层面板来设置一些属性以外，如果要精确地设定层的参数，就要借助层属

5、性面板。选中层，可以在层【属性】面板中进行设置，属性面板如图5所示。图5属性面板中各个参数含义如下：层编号：设置层的名称。因为在一个页面可以插入多个层，所以要为每一个层定义一个不同的名字，以便进行标识识别；左、上：用以设置层距离页面左上角的距离。层位置的控制皆为绝对位置，会随浏览器显示分辨率的不同而位置有所变化；宽、高：指定层的宽度和高度。默认插入层的宽和高为200px和115px。也可以在插入别的网页元素以后，根据需要再设置其宽度和高度；Z轴：用来设置层的Z轴，可为负值。此设置在一个页面存在多个层，重叠时根据Z轴值的大小来决定层的显示顺序，Z轴值最大的在最前面显示，

6、将覆盖Z轴值小的；可见性：在下拉列表框中设置层的可视属性。选择“Default”，为默认值，默认层可见；选择“Inherit”，表示继承父层的可视属性；选择“Visible”，表示设置层为显示，并且不受父层属性的影响；选择“Hidden”，表示设置层为隐藏，不受父层属性的影响；背景图像：用来设置层的背景图像；背景颜色：用来设置层的背景颜色；溢出：当层中插入元素的大小超过层的设置大小时，显示层中内容的方式有4种。“Visible”表示当层中的内容超过层的大小时，层将自动扩展，直到可以容纳当前内容；“Hidden”表示当层中的内容超过层的大小时，超过部分将被隐藏；“Scr

7、oll”表示当层中的内容超过层的大小时，层中将出现滚动条，拖动滚动条，可以看到层中的全部内容；“auto”表示当层中的内容不超过层的大小时，滚动条不显示，超出时，自动显示滚动条；剪辑：用来设置层的可见属性。经过剪辑的层只有指定的区域才可见，左、右、上、下后面的文本框用来设置可见区域的左边界距离左右、上下的距离。10.1.4在层中插入图片层的使用让网页在排版方面更灵活。因为操作简单，层可以方便地将网页中任何一个元素进行定位，但是层也不能随意地摆放位置，需要和表格等元素进行配合，这样排版出来的网页才会更为科学、合理。在文档的层中插入图片的步骤如下：（1）