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所示的界面。
图1.38 启动软件后的界面
Dreamweaver CS4的欢迎界面有3个分栏。
打开最近的项目：在该栏中显示了近期打开的文档，单击【打开】超链接可以打开其他文件。
新建：该栏列出了Dreamweaver中可存在的各类文件，单击【更多】超链接打开【新建文档】对话框，如图1.39所示，可以创建其他类型的文件。单击【Dreamweaver站点】超链接可以新建一个站点。
图1.39 【新建文档】对话框
主要功能：该栏列出了Dreamweaver CS4的主要功能，单击相关的文字超链接，可以了解该功能的具体应用。
Dreamweaver CS4的工作界面如图1.40所示，包括应用程序栏、菜单栏、文档工具栏、文档窗口、标签选择器、【属性】检查器及面板组（【文件】面板等）等组成部分。
图1.40 工作界面
Dreamweaver CS4的工作界面中各元素介绍如下：
应用程序栏：应用程序栏包含几个应用程序控件和一个窗口切换器。
菜单栏：菜单栏涵盖了几乎所有Dreamweaver CS4中的功能。通过菜单栏可以进行对象的任意操作与控制。
文档工具栏：包含一些按钮和弹出式菜单，这里提供了各种文档窗口视图（如设计视图和代码视图）的切换按钮、各种查看选项和一些常用操作（如在浏览器中预览）。
文档窗口：显示当前创建和编辑的文档。
标签选择器：该选择器位于文档窗口底部的状态栏中，显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
【属性】检查器：用于查看和更改所选对象或文本的各种属性。不同的对象具有不同的属性。在编码器工作窗口中，【属性】检查器默认是不展开的，如图1.41所示。
图1.41 切换到编码器工作窗口
面板组：帮助用户监控和修改设计工作，包括【插入】面板、【CSS样式】面板和【文件】面板等。若要展开某个面板，在面板上单击鼠标即可。
【文件】面板：用于管理文件和文件夹，不管它们是Dreamweaver站点的一部分还是位于远程服务器上的一部分。通过【文件】面板，用户可以访问本地磁盘上的全部文件，类似于Windows资源管理器（Windows）或Finder（Macintosh）。
1.7.4 Dreamweaver CS4的视图模式
Dreamweaver CS4视图模式可以分为5种：代码视图、拆分视图、设计视图、实时视图及实时代码视图。
代码视图：用于编写和编辑HTML、JavaScript、服务器语言代码（如PHP或ColdFusion标记语言CFML），以及作为任何其他类型代码的手工编码环境，如图1.42所示。
图1.42 代码视图
拆分视图：该视图是设计人员查看代码是否错误的窗口，使用该视图可以将代码与设计效果进行对比，如图1.43所示。
图1.43 拆分视图
设计视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，设计人员可以直接添加图像、动画和文本等，设计者的思想能够直观地显示在窗口中，如图1.44所示。
图1.44 设计视图
实时视图：实时视图更逼真地显示文档在浏览器中的表示形式，如图1.45所示，并能像在浏览器中那样与文档交互。实时视图不可编辑，不过可以在代码视图中进行编辑，然后刷新实时视图来查看所做的更改。
图1.45 实时视图
实时代码视图：实时代码视图仅当在实时视图中查看代码文档时可用。实时代码视图显示浏览器用于执行该页面的实际代码，如图1.46所示，当在实时视图中与该页面进行交互时，它可以动态变化。实时代码视图不可编辑。
图1.46 实时代码视图
在Dreamweaver CS4的工作界面中，可以通过以下两种方法来切换视图：
使用【查看】菜单中的相关命令，如图1.47所示。
图1.47 【查看】菜单的部分命令
单击文档工具栏中的相应按钮，如图1.48所示。
图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所示。
表1.6 Dreamweaver CS4中常用的其他文件类型
2. 在Dreamweaver CS4中创建新文件
启动Dreamweaver CS4之后，用户可以自欢迎界面中创建新文件，也可以使用【文件】菜单创建新文件，具体操作步骤如下：
1 执行【文件】→【新建】命令，打开【新建文档】对话框（参见图1.39）。
2 在对话框左侧选择【空白页】选项卡，在【页面类型】列表框中选择【HTML】选项，在【布局】列表框中选择【无】选项。
3 单击【创建】按钮，创建一个新文件。
3. 在Dreamweaver CS4中保存文件
在Dreamweaver CS4中保存文件的具体操作步骤如下：
1 执行【文件】→【保存】命令，打开【另存为】对话框，如图1.49所示。
图1.49 【另存为】对话框
2 设置文件的保存类型和文件名称，然后单击【保存】按钮即可。
4. 在Dreamweaver CS4中打开文件
在Dreamweaver CS4中打开文件的具体操作步骤如下：
1 执行【文件】→【打开】命令，打开【打开】对话框，如图1.50所示。
图1.50 【打开】对话框
2 在该对话框的【查找范围】下拉列表中选择文件路径，然后在下方的列表框中选择一个需要打开的文件，然后单击【打开】按钮，即可打开所需的文件。