Dreamweaver 入门教程：从零开始创建你的第一个网页

什么是 Adobe Dreamweaver？

在开始之前，我们先简单了解一下 Dreamweaver 是什么。

dreamweaver 入门教程
（图片来源网络，侵删）
  • 定位：Dreamweaver 是一款由 Adobe 开发的网页设计和开发工具，你可以把它理解为一个功能强大的“文本编辑器”,但它远不止于此。
  • 核心特点：
    1. 可视化设计：你可以像在 Word 或 PowerPoint 中一样，通过拖拽元素来设计网页布局,无需编写一行代码。
    2. 代码编辑：它也提供了一个强大的代码编辑器，支持 HTML、CSS、JavaScript 等多种语言的高亮显示、自动补全和实时提示,让你能高效地编写和修改代码。
    3. 实时视图：这是 Dreamweaver 的王牌功能，它允许你在可视化编辑的同时，实时看到代码的渲染效果，实现了“所见即所得”和“所见即所得源码”的无缝切换。
    4. 响应式设计：内置的工具可以轻松帮助你为手机、平板和桌面电脑等不同屏幕尺寸设计适配的网页。

一句话总结：Dreamweaver 是一个既能让你“画”网页，又能让你“写”网页，还能让你“看”网页最终效果的全能型工具。

准备工作

  1. 安装 Dreamweaver：确保你已经安装了 Adobe Dreamweaver，如果你没有，可以访问 Adobe 官网下载试用版。
  2. 新建项目文件夹：在你的电脑上创建一个文件夹，用于存放所有与这个网页相关的文件，在桌面创建一个名为 my-first-website 的文件夹，这是一个良好的习惯,能让你保持文件井井有条。

创建你的第一个站点

“站点”是 Dreamweaver 中一个非常重要的概念，它告诉 Dreamweaver 你的所有网页文件、图片、样式表等都存放在哪里，建立站点是使用 Dreamweaver 的第一步。

  1. 打开 Dreamweaver，你会看到一个欢迎界面，点击左下角的 “站点” -> “新建站点”。

  2. 在弹出的窗口中，切换到“高级”设置（虽然名字叫“高级”，但对新手来说更清晰）。

    dreamweaver 入门教程
    （图片来源网络，侵删）

  3. 填写站点信息：

    • 站点名称：给你的站点起个名字，我的第一个网站”，这个名字只在 Dreamweaver 内部使用,不会出现在网页上。
    • 本地站点文件夹：点击文件夹图标，选择你刚才在桌面创建的 my-first-website 文件夹。这是最关键的一步！

  4. 点击“保存”，你的站点就创建成功了，你可以在右侧的“文件”面板中看到这个站点,但目前里面是空的。

创建并保存你的第一个 HTML 页面

  1. 在顶部菜单栏选择 “文件” -> “新建”。

  2. 在弹出的窗口中，确保左侧选择了 “空白页”，中间选择 “HTML”，右侧选择 “HTML5”（这是最新的标准），然后点击 “创建”。

    dreamweaver 入门教程
    （图片来源网络，侵删）

  3. 一个新的空白 HTML 文档就打开了。立即保存它！

    • 选择 “文件” -> “保存”。
    • 在弹出的窗口中，选择你刚刚创建的站点文件夹 (my-first-website)。
    • 将文件命名为 index.html。注意：网站的首页通常都命名为 index.html 或 index.htm。
    • 点击“保存”。

  4. 观察“文件”面板：你应该能在右侧的“文件”面板中看到 index.html 文件了,这说明它已经正确地属于你的站点。

认识 Dreamweaver 的工作区

在开始编辑之前,我们先熟悉一下界面主要部分：

  • 菜单栏：包含所有命令。
  • 插入栏：包含可以插入到页面中的各种元素，如图片、表格、链接等。
  • 文档窗口：这是你设计和编辑网页的主要区域，它有两种视图：
    • 实时视图：所见即所得的预览模式。
    • 代码视图：纯代码编辑模式。
    • 拆分视图：强烈推荐初学者使用！ 它会同时显示代码和实时视图，让你能即时看到代码修改带来的效果,是学习的最佳途径。
  • 属性检查器：当选中页面上的某个元素（如一段文字、一张图片）时，这个面板会显示该元素的属性（如颜色、大小、链接等）,并允许你直接修改。
  • 文件面板：管理你站点中的所有文件。

建议： 将文档窗口设置为“拆分”视图,你可以在文档窗口的左上角找到这个选项。

动手实践：制作一个简单的个人介绍页面

我们使用“拆分”视图来创建内容。

  1. 设置页面标题：

    • 在代码视图中，找到 <title> 和 </title>
    • 将它们之间的文字修改为“我的个人介绍”。
    • 切换到实时视图,看看浏览器标签页上的文字是不是变了？

  2. ：

    • 在实时视图中，将光标放在 <body> 和 </body> 标签之间。
    • 输入 <h1>，然后输入你的名字，<h1>你好，我是张三</h1>。
    • 在实时视图中，你应该能看到一个很大的、粗体的标题。

  3. 添加段落：

    • 下面，输入 <p>，然后输入一段自我介绍，<p>我是一名正在学习网页设计的学生，很高兴能在这里分享我的第一个作品！</p>。
    • 在实时视图中,你会看到一段普通的文字段落。

  4. 使用属性检查器修改样式：

    • 在实时视图中,选中你刚才写的段落文字。
    • 观察下方的“属性检查器”，你会看到“格式”、“类”、“CSS”等选项。
    • 修改字体颜色：在属性检查器中找到“文本颜色”按钮（通常是一个带字母“A”的色块），点击它,选择一个你喜欢的颜色。
    • 修改对齐方式：找到“对齐”按钮，点击“居中对齐”。
    • 观察代码视图，你会发现 Dreamweaver 自动为你添加了相应的 CSS 代码（在 <style> 标签内），color 和 text-align，这就是 Dreamweaver 的强大之处！

  5. 插入图片：

    • 准备一张图片（比如你的照片），并将其复制到你站点的文件夹 my-first-website 中。
    • 在实时视图中,将光标放在段落下方。
    • 在顶部菜单栏选择 “插入” -> “图像”。
    • 在弹出的窗口中，选择你刚刚复制到站点文件夹里的那张图片，然后点击“确定”。
    • 图片就被插入到页面中了,你可以在属性检查器中调整图片的大小和对齐方式。

预览你的网页

在 Dreamweaver 中预览网页非常简单：

  1. 实时视图：直接在 Dreamweaver 内部查看效果,但可能不完全等同于浏览器。
  2. 在浏览器中预览：
    • 按快捷键 F12。
    • 或者点击文档窗口右上角的 “在浏览器中预览” 按钮（地球图标）。

你的默认浏览器会打开，显示你刚刚创建的网页,恭喜你！

保存与发布

  1. 保存：随时按 Ctrl + S (Windows) 或 Cmd + S (Mac) 保存你的工作。
  2. 发布/上传：当你想把网站放到互联网上时，Dreamweaver 也提供了强大的 FTP 功能，你只需要在“站点设置”中配置好你的服务器信息（主机名、用户名、密码等），就可以一键将你站点的所有文件上传到服务器上，对于初学者,可以先不使用此功能。

进阶学习路径

当你掌握了以上基础后,可以继续探索：

  • CSS 样式面板：学习如何使用“CSS 设计器”面板来创建和管理更复杂的样式,而不仅仅依赖属性检查器。
  • 使用模板：创建一个包含通用布局（如页眉、页脚）的模板，然后基于模板创建新页面,以保持整个网站风格的一致性。
  • 行为和交互：学习使用 Dreamweaver 的行为功能（如交换图像、弹出菜单）来添加简单的交互效果。
  • 响应式布局：使用 Dreamweaver 的“流体网格布局”工具或 Bootstrap 框架,来创建能适应不同屏幕尺寸的响应式网页。

Dreamweaver 是一个功能强大的工具，但它的核心并不复杂，对于初学者来说,关键在于：

  1. 先建站，后建页：永远记得先创建站点,再在站点内创建和保存文件。
  2. 善用“拆分视图”：这是连接代码和效果的桥梁,是学习的最佳助手。
  3. 多动手，多尝试：不要害怕修改代码和属性,实时视图会给你最直观的反馈。

希望这份教程能帮助你顺利开启 Dreamweaver 的学习之旅！祝你玩得开心！