Dreamweaver 2004教程，从零开始学吗？-贝博恩创新科技网

重要提示：Dreamweaver 2004

在开始之前,请务必了解以下几点：

（图片来源网络，侵删）

极度过时：Dreamweaver 2004 发布于互联网发展的早期，它所基于的 Web 技术（如 HTML 4.01, CSS 2, JavaScript 1.5）和开发理念已经完全被现代标准（如 HTML5, CSS3, ES6+）所取代。
兼容性问题：
- 操作系统：在最新的 Windows 10/11 或 macOS 上安装和运行会非常困难，可能需要使用虚拟机（如 VirtualBox + Windows XP）。
- 浏览器：其内置的浏览器预览功能无法模拟现代浏览器的行为。
- 软件：FTP 功能可能不兼容现代的 FTP/SFTP 服务器。
安全风险：作为一款20年前的软件，它可能存在未修复的安全漏洞,不建议在连接互联网的电脑上使用。
学习价值：学习 DW 2004 对现代 Web 开发的帮助几乎为零，它的界面和工作流程与今天的 IDE（如 VS Code）有天壤之别。

建议：如果你是新手，请直接学习 Visual Studio Code 或 Sublime Text，它们是当前行业标准，免费、强大且社区支持完善，如果你是怀旧或必须维护一个古老的网站,那么这份教程可以帮你快速上手。

本教程将带你熟悉 Dreamweaver 2004 的界面,并创建一个简单的网页。

启动 Dreamweaver 2004 后，你会看到主界面,它主要由以下几个部分组成：

菜单栏：位于顶部，包含所有命令（文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助）。
工具栏：包含常用操作的快捷按钮，如新建、打开、保存、在浏览器中预览等。
文档窗口：这是你主要工作的地方,用于编辑和查看你的网页代码和设计视图。
插入栏：通常位于左侧，提供了插入各种元素（如图片、表格、链接、表单）的按钮，你可以通过顶部标签切换不同类别（常用、布局、文本、HTML 等）。
面板组：通常位于右侧，包含各种功能面板，如：
- 文件：管理你的网站文件和文件夹。
- 属性检查器：最重要的面板之一，当选中页面上的某个元素（如文字、图片）时，它会显示该元素的属性,并允许你直接修改。
- 应用程序：数据库相关功能。
- 标签选择器：显示当前光标所在 HTML 标签的层级结构,方便快速定位。

在开始制作网页之前，强烈建议先定义一个本地站点，这有助于 Dreamweaver 管理你的所有文件、图片和链接。

（图片来源网络，侵删）

点击菜单栏的 站点 > 新建站点...。
在弹出的对话框中，切换到 “高级” 选项卡。
在 “本地信息” 分类下，填写以下信息：
- 站点名称：给你的网站起个名字，我的第一个网站”。
- 本地根文件夹：点击文件夹图标，选择一个你电脑上的空文件夹作为网站的根目录。D:\MyWebsite。所有网页和图片都应该放在这个文件夹及其子文件夹中。
- 默认图像文件夹：可以指定一个专门存放图片的子文件夹，images，Dreamweaver 在插入图片时会默认指向这里。
- HTTP 地址：如果你的网站以后会上传到服务器，可以在这里填入网址，方便 DW 检查绝对链接,暂时可以留空。
点击 “确定”。

你的“站点”已经定义好了，在右侧的 “文件” 面板中,你应该能看到你刚才选择的根文件夹。

Dreamweaver 2004 最著名的就是其“所见即所得”的设计视图。

在文档窗口的左下角，点击 “设计” 按钮,切换到设计视图。
你可以像在 Word 中一样直接输入文字，输入“欢迎来到我的网站！”。
选中这些文字，观察右侧的 “属性检查器”。
- 在 “格式” 下拉菜单中，你可以选择“段落”或“标题1”、“标题2”等，选择“标题1”。
- 你还可以在这里设置字体、大小、颜色、对齐方式等。

插入图片：
- 将光标放在你想要插入图片的位置。
- 打开 “插入” 栏，切换到 “常用” 分类。
- 点击 “图像” 按钮（一个小方框图标）。
- 在弹出的对话框中，选择一张图片，如果你之前定义了默认图像文件夹,它会自动打开那个文件夹。
- 点击“确定”，在弹出的 “图像标签辅助功能” 对话框中，你可以为图片输入一个简短的描述（这对屏幕阅读器很重要）,也可以直接取消。
- 图片插入后，点击选中它，在 “属性检查器” 中可以修改图片的宽高、边框、替代文本等。
创建超链接：
（图片来源网络，侵删）
- 选中你想要做成链接的文字或图片。
- 在 “属性检查器” 的 “链接” 文本框中，输入你要链接到的地址。
  - 外部链接：http://www.google.com。
  - 内部链接：如果你想链接到网站内的另一个页面（about.html），直接输入 about.html 即可，DW 会自动处理相对路径。
- 在 “目标” 下拉菜单中，选择 _blank 会让链接在新窗口中打开,这是外部链接最常用的选择。

在 DW 2004 时代，表格是网页布局的主要手段，虽然现在已不推荐,但了解其基本操作对理解旧代码很有帮助。

将光标放在你想插入表格的位置。
在 “插入” 栏的 “布局” 分类中，点击 “表格” 按钮。
在弹出的对话框中设置：
- 行数和列数：3 行 3 列。
- 表格宽度：可以设置为像素（如 760px）或百分比（如 80%）。
- 边框粗细：如果为 0，表格在浏览器中将看不到边框,常用于布局。
点击“确定”，表格会被插入,你可以直接在单元格内输入文字或插入图片。

就是 Dreamweaver 2004 最核心、最基础的操作流程，通过这些步骤，你已经可以创建一个包含文字、图片和链接的简单静态网页。

如果你想继续深入，可以学习：

CSS 样式：在 DW 2004 中，你可以通过 “文本 > CSS 样式 > 新建...” 来创建外部 CSS 文件，并将样式应用到页面元素上,实现更美观的布局和设计。
模板：可以创建一个模板，定义好可编辑区域，然后基于它生成多个页面,实现网站的统一管理和快速更新。
表单：使用 “插入” 栏的 “表单” 分类，可以创建用户注册、登录等交互式表单。
发布网站：在 “站点” 菜单下找到 “管理站点”，选择你的站点，点击 “编辑”，在“远程信息”中配置 FTP 服务器信息,就可以将你制作好的网页上传到服务器了。

再次强调，这份教程仅限于帮助你了解和使用这个古老的软件，对于任何新的 Web 开发项目,请务必选择现代的工具和标准。