Dreamweaver div教程怎么学？新手必看步骤？-建站教程-锦华智联科技

Dreamweaver DIV + CSS 布局入门教程

本教程将教你如何使用 Adobe Dreamweaver 的可视化工具和代码编辑器来创建一个基于 DIV 和 CSS 的现代网页布局，你将理解 DIV 作为“容器”和 CSS 作为“样式”的核心理念。

（图片来源网络，侵删）

第一部分：核心概念理解

在开始操作前,我们必须先明白两个基本概念：

HTML (骨架 - DIV):
- DIV 是一个 HTML 标签，全称是 "Division"（分区）。
- 你可以把 DIV 想象成一个没有样式的、空的盒子，它本身只负责在页面上划分一个区域，用来包裹你的内容（如文字、图片、链接等）。
- 关键：一个网页的整体布局，就是由多个不同的 DIV 盒子组合、排列而成的。
CSS (外衣 - 样式):
- CSS (Cascading Style Sheets) 层叠样式表,是一套用来控制网页外观的规则。
- 它负责告诉每个 DIV 盒子应该长什么样：多宽、多高、什么颜色、距离其他盒子多远、是否浮动等等。
- 关键：我们通过 CSS 来精确控制 DIV 的位置和样式,从而实现我们想要的页面布局。

用 DIV 搭建网页的“骨架结构”，用 CSS 给这个骨架穿上“漂亮的衣服”。

（图片来源网络，侵删）

第二部分：准备工作

安装 Dreamweaver: 确保你已经安装了 Adobe Dreamweaver（本教程适用于 CC 2025 及以上版本，但核心步骤在旧版本中也基本通用）。
新建站点: 这是 Dreamweaver 的最佳实践。
- 打开 Dreamweaver，选择 站点 -> 新建站点。
- 在“站点”选项卡中，为你的站点起一个名字（"MyFirstSite"）。
- 在“本地站点文件夹”中，选择一个你电脑上的空文件夹,用来存放所有网站文件。
- 点击“保存”,这一步能让你更好地管理文件和链接。

第三部分：实战演练 - 创建一个两栏布局网页

我们将创建一个包含“头部”、“导航”、“主内容区”、“侧边栏”和“页脚”的经典布局。

最终效果预览：

步骤 1：创建基本 HTML 结构

在 Dreamweaver 中，选择 文件 -> 新建，然后在“新建文档”对话框中，确保选择了“HTML”类型，并勾选“创建响应式布局”（可选，但推荐），点击“创建”。
Dreamweaver 会为你生成一个基础的 HTML5 文档结构，我们现在需要在这个基础上添加我们的 DIV 容器。
在 <body> 和 </body> 标签之间，输入以下代码，Dreamweaver 的代码提示功能会帮助你。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的 DIV 布局网页</title>
    <!-- 我们将在下一步创建并链接这个 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="header">
        <h1>我的网站头部</h1>
    </div>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">产品服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
    <div id="container">
        <div id="main-content">
            <h2>这里是主内容区</h2>
            <p>这里是网站的主要内容，比如文章、产品介绍等，它通常是页面上最重要的部分。</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
        </div>
        <div id="sidebar">
            <h3>侧边栏</h3>
            <p>这里是侧边栏，通常用于放置广告、相关链接、分类等次要信息。</p>
        </div>
    </div>
    <div id="footer">
        <p>&copy; 2025 我的网站. 版权所有.</p>
    </div>
</body>
</html>

代码解释：

我们为每个主要区域创建了一个 div。
使用 id (如 id="header") 来给每个 DIV 一个唯一的名字，这样我们就可以在 CSS 中精确地控制它。
我们还创建了一个外部的 CSS 文件 style.css，并在 <head> 中用 <link> 标签把它链接了进来。

步骤 2：创建并编写 CSS 样式

在 Dreamweaver 的“文件”面板中（通常在右侧），右键点击你的站点根目录，选择 新建文件，将其命名为 style.css。
双击打开 style.css 文件，开始编写样式，我们将使用 Dreamweaver 的“CSS 设计器”面板,它非常直观。

使用 CSS 设计器（推荐新手）

（图片来源网络，侵删）

在 Dreamweaver 中，确保 style.css 文件处于激活状态。
打开右侧的 CSS 设计器 面板（如果没有，通过 窗口 -> CSS 设计器 打开）。
设置全局重置：在 style.css 中输入以下代码,可以消除不同浏览器默认的样式差异。
```
/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```
设置页面容器：
- 在 CSS 设计器 面板中，点击 源 旁边的号，选择 附加现有的 CSS 文件，确保 style.css 已被附加。
- 点击 选择器 区域的号，输入 #container。
- 在 属性 区域，找到 布局 分类。
- 设置 宽度 为 90%（或固定值如 1200px），边距 设置为 auto（这样 container 会水平居中）。
- 勾选 溢出 为 visible。
创建两栏布局（最关键的一步）：
- 我们将使用 Flexbox（弹性盒子）来实现，这是目前最流行、最简单的布局方式。
- 在 #container 的选择器下,添加以下属性：
```
#container {
    width: 90%;
    margin: 20px auto; /* 上下边距20px，左右自动居中 */
    overflow: visible; /* 或者使用 display: flex; */
    /* --- 关键 Flexbox 代码 --- */
    display: flex; /* 将 container 变为一个 flex 容器 */
    justify-content: space-between; /* 主轴（水平）上的项目对齐方式：两端对齐 */
}
```
- 现在创建 #main-content 的样式：
  - 新建选择器 #main-content。
  - 在 布局 属性中，设置 宽度 为 70%。
  - 勾选 Flex 下的 flex-grow 为 1,这会让主内容区占据所有剩余空间。
- 接着创建 #sidebar 的样式：
  - 新建选择器 #sidebar。
  - 在 布局 属性中，设置 宽度 为 25%。
  - 勾选 Flex 下的 flex-grow 为 0,这确保它不会拉伸。

为其他区域添加样式：

#header: 设置一个背景色、内边距和文本居中。

#header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}

#nav: 设置背景色，并让列表项水平排列。

#nav ul {
    list-style-type: none; /* 去掉列表前的点 */
    background-color: #444;
    overflow: hidden; /* 清除浮动 */
}
#nav li {
    float: left; /* 让列表项水平浮动 */
}
#nav li a {
    display: block; /* 让链接可以设置宽高和内边距 */
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: