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

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

我们先来看下官网对 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 贯穿了网页设计，发布，管理的方方面面，描述为网页开发的一站式服务一点儿也不过分。

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

这个登陆主要有两个目的，一个是 Adobe 公司要检查你当前登陆的账号是否购买了 Adobe 公司的相关产品，比如 Dreamweaver CC 2018。另一个作用是为了让大家能通过 Adobe 账户轻松的接入 Adobe Creative Cloud 云服务，以便享受 Adobe 公司开发的各种云上便捷功能。登陆后，大家只要一直点击屏幕中出现的下一步按钮，即可完成 Dreamweaver CC 2018 的安装了。安装后桌面上会有 Dw 字样的绿色图标，就代表 Dreamweaver 已经安装完毕。

命令参数名称功能与作用描述x删除当前光标所在位置的字符dd删除当前光标所在行dw删除当前光标所在位置的单词d$删除当前光标所在位置至行尾的内容J删除当前光标所在行行尾的换行符（拼接符）u撤销前一编辑命令a在当前光标后追加内容，输入完按 ESC 即可退出 插入模式A在当前光标所在行行尾追加数据r char用 char 替换当前光标所在位置的单个字符R text用 text 覆盖当前光标所在位置的数据，输入完按 ESC 即可退出 插入模式

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 版本来进行演示讲解。

表单，一个网页中不可或缺的成分。它在网页中主要负责数据采集功能。表单有三个基本组成部分： 表单的标签，表单域， 表单按钮：主要是提交或者复位按钮。表单的引入，也是我们的页面和后端服务器交互的基础，让网页和后端进行数据交互有了可能。网页如果都是之前学习的一些前端的标签，那么数据从哪里来？当然不行，所以大家早晚要接触到网页如何后端内容交互。因此，今天作为引入表单的基础课，我们将讲解一些表单的基础只是，首先老师会给大家讲解如何在新建的网页中加入表单域，然后学习在表单中插入文本域，最后我们将学习在表单中插入图像按钮。本节的操作内容比较多，主要以操作内容为主，其次是对表单概念含义的理解尤为重要。因此大家在学习时应该有的放矢。有侧重点地学习。

密码框可谓表单填写中一个不可缺少的输入框。它和普通文本输入框最大的区别就是用它输入的键盘文字在屏幕上会隐藏显示，正如它的名字一样，密码，隐秘的编码。是不能让人看到的。因此，密码框的使用在 web 网页中是十分常见并且普遍的。首先，我们先打开 DW，创建一个空白的 HTML 文档，然后新建一个表单。建立好空白表单后，我们再点击右侧面板的密码，可以看到图中出现了一个 password 和一个带有输入功能的输入框，我们在输入框中尝试输入文字，可以看到输入的文字都被加密成为了*这种星形符号。以上就是表单中密码框的设置方法。有木有很简单？其实 Dreamweaver CC 2018 中的很多操作都可以抽象为一个操作模式，重点在于理解各种元素在网页设计和交互中的作用。然后才是学习工具的使用。而 Adobe Dreamweaver CC 2018 只是给我们网页设计便利化搭建了一个充分的平台，要想利用好，还得理论和实践相结合的去操作。

网页的世界中，总少不了形形色色的图片。甚至大部分你看起来不像是的图片的东西，比如有特效，有动画的“好似”视频的网页元素，其实都用了某种格式的图片。而在现代网页中一种非常常见的网页图片元素就是鼠标经过图像，可能从代码角度并没有这个专有名词，而在 Dreamweaver CC 2018 中就是有这么一种设置，可以轻松的帮助我们设置鼠标经过图像。那么这个到底是一个什么样的图像效果呢？简单来说，就是在一张原有的网页中的图片的基础上，当鼠标移动到这张原有的图片的时候，原有的图片的位置就显示第二个图片了。而当鼠标一旦离开第二个图片，又会显示原有的第一张的图片，这种看似动态的效果，其实在网页中非常常见，Dreamweaver CC 2018 的操作原理是为我们封装，打包了一个 function 函数。没错，就是使用了 Javascript 。而我们在使用和设置这个功能的时候，全然不用估计自己写不写的出来 Javascript 函数，在这个擦作里，我们大家不会写 Javascript 函数都完全没有关系，所以大家不要对这一节的学习有任何的心理负担，老师不会提，也更不会讲解 Javascript 函数的相关知识。我们今天就单单谈这个功能在 Dreamweaver CC 2018 中的实现。这就是我们今天这一节要着重给大家讲解的东西。第一步：先打开桌面上的 Dreamweaver CC 2018 。对，没错，双击 DW！！！第二步：老生常谈的话题，新建一个空白的 HTML 文档。第三步：这一步就是我们最关键的一步，也是大家要重点记忆和跟着操作的一步。首先我们点击菜单栏中的插入，在插入菜单弹出的下拉菜单栏中，选择 HTML 。从下面的图片中可以看到，选择 HTML 中，弹出的下一级菜单列表中有一个设置鼠标经过图像选项！！！ 这里就是我们要点击的，发现这个选项之后，单击它。第四步：点开鼠标经过图像后的弹出界面如下图所示，我们发现在这个设置界面中，有一个原始图像选项，有一个鼠标经过图像选项。分别为这两个图片选择本地的两张不同的图片后，就可以完成我们鼠标经过图像的设置了。具体是什么效果呢？请看下面你的动态图片。怎么样？这种特效是不是在网页中似曾相识？也许你在较大体积的图片中不常见，但是比如一些小的按钮，鼠标一划过，就由方的变成圆的，或由三角的变成圆形。这种小地方特别容易使用到我们今天讲的鼠标经过图像的控制。