Dreamweaver CSS 教程：从入门到实践

前言：为什么在 Dreamweaver 中使用 CSS？

Adobe Dreamweaver 是一个功能强大的“所见即所得”（WYSIWYG）网页编辑器，它最大的优势在于“代码视图”和“实时视图”的无缝切换：

dreamweavercss教程
（图片来源网络，侵删）
  • 可视化操作：对于初学者，可以在“实时视图”中直接点击元素，然后在“CSS 设计器”中直观地修改样式,无需记忆大量代码。
  • 代码提示：在“代码视图”中，Dreamweaver 会提供智能的 CSS 属性和值提示,提高编码效率。
  • 快速学习：通过可视化操作，你可以快速看到 CSS 的效果，从而更好地理解 CSS 的工作原理。

第一部分：准备工作与界面概览

在开始之前，请确保你已经安装了 Adobe Dreamweaver 并创建了一个新站点。

创建站点 (强烈推荐)

创建站点可以管理所有网页文件和资源,是专业工作的第一步。

  1. 打开 Dreamweaver，选择 站点 > 新建站点。
  2. 在弹出的窗口中，为你的站点命名（"My CSS Project"）。
  3. 选择 本地站点文件夹，点击文件夹图标,选择一个你电脑上的空文件夹来存放项目文件。
  4. 点击 保存,站点创建完成。

熟悉 Dreamweaver 的 CSS 相关面板

在 窗口 菜单中,确保以下面板是打开的：

  • CSS 设计器：这是你进行 CSS 样式设计的核心面板。
  • 属性检查器：当选中页面上的一个元素时，这里会显示其最常用的 HTML 属性和 CSS 样式。
  • 文件：用于管理站点中的所有文件。

第二部分：CSS 的三种应用方式

CSS 可以通过三种方式应用到 HTML 元素上，我们将逐一学习如何在 Dreamweaver 中实现它们。

dreamweavercss教程
（图片来源网络，侵删）

内联样式

直接在 HTML 标签的 style 属性中写 CSS。

操作步骤：

  1. 在 Dreamweaver 中创建一个新 HTML 文件 (文件 > 新建 > HTML)。
  2. 在“实时视图”或“代码视图”中，将光标定位在一个 <p> 标签内。
  3. 切换到“代码视图”，将光标放在 <p> 标签内，然后输入 style=""。
  4. 在引号内输入 CSS 代码。

示例代码：

<p style="color: blue; font-size: 20px;">这段文字是蓝色的，并且字体大小为20像素。</p>

特点：简单直接，但只对当前元素有效，不推荐大量使用，因为会破坏 HTML 结构与 CSS 样式的分离。

dreamweavercss教程
（图片来源网络，侵删）

内部样式表

在 HTML 文件的 <head> 部分创建一个 <style> 标签，所有 CSS 规则都写在这里。

操作步骤：

  1. 在“代码视图”中，找到 <head> 和 </head>
  2. 在它们之间添加 <style type="text/css"> 和 </style>。
  3. 在 <style> 标签内编写你的 CSS 规则。

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">内部样式表示例</title>
    <style type="text/css">
        h1 {
            color: red;
            text-align: center;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <p class="highlight">这个段落有黄色背景。</p>
</body>
</html>

特点：样式只对当前页面有效,适用于单页面的样式控制。

外部样式表 (推荐)

创建一个独立的 .css 文件，然后在 HTML 文件中通过 <link> 标签引入它，这是最专业、最常用的方法。

操作步骤：

  1. 创建 CSS 文件：

    • 在“文件”面板中,右键点击你的站点根目录。
    • 选择 新建 > CSS 文件，命名为 style.css。

  2. 在 HTML 文件中引入 CSS：

    • 打开你的 HTML 文件，切换到“代码视图”。
    • 在 <head> 标签内，添加 <link rel="stylesheet" href="style.css">。
    • href 属性的值是你的 CSS 文件相对于 HTML 文件的位置。

示例代码 (HTML):

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">外部样式表示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <p class="highlight">这个段落有黄色背景。</p>
</body>
</html>

示例代码 (style.css):

h1 {
    color: red;
    text-align: center;
}
.highlight {
    background-color: yellow;
}

特点：实现了内容与表现的完全分离，便于维护和复用，一个 CSS 文件可以控制网站所有页面的样式。

第三部分：使用“CSS 设计器”进行可视化设计

这是 Dreamweaver 的核心功能，我们将以“外部样式表”为例，学习如何通过可视化界面修改 CSS。

场景：你已经有了上面的 HTML 和 style.css 文件。

操作步骤：

  1. 打开 CSS 设计器：如果没打开，请在 窗口 > CSS 设计器 中勾选它。

  2. 选择要修改的元素：

    • 在“实时视图”中，用鼠标点击页面上的 <h1>

  3. 在 CSS 设计器中进行修改：

    • 当你选中 <h1> 后，CSS 设计器的“源”区域会自动创建一个 <h1> 的选择器（如果不存在的话）。
    • 在“属性”区域，你会看到各种 CSS 分类，如 类型、背景、区块、边框 等。
    • 修改颜色：展开 类型，找到 color 选项，点击色块，选择一个你喜欢的颜色，你会看到代码视图中的 CSS 代码也同步更新了。
    • 添加背景：展开 背景，找到 background-color，同样点击色块为 <h1> 添加一个背景色。
    • 修改边框：展开 边框，在 border 下，你可以设置边框的宽度、样式和颜色。

  4. 为新元素添加类：

    • 选中你想要添加样式的 <p>
    • 在 CSS 设计器的“源”区域，点击 号，选择 类。
    • 给类起一个名字，my-paragraph。
    • 现在你可以在这个新创建的 .my-paragraph 规则中定义任何样式。
    • 回到 HTML 代码中，给对应的 <p> 标签添加 class="my-paragraph" 属性。

优点：无需手动编写代码，通过点击和选择即可完成样式定义,非常适合初学者和快速原型设计。

第四部分：CSS 选择器详解

选择器是 CSS 的核心,它告诉浏览器哪些元素需要应用样式。

选择器类型 示例 描述 Dreamweaver 中的使用
元素选择器 p { } 选择所有 <p> 在 CSS 设计器中选中一个 <p> 元素，会自动生成。
类选择器 .highlight { } 选择所有 class="highlight" 的元素。 在 CSS 设计器中，点击 号选择 类 来创建。
ID 选择器 #header { } 选择 id="header" 的唯一元素。 在 CSS 设计器中，点击 号选择 ID 来创建。
后代选择器 div p { } 选择 <div> 标签内部的所有 <p> 主要在代码视图中手动编写。
伪类选择器 a:hover { } 选择鼠标悬停时的 <a> 链接。 在 CSS 设计器的 hover 等状态中设置。

第五部分：实战案例 - 制作一个简单的网页布局

让我们来制作一个包含“头部”、“导航”、“内容区”和“页脚”的经典网页布局。

  1. HTML 结构： 在你的 HTML 文件中,创建如下结构：

    <body>
    <header id="header">
        <h1>我的网站</h1>
    </header>
    <nav id="navigation">
        <a href="#">首页</a> | <a href="#">lt;/a> | <a href="#">联系</a>
    </nav>
    <main id="content">
        <h2>欢迎</h2>
        <p>这里是主要内容区域。</p>
    </main>
    <footer id="footer">
        <p>&copy; 2025 我的网站，保留所有权利。</p>
    </footer>
</body>

  2. CSS 样式： 打开 style.css 文件，使用 CSS 设计器或手动编写以下代码：

    /* 全局重置和基础样式 */
body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
/* 头部样式 */
#header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px;
}
/* 导航样式 */
#navigation {
    background-color: #444;
    padding: 10px;
    text-align: center;
}
#navigation a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
}
#navigation a:hover {
    text-decoration: underline;
}
/* 内容区样式 */
#content {
    padding: 20px;
    max-width: 800px;
    margin: 20px auto;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 页脚样式 */
#footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

  3. 在 Dreamweaver 中操作：

    • 选中 <header>，在 CSS 设计器中设置其背景色、文字颜色和内边距。
    • 选中 <nav>,同样设置背景色和内边距。
    • 选中 <nav> 中的 <a> 标签，设置其颜色、外边距和文本修饰。
    • 在 CSS 设计器中找到 hover 伪类，为 <a> 标签添加 text-decoration: underline;。
    • 选中 <main> 和 <footer>,分别设置它们的样式。

通过这个案例，你将学会如何为不同的页面区块应用样式，并理解盒模型（margin, padding, border）在实际布局中的作用。

第六部分：进阶技巧与最佳实践

  1. 使用 CSS 预处理器 (如 Sass/SCSS)： Dreamweaver 内置了对 Sass/SCSS 的支持，你可以在 CSS 设计器中创建 .scss 文件，它会自动编译成 .css 文件，这让你可以使用变量、嵌套规则等更强大的功能。

  2. 媒体查询 - 响应式设计的开始： 在 CSS 设计器的“媒体查询”部分，你可以轻松为不同屏幕尺寸（如平板、手机）添加不同的样式规则,这是实现响应式网页的关键。

  3. “实时视图”和“代码视图”的联动：

    • 在“实时视图”中右键点击一个元素，选择 检查，可以快速定位到其对应的 HTML 和 CSS 代码。
    • 在“代码视图”中修改 CSS 后，切换到“实时视图”或按下 F12 即可预览效果。

  4. 使用 CSS 代码提示和自动补全： 在“代码视图”中输入 c，Dreamweaver 会提示 color；输入 b，会提示 background, border, box-shadow 等,善用这个功能可以大大提高编码速度和准确性。

Dreamweaver 是一个优秀的 CSS 学习和开发工具，它通过可视化界面降低了 CSS 的入门门槛,同时保留了强大的代码编辑功能。

学习路径建议：

  1. 从可视化开始：先用 CSS 设计器尝试修改一些简单元素的样式,建立直观感受。
  2. 过渡到代码：在熟悉了 CSS 属性后，逐渐转向在代码视图中手动编写，因为这是更高效、更灵活的方式。
  3. 掌握核心概念：深入理解选择器、盒模型、定位和浮动等核心概念。
  4. 学习响应式设计：掌握媒体查询,让你的网页在不同设备上都能良好显示。

希望这份教程能帮助你顺利开启在 Dreamweaver 中使用 CSS 的旅程！祝你学习愉快！