Dreamweaver建网站步骤复杂吗？-网站相关-佑然科技平台

Dreamweaver 是一个功能强大的“所见即所得”（WYSIWYG）网页编辑器，它特别适合初学者，因为它提供了可视化编辑界面，同时也为高级开发者提供了强大的代码编辑功能，整个建站过程可以概括为：规划 -> 创建本地站点 -> 制作页面 -> 测试 -> 上传。

（图片来源网络，侵删）

下面是详细的步骤和说明。

第一步：准备工作与规划

在打开 Dreamweaver 之前，先做好规划,这会让后续工作事半功倍。

确定网站主题和内容：你的网站是关于什么的？有哪些主要页面（如首页、关于我们、产品展示、联系方式等）？
收集素材：准备好网站需要的所有内容，包括：
- ：所有页面的文本。
- 图片：Logo、产品图、宣传图等，建议使用图像处理软件（如 Photoshop）提前处理好尺寸和格式。
- 其他媒体：视频、音频、PDF文档等。
设计网站结构：用树状图或列表形式规划出网站的页面层级关系。
- 首页
  - 关于我们
  - 产品中心
    - 产品 A
    - 产品 B
  - 新闻动态
  - 联系我们

第二步：创建本地站点

这是 Dreamweaver 工作流程中最重要的一步。“站点”在 DW 中不仅仅是指网站文件，更是一个管理项目的工作区,创建站点可以让你高效地管理所有文件和链接。

打开 Dreamweaver。
（图片来源网络，侵删）
在主界面，选择 “站点” -> “新建站点”。
此时会弹出站点设置向导，你可以选择“基本”或“高级”设置，对于初学者，“基本”模式更友好。
- 站点名称：给你的项目起一个名字，我的第一个网站”，这个名字只会在 DW 内部显示。
- 本地站点文件夹：这是最关键的一步，点击文件夹图标，选择一个空文件夹作为你网站在电脑上的根目录，所有网页、图片、样式表等文件都将存放在这个文件夹里。
  - 强烈建议：不要将站点文件夹放在桌面上或“我的文档”等深层目录中,路径越短越好。
  - D:\MyWebsite。
设置完成后，点击“保存”，你可以在 Dreamweaver 右侧的 “文件” 面板中看到你的站点了,目前它是空的。

第三步：制作网页

现在开始创建网站的骨架和内容。

（图片来源网络，侵删）

创建主页

在 “文件” 面板中,右键点击你的站点根目录。
选择 “新建文件”。
将这个新文件重命名为 index.html。
- 重要：网站的首页必须命名为 index.html (或 index.htm, index.php 等，根据你的服务器配置)，当用户访问你的域名时,服务器会自动默认打开这个文件。

创建其他页面

用同样的方法，创建其他页面，如 about.html, products.html, contact.html 等。

编辑页面内容

双击 index.html 在“设计”视图中打开它。

“设计”视图：可视化编辑界面，所见即所得,适合初学者放置图片和文字。
“代码”视图：直接编写 HTML、CSS、JavaScript 代码,适合高级开发者。
“拆分”视图：上面显示代码，下面显示设计效果,是学习和开发时最常用的视图。

在 index.html 中添加内容：

输入文本：直接在“设计”视图中点击并输入文字。
插入图片：
1. 将你的图片素材复制到站点根目录下的一个 images 文件夹中（为了管理方便，强烈建议创建这个文件夹）。
2. 在 DW 中,将光标放在要插入图片的位置。
3. 菜单栏选择 “插入” -> “图像”，或者直接从“插入”面板中拖拽“图像”图标到页面。
4. 在弹出的对话框中选择 images 文件夹中的图片。
插入其他元素：你可以通过菜单栏的 “插入” 选项或 “插入” 面板来添加表格、表单、链接、视频等。

使用 CSS 美化网站

默认情况下，DW 会使用内联样式（直接写在 HTML 标签里），但这不利于维护，正确的做法是使用外部 CSS 样式表。

创建 CSS 文件：
- 在 “文件” 面板中,右键点击站点根目录。
- 选择 “新建文件”，并将其重命名为 style.css。
链接 CSS 文件：
- 打开 index.html，切换到 “代码” 或 “拆分” 视图。
- 在 <head> 和 </head> 标签之间，添加以下代码：
```
<link rel="stylesheet" href="style.css">
```
- DW 通常会自动帮你完成这一步，你也可以通过菜单栏 “修改” -> “页面属性”，在弹出的对话框中选择“分类”中的“外观(CSS)”，然后点击“链接外部样式表”按钮来操作。
应用 CSS 样式：
- 打开 style.css 文件。
- 你可以在这里编写 CSS 代码来控制整个网站的样式。
```
body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}
#header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}
```
- 在 index.html 中，你可以通过 DW 的 “CSS 设计器” 面板来可视化地选择元素并应用或创建 CSS 规则,非常方便。

第四步：测试网站

在将网站上传到服务器之前,务必在本地进行充分测试。

检查链接：在 DW 中，按 F12 键，或者点击工具栏的 “在浏览器中预览” 按钮，选择一个浏览器（如 Chrome, Firefox）打开你的网站。
- 点击所有链接,确保它们都能正确跳转到对应的页面。
- 检查图片是否都正常显示。
测试不同浏览器：同一个网站在不同浏览器（Chrome, Firefox, Edge, Safari）和不同设备（电脑、手机）上可能会有不同的显示效果，尽量多测试几种,确保兼容性。
使用 DW 的实时视图：在“拆分”或“实时”视图中，DW 提供了模拟移动设备的功能,可以让你方便地预览手机端效果。

第五步：上传网站到服务器

当你对本地网站的所有功能都满意后,就可以将它发布到互联网上了。

获取服务器信息：你需要从你的网站托管服务商（如阿里云、腾讯云、GoDaddy、Bluehost 等）获取以下信息：
- FTP 主机地址：ftp.yourdomain.com。
- 用户名：你的 FTP 账号。
- 密码：你的 FTP 密码。
- 根目录：通常是 public_html, wwwroot 或 htdocs,上传的文件必须放在这个目录下才能被访问。
设置远程服务器：
- 在 Dreamweaver 中，打开 “站点” -> “管理站点”。
- 选择你的站点，点击“编辑”。
- 在弹出的站点设置窗口中，选择左侧的 “服务器”。
- 点击右下角的号,添加一个新服务器。
- 在“基本”设置中：
  - 服务器名称：随便起个名字，如“我的网站主机”。
  - 连接方法：选择 FTP。
  - FTP 地址：填写你获取的 FTP 主机地址。
  - 用户名 和密码：填写你的 FTP 账号密码。
  - Web URL：填写你的网站域名地址，如 http://www.yourdomain.com。
- 点击“测试”按钮，如果连接成功，会提示“Dreamweaver 成功连接到您的 Web 服务器”。
- 点击“保存”。
上传文件：
- 回到 “文件” 面板，你会看到站点根目录下方多了一个“远程服务器”的图标。
- 点击右上角的 “连接” 按钮,连接到远程服务器。
- 连接成功后,远程服务器文件夹中会显示你服务器上的文件。
- 在本地站点文件夹中，选中所有需要上传的文件和文件夹（通常包括 index.html, style.css, images 文件夹等）。
- 右键点击选中的文件，选择 “上传”。

上传完成后，再次在浏览器中访问你的域名,就能看到你创建的网站了！

总结与建议

优点：Dreamweaver 对初学者非常友好，可视化编辑可以让你快速看到成果，它对代码的支持也很专业,可以随着你的成长一直使用。
缺点：相比现代的代码编辑器（如 VS Code），DW 可能显得有些笨重,启动较慢。
学习路径：建议从“设计”和“拆分”视图入手，熟悉基本操作后，逐步过渡到“代码”视图，并学习 HTML 和 CSS 的基础知识，当你能熟练编写代码后，会发现 DW 的代码提示、高亮和文件管理功能依然非常高效。
现代替代方案：现在很多开发者使用 Visual Studio Code，它更轻量、插件化、免费，是目前的主流选择，但对于想快速入门、可视化建站的人来说，Dreamweaver 依然是很好的选择。

希望这份详细的指南能帮助你顺利使用 Dreamweaver 建立自己的网站！祝你成功！