第2章 初识Dreamweaver CS3

Dreamweaver CS3是Adobe公司最新推出的集网页制作和网站管理于一身的所见即所得的网页编辑软件，被称为网页三剑客之一，利用它可以轻而易举地制作出充满动感的网页。Dreamweaver CS3提供了众多的可视化设计工具、应用开发环境以及代码编辑支持。开发人员和设计师能够快捷地创建代码，构建功能强大的网络应用程序，集成度非常高，开发环境精简而高效。本章主要介绍Dreamweaver CS3的基本操作界面和新增功能。

↘ 本章学习目标

· 了解什么是Dreamweaver和Dreamweaver的特点

· 熟悉Dreamweaver CS3的操作界面

· 了解Dreamweaver CS3的新增功能

↘ 本章学习流程

2.1 Dreamweaver CS3简介

Dreamweaver CS3是Adobe公司推出的用于网站设计与开发的业界领先工具的最新版本，Dreamweaver CS3提供了强大应用开发功能、代码编辑支持和可视化布局工具，使设计和开发人员能够有效地创建非常吸引人的、基于标准的网站和应用。

Dreamweaver CS3新增了多种新功能特性，包括适合于Ajax的Spry框架，浏览器兼容性检查，以及全新的CSS布局等。此外它还增强了易用性，例如缩放和代码折叠功能使开发流程变得更加顺畅，能更容易地把FLV格式的视频添加到网页中等。可以说，Dreamweaver CS3适合从业余到专业的所有网页制作人员。Dreamweaver CS3的启动界面如图2-1所示。

2.2 Dreamweaver CS3的特点

Dreamweaver CS3作为Adobe收购Macromedia后推出的全新版本，增强了面向专业人士的基本工具和可视技术，与一般的网页制作软件相比，主要具有以下特点。

1．业界领先的工具

Dreamweaver CS3具有强大的灵活性和功能，设计者可以在“设计”视图中进行页面可视化的设计制作，也可以在“代码”视图中编写复杂的代码。通过标记的文档窗口、可对接的面板组、可自定义的工具栏和集成的文件浏览器，可以节省宝贵的开发时间。

2．完整的CSS样式支持

Dreamweaver CS3支持完整的CSS样式，借助全新的CSS布局能够快速提高工作效率，如图2-2所示。可视CSS工具的优势是，使用这些工具可以轻松地在文件内或文件之间查看、编辑和移动样式，以及查明更改将如何影响设计，并且还可以运用全新的浏览器兼容性检查测试页面与浏览器的兼容性，如图2-3所示。

3．支持业界领先的技术

Dreamweaver CS3支持业界领先的Web开发技术，包括HTML，XHTML，CSS，XML，JavaScript，Ajax，PHP，Adobe ColdFusion，ASP，ASP.NET和JSP，并支持多种数据库，如图2-4所示。

Dreamweaver CS3通过利用代码库创建数据库插入和更新表单、记录集导航页和用户认证页，快速开发公用lnternet应用程序，利用现场数据填充设计视图来测试布局。Dreamweaver CS3还可以通过XML保持前沿的领先优势，轻易地执行ColdFusion，.NET和Java中基于XML的Web服务，并通过XML输出的默认创建及标准HTML到XHTML的简单转换，确保标准的一致性。

4．轻松的XML

Dreamweaver CS3使用XSL或适合于Ajax的Spry框架，快速集成XML内容。指向XML文件或XML feed URL，Dreamweaver CS3将显示其内容，这使设计者能够将适当的字段拖放到页面上。

5．集成的工作流

在Dreamweaver CS3中不仅可以进行网页设计、开发和维护，同时还可以使用其他Adobe工具（包括Adobe Flash CS3，Fireworks CS3，Photoshop CS3，Contribute CS3及用于创建移动设备内容的全新Adobe Device Central CS3）的智能集成，从而提供了一个高度可配置的工作区。Dreamweaver CS3工作区如图2-5所示。

6．集成的编码环境

Dreamweaver CS3中提供了强大的编码功能，例如代码提示、标记编辑器、代码折叠、可扩展的颜色编码、标记选择器、代码片断和代码确认等，可以提高代码编写的速度。在设计者不懂代码的情况下，也能够制作出动态效果的网页。Dreamweaver CS3的客户端行为能方便地生成网页的动态效果，如果是熟悉代码的设计者，可以大大提高书写代码的时间。Dreamweaver CS3编码如图2-6所示。

7．支持FLV视频

在Dreamweaver CS3中可以轻松地在页面中插入Flash视频，只需要选择“插入”栏上的“媒体”下拉列表中的“Flash视频”选项，即可轻松地将FLV视频文件添加到页面中，如图2-7所示。并且还可以自定义视频环境以匹配所制作的网页。

8．跨平台支持

Dreamweaver CS3可用于基于lntel或PowerPC的苹果计算机，也可用于Windows XP和Windows Vista系统。用户可以在首选平台中设计，然后跨平台交付更加可靠、一致和高性能的结果。

2.3 Dreamweaver CS3的操作界面

在学习Dreamweaver CS3之前，先了解一下它的工作环境。Dreamweaver CS3的工作区将多个文档集中到一个界面中，如图2-8所示，不仅降低了系统资源的占用，而且可以更加方便地操作文档。Dreamweaver CS3的操作界面包括几个部分，即标题栏、菜单栏、工具栏、插入栏、文档窗口、浮动面板、状态栏和“属性”面板。

2.3.1 Dreamweaver CS3菜单栏

Dreamweaver CS3的主菜单共分10种，即“文件”、“编辑”、“查看”、“插入记录”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”，如图2-9所示。

其中，可以通过执行“编辑→首选参数”命令，打开“首选参数”对话框，对Dreamweaver CS3的首选参数进行设置，如图2-10所示。

2.3.2 Dreamweaver CS3工具栏

“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图、“代码”视图）的选项，各种查看选项和一些常用操作（如在浏览器中预览页面）。“文档”工具栏如图2-11所示。

在“文档”工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

“标准”工具栏包含来自“文件”和“编辑”菜单下的一般操作的按钮：“新建”、“打开”、“在Bridge中浏览”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”，如图2-12所示。

提示

在Dreamweaver CS3的默认状态下，“标准”工具栏是隐藏的，如果需要显示“标准”工具栏，可以执行“查看→工具栏→标准”菜单命令来显示它。

“编码”工具栏包含可进行多种标准编码操作的按钮。“编码”工具栏仅在“代码”视图中可见，它以垂直方式显示在“文档窗口”的左侧，如图2-13所示。

提示

用户不能取消停靠或移动“编码”工具栏，但是可以通过“首选参数”对话框，将其隐藏。

“样式呈现”工具栏（默认情况下隐藏）包含一些按钮，如果使用依赖于媒体的样式表，利用这些按钮能够查看设计在不同媒体类型中的呈现方式。它还包含一个允许用户启用或禁用CSS样式的按钮。可以执行“查看→工具栏→样式呈现”菜单命令，显示“样式呈现”工具栏，如图2-14所示。

提示

只有在文档使用依赖于媒体的样式表时，此工具栏才有用。例如，样式表可能为打印指定某种正文规则，而为手持设备指定另一种正文规则。

默认情况下，Dreamweaver CS3会显示屏幕媒体类型的设计（该类型显示页面在计算机屏幕上的呈现方式）。用户可以在“样式呈现”工具栏中单击相应的按钮来查看其媒体类型的呈现。

2.3.3 Dreamweaver CS3插入栏

网页的内容包括文字、图像、表格、导航条、程序等，虽然多种多样，但是都可以被称为对象，大部分对象都可以通过“插入栏”插入，如图2-15所示。

在插入栏上有多个选项卡可供选择，用鼠标单击某个选项卡，就可以切换到该选项卡中。

在插入栏中包含了用于将各种类型的页面元素（如图像、表格和层）插入到文档中的按钮。每一个对象都是一段HTML代码，允许用户在插入它时设置不同的属性。例如，用户可以在插入栏中单击“图像”按钮，插入一个图像。

可以通过插入栏上的“收藏夹”选项卡，分组和组织最常用的按钮，还可以在“收藏夹”选项卡中添加、管理和删除按钮。

在插入栏上单击鼠标右键，在弹出菜单中选择“自定义收藏夹”选项，如图2-16所示。弹出“自定义收藏夹对象”对话框，按照用户的需要可以添加、删除和更改收藏夹中的对象，如图2-17所示。

提示

插入栏可以通过“窗口→插入记录”菜单命令打开，插入栏中的项目都可以在编辑窗口上方的“插入记录”菜单下找到。

2.3.4 Dreamweaver CS3中的面板

浮动面板是Dreamweaver CS3操作界面的一大特色，面板可以浮动于文档窗口之上，可以随意调整面板的位置，以扩充文档窗口，节省屏幕空间。用户可以根据需要显示浮动面板，也可以拖曳面板脱离面板组。通过在三角图标上单击鼠标可展开或折叠浮动面板，如图2-18和图2-19所示。

网页设计中的对象都有各自的属性，比如文字有字体、字号、对齐方式等属性，图形有大小、链接、替换文字等属性。所以在有了上面的对象之后，就要有相应的面板对对象进行设置。这就要用到“属性”面板，“属性”面板的设置项目会根据对象的不同而变化，选中图像时“属性”面板上的内容如图2-20所示。

“属性”面板可以通过“窗口→属性”菜单命令打开，“属性”面板上的大部分内容都可以在编辑窗口上方的“修改”菜单中找到。

提示

面板打开之后可能随意放置在屏幕上，有时会很杂乱，这时候选择编辑窗口上方的“窗口→工作区布局”菜单命令中的一种布局方式，面板就能够整齐地摆放在屏幕上。当需要更大的编辑窗口时，可以按F4快捷键，所有的面板都会隐藏；再按一下F4快捷键，面板又会在原来的位置出现。对应的菜单项是“窗口→显示面板”或“窗口→隐藏面板”，但还是使用快捷键方便。

2.4 Dreamweaver CS3的新增功能

Dreamweaver CS3是Dreamweaver的最新版本，它同以前的Dreamweaver 8版本相比，增加了一些新的功能，并且还增强了很多原有的功能。

1．适合于Ajax的Spry框架

Dreamweaver CS3中通过适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面，在减少页面刷新的同时，增加交互性、速度和可用性。Dreamweaver CS3中提供了Spry框架选项卡，如图2-21所示。

2．Spry数据

使用XML从RSS服务或数据库将数据集成到Web页中。集成的数据很容易进行排序和过滤。

3．Spry窗口组件

借助来自适合于Ajax的Spry框架的窗口组件，轻松地将常见界面组件（如列表、表格、选项卡、表单验证和可重复区域）添加到Web页中。

4．Spry效果

借助适合于Ajax的Spry效果，轻松地向页面元素添加视觉过渡，以使它们扩大选取、收缩、渐隐、高光等。

5．Adobe Photoshop和Fireworks集成

直接从Adobe Photoshop CS3或Fireworks CS3复制和粘贴到Dreamweaver CS3中，以利用来自于已完成项目的原型资源。

6．浏览器兼容性检查

借助全新的浏览器兼容性检查，节省时间并确保跨浏览器和操作系统的更加一致的体验。Dreamweaver CS3提供了“浏览器兼容性检查”面板，如图2-22所示，生成识别各种浏览器中与CSS相关的问题的报告，而不需要启动浏览器。

7．CSS Advisor网站

借助全新的CSS Advisor网站（具有丰富的用户提供的解决方案和见解的一个在线社区），查找浏览器特定CSS问题的快速解决方案。

8．CSS布局

可以在“新建文档”对话框中选择全新的CSS布局，如图2-23所示，将CSS轻松合并到项目中。在每个模板中都有大量的注释解释布局，初级和中级设计人员可以快速学会。可以为项目自定义每个模板，如图2-24所示。

9．CSS管理

轻松移动CSS代码，范围从行中到标题，从标题到外部表，从文档到文档，或在外部表之间。清除旧页面中的CSS从未像现在这样容易。CSS管理如图2-25所示。

10．Adobe Device Central CS3

使用Adobe Device Central CS3（现在已集成

到整个Adobe Creative Suite 3中），设计、预览和测试移动设备内容。Adobe Device Central CS3界面如图2-26所示。