第7章 网页制作高级功能.pptVIP

第7章 网页制作高级功能 本章要点 ·使用层定位页面 ·应用行为创建页面动态效果 ·使用时间轴创建动画 ·使用模板和库 7.1使用层 层又叫图层，它是一种HTML页面元素，它为用户提供了强大的定位页面的能力，与表格相比更加灵活，更加随心所欲。层是网页中的一个区域，一个网页中可以有多个层，而且可以相互重叠，可以定义层间的层次关系，还可以定义层的可见性，如果在网页中再配合使用脚本程序的话，还可以实现绚丽的网页动态效果。 在本节中，除了讲解有关层的基本知识外，如创建层、设置层属性等，还通过制作一个网页案例“科技咖啡馆”来具体说明在网页制作中使用层的操作。 7.1.1 层的基本知识 本小节将详细介绍有关创建层、设置层属性和将层转换为表格的基本知识。 1.创建层 在文档中创建层的具体操作步骤如下： 1）首先新建一个空白文档，然后将鼠标移到文档中要插入层的位置。 2）执行“插入”→“布局对象”→“层”命令，则向页面中添加了一个层。 3）选中层，线框周围出现8个黑色实心方块，左上角还有一个空心方块，这表示该层被选中了。 4）为了能看出层的特点，按照上面的操作再插入一个层。 5）选中刚插入的层，当鼠标光标变成四箭头时按鼠标左键并拖拽鼠标可以将层移到任何位置，如图7-1所示。 图7-1 移动层的位置 2.设置层属性 为层设置属性的具体操作步骤如下： 1）选择文档中名为Layer1的层，可以看到层的属性面板如图7-2所示。 图7-2 层的属性面板 2）在层的属性面板中可以设定很多参数，如在“层编号”输入框中可以为层重新命名；在“左”输入框中可以设定层左边界距离浏览器窗口左边界的距离；在“上”输入框中可以设定层的上边界距浏览器窗口上边界的距离；在“宽”和“高”输入框中可设定层的宽和高；在“Z”轴输入栏中可设定层的Z顺序号；在“溢出”下拉框中还可设置层内内容超过层的大小时的处理方式。还可以在“可见性”下拉框中选择层的可见性，还可设置如背景颜色、背景图片等属性。 提示：Z顺序是在层互相重叠时，Z顺序号大的层将遮盖住Z顺序号小的层。 “溢出”的处理方式有以下4种： ●visible：向下向右扩大层从而使层中的所有内容得以显示。 ● hidden：只显示层的大小所能显示的内容，超过层大小部分的内容将不能显示。 ● scroll：当内容超过层的大小所能显示时，并不改变层的大小，而是增加滚动条来显示所有内容。但选择这个选项之后，无论层是否够大，都会显示滚动条。 ● auto：只有在图层不够大时才显示滚动条。 在如图7-3所示的浏览器窗口中，分别采用了这4种溢出处理方式的图层及其内容，可以看到这4种处理方式的不同效果。 3）执行“窗口”→“层”命令，则在窗口右侧出现“层”面板，如图7-4所示。 　　 图7-3 不同溢出处理方式的效果 　　　　　 图7-4 “层”面板 4）在“层”面板中，单击层的名字可以对层的名字进行修改，也可以在这里修改层的顺序和显示隐藏属性。如果选中“防止重叠”复选框，还可以放置层重叠起来。 3.将层转换成表格 当调整好页面元素的位置后，可以将层转换为表格，以求网页有更好的兼容性。 因为表格单元格不能重叠，所以Dreamweaver无法从重叠的层创建表格。如果计划将层转换为表格，那么在绘制层时需使用“防止重叠”选项以限制层的移到和定位,避免出现重叠层的现象。 要将层转换为表格，具体操作步骤如下： 1）执行“修改”→“转换”→“层到表格”。 2）在出现的对话框中，选择所需的表格布局选项，如图7-5所示。 图7-5 设置层的转换选项 在“转换层为表格”对话框中的一些设置的意义如下： ●最精确：采用精确的转换方式，为每一个层建立一个单元格，并创建所有附加单元格，以保证单元格之间的距离。 ●最小：采用最小转换方式，去掉高度或宽度小于指定像素数目的空白单元格，即当某些层的位置比较接近时，会自动使他们对齐。 ●使用透明GIF：可以选择是否使用透明GIF图片。 ●置于页面中央：选中此选项，可以使转换后的表格居中对齐。 3）使用默认设置，单击【确定】按钮。层将立即被转换为表格，如图7-6所示。 图7-6a 转换前的层 　　　 图7-6b转换后的表格 有了将层转换为表格的功能，用户可以方便地使用层来定位页面，最后再转为成表格以适应不同的情况。还可以将表格转换为层，读者可以自己试着完成，这里就不再介绍。 7.2应用行为 7.2.1 了解行为 所谓“行为”，是指在某一网页对象上因为某一事件被触发而产生某一动作的综合描述。行为是Dreamweaver 8中重要的一个部分，通过行为