Dreamweaver 简介

大家好，今天我们来学习一门实用而且成就感强的专题–Dreamweaver，就像它的标志图标一样，我们今后可以称它 DW。关于 DW 的知识多且细，市面上的介绍寥寥无几，而且缺少系统性。这个专题我们重点针对 DW 在网页开发的基础实战功能对DW的应用进行讲解。本文我们先介绍一下 Dreamweaver 是什么？Dreamweaver 主要优势有哪些？DW 各版本简介及推荐？DW 主干学习路线？

1. 为什么要学习 Dreamweaver？

各位同学可能被市面上的一些“误解”错误地引导，认为曾经的网页三剑客其中个别成员现在评价不是很好，所以 Dreamweaver 就可能不值得学。在这里要告诉各位同学们，这种想法完完全全是有些人误会了 Dreamweaver 。说 Dreamweaver 不值得学的人大多数是缺少对 Dreamweaver 系统学习，或者对 Dreamweaver 的印象还停留在3年或几年之前。喜欢这样讲的人还有一部分是由于他们使用了 Dreamweaver 同类型的竞品工具，但工具的好坏，时间积淀会说明一切。

Adobe 公司在网页设计的积淀就好比 PC 界的 MicroSoft ，汽车圈的 Tesla。所以，现在这个在我们面前的 Dreamweaver 早就已经具备了强大的功能，覆盖你的网页设计的方方面面。或许有同学会觉得，网页设计这个词和时髦的互联网公司里讲的前端/后端工程师比起来是十分老旧？不！ Dreamweaver 能做目前前端工程师手下的大部分工作，而且绝对能够给你带来眼前一亮出色表现。

2. 什么是 Dreamweaver ？

我们先来看下官网对 Dreamweaver 是如何介绍的：

Adobe Dreamweaver 为网页设计软件提供了一套直观的可视界面，供您创建和编辑 HTML 网站和移动应用程序。使用专为跨平台兼容性设计的自适应网格版面创建适应性版面。在发布前使用多屏幕预览审阅设计。使用更新的“实时视图”和“多屏预览”面板高效创建和测试跨平台、跨浏览器的 HTML5 内容。利用增强的 jQuery 和 PhoneGap™ 支持构建更出色的移动应用程序。—Adobe 公司中国区官网

Tips：这里的 HTML5 主要指第五代 HTML 标准，可以理解为更高级的 HTML 语言。

看过了 DW 官网的介绍，简单说就是 Dreamweaver 能够适应各种不同的电脑系统。在 DW 使用过程中，你看到的就是你制作好的网页，不用编写 HTML 代码，不用做繁杂的代码检查，只需要发布前使用预览功能检查一下是不是自己心中理想的效果效果就可以。DW 还能帮助我们做出现在非常时髦的移动程序 — 各种APP。

DreamWearver 是 Dream （梦想）和 weaver （编织工）两个单词的组合，直译为梦想编织人。为什么叫梦想编织人？因为有了 Dreamweaver，我们不必掌握 HTML，CSS，Javascript （一些构成网页的语言）等程序开发技能就可以设计出界面美观大方，交互合理的网页。Dreamweaver 贯穿了网页设计，发布，管理的方方面面，描述为网页开发的一站式服务一点儿也不过分。

3. Dreamweaver 适合哪些人群学习？

• 前端从业人员；
• 网页设计人员；
• 电商从业人员；
• 想要提升网页制作水平，给自己的网页增色的学生群体。

以上这些群体，都是 Dreamweaver 最好的受益者，经过各自行业的打磨，目前在现实生活中占比都很高。尤其越来越火的电商，已经有专门为电商从业群体开设的 Dreamweaver 课程。电商网站精美的网页有很多都是出自 Dreamweaver 之手。

4. Dreamweaver 主要优势有哪些？

通过访问 Adobe 公司中国区官网我们可以看到目前的 DW 主要有 3 个突出优势：

4.1 快速、灵活的编码

借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，用于快速了解并编辑 HTML、CSS 和其他 Web 标准。使用视觉辅助功能减少错误并提高网站开发速度。—Adobe 公司中国区官网

这里的意思说直白就是：Dreamweaver 编写代码功能强大，而且提示代码智能，支持的格式丰富。所见即所得的一个软件，大大提升了你制作网站的成本和速度。

4.2 通过更少的步骤轻松设置网站。

利用起始模板更快地启动并运行您的网站，您可以通过自定义这些模板来构建 HTML 电子邮件、“关于”页面、博客、电子商务页面、新闻稿和作品集。—Adobe 公司中国区官网

这里的意思是说 Dreamweaver 这个软件本身提供了很多“成熟例子”供你选择使用。这些“例子”不但设计成熟，而且能适应你常见的用途，比如网页、博客、电商网站、新闻页面等。这一点好用到甚至你在刚开始学习 Dreamweaver 的时候，就能挥手间创造出市面上很成熟的页面，毕竟 Dreamweaver 自带的模版都是符合当下主流设计风格的网页。

4.3 在各个设备上动态显示。

构建可以自动调整以适应任何屏幕尺寸的响应式网站。实时预览网站并进行编辑，确保在进行发布之前网页的外观和工作方式均符合您的需求。—Adobe 公司中国区官网

响应式网站的意思是网页可以在各种手机，平板，电脑屏幕上很好地显示。试想一下，现在社会上那么多种尺寸的手机屏幕，如果每一个都要把网页重新做一遍，那得是多大的工作量？也不符合我们使用 Dreamweaver 便捷高效的初衷。Dreamweaver 的出现恰好替我们解决了这一点，它非常智能地在各个设备上调整自己做出来的网页。也就是说，Dreamweaver 做出来的网页能够轻松在所有人的手机显示出你预定的样子，为了适应你的手机/平板/电脑它 Dreamweaver 会智能地自我调整。

4.3 总结

使用过 Adobe 公司其他明星产品的同学会感受到，Adobe 公司在创意领域一直独领风骚。DW 就是它在网页制作方面的实力证明。Dreamweaver 把原来只有代码工程师做的工作简单化，让没有基础的同学也能很快上手掌握，而且功能涵盖一应俱全。从这一点上讲，Dreamweaver 胜过了所有同类型竞品软件。

5. DW 各版本简介及推荐？

Dreamweaver 发源于 Macromedia 公司，后来被 Adobe 公司收购。

日常应用中比较常见的版本是 Dreamweaver CS6，这是一个 Dreamweaver 经典版本。因为在 2013 年之前，Adobe 公司对 Dreamweaver 的命名都是以CS 加数字作为软件名称。在 2013 年 Adobe 推出了Adobe 创意协作云平台（Creative Cloud=CC），因此之后的 Dreamweaver 都改为以 Dreamweaver CC 加发布年份来命名了。

除了Dreamweaver CS6 之外，目前主流的 Dreamweaver 版本还包括：

• Dreamweaver CC 2015；
• Dreamweaver CC 2017；
• Dreamweaver CC 2018；
• Dreamweaver CC 2019。

Tips：本教程中会使用 Dreamweaver CC 2018 版本来进行演示讲解。

6. 学习基础及主干学习路线

1. 了解过网页开发的一般流程，有一定的 HTML，CSS，JavaScript 基础；

2. 若想成为 Dreamweaver 高级应用者，还需了解一些 Web 开发基础。

7. 主干学习路线

按照 Dreamweaver 官网的提供的信息，可以把 Dreamweaver 的学习科学地划分为 11 个阶段，每个过程对应一系列知识点，大家可以跟着这 11 个过程来获取学习中的重点：

1. 大致了解你能用 Dreamweaver 做哪些事情；
2. 结合 Dreamweaver 了解网站的结构；
3. 结合 Dreamweaver 了解web设计的几个阶段；
4. 结合 Dreamweaver 学习如何定义一个网站；
5. 结合 Dreamweaver 使用HTML定义一个页面结构；
6. 结合 Dreamweaver 给你制作的的网页添加内容；
7. 结合 Dreamweaver 用CSS 装饰你的网页；
8. 在浏览器和移动设备上预览你的网页；
9. 用 Dreamweaver 发布和管理你的网站；
10. 使用 Dreamweaver 高效开发网站基础；
11. 一些可使用的 Dreamweaver 扩展工具。