网页设计类之层的制作.docVIP

层 Dreamweaver中层的功能非常强大，在层里我们可以插入文本、表格、图像、动画等各种网页元素，使用层可以方便精确地控制页面元素的位置，与表格相比，它实现了真正意义上的所见即所得。 1、创建图层 图1 用图层来排版的网页 通过如下操作均可插入层： ● 将光标放置在文档窗口中需要插入层的位置，然后选择“插入”→“层”命令，在网页中会自动插入一个空的预先设置大小的层。 ● 选择“窗口”→“插入”，打开“插入”面板，在“布局”子面板上单击“描绘层”的图标，然后释放鼠标，鼠标将会变成一个小十字形状，拖动鼠标在页面中绘制一个矩形框，这就创建了一个层。 ● 拖动插入面板中“布局”子面板中的按钮到编辑页面中就可以插入一个层。 ● 如果需要画多个层，在单击“布局”面板上“描绘层”的图标时，按住Ctrl键，在文档窗口中画出一个层，只要不释放Ctrl键，就可以连续画多个层。 插入层后，会有一个层标志显示在文档窗口的左上方，如图2所示。如果没有看见层标志，则选择“查看”→“可视化助理”→“不可见元素”命令，即可在文档窗口的左上方显示层标志。 图2 在文档中插入一个层 单击层的边缘或层左上角的层把手，如图3所示，可以选取层，接着在属性面板中，可以对层的各项属性进行设置，如图4所示。 图3单击层的边缘或层左上角的层把手 图4图层的属性面板 “层编号”表示浮动图层名称，若要使用“行为”或其他程序来控制图层时，可在此输入图层的名字； 在“左”和“上”编辑框中，设置图层相对于页面或其父层左上角的位置； 在“宽”和“高”编辑框中，设置图层的宽度和高度； “Z轴”表示当图层重叠时，用以设置图层的前后排列顺序，数值越大图层的顺序越靠前； 在“显示”下拉列表中，设置图层的可见性。使用脚本语言可以控制图层的动态显示或隐藏。其中包含如下选项： default：不指明图层的可见性，但大多数浏览器都会继承该图层的父层的可见性。 inherit（继承）：可以继承其父层的可见性。 Visible：可以显示图层及其包含的内容，无论其父层是否可见。 Hidden：可以隐藏图层及其包含的内容，无论其父层是否可见。 在“背景图象”编辑框中，输入图层背景图像的名称和路径； 单击“背景颜色”按钮，设置图层的背景颜色； 在“标签”下拉列表框中选择用于创建图层的标记，以指定当前层是CSS层或者是Netscape层； 在“溢出”下拉列表框中，选择当图层中的内容超出图层尺寸时如何处理。包括如下选项： Visible：图层内容超出图层的范围时，可自动增加层尺寸。 Hidden：图层内容超出图层的范围时，保持图层尺寸不变，隐藏超出部分内容。 Scroll：图层内容无论是否超出图层的范围时，都自动增加滚动条。 Auto：图层内容超出层的范围时，自动增加滚动条（默认）。 在“剪辑”选项组的左、上、右、下编辑框中，分别设置图层的可视区域，它们分别表示可视区域与图层边界之间的像素值。 2、调整图层的尺寸及位置 用鼠标在图层中间点击一下，使光标显示在图层上，然后在图层上插入我们已经做好的图片，当图片插入图层内时，可根据图片的大小来调节图层的尺寸，如图5所示。 图5 调节层的尺寸 3、改变层的重叠顺序 要在层中插入文字，单击插入面板上的按钮，在主图的图层上拖拽出一个新的图层，把光标放在层内，输入文字“汽车飞驰”，并设置字体为新宋体、字号为7、字体颜色为#FFFFFF（白色），这时标题制作就完成了。按Enter键输入“卡通动画、电脑游戏”两个栏目名称，并设置字体和字号为默认值，字体颜色为白色，并且在栏目名称的前面插入两个图标，适当调整位置，将“页面属性”中的背景设置为“#999999”。 这时，网页基本样子已经显示出来，因为文字和图片图层是相互重叠的，所以最后还要设置一下图层的重叠顺序。在“层”属性中，“Z轴”值决定了层在浏览器中的排列顺序，按照实例主图图层应该在最下面一层，我们选中主图所在的图层，属性面板显示的即是这一图层的属性，在“Z轴”编辑框中填入1，用同样方法把其他二层分别设置成2、3，因为其他二层不存在重叠情况，所以设置值是可以在2、3中任选一个值填入即可。按F12键即可可浏览图1所示的页面了。 4、创建嵌套层 除了插入单个层，还可以插入嵌套层。嵌套层就是在一个层中的层。使用插入、拖动等方法可以创建嵌套层。嵌套的层随着父层移动并且继承父层的可见性。如果需要在网页中插入嵌套层，可执行以下操作之一： ● 直接创建嵌套层 首先通过以上介绍的方法在文档窗口中创建一个层，然后将光标放置在该层内，用同样的方法创建新的层。先创建的一个层称为父层，后在父层内创建的层称为子层。子层的标志在父层区域的左上方。选择“窗口”→“其他”→“层”命令，出现层管理面板，在该面板中也可以看出Layer2是L