Dreamweaver层教程，如何快速掌握层操作技巧？-建站教程-锦华智联科技

第一部分：什么是“层”？

在 Dreamweaver 中，“层”（Layer）本质上是一个可以放置在网页上的、独立于普通文档流（文本从上到下排列）的容器，你可以把它想象成一个透明的盒子，你可以把它放在页面的任何位置，并且可以在里面放置文本、图片、表格等各种内容。

（图片来源网络，侵删）

“层”的核心特点：

绝对定位：层的位置是相对于其最近的“定位”父元素（如果没有，则相对于浏览器窗口）来确定的，而不是像普通元素那样跟在前一个元素的后面。
可重叠：多个层可以相互重叠，就像堆叠的透明纸张一样。
可移动：你可以通过拖动来改变层在页面上的位置。
可见性可控：可以轻松地显示或隐藏层及其内容。

第二部分：为什么“层”现在很少使用了？

尽管层在可视化布局上很方便,但它存在一些严重的问题，导致它被现代的 CSS 定位技术所淘汰。

“层”的缺点：

浏览器兼容性问题：早期的浏览器（如 Netscape 4）对层的支持非常糟糕，导致在不同浏览器中显示效果不一致，是“网页设计师的噩梦”。
代码混乱：Dreamweaver 早期生成的层代码（使用 <layer> 或 <div> 标签）并不标准，难以维护。
对搜索引擎不友好被定位在页面的任意位置，搜索引擎的爬虫可能无法正确地抓取和索引层内的内容。
响应式设计困难：层的固定位置在当今需要适应不同屏幕尺寸的响应式网页设计中几乎无法使用。

现代替代方案：CSS 定位

（图片来源网络，侵删）

现代网页开发使用 CSS 的 position 属性来实现与层相同甚至更强大的功能，主要包括：

position: absolute; (绝对定位)：功能上最接近“层”，元素相对于其最近的 position 不为 static 的父元素定位。
position: fixed; (固定定位)：元素相对于浏览器窗口定位，滚动页面时位置不变。
position: relative; (相对定位)：元素相对于其正常位置进行偏移。
position: sticky; (粘性定位)：结合了 relative 和 fixed 的特性。

第三部分：Dreamweaver 中的“层”操作教程

尽管“层”已过时，但我们还是可以在 Dreamweaver 中学习和操作它，以理解其工作原理。

前提条件

安装了 Adobe Dreamweaver 软件。
创建一个新的 HTML 文件。

步骤 1：插入层

打开 Dreamweaver，创建一个新的 HTML 文件（文件 > 新建 > HTML）。
将光标放在你想要插入层的位置。
（图片来源网络，侵删）
在顶部菜单栏中,选择 插入 > 布局对象 > AP Div。
- AP 是 "Absolute Positioning"（绝对定位）的缩写，这就是 Dreamweaver 对“层”的称呼。
点击后,页面上会出现一个带有边框和手柄的矩形框，这就是一个层，Dreamweaver 默认会为它设置一个 ID，如 apDiv1。

步骤 2：在层中添加内容

层就像一个普通的容器,你可以在里面添加任何网页元素。

单击你刚刚创建的层内部。
直接输入文字,或者通过 插入 菜单插入图片、表格等。
你可以像编辑普通页面内容一样编辑层内的内容。

步骤 3：选择和移动层

选择层：
- 将鼠标移动到层的边框上,当光标变成一个四向箭头时，单击即可选中整个层，选中后，层左上角会出现一个“拖动手柄”。
- 在 AP 元素 面板（窗口 > AP 元素）中，点击层的名称也可以选中它。
移动层：
- 拖动法：将鼠标悬停在层的 拖动手柄 上，按住鼠标左键不放，拖动层到你想要的位置。
- 精确控制法：选中层后，在 属性检查器（窗口 > 属性）中，你可以精确地设置层的左和上的坐标值，单位通常是像素。

步骤 4：调整层的大小

选中层。
将鼠标移动到层的边缘或角上,光标会变成双向箭头。
按住鼠标左键并拖动,即可调整层的大小。

步骤 5：设置层的属性

选中层。
打开 属性检查器，你会看到层的各种属性。

CSS-P 元素：层的 ID，apDiv1，每个层的 ID 必须是唯一的。
左 / 上：层距离其定位父元素（通常是浏览器窗口）左侧和顶部的距离。
宽 / 高：层的宽度和高度。
Z轴：层的堆叠顺序，数值越大，层就越在上面，将 apDiv1 的 Z 轴设为 1，apDiv2 的 Z 轴设为 2，apDiv2 会覆盖在 apDiv1 的上面。
可见性：控制层是否可见，有三个选项：
- default：默认。
- inherit：继承父层的可见性。
- visible：可见。
- hidden：隐藏。
背景图像：为层设置一个背景图片。
背景颜色：为层设置一个背景颜色。
类：可以应用一个 CSS 样式类到层上。
溢出：当层内的内容超出层的大小时如何处理，这是非常重要的一个属性：
- visible：扩展层的大小以显示所有内容（可能会撑破页面布局）。
- hidden：隐藏超出部分。
- scroll是否超出，都显示滚动条。
- auto超出时显示滚动条（推荐使用）。

步骤 6：使用“AP 元素”面板管理层

窗口 > AP 元素 打开的面板是管理层的核心工具。

显示/隐藏：点击眼睛图标可以快速切换所有层的可见性，点击单个层名称前的眼睛图标，可以单独控制该层的可见性。
调整堆叠顺序：直接拖动层的名称上下移动，可以改变其 Z 轴顺序。
防止重叠：勾选“防止重叠”选项后，在拖动层时，Dreamweaver 会阻止你将它拖到其他层的内部或上方，有助于保持布局整洁。

第四部分：从“层”到现代 CSS 的过渡

为了让你更好地理解,我们来做一个对比，看看 Dreamweaver 的层是如何转化为现代 CSS 的。

假设你在 Dreamweaver 中创建了一个层，并设置了以下属性：

ID: my-layer
左: 50px
上: 100px
宽: 300px
高: 200px
背景颜色: #CCCCCC
可见性: visible
Z轴: 10

在 Dreamweaver 的“代码”视图中，它可能会生成这样的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
    position: absolute;
    left: 50px;
    top: 100px;
    width: 300px;
    height: 200px;
    z-index: 1;
    background-color: #CCCCCC;
    visibility: visible;
}
-->
</style>
</head>
<body>
<div id="apDiv1"></div>
</body>
</html>

现代、标准的写法应该是这样的：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">现代布局示例</title>
<style>
  /* 内部样式表 */
  #my-layer {
    position: absolute;  /* 关键：使用绝对定位 */
    left: 50px;         /* 距离父元素左侧 50px */
    top: 100px;         /* 距离父元素顶部 100px */
    width: 300px;
    height: 200px;
    background-color: #CCCCCC;
    /* Z轴在现代CSS中用 z-index 表示 */
    z-index: 10;        
  }
</style>
</head>
<body>
  <!-- 层在HTML中就是一个普通的 div 元素 -->
  <div id="my-layer">
    <p>这里是层的内容。</p>
  </div>
</body>
</html>

核心区别：

语义化：现代代码使用 <div> 标签，div 是 "division"（分区）的缩写，语义更清晰。
代码分离：现代开发推崇 HTML (结构) 和 CSS (表现) 分离，上面的例子虽然写在一起，但很容易将 <style> 部分移到一个单独的 .css 文件中。
标准：现代代码遵循 W3C 标准，兼容性更好，更易于维护。

Dreamweaver 的“层” 是一个强大的可视化布局工具，让你可以像在 Photoshop 中拖动图层一样来设计网页。
它的缺点 是兼容性差、代码不标准、不利于 SEO 和响应式设计，在现代网页开发中已不再使用。
它的精神遗产 被 CSS 的 position 属性继承和发展，理解“层”的工作原理，有助于你更好地理解 CSS 绝对定位和固定定位的概念。
学习建议：在 Dreamweaver 中玩一玩“层”作为概念学习，但在实际项目中，请务必学习并使用 CSS Flexbox 和 CSS Grid 来进行现代、灵活的布局。