Dreamweaver 网站建设全攻略：从零到上线
本教程将分为以下几个核心部分：
（图片来源网络，侵删）
- 准备工作： 了解 Dreamweaver 并安装软件。
- 第一步：创建与管理站点 (最关键的一步)
- 第二步：理解界面与核心功能
- 第三步：构建网站结构 (HTML)
- 第四步：美化网站外观 (CSS)
- 第五步：添加交互与行为 (进阶)
- 第六步：上传与维护网站
- 总结与最佳实践
第一部分：准备工作
什么是 Dreamweaver？
Adobe Dreamweaver 是一款专业的网页设计和开发工具，它最大的特点是“可视化设计”与“代码编辑”的无缝结合,你可以：
- 可视化设计： 像使用 Word 或 PPT 一样，通过拖拽元素来布局网页,无需编写一行代码。
- 代码编辑： 提供强大的代码编辑器，支持 HTML、CSS、JavaScript 等多种语言的实时提示、高亮和格式化。
- 实时预览： 可以同时预览网站在不同设备（桌面、平板、手机）上的显示效果。
软件获取与安装
- 获取方式： Dreamweaver 是付费软件，你需要通过 Adobe 官网购买订阅（Creative Cloud）。
- 安装： 下载 Adobe Creative Cloud 应用，然后在应用中选择安装 Dreamweaver，安装过程比较简单,按提示操作即可。
第二步：创建与管理站点 (最关键的一步)
在开始任何设计之前，你必须先定义一个站点。 这就像你在建房子前要先划定土地范围一样，定义站点能让 Dreamweaver 管理你的所有文件，避免路径错误,方便后续上传。
操作步骤：
-
打开 Dreamweaver，点击顶部菜单栏的
站点->新建站点。 -
此时会弹出站点设置窗口，我们有两个选项卡：
站点和服务器，我们先配置站点。
（图片来源网络，侵删）- 站点名称： 给你的网站起一个名字，我的第一个网站”，这个名字只在 Dreamweaver 内部使用,不会显示在网站上。
- 本地站点文件夹： 点击文件夹图标，选择一个你电脑上的空文件夹，用于存放网站的所有文件。
D:\MyWebsite。强烈建议使用英文或拼音命名路径和文件夹，避免使用中文或空格。 - （可选）服务器： 如果你现在就想配置上传信息，可以点击
服务器选项卡，我们先跳过,等网站完成后再配置。
-
点击
保存。
恭喜！你已经成功创建了站点，Dreamweaver 的右侧会出现一个 文件 面板，这里会显示你刚刚创建的本地站点文件夹。
站点文件结构建议：
一个好的网站文件结构能让开发更清晰，在你的本地站点文件夹中,建议创建以下子文件夹：
images：存放所有图片 (.jpg,.png,.gif等)。css：存放所有样式表 (.css文件)。js：存放所有脚本 (.js文件)。index.html：网站的首页,通常放在根目录下。
第三步：理解界面与核心功能
Dreamweaver 的界面主要由几个面板组成：
（图片来源网络，侵删）
- 菜单栏： 包含所有命令。
- 插入栏： 提供快速插入 HTML 元素（如图片、表格、链接等）的按钮。
- 文档工具栏： 包含
代码、拆分、设计三种视图切换按钮，以及实时预览、文件管理等功能。 - 文档窗口： 这是你的主工作区,显示正在编辑的网页。
- 面板组： 位于右侧，包含：
文件：管理站点文件。插入：与插入栏功能类似。CSS 设计器：创建和管理 CSS 样式。属性检查器：在选中某个元素时，显示并允许你修改其属性（如图片的宽高、文字的颜色等）。
核心视图：
设计视图： 可视化编辑界面,所见即所得。代码视图： 纯代码编辑界面。拆分视图： 强烈推荐初学者使用！ 上半部分显示代码，下半部分显示设计效果，你可以在设计区修改，代码区会实时更新，反之亦然,是学习的最佳工具。
第四步：构建网站结构
现在我们来创建网站的首页 index.html。
- 在右侧的
文件面板中，右键点击你的站点根目录，选择新建文件，将其命名为index.html。 - 双击
index.html将其打开。
使用 HTML5 标签搭建骨架
-
切换到
拆分视图。 -
在代码区，你会看到默认的 HTML5 模板，如果为空，可以手动输入或通过
插入->HTML->结构化标签来插入。 -
我们来填充基本结构：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网站</title> <!-- 在这里我们将链接我们的CSS文件 --> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>欢迎来到我的网站</h1> <nav> <a href="#">首页</a> | <a href="#">关于我们</a> | <a href="#">联系方式</a> </nav> </header> <main> <section> <h2>网站简介</h2> <p>这是一个使用 Adobe Dreamweaver 构建的示例网站。</p> <img src="images/logo.png" alt="网站Logo"> </section> </main> <footer> <p>© 2025 我的第一个网站. 保留所有权利.</p> </footer> </body> </html>
解释：
<!DOCTYPE html>：声明这是一个 HTML5 文档。<head>：包含网页的元信息，如标题、字符编码、引入的 CSS/JS 文件等。<title>：显示在浏览器标签页上的标题。<link rel="stylesheet" href="css/style.css">：这是链接我们外部 CSS 样式表的关键代码，我们稍后会创建style.css。<body>：网页的可见内容都写在这里。<header>,<nav>,<main>,<section>,<footer>：这些是 HTML5 的语义化标签，能让网页结构更清晰,对搜索引擎更友好。
- 添加图片： 在
设计视图中，将光标放在<img>标签的位置，然后在插入栏 ->图像中选择一张你准备好的图片，或者直接拖拽图片到设计区，Dreamweaver 会自动生成<img>- 编辑文本： 直接在设计区输入或修改文本即可。
第五步：美化网站外观
现在我们的网站结构有了，但看起来很朴素，接下来用 CSS 来美化它。
- 在右侧的
文件面板中，右键点击css文件夹，选择新建文件，将其命名为style.css。 - 打开
style.css文件,开始编写样式。
使用 CSS 设计器面板
这是 Dreamweaver 的核心功能之一，可以让你在不写代码的情况下创建 CSS。
- 返回到你的
index.html文件。 - 在右侧面板中找到并打开
CSS 设计器。 - 创建源： 在
CSS 设计器面板中，点击 号，选择创建新的 CSS 文件，给它起个名字（main-style），选择附加到->index.html，Dreamweaver 会自动在index.html的<head>部分生成我们之前写的<link>- 创建选择器和规则：
- 在
CSS 设计器的选择器部分，点击 号，输入body，然后按回车，这会为<body>标签创建样式。 - 在下方的
属性区域，你可以设置：背景：点击颜色块,设置一个背景色。文本：设置默认的字体、颜色、大小。
- 再次点击 号，创建
header选择器，设置背景色、内边距等。 - 用同样的方法为
h1,p,nav,img等元素添加样式。
- 创建选择器和规则：
示例 style.css 代码：
/* 全局样式 */
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
margin: 0;
background-color: #f4f4f4;
color: #333;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
header h1 {
margin: 0;
}
header nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
区样式 */
main {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 图片样式 */
img {
max-width: 100%;
height: auto;
display: block;
margin: 1rem auto;
}
/* 页脚样式 */
footer {
text-align: center;
padding: 1rem;
margin-top: 2rem;
background-color: #333;
color: #fff;
}
通过 CSS 设计器 或直接在 代码 视图中编辑 style.css,你可以实时看到网页的变化。
第六步：添加交互与行为 (进阶)
Dreamweaver 提供了一些内置的“行为”（Behaviors）来添加简单的交互，比如图片轮播、弹出菜单等，但这些功能相对老旧，现代 Web 开发更多使用 JavaScript 框架（如 jQuery, React）。
对于初学者，可以先了解一个简单的交互：鼠标悬停效果。
这可以通过 CSS 的 hover 伪类轻松实现，无需 Dreamweaver 的行为面板。
示例：让链接在鼠标悬停时变色。
在 style.css 中添加：
header nav a:hover {
color: #ff9900; /* 悬停时变为橙色 */
text-decoration: underline;
}
保存后，将鼠标移到导航链接上,你就会看到效果。
第七步：上传与维护网站
网站完成后，你需要将它上传到服务器（虚拟主机）上,让其他人可以访问。
-
配置服务器：
- 打开
站点->管理站点，选择你的站点，点击编辑。 - 切换到
服务器选项卡，点击 号添加新服务器。 - 服务器名称： 给服务器起个名，如“我的虚拟主机”。
- 连接方法： 通常选择
FTP，如果你的主机支持 SFTP，优先选择 SFTP（更安全）。 - FTP 地址： 你的 FTP 服务器地址（由你的主机提供商提供）。
- 用户名/密码： 你的 FTP 账号和密码。
- 根目录： 你上传文件后，在服务器上的存放路径（通常是
/public_html,/www或/htdocs，具体问主机商）。 - 保存。
- 打开
-
上传文件：
- 在
文件面板中，确保你已连接到服务器（点击右上角的连接按钮）。 - 你会看到左侧是本地文件，右侧是远程服务器文件。
- 选中左侧本地站点中的所有文件和文件夹，然后点击
上传文件按钮（一个向上的箭头）。 - 等待上传完成,你的网站就正式上线了！
- 在
第八步：总结与最佳实践
- 始终先定义站点： 这是 Dreamweaver 工作流程的基石。
- 善用“拆分”视图： 对于初学者，这是学习和理解 HTML/CSS 关系的最佳方式。
- 语义化 HTML： 使用
<header>,<article>,<section>等标签,让代码更规范。 - 外部化 CSS 和 JS： 将样式和脚本分别放在
.css和.js文件中，并通过<link>和<script>标签引入，这是现代 Web 开发的标准做法。 - 响应式设计： Dreamweaver 的
实时视图和媒体查询功能可以帮助你轻松创建适配不同屏幕尺寸的响应式网站。 - 不要完全依赖可视化： 可视化编辑器有时会生成冗余或不符合标准的代码，了解基本的 HTML 和 CSS 知识至关重要,它能让你在遇到问题时快速定位和解决。
Dreamweaver 是一个功能强大的工具，它能极大地提高网页开发的效率，希望这份教程能帮助你顺利开启网站建设之旅！祝你成功！
