第一部分：准备工作与心态调整
在开始之前,你需要明确以下几点：
（图片来源网络，侵删）
-
Dreamweaver 的版本：
- Creative Cloud (CC) 版本：这是目前的主流版本，功能强大，订阅制，如果你是新手，推荐使用此版本。
- CS6 或更早版本：功能相对陈旧，可能不支持最新的 Web 标准（如 HTML5, CSS3），不推荐新用户使用。
-
核心技能：Dreamweaver 是一个“所见即所得”的编辑器，但它最大的价值在于它能让你同时可视化编辑和直接编写代码，你需要具备一些基础：
- HTML (超文本标记语言)：网站的骨架，定义了内容的结构（如标题、段落、图片、链接）。
- CSS (层叠样式表)：网站的样式，负责网站的视觉表现（如颜色、字体、布局、间距）。
- (可选) JavaScript：为网站添加交互功能（如轮播图、表单验证），个人网站初期可以先不涉及。
-
心态：不要指望 Dreamweaver 能帮你一键生成一个完美的网站，它更像一个高级的“代码编辑器 + 可视化工具”，网站的质量最终取决于你的设计构思、代码逻辑和耐心。
第二部分：网站建设全流程
规划与设计
在打开 Dreamweaver 之前，先在纸上或思维导图软件里规划好你的网站。
（图片来源网络，侵删）
-
网站结构：确定你的网站需要哪些页面。
- 首页：个人简介、作品集展示、最新动态等。
- 关于我：更详细的个人介绍、经历、技能等。
- 作品集/博客：展示你的项目、文章或照片。
- 联系方式：你的邮箱、社交媒体链接等。
-
视觉设计：思考网站的“长相”。
- 配色方案：选择 2-3 种主色和 1-2 种辅助色。
- 字体：选择易读的标题字体和正文字体。
- 布局：大致规划好每个页面的布局（如导航栏在顶部，内容居中，页脚在底部）。
创建本地站点
这是在 Dreamweaver 中工作的最关键一步，创建本地站点意味着告诉 Dreamweaver 你的网站文件存放在哪里，并为其建立一个管理环境。
- 打开 Dreamweaver，点击菜单栏的
站点->新建站点。 - 在弹出的窗口中,你可以选择
基本（向导式）或高级（专业设置）选项，对于新手，基本模式更友好。 - 填写站点信息：
- 站点名称：给你的站点起个名字，我的个人网站”，这个名字只会在 Dreamweaver 内部显示。
- 本地站点文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为网站的根目录。所有网站文件（HTML、图片、CSS等）都必须放在这个文件夹及其子文件夹中。 你可以创建一个名为
my-website的文件夹。
- 点击
完成，Dreamweaver 的右侧面板会出现文件面板，这里会显示你刚刚创建的站点文件夹。
构建网站骨架
一个标准的网站通常包含以下文件和文件夹：
（图片来源网络，侵删）
images文件夹：存放所有图片。css文件夹：存放样式表文件。index.html：网站的首页（必须叫这个名字）。about.html：关于页面。contact.html：联系方式页面。style.css：主样式表文件。
创建这些文件/文件夹：
- 在
文件面板中，右键点击站点根目录 ->新建文件夹，分别创建images和css文件夹。 - 右键点击站点根目录 ->
新建文件，分别创建index.html,about.html,contact.html。 - 右键点击
css文件夹 ->新建文件，命名为style.css。
编写 HTML 结构
现在我们来编辑 index.html 文件。
- 在
文件面板中双击index.html将其打开。 - Dreamweaver 会自动生成一个基础的 HTML5 模板，我们需要在里面添加内容。
- 使用“实时视图”和“代码视图”：
- 实时视图：可以像在浏览器中一样预览你的页面，但不能直接编辑。
- 代码视图：显示和编辑 HTML/CSS/JS 代码。
- 拆分视图：强烈推荐！ 上半部分是代码，下半部分是实时视图，修改代码后可以立即看到效果，学习效率极高。
编写首页 HTML：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人网站 - 首页</title>
<!-- 链接到我们的 CSS 文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>欢迎来到我的个人网站</h1>
<nav>
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我</a></li>
<li><a href="contact.html">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section class="intro">
<h2>你好，我是 [你的名字]</h2>
<p>这里是一段简短的自我介绍，告诉访客你是谁，你做什么。</p>
</section>
<section class="portfolio">
<h2>我的作品</h2>
<p>这里将展示你的项目或作品集。</p>
</section>
</main>
<footer>
<p>© 2025 [你的名字]. 保留所有权利。</p>
</footer>
</body>
</html>
<a href="about.html">：这是创建页面间链接的方式。<link rel="stylesheet" href="css/style.css">：这行代码告诉浏览器，页面的样式去css/style.css文件里找。
添加 CSS 样式
现在你的网站只有结构,非常朴素，我们来用 CSS 美化它。
- 在
文件面板中双击css/style.css打开它。 - 编写一些基础样式,你可以直接复制粘贴下面的代码，然后根据你的喜好修改颜色和字体。
/* 全局样式 */
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
/* 头部样式 */
header {
background-color: #2c3e50;
color: #ecf0f1;
padding: 1rem 0;
text-align: center;
}
header h1 {
margin: 0;
}
/* 导航链接样式 */
nav ul {
list-style-type: none; /* 去掉列表前的点 */
padding: 0;
margin: 0;
display: flex; /* 使用 Flexbox 布局 */
justify-content: center; /* 水平居中 */
}
nav li {
margin: 0 15px;
}
nav a {
color: #ecf0f1;
text-decoration: none; /* 去掉下划线 */
font-weight: bold;
}
nav a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
区域 */
main {
max-width: 800px;
margin: 2rem auto;
padding: 0 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
section {
margin-bottom: 2rem;
}
section h2 {
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
/* 页脚样式 */
footer {
text-align: center;
padding: 1rem;
background-color: #2c3e50;
color: #ecf0f1;
margin-top: 2rem;
}
保存 style.css 文件，然后回到 index.html 的 实时视图 或 拆分视图，你应该能看到页面已经变得美观了。
与图片
-
添加图片：将你的个人照片、作品图片等放入
images文件夹，然后在 HTML 中使用<img>标签引用它们。<img src="images/my-photo.jpg" alt="我的照片">
src属性是图片的路径。alt属性是图片的替代文本，对于SEO和无障碍访问非常重要。
-
完善其他页面：复制
index.html的结构，然后修改<title>、<h1>和主要内容，创建about.html和contact.html。
测试与优化
- 多设备测试：在 Dreamweaver 的 实时视图 中，可以点击设备图标（一个手机和电脑的图标）来预览你的网站在不同尺寸屏幕（手机、平板、桌面）上的显示效果，根据需要进行响应式设计调整（这需要更深入的 CSS 知识，如媒体查询 Media Queries）。
- 检查链接：点击所有链接，确保它们都能正确跳转到相应页面。
- 检查拼写：仔细检查所有文本内容。
第三部分：上传网站到服务器
网站在本地电脑上做好后,需要上传到网络服务器上才能被其他人访问。
-
购买主机域名：
- 域名：你的网站地址，如
www.myname.com。 - 主机空间：存放你网站文件的服务器，你可以购买一个虚拟主机或使用云存储（如 GitHub Pages, Netlify）来免费托管静态网站。
- 域名：你的网站地址，如
-
获取 FTP 信息：从你的主机提供商那里获取以下信息：
- FTP 主机地址
- 用户名
- 密码
- 端口号 (通常是 21 或 22)
-
在 Dreamweaver 中设置远程服务器：
- 打开
站点->管理站点-> 选择你的站点 ->编辑。 - 切换到
服务器选项卡 -> 点击 添加新服务器。 - 基本设置：
- 服务器名称：随便起个名，如“我的主机”。
- 连接方法：选择
FTP。 - FTP 地址：填写你的 FTP 主机地址。
- FTP 用户名 和 FTP 密码：填写你的凭据。
- 根目录：询问你的主机提供商，通常是
public_html或www。
- 点击
测试连接，如果成功，点击保存。
- 打开
-
上传网站：
- 回到 Dreamweaver 的主界面，确保你的站点已打开。
- 在
文件面板中，你会看到本地文件和远程服务器两个视图。 - 在
本地文件视图中，选中所有网站文件（或直接选中站点根目录）。 - 点击
上传文件按钮（一个向上的箭头图标）。 - 等待上传完成,你的网站现在就在线了！
Dreamweaver 的优势与劣势
优势
- 可视化与代码结合：对新手友好，能快速看到代码修改的效果。
- 强大的代码提示：编写 HTML/CSS/JS 时有智能提示，减少拼写错误。
- FTP 集成：内置了 FTP 客户端，上传下载文件非常方便。
- CMS 支持：对 WordPress 等内容管理系统有很好的支持。
- 精确控制：可以实现对网站像素级的精确控制。
劣势
- 学习曲线：虽然界面友好，但要真正用好，仍需学习 HTML/CSS。
- 价格昂贵：作为 Adobe Creative Cloud 的一部分，订阅费用不菲。
- 相对笨重：相比轻量级的代码编辑器（如 VS Code），启动和运行速度较慢。
- 现代前端框架支持有限：对于 React, Vue 等现代框架，不如专业的开发工具。
使用 Dreamweaver 建设个人网站是一个非常好的实践项目，它不仅能让你做出一个属于自己的网站，更能让你深入理解网页的底层结构，虽然过程比使用模板平台更繁琐，但当你完成时，你获得的成就感和宝贵的技能是无价的。
祝你建站顺利！
