网页设计教程 教学课件 作者 裴献第7章 层的应用.ppt

《网页设计教程 教学课件 作者 裴献第7章 层的应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章层的应用层是一种用于精确定位的HTML页面元素，可以将其定位在页面上的任意位置。我们可以往层里加入图像、文本等其它页面元素，借助于层，可对加入的页面元素进行精确定位，还可以做出重叠效果和运动效果。从DreamweaverCS3开始，将“层”称为AP元素。主要内容7.1层的创建与基本操作7.2层的属性设置7.3层与表格的转换7.1层的创建与基本操作7.1.1层的创建1．创建层绘制一个层绘制多个层2．AP元素面板在文档窗口中绘制的每一个层都会出现在AP元素面板中，通过AP元素面板可以管理文档中的层。如图所示为AP元素面板使用AP元素面板可以防止

2、层重叠、更改层的可见性、将层嵌套或层叠，以及选择一个或多个层。如果AP元素面板未显示，则单击“窗口”→“AP元素”，打开AP元素面板。7.1.2层的基本操作层的基本操作包括向层中添加文本、图像等元素、调整层的大小、移动层等。在进行这些操作时，多数情况下必须先选择层。1.选择层选择层有两种方法：一种是在AP元素面板中操作；另一种是直接在文档“设计”视图中操作。2.在层中插入元素在层中我们可以插入文字、图片等网页中的元素，首先单击层内位置，在层内设定插入点，然后插入内容，插入方法与在表格中相同。3.调整层的大小调整单个层的大小调整多个层的大小4.移动

3、层选择要移动的一个或多个层，当鼠标移至层边框时，鼠标变为十字箭头此时直接拖动即可。5.对齐层使用层对齐命令可利用最后一个选定层的边框来对齐一个或多个层。6.将层对齐到网格网格在文档窗口中显示为一系列的水平线和垂直线，显示网格线可以精确定位层和调整层的大小。7.2层的属性设置7.2.1查看层的属性在层属性检查器中查看层属性的方法是：选择一个层，在“属性”面板中即可看到层的具体属性，如图所示，若属性检查器没有出现，则单击菜单“窗口”→“属性”。在层属性面板中，部分属性对象的作用说明：左：指定层左边界距离页面（如果嵌套，则为父层）左边界的距离。上：指定

4、层上边界距离页面（如果嵌套，则为父层）上边界的距离。宽：指定层的宽度。高：指定层的高度。Z轴：确定层的堆叠顺序。在浏览器中，编号较大的层出现在编号较小的层的前面。值可以为正，也可以为负。当更改层的堆叠顺序时，使用“AP元素”面板要比输入特定的Z轴值更为简便。可见性：层的显示状态，包括default、inherit、visible和hidden四个选项。背景图像：指定层的背景图像。单击文件夹图标可以浏览到一个图像文件并选择它。7.2.2改变层的堆叠顺序层的堆叠顺序就是层的显示顺序，我们可以通过在层属性检查器的“Z轴”文本框中输入层叠序号或者在AP元

5、素面板里改变“Z轴”的值，从而改变层的显示顺序。实例演示7.2.3设置层的可见性在网页制作中，有时候需要显示和隐藏文件，基本上这样的操作都是通过层来完成。设置层的可见性，主要是结合行为功能来控制层的显示和隐藏。实例演示7.3层与表格的转换虽然通过层定位网页元素很灵活，比表格方便很多，但是由于受到浏览器版本的限制，不是所有的浏览器都支持层，DreamweaverCS3提供了层和表格相互转换的功能。7.3.1将层转换为表格7.3.2将表格转换为层本章小结层相当于一个容器，可以包含所有在HTML文件中出现的元素，如文本、图像和Flash等，可以随意将层

6、拖到页面的任意位置，从而简单又精确地定位页面对象。