第10章-Dreamweaver-CS3基础知识

第10章Dreamweaver CS3基础知识

课前导读

Dreamweaver是绝大多数网页设计者使用的网页编辑软件。Dreamweaver具有功能强大，操作性强的特点。本章我们就学习使用Dreamweaver软件。

本章重点

在本章我们将重点学习：

☐Dreamweaver CS3的常用功能

☐Dreamweaver CS3的使用

10.1 Dreamweaver CS3简介

Dreamweaver是Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、Flash以及之后推出的针对专业网页图像设计的Fireworks，三者被称为“网页三剑客”，几乎是每个网页设计者必须学习使用的工具套件。

Dreamweaver总的特点是：

1．最佳的制作效率

Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于很多的常用操作都只要一个简单步骤便可完成。Dremweaver只要单击便可自动开启Firework或Photoshop来进行编辑与设定图像文档的最佳化。

2．网站管理

使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用提示文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

3．无可比拟的控制能力

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的惊人。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango与自行发展的应用软体。使用Dreamweaver在设计动态网页时，不需要透过浏览器就能预览网页。建立网页外观的模板，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。

Macromedia公司于2005年被Adobe公司收购，收购后负责Dreamweaver开发的项目组又推出了Dreamweaver的最新版本Dreamweaver CS3 （以下简称DW CS3），DW CS3包含有一个崭新、简洁、高效的界面，且性能也得到了改进。此外，还包含了众多新增的功能，改善了软件的易用性，其中最为主要的是增加了对Ajax技术的支持，推出了Spry 框架。

10.2 Dreamweaver CS3的新增功能

由于Ajax技术的盛行，各种Ajax框架如雨后春笋一样被开发出来，Dreamweaver CS3也推出了自己的框架——Spry。Dreamweaver CS3的新增功能主要以Spry框架为基础。

（1）适合于Ajax的Spry框架

使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面。在减少页面刷新的同时, 增加交互性、速度和可用性。

（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）浏览器兼容性检查

借助全新的浏览器兼容性检查，节省时间并确保跨浏览器和操作系统的更加一致的体验。生成识别各种浏览器中与CSS相关的问题的报告，而不需要启动浏览器。

（7）CSS Advisor网站

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

（8）CSS 布局

借助全新的CSS布局，将CSS轻松合并到您的项目中。在每个模板中都有大量的注释解释布局，这样初级和中级设计人员可以快速学会。可以为您的项目自定义每个模板。

（9）CSS 管理

轻松移动CSS代码：从行中到标题，从标题到外部表，从文档到文档，或在外部表之间。清除较旧页面中的现有CSS从未像现在这样容易。

（10）Adobe Device Central CS3

使用Adobe Device Central，设计、预览和测试移动设备内容。

以上的新增特性对于初学者可能还不能使用得上，我们在这里不进行详细说明，相信随着对网页设计方方面面技术的学习，最终会感受到DW CS3带给我们的优秀体验。

10.3 Dreamweaver CS3的工作界面

DW CS3界面风格与以往版本没有太大变化，这使得使用过以往版本的用户可以毫无障碍地接受熟悉新版本的使用。本节对DW CS3工作界面进行介绍，通过对界面各个部分的介绍，初学者会对DW软件的使用有大致的了解。DW CS3工作界面如图10-1：

图10-1 Dreamweaver CS3界面

我们大致把其界面直观地划分为9个部分，以下我们将对这9个部分结合图例逐一进行详细说明，对这9个部分具体的功能掌握后，详细读者就已经掌握了该软件的使用。

10.3.1 文档窗口

文档窗口有三种视图状态，分别是：代码、拆分和设计。在文档工具栏部分有三个按