Dreamweaver如何用div+CSS高效制作模板？-网站模板-锦华智联科技

核心概念：Div + CSS 布局

在开始之前,必须理解两个核心概念：

（图片来源网络，侵删）

HTML (骨架)：使用 <div> 标签来构建网页的“结构”或“骨架”。<div> 是一个容器，用来包裹页面上的不同部分，比如头部、导航、主内容区、侧边栏和页脚。
- <div id="header">...</div>: 通常是网站最顶部的部分，包含 Logo 和主导航。
- <div id="nav">...</div>: 导航菜单。
- <div id="main-content">...</div>: 页面主要内容。
- <div id="sidebar">...</div>: 侧边栏，常用于广告、相关链接等。
- <div id="footer">...</div>: 页脚,包含版权信息等。
CSS (样式)：使用 CSS (层叠样式表) 来为 HTML 骨架添加“样式”和“布局”，它定义了每个 <div> 的位置、颜色、大小、边距、边框等。
- 布局：通过 position, float, display (特别是 flexbox 和 grid) 等属性来控制 <div> 的排列方式。
- 美化：通过 color, background-color, font-family, margin, padding 等属性来控制外观。

教程：使用 Dreamweaver 创建一个两栏布局模板

我们将创建一个常见的“两栏固定宽度”布局，包含头部、导航、主内容区、侧边栏和页脚。

第一步：创建 HTML 文件和基本结构

打开 Dreamweaver：启动 Adobe Dreamweaver。
（图片来源网络，侵删）
新建文件：选择 文件 > 新建，在弹出的窗口中，选择 HTML，然后点击 创建。
设置文档类型：在代码视图的顶部，确保文档类型是 <!DOCTYPE html>，Dreamweaver 通常会自动设置好。

添加基本 HTML5 结构：在代码视图中，输入以下基本框架，这包括了 <html>, <head>, <body>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 Div CSS 模板</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>这里是网站的主要内容，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>



保存文件：将此 HTML 文件保存为 index.html。


第二步：创建 CSS 文件并定义样式


创建 CSS 文件：在 Dreamweaver 中，选择 文件 > 新建，这次选择 CSS，然后点击 创建，一个空白的 CSS 文件会出现。
（图片来源网络，侵删）


保存 CSS 文件：将此 CSS 文件保存为 style.css，确保它和 index.html 在同一个文件夹下。


编写 CSS 代码：在 style.css 文件中，输入以下代码，代码中包含了详细的注释,解释了每一部分的作用。
/* --- 全局样式 --- */
body {
    font-family: Arial, sans-serif; /* 设置默认字体 */
    margin: 0; /* 移除浏览器默认的边距 */
    background-color: #f4f4f4; /* 设置页面背景色 */
    color: #333; /* 设置默认文字颜色 */
}
/* --- 头部样式 --- */
#header {
    background-color: #333; /* 深色背景 */
    color: #fff; /* 白色文字 */
    text-align: center; /* 文字居中 */
    padding: 20px 0; /* 上下内边距 */
}
/* --- 导航菜单样式 --- */
#nav ul {
    margin: 0; /* 移除列表的默认外边距 */
    padding: 0; /* 移除列表的默认内边距 */
    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: none; /* 移除下划线 */
}
#nav li a:hover {
    background-color: #111; /* 鼠标悬停时变暗 */
}
/* --- 主容器和两栏布局 --- */
#container {
    width: 80%; /* 容器宽度为页面的80% */
    margin: 20px auto; /* 上下边距20px，左右自动实现居中 */
    overflow: hidden; /* 清除浮动，防止子元素撑开父容器 */
}
#main-content {
    width: 70%; /* 主内容区占容器的70% */
    float: left; /* 向左浮动 */
    padding: 20px;
    background-color: #fff; /* 白色背景 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 阴影效果 */
}
#sidebar {
    width: 25%; /* 侧边栏占容器的25% */
    float: right; /* 向右浮动 */
    padding: 20px;
    background-color: #fff; /* 白色背景 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 阴影效果 */
}
/* --- 页脚样式 --- */
#footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px; /* 与上方内容区产生间距 */
    clear: both; /* 清除所有浮动，确保页脚在所有内容下方 */
}


第三步：在 Dreamweaver 中预览和测试

打开 index.html 文件。
实时视图：Dreamweaver 的 实时视图 会根据你写的 HTML 和 CSS 代码即时渲染出网页效果,你可以在这里看到最终的布局和样式。
拆分视图：这是 Dreamweaver 的强大功能，你可以同时看到 代码 和 实时视图，当你修改代码时，右侧的视图会立即更新,这对于学习和调试非常有帮助。
浏览器预览：按 F12 键，可以在你电脑的默认浏览器中打开并预览网页,这是最终效果的检验标准。


现代布局方法：Flexbox 和 Grid
上面的例子使用了 float 布局，这是比较传统的方法，现代网页开发更推荐使用 Flexbox 和 Grid，因为它们更灵活、更强大,代码也更简洁。
使用 Flexbox 实现两栏布局
你只需要修改 #container 的 CSS 即可：
/* --- 主容器和两栏布局 (Flexbox 版本) --- */
#container {