第7章 层的创建和使用

–可以任意调整层的大小、背景、叠放顺序等 –可以移动、隐藏、嵌套。 4、层的分类 常见的有css层和netscape层。
• css层：用标记<div>和<span>定位页面元素。其属性
由W3C组织定义，主要使用CSS样式来实现页面内容的定 位。兼容性好，被多数浏览器都支持。在插入div标签时， 可以先在样式面板中定义好标签的样式，再插入已定义 好的样式的div标签；也可以先插入div标签，再创建样 式，最后再应用该样式。
7.2.1层的概述 1、层的应用： 布局网页；制作简单动画(如网页上飘来飘去的浮动图 标) ；设计特效等(电子相册、显示与隐藏效果等)。 2、层的定义： 层是被分配了绝对位置的html页面元素，是div标签或 任何其他标签或其他任何可在html文档正文中放入的内容, 是一种新的网页元素定位技术。它的功能强大，可以创建 复杂的页面布局。 3、层的特点： –在层上可以放置很多可以放在网页上的内容（文本、 图片、表格、图像、层等，除了框架）； –层可以放在网页的任何位置，可以对网页元素精确定 位；
（4）两个数字：当拖动表格的右下角来调整表格的大小， 或者添加到单元格中的内容比该单元格的设置宽度大时， 会出现这种情况。如果出现两个数，则说明“设计”视图 中显示的可视宽度与 HTML 代码中指定的宽度不一致。
例如，如果您将某列的宽度设置为 200 像素，而添加的 内容将宽度延长为 250 像素，则该列的顶部将显示两个 数字：200（代码中指定的宽度）和 (250)（带括号，表 示该列呈现在屏幕上的可视宽度）。
• netscape层：使用netscape的〈layer 〉和
〈ilayer 〉标记来定位页面元素。只有netscape navigator浏览器支持，兼容性差。 注意：本章只将css层。
5、层的优点： • 可以像素为单位精确定位页面元素(图象、文字、多媒 体、表单、超级链接，但不可是框架)； • 可以将层放置在页面的任意位置，使用它可以使页面 布局的井然、美观，又能制作出重叠效果和运动效果。 • 当把页面元素放入层中时，还可以控制哪个显示在前 面、哪个显示在后面、哪个显示、哪个隐藏，层的出 现使网页从二维平面拓展到三维。
布局表格和布局单元格本质上还是表格和单元格，只是在 添加布局表格和布局单元格时dw自动添加了其它空白单元 格。
7.1.4设置布局表格和布局单元格的属性和参数 1.布局表格是使用布局模式的基础，进入布局模式首先要做 的就是要插入一个布局表格，然后设置尺寸、背景等属性， 另外布局表格还有个特有的属性——“自动伸展”也需要进 行设置。 2.设置布局单元格属性 在布局模式中，光有布局表格是不够的，布局表格内部不能 直接插入页面内容，必须先添加布局单元格，然后再在布局 单元格内部插入页面内容。 （1）设置布局单元格的位置（移动：单击该单元格的边 缘用鼠标拖放；设置背景、对齐方式；清除单元格高度： 选择属性检查器中的“清除行高”）。 （2）设置布局单元格内容的格式（调整大小：属性面板 或直接拖放 （3）为布局单元格添加间隔图像（需设置列自动伸展）
7、层面板 层面板是一个可视化管理层的工具。 执行【窗口】->【层】命令，即可 打开层面板， 如下图所示。 其中眼睛睁开和关闭表示层的显示和隐藏。 层 还有一个概念就是层数，层数决定了重叠时哪个 层在上面哪个层在下面。比如层数为2的层在层 数为1的层的上面。改变层数就可以改变层的重 叠顺序。 层面板中可以实现的操作有：可选择显示、隐 藏、防止层重叠。在Dreamweaver中使用层面板 使得对层的操作变得十分方便和简单。
7.1.6课堂实例――用布局表格布局网站主页 要设计一个精美的网页，先要规划好版式。网页中最常 用的版式类似于报刊，这种版式采用规范的、理性的分割 方法，把网页分成竖向通栏、双栏、三栏、四栏或横向的 通栏、双栏、三栏、四栏等。一般以竖向分栏为多，这种 版式给人以和谐、理性的美。几种分栏方式结合使用，既 理性、条理，又活泼而富有弹性。 1．绘制网页顶部布局 2．布局网页主体部分布局 3．绘制网页底部布局
6、层的缺点： • 目前只有4.0以上的高版本浏览器才支持层。 • 难以制作一个适应不同分辨率的网页。(当一个页 面使用了多个层后，页面的复杂程度增加而导致编 辑起来非常烦琐；编辑状态与浏览状态的实际效果 有相当明显的差别等。) 注意：考虑到兼容性和修改时的方便，一般可在编 辑或排版网页时采用层布局或者部分页面采用层布 局，而在发布网页时再将其转换为表格布局。
• 模式切换的操作方式：查看---表格模式----标准模式 /布局模式/表格扩展模式。 • 在不同模式下，工具栏的各个按钮作用不同。 • 注意：只有在“设计”视图中才可切换到“布局”模 式。在布局模式中不能像布局表格的空白区域插入内 容，只能创建布局单元格，布局单元格才是承载具体 内容的容器。 7.1.2.绘制布局表格 在“布局”模式下，选择插入>布局对象>布局表格（也 可使用布局插入栏完成），将显示为加号 (+) 的鼠标 指针放置在页上，然后拖动指针以创建布局表格。 Dreamweaver 自动创建布局表格时，该表格最初显示 为填满整个“设计”视图。布局表格外框为绿色。 按住ctrl键可以绘制多个布局表格。
8.设置布局表格属性 固定、自动伸展、调整大小 （最外面的布局表格只能调 整大小，不能移动，嵌套的表格可以移动）。 移动：通过单击表格顶部的标签选择一个表格后，用鼠标 拖放。也可以使用方向键移动。 9.表格的格式化，可以通过属性检查器完成；也可以通过设 计方案完成，操作方式是“命令——格式化表格”。 7.1.5添加内容 布局表格和布局单元格创建好后，在“布局”模式中可 以将文本、图像和其它内容添加到布局单元格中，就像在 “标准”模式中将内容添加到表格单元格一样。
单击要添加内容的单元格，然后键入文本或插入其它内 容。不能将内容插入至布局表格的空白（灰色）区域， 因此在可以将内容添加至表格前，必须先创建布局单元 格。 当添加宽度大于布局单元格的内容时，该单元格将自动 扩展。当单元格扩展时，该单元格所在的列也随之扩展， 这可能会改变周围单元格的大小。该列的列宽变为显示 代码中出现的宽度，后面的括号中是该列的可视宽度 （屏幕上显示的宽度）。
3.使用间隔图像： 间隔图像是不可见的、单像素的、透明 GIF图像，用于控 制自动伸展表格中的间距，以维持表格和单元格的宽度。 若不在自动伸展表格中使用间隔图像，则表格列的大小将 发生改变或消失（如果表格不包括内容）。若要将列的最 小宽度限制到某一特定值，可在该列中插入一个间隔图像。 单击列标题菜单，然后选择“添加间隔图像”（也可同法 “删除间隔图像 ）。 4.网格线：从任何新布局单元格的边缘向外延伸到包含该 单元格的布局表格的边缘，这些线可以方便将新单元格和 以前的单元格对齐，并显现基础 HTML 表格的结构。 Dreamweaver 网格已设置，并且这种网格不会根据单元格 的位置发生更改，因此可以用它来设计页面的布局。
7.1使用布局模式 7.1.1.模式简介及注意事项 在dw中使用表格有以下3种模式： •标准模式：具体内容添加和显示的模式。 •表格扩展模式：使用表格对页面进行布局的模式，也是 传统模式。 •布局模式：使用布局表格对页面进行布局的模式，可以 在添加内容前使用布局单元格和表格来对页面进行布局； 也可以在布局模式中将文本、图像和其他内容添加到布局 单元格中，这和在标准模式中一样。在布局模式下对页面 进行布局的关键是在网页中添加布局表格和布局单元格。
7.1.3.绘制布局单元格： （1）在“布局”模式下，选择插入>布局对象>布局 单元格（也可使用布局插入栏完成）， 按住ctrl键拖动可 以连续绘制多个布局单元格。与创建布局表格相同。 如果绘制单元格靠近包含它的布局表格的边缘，则单 元格的边缘也会与该表格的边缘自动靠齐。而布局单 元格外框为蓝色。可以绘制任意大小和位置的布局单 元格，而直接插入表格时就难以实现。 在布局单元格中可以插入除框架外的很多对象，普通 的表格或其它元素。 （2）若要更改布局单元格的标记色彩首选参数，选 择“编辑”>“首选参数” 从左侧的类别列表中选择 “标记色彩”，完成设置即可。
5.固定宽度列 ：具有特定的宽度值。 6.自动伸展列 ：就是表格可以按照屏幕比例来自动调整 宽度，相当于将表格的宽度定义为百分比；如果布局中包 括自动伸展列，则该布局会始终填充访问者浏览器窗口的 整个宽度。常见的布局是让页上包含主要内容的列自动伸 展，这会将所有其它列自动设置为固定宽度。例如，假设 您的布局在页的左边有一个较宽的图像，在右边有一列文 本。您可能将左边的列设置为固定宽度，让侧栏区域自动 伸展。 7.设置“布局”模式的首选参数，打开对话框首选参数， 然后从左侧的类别列表中选择“布局模式”。 在其中可以设置自动插入间隔图像 、单元格外框、单元 格高亮、表格外框、表格背景 。
2.在布局模式中查看表格与单元格宽度 布局表格和单元格的宽度会出现在该表格的顶部或底部。 宽度旁边是表格标题菜单与列标题菜单的箭头。使用 菜单可以快速访问一些常用命令。 有时可能不出现列宽；可能会看到以下任何一种情况： （1）无宽度：如果您未看到表格的宽度或列的宽度，则 说明没有在 HTML 代码中指定该表格或列的宽度。 （2）波浪线：出现波浪线表示这种列是置为自动伸展的 列。 （3）双线：包含间隔图像的列在列宽周围具有双线。该 列可能稍有移位，顶部或底部会显示双线以表明它包 含一个间隔图像。
布局表格不能添加 在布局单元格中
不能在原有内 容的右侧，添 加布局表格了
布局单元格只能添 加在布局表格中
可以在原有布局表格 的下方添加布局表格
布局表格不能互相 重叠，只能嵌套
绘制完布局表格后的代码：
<table width="250" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="250" height="197">&nbsp;</td> </tr> </table> <table width="70" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="70" height="146">&nbsp;</td> </tr> </table>