1.2 认识Dreamweaver CC

Dreamweaver使用所见即所得的接口，也有HTML编辑功能，包含设计网站前台页面和开发网站后台程序两个功能，目前可以使用于Mac和Windows系统中。通过Dreamweaver，用户既可以快速创建基于Web标准化的网页，也可以便捷地开发各种大型网站项目。

1.2.1 Dreamweaver版本介绍

Dreamweaver的发展经历了Macromedia和Adobe两个时代，其每个时代的具体版本和功能不尽相同。

1. Macromedia时代

最初的Dreamweaver 1.0版本是由Macromedia公司于1997年12月发布的，紧接着Macromedia公司分别于1998年和1999年发布了Dreamweaver 2.0和Dreamweaver 3版本。

其中，Dreamweaver 2.0版本具有强大的站点管理功能，内置的FTP软件可以直接上传主页，并具有所见即所得的编辑方式、支持Layer层、支持StylesSheet样式表单、网页交互等功能。

而Dreamweaver 3版本不足3MB，是一个经典版本，具有速度快、功能多等优点，是一个集网页制作和站点管理于一体的超重量级的网页编辑工具。随后，Macromedia公司又相继开发了Dreamweaver 4、Dreamweaver 5、Dreamweaver 6.0、Dreamweaver MX和Dreamweaver 8.0版本，其功能也在不断地优化。

2. Adobe时代

Adobe公司收购Macromedia公司后，重新推出了一系列的Dreamweaver CS版本。CS系列每个版本的具体功能如下表所述。

1.2.2 Dreamweaver CC新增功能

作为Dreamweaver系列软件中的最新版本，Adobe公司在Dreamweaver CC中增加和增强了许多新的功能，这些新功能不仅可以帮助用户轻松创建和更新Web和移动内容，而且还可以帮助用户查看、导航和编辑HTML标记。

1. 图素快速视图

Dreamweaver CC新增加了元素快速视图功能，该功能可以为静态和动态内容呈现交互式HTML树状结构，从而帮助用户快速检查文档中的标记。在Dreamweaver CC中，用户只需执行【查看】|【图素快速视图】命令，即可显示元素快速视图。在该视图中，用户可以在单一易读的视图中查看页面中的所有要素。

2. 实时检查中的新编辑功能

Dreamweaver CC新增加了实时检查中的一些新编辑功能，可以检查和更新任意HTML元素的性质及在不刷新的状态下可以预览网页外观等内容。

其中，“实时属性检查器”功能用于实时视图，可以方便用户在不切换“设计”或“代码”视图的情况下快速编辑网页内容。

而“实时插入”功能则可以使用侧面栏中的“插入”面板将HTML元素直接插入到实时视图中。所插入的内容无须切换模式，即可实时预览修改。

3. CSS设计器增强

在Dreamweaver CC中，CSS设计器改进了边框控件的用户界面，并以选项卡样式进行显示。而选项卡式控件可以避免用户同时查看所有值，以免混淆视觉。除此之外，一站式的“所有边”选项卡则可以帮助用户同时设置所有的边框属性。

用户只需在【CSS设计器】面板中的【属性】栏中，选择【边框】选项，即可显示其各个边框样式选项。

除了外观界面的更改，CSS设计器还增强了“复制粘贴样式”功能，运用该功能可以将一个选择器中的样式复制粘贴到其他选择器中。用户只需在选择器中右击某个样式，执行【复制样式】命令即可。运用该功能，不仅可以复制所有样式，而且还可以复制布局、文本和边框等特定类别的样式。

CSS设计器增强功能除了体现在上述两个方面之外，还体现在快速编辑文本框、强化自定义属性工作流、滚动至类别，以及更具体/较不具体的选择器等方面。

4. 新增同步设置

Dreamweaver CC新增了同步设置功能，该功能可以将用户计算机和Adobe Creative Cloud中的Dreamweaver实例同步。

在Creative Cloud上存储了文件、应用程序设置和站点定义之后，每当用户需要这些文件和设置时，可以从任何机器登录Creative Cloud并访问它们。

用户可以设置Dreamweaver参数，以实现自动与Creative Cloud同步连接。或者，在必要时可以在【首选项】对话框中，设置【同步设置】选项卡中的相关参数。

5. 支持新式平台

在Dreamweaver CC版本中，增加了前端设计的新技术支持，如jQuery。用户可以通过HTML 5/CSS 3、jQuery和jQuery移动框架创作项目。

jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的JS库，它兼容CSS 3，还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供Ajax交互。

jQuery还有一个比较大的优势是有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML内容分离。也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义ID即可。

如果用户需要添加jQuery UI插件内容，可以执行【插入】| jQuery UI菜单中的命令即可。

6. 新增功能概述

Dreamweaver CC版本中新增了功能简要概述，不仅可以为用户展示新版本中的新增功能，而且还可以引导用户浏览视频库，观看新增功能的实际用途。

当用户第一次启动Dreamweaver CC版本时，将会显示新增功能概述或简要教程选项。此时，用户可以选择观看教程，也可以选择跳过教程直接进入到Dreamweaver CC工作界面中。

而当用户选择【没有，我刚刚开始使用】选项时，系统将自动进入视频库页面中。在该页面中，主要显示了新增功能相关的视频，将鼠标停留在缩略图上，系统即可显示当前视频的简要说明。

1.2.3 Dreamweaver CC工作界面

Dreamweaver CC相对于旧版本软件来讲，不仅增加了启动界面的优美感，而且在其工作界面中也进行了一些细微的改进。

1. 欢迎界面

当用户启用Dreamweaver CC时，会出现一个欢迎界面，以帮助用户进行相应的操作，包括最近浏览的文件、新建、了解等操作。

2. 工作界面

在欢迎界面中执行某项操作之后，便可以进入到工作界面中。Dreamweaver CC所提供的工作界面是一种可伸缩、自由定制的界面，用户可以根据工作习惯自由设置界面。默认的灰色界面颜色，使整个界面显得更加紧凑。

Dreamweaver CC工作界面中的窗口组成的具体情况如下所述。

□菜单栏　菜单栏中包含各种操作执行菜单命令，以及切换按钮如【最小化】、【最大化】、【还原】和【关闭】等按钮。

□工作区切换器　允许用户更改窗口的界面，以“压缩”或“扩展”方式显示，以及允许用户新建工作区、管理工作区和保存当前工作区等操作。

□【文档】工具栏　为用户提供视图切换、文档预览等功能，同时还允许用户测试网页并设置网页的标题。

□【文档】窗口　用于显示当前创建和编辑的文档。用户可在此设置和编排网页文档的内容，也可编写文档的代码。

□标签选择器　位于【文档】窗口底部的状态栏中，用于显示环绕当前选定内容的标签，以及该标签的父标签等，可体现出这些标签的层次结构。

□【属性】面板　用于查看和更改当前选择对象或文本的各种属性，其会根据用户选择不同的内容，而显示不同的属性。

□面板组　显示Dreamweaver提供的各种面板，默认显示【插入】、【CSS设计器】、【CSS过渡效果】和【文件】等面板。

□编码工具栏　用于显示Dreamweaver中的各种编码工具，包括打开文档、显示代码浏览器、选择父标签等19种常用工具。

1.2.4 Dreamweaver CC文档视图

Dreamweaver CC为用户提供了多种文档视图，以帮助用户更为便捷地编辑网页内容。

1. 【设计】视图

【设计】视图以可视化的形式来显示网页内容，其界面中并不存在HTML编码，外形类似于用户在浏览器中查看Web页面时的状态。用户可通过单击【文档】工具栏中的【设计】按钮，或执行【查看】|【设计】命令，切换到该视图中。

2. 【代码】视图

【代码】视图以HTML代码形式来显示网页编辑内容，用户可以利用界面中的【编码】工具栏中的各类工具，来提高代码的编辑效果。可通过单击【文档】工具栏中的【代码】按钮，或执行【查看】|【代码】命令，切换到该视图中。

3. 【拆分】视图

【拆分】视图是一个复合型的工作区，它可以同时显示【设计】和【代码】两种视图样式，在其中一个窗口中创建和编辑网页时，所做的更改会即时显示在另一个窗口中。用户可通过单击【文档】工具栏中的【拆分】按钮，或执行【查看】|【代码和设计】命令，切换到该视图中。

除此之外，为了适应新的平板扩展显示宽度，Dreamweaver为用户提供了垂直拆分和水平拆分两种格式。用户可通过执行【查看】|【垂直拆分】命令，来显示垂直拆分格式，而再次执行该命令则取消垂直拆分格式，转而使用水平拆分格式。

4. 【实时视图】

【实时视图】类似于【设计】视图，但相对于【设计】视图来讲，【实时视图】可以更逼真地显示文档在浏览器中的表示形式，并能够像在浏览器中那样与文档进行交互。在【实时视图】中无法对素材进行编辑，用户可通过【代码】视图来编辑网页内容，并通过刷新操作将编辑结果显示在【实时视图】中。用户可通过单击【文档】工具栏中的【实时视图】按钮，或执行【查看】|【实时视图】命令，切换到该视图中。

5. 【实时代码】视图

【实时代码】视图只有在【实时视图】模式下才可以显示。用户需要先切换到【实时视图】模式下，然后再通过单击【文档】工具栏中的【实时代码】按钮，或执行【查看】|【实时代码】命令，来显示该视图模式。而【实时代码】视图主要用于执行该页面的实际代码，并不能进行编辑，当在【实时视图】中与该页面进行交互时，它可以显示动态变化。

1.2.5 【编码】工具栏

在Dreamweaver中的【代码】视图中，用户可以通过编辑HTML代码的方式来制作网页，而【编码】工具栏则位于该视图中。其【编码】工具栏显示在【文档】窗口的左侧，包含了可用于执行多种标准编码操作的按钮。

Dreamweaver为用户提供了实时显示提示功能，用户只需将鼠标移至【编码】工具栏中的按钮上，系统就会显示工具提示信息。默认情况下，【编码】工具栏中各个显示按钮的具体功能如下表所示。

通过上表用户已了解【编码】工具栏中的工具，此时便可以使用工具栏中的按钮来快速编写比较规范的代码。例如，在【编码】工具栏中，单击【打开文档】按钮，并在文件列表中，选择需要打开的文档即可在多文档间进行切换。而将光标定位于需要引用其他代码或者文件的语句，单击【显示代码浏览器】按钮。然后，在光标附近显示所引用的代码内容，即可使用代码导航器了。