1.7 认识Dreamweaver CS4

Dreamweaver是一款专业的网页制作工具，它不仅拥有“所见即所得”的可视化编辑环境，还提供了强大的HTML代码编写功能。无论是使用HTML语言，还是使用可视化编辑器， Dreamweaver都为我们提供了良好的工具，丰富了我们的创作。

下面我们一起来了解Dreamweaver CS4的基础知识。

1.7.1 Dreamweaver CS4的特点

Dreamweaver是一款好的网页制作软件，相对于FrontPage、GoLive等其他类型的网页制作软件，Dreamweaver的优势明显。

所见即所得

在制作网页时，不需要通过浏览器就能预览网页，实时了解自己的工作进度和效果。

制作效率高

Dreamweaver可以用最快速的方式将Fireworks或Photoshop文件移到网页上，整体运作流畅自然。设计者不需要离开Dreamweaver，就可以使用Dreamweaver自动开启Fireworks或Photoshop程序来进行编辑。

网站管理方便

使用网站地图可以快速制作网站雏形，设计、更新和重组网页。改变网页位置或档案名称时，Dreamweaver会自动更新所有链接。

兼容性好

使用Dreamweaver设计的网页，可以呈现在任何平台的浏览器上。使用浏览器的检查功能，Dreamweaver可以告知用户在不同浏览器上的执行效果。

可扩展性强

通过Dreamweaver的扩展管理器，可以将一些行为、动作和命令的插件整合到Dreamweaver中，提高Dreamweaver的设计和开发功能。

1.7.2 Dreamweaver CS4的新增功能

相对于Dreamweaver CS3来说，Dreamweaver CS4又增加了一些新的功能。

全新的工作界面

借助共享型用户设计界面，设计者可在Adobe Creative Suite 4的不同组件之间更快、更便捷地工作。使用工作区切换器可以从一个工作环境快速切换到另一个工作环境。

实时视图

借助Dreamweaver CS4新增的实时视图功能，用户可以在真实的浏览器环境中设计网页，同时仍可以直接访问代码，呈现的屏幕内容会立即反映出对代码所做的更改。

针对Ajax和JavaScript框架的代码提示

借助改进的JavaScript核心对象和基本数据类型支持，可以更有效地编写JavaScript。通过集成包括jQuery、Prototype和Spry在内的流行JavaScript框架，充分利用Dreamweaver CS4的扩展编码功能。

相关文件和代码导航器

Dreamweaver CS4使用户能够有效地管理组成当今网页的各种文件。单击任何相关文件，即可在代码视图中查看其源代码，并同时在设计视图中查看其页面。新增的代码导航器功能可显示影响当前所选内容的所有代码源，如CSS（层叠样式表）规则、服务器端包括、外部JavaScript函数、Dreamweaver模板、iFrame源文件等。

InContext Editing

在Dreamweaver中设计页面，使用户无须帮助或使用其他软件就可以使用Adobe InContext Editing在线服务编辑他们的网页。Dreamweaver的设计人员可以限制对特定页面、特殊区域的更改权，甚至可以自定义格式选项。

CSS最佳做法

Dreamweaver CS4的【属性】检查器使用户能够创建新的CSS规则，并对每个属性所适合的层叠样式提供简单明确的解释。

HTML数据集

用户不需要掌握数据库或XML编码，就可将动态数据的强大功能融入网页中。Spry数据集可以将简单HTML表中的内容识别为交互式数据源。

Adobe Photoshop智能对象

在Dreamweaver中插入任何Adobe Photoshop PSD（Photoshop数据文件）文档即可创建一个图像智能对象。智能对象与源文件紧密链接，不需要启动Photoshop程序，就可以在Deamweaver中对源图像进行任何更改并更新图像。

Subversion集成

Dreamweaver CS4集成了Subversion软件（开源的版本控制系统），提供更为可靠的存回/取出体验，可以直接从Dreamweaver中更新站点并存回修改。

Adobe AIR创作支持

在Dreamweaver中直接创建基于HTML和JavaScript的Adobe AIR应用程序，在Dreamweaver中即可预览AIR应用程序，使Adobe AIR应用程序随时可与AIR打包及代码签名功能一起部署。

1.7.3 Dreamweaver CS4的工作界面

启动Dreamweaver CS4后，进入如图1.38所示的界面。

Dreamweaver CS4的欢迎界面有3个分栏。

打开最近的项目：在该栏中显示了近期打开的文档，单击【打开】超链接可以打开其他文件。

新建：该栏列出了Dreamweaver中可存在的各类文件，单击【更多】超链接打开【新建文档】对话框，如图1.39所示，可以创建其他类型的文件。单击【Dreamweaver站点】超链接可以新建一个站点。

主要功能：该栏列出了Dreamweaver CS4的主要功能，单击相关的文字超链接，可以了解该功能的具体应用。

Dreamweaver CS4的工作界面如图1.40所示，包括应用程序栏、菜单栏、文档工具栏、文档窗口、标签选择器、【属性】检查器及面板组（【文件】面板等）等组成部分。

Dreamweaver CS4的工作界面中各元素介绍如下：

应用程序栏：应用程序栏包含几个应用程序控件和一个窗口切换器。

菜单栏：菜单栏涵盖了几乎所有Dreamweaver CS4中的功能。通过菜单栏可以进行对象的任意操作与控制。

文档工具栏：包含一些按钮和弹出式菜单，这里提供了各种文档窗口视图（如设计视图和代码视图）的切换按钮、各种查看选项和一些常用操作（如在浏览器中预览）。

文档窗口：显示当前创建和编辑的文档。

标签选择器：该选择器位于文档窗口底部的状态栏中，显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。

【属性】检查器：用于查看和更改所选对象或文本的各种属性。不同的对象具有不同的属性。在编码器工作窗口中，【属性】检查器默认是不展开的，如图1.41所示。

面板组：帮助用户监控和修改设计工作，包括【插入】面板、【CSS样式】面板和【文件】面板等。若要展开某个面板，在面板上单击鼠标即可。

【文件】面板：用于管理文件和文件夹，不管它们是Dreamweaver站点的一部分还是位于远程服务器上的一部分。通过【文件】面板，用户可以访问本地磁盘上的全部文件，类似于Windows资源管理器（Windows）或Finder（Macintosh）。

1.7.4 Dreamweaver CS4的视图模式

Dreamweaver CS4视图模式可以分为5种：代码视图、拆分视图、设计视图、实时视图及实时代码视图。

代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码（如PHP或ColdFusion标记语言CFML），以及作为任何其他类型代码的手工编码环境，如图1.42所示。

拆分视图：该视图是设计人员查看代码是否错误的窗口，使用该视图可以将代码与设计效果进行对比，如图1.43所示。

设计视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，设计人员可以直接添加图像、动画和文本等，设计者的思想能够直观地显示在窗口中，如图1.44所示。

实时视图：实时视图更逼真地显示文档在浏览器中的表示形式，如图1.45所示，并能像在浏览器中那样与文档交互。实时视图不可编辑，不过可以在代码视图中进行编辑，然后刷新实时视图来查看所做的更改。

实时代码视图：实时代码视图仅当在实时视图中查看代码文档时可用。实时代码视图显示浏览器用于执行该页面的实际代码，如图1.46所示，当在实时视图中与该页面进行交互时，它可以动态变化。实时代码视图不可编辑。

在Dreamweaver CS4的工作界面中，可以通过以下两种方法来切换视图：

使用【查看】菜单中的相关命令，如图1.47所示。

单击文档工具栏中的相应按钮，如图1.48所示。

1.7.5 Dreamweaver CS4的文件基本操作

下面介绍如何在Dreamweaver CS4中新建、保存和打开文件。

1. Dreamweaver CS4的文件

Dreamweaver CS4支持多种文件类型，主要文件类型是HTML文件，可以使用html或htm作为扩展名来保存HTML文件。默认情况下，Dreamweaver CS4使用html作为扩展名来保存文件。Dreamweaver CS4中可能会用到的其他一些文件类型如表1.6所示。

2. 在Dreamweaver CS4中创建新文件

启动Dreamweaver CS4之后，用户可以自欢迎界面中创建新文件，也可以使用【文件】菜单创建新文件，具体操作步骤如下：

1 执行【文件】→【新建】命令，打开【新建文档】对话框（参见图1.39）。

2 在对话框左侧选择【空白页】选项卡，在【页面类型】列表框中选择【HTML】选项，在【布局】列表框中选择【无】选项。

3 单击【创建】按钮，创建一个新文件。

3. 在Dreamweaver CS4中保存文件

在Dreamweaver CS4中保存文件的具体操作步骤如下：

1 执行【文件】→【保存】命令，打开【另存为】对话框，如图1.49所示。

2 设置文件的保存类型和文件名称，然后单击【保存】按钮即可。

4. 在Dreamweaver CS4中打开文件

在Dreamweaver CS4中打开文件的具体操作步骤如下：

1 执行【文件】→【打开】命令，打开【打开】对话框，如图1.50所示。

2 在该对话框的【查找范围】下拉列表中选择文件路径，然后在下方的列表框中选择一个需要打开的文件，然后单击【打开】按钮，即可打开所需的文件。