第10章DreamweaverCS3基础知识

1第10章DreamweaverCS3基础知识课前导读Dreamweaver是绝大多数网页设计者使用的网页编辑软件。Dreamweaver具有功能强大，操作性强的特点。本章我们就学习使用Dreamweaver软件。本章重点在本章我们将重点学习：DreamweaverCS3的常用功能DreamweaverCS3的使用10.1DreamweaverCS3简介Dreamweaver是Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、Flash以及之后推出的针对专业网页图像设计的Fireworks，三者被称为“网页三剑客”，几乎是每个网页设计者必须学习使用的工具套件。Dreamweaver总的特点是：1．最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于很多的常用操作都只要一个简单步骤便可完成。Dremweaver只要单击便可自动开启Firework或Photoshop来进行编辑与设定图像文档的最佳化。2．网站管理2使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有连结。使用提示文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3．无可比拟的控制能力Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的惊人。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，ColdFusion，iCAT，Tango与自行发展的应用软体。使用Dreamweaver在设计动态网页时，不需要透过浏览器就能预览网页。建立网页外观的模板，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。Macromedia公司于2005年被Adobe公司收购，收购后负责Dreamweaver开发的项目组又推出了Dreamweaver的最新版本DreamweaverCS3（以下简称DWCS3），DWCS3包含有一个崭新、简洁、高效的界面，且性能也得到了改进。此外，还包含了众多新增的功能，改善了软件的易用性，其中最为主要的是增加了对Ajax技术的支持，推出了Spry框架。10.2DreamweaverCS3的新增功能由于Ajax技术的盛行，各种Ajax框架如雨后春笋一样被开发出来，DreamweaverCS3也推出了自己的框架——Spry。DreamweaverCS3的新增功能主要以Spry框架为基础。（1）适合于Ajax的Spry框架使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面。在减少页面刷新的同时,增加交互性、速度和可用性。3（2）Spry数据使用XML从RSS服务或数据库将数据集成到Web页中。集成的数据很容易进行排序和过滤。（3）Spry窗口组件借助来自适合于Ajax的Spry框架的窗口组件,轻松地将常见界面组件(如列表、表格、选项卡、表单验证和可重复区域)添加到Web页中。（4）Spry效果借助适合于Ajax的Spry效果，轻松地向页面元素添加视觉过渡，以使它们扩大选取、收缩、渐隐、高光等等。（5）AdobePhotoshop和Fireworks集成直接从AdobePhotoshopCS3或FireworksCS3复制和粘贴到DreamweaverCS3中以利用来自您的已完成项目中的原型的资源。（6）浏览器兼容性检查借助全新的浏览器兼容性检查，节省时间并确保跨浏览器和操作系统的更加一致的体验。生成识别各种浏览器中与CSS相关的问题的报告，而不需要启动浏览器。（7）CSSAdvisor网站借助全新的CSSAdvisor网站（具有丰富的用户提供的解决方案和见解的一个在线社区），查找浏览器特定CSS问题的快速解决方案。（8）CSS布局借助全新的CSS布局，将CSS轻松合并到您的项目中。在每个模板中都有大量的注释解释布局，这样初级和中级设计人员可以快速学会。可以为您的项目自定义每个模板。（9）CSS管理轻松移动CSS代码：从行中到标题，从标题到外部表，从文档到文档，或在外部表之间。清除较旧页面中的现有CSS从未像现在这样容易。（10）AdobeDeviceCentralCS3使用AdobeDeviceCentral，设计、预览和测试移动设备内容。4以上的新增特性对于初学者可能还不能使用得上，我们在这里不进行详细说明，相信随着对网页设计方方面面技术的学习，最终会感受到DWCS3带给我们的优秀体验。10.3DreamweaverCS3的工作界面DWCS3界面风格与以往版本没有太大变化，这使得使用过以往版本的用户可以毫无障碍地接受熟悉新版本的使用。本节对DWCS3工作界面进行介绍，通过对界面各个部分的介绍，初学者会对DW软件的使用有大致的了解。DWCS3工作界面如图10-1：图10-1DreamweaverCS3界面我们大致把其界面直观地划分为9个部分，以下我们将对这9个部分结合图例逐一进行详细说明，对这9个部分具体的功能掌握后，详细读者就已经掌握了该软件的使用。10.3.1文档窗口文档窗口有三种视图状态，分别是：代码、拆分和设计。在文档工具栏部分有三个按5钮，如图10-2，可以快速地切换三种视图。图10-2视图切换按钮代码视图状态下，文档窗口显示网页的代码，如图10-1中所示。设计视图状态下，文档窗口显示网页的外观，即我们所说的“所见即所得”的编辑方式。拆分视图状态下，文档窗口被拆分成上下两个窗口，两个窗口分别是代码视图状态和设计视图状态，而且在这种状态下，两个窗口是关联的，无论是你在代码窗口选定代码或是在设计窗口选定元素，另一个窗口都会定位到相应的位置。10.3.2状态栏状态栏提示当前创建的文档的有关信息，如图10-3所示。首先左侧显示当前编辑的内容所属的节点。右侧提供的选取工具、手型工具、缩放工具是在设计视图下的快捷按钮，作用分别是选取页面元素，移动页面以方便浏览，放大或缩小页面的显示比例。以图10-3所示状态栏为例，“100%”表示当前的显示比例，“524×159”表示当前文档窗口中页面显示部分的宽度和高度，“1K/1秒”表示当前页面文件的大小，以及浏览时页面下载所需的时间（参照的下载速度可以自行设定）。图10-3状态栏10.3.3插入工具栏插入工具栏提供的是部分操作或功能的快捷按钮，这些功能或操作是在编辑网页中频繁使用的，非常方便。下面我们给出的图像展示了常用、布局、表单和文本四个部分，这四个部分的功能对于编写静态页面是最为常用的。常用部分包含了在页面中插入超链接、图像、表格、锚标记、注释、脚本、日期等等操作的快捷按钮。6图10-4插入工具栏（常用）布局部分提供了插入div元素、框架、以及借助Spry框架实现的菜单、选项卡面板等操作的快捷按钮。图10-5插入工具栏（布局）表单部分提供了插入表单标记及各个控件的快捷按钮。此外提供了借助Spry框架实现的部分控件输入值验证的功能按钮。图10-6插入工具栏（表单）文字部分提供了插入特殊符号文本的快捷按钮。如果不使用这些按钮我们就要在代码中输入相应的字符实体来实现。图10-7插入工具栏（文本）10.3.4文档工具栏文档工具栏上有我们前面提到的文档视图切换按钮，同时还有新建、打开、保存、剪切、复制、粘贴、页面预览、上传、根据DTD声明验证HTML标记等快捷按钮。此外DWCS3版本为文档工具栏增加了部分按钮，主要就是对不同媒体类型的支持。我们前面学习过定义CSS样式表可以针对不同的媒体类型，比如说计算机、投影仪、手持设备等。文档工具栏提供了不同媒体类型的切换按钮，以便根据你的样式表显示相应媒体下的效果。7图10-8文档工具栏10.3.5属性面板属性面板用于对网页中元素属性的设置，属性面板中的属性项动态关联至鼠标选定的网页元素。如图，该图分别展示的是网页中文本的属性页和图像元素的属性页。图10-9属性面板（文本属性）图10-10属性面板（图像属性）10.3.6结果面板结果面板用于显示几种常用操作的操作结果，如图10-11。图10-11结果面板以下我们详细介绍结果面板中较为常用的几种功能：（1）搜索：DW提供的搜索十分强大。如图，DW搜索的范围可以是鼠标选定的一段文字，当前文档，当前打开的几个文档，某个文件夹下的所有文档，甚至是整个站点的文档。而且查找的内容可以是源代码，可以是文本，可以是某个标记。8图10-12查找和替换功能（2）参考：参考部分准备了十余本参考书，大部分是O’REILLY公司出版的有关Web技术方面的手册，涉及HTML、JavaScript、ASP、PHP、JSP等。对于英文基础比较好的学习者有很大的帮助。（3）验证：我们知道HTML规范有着不同版本，我们编写网页时规范的做法是在第一行便声明页面代码遵循哪一个的HTML规范。验证部分就是根据你的声明或在没有声明的情况下根据默认设置验证你的页面是否符合规范。如果不符合规范则会在结果面板区域列示网页中不符合规范的标记或属性。这对于我们编写符合W3C标准的网页十分有帮助。（4）浏览器兼容性检查：近似与验证功能，预先设定所要编写的网页适合哪些浏览器类型及版本，通过此功能检查网页中使用的标记在这些浏览器中是否能够正常显示。（5）链接检查器：检查选定的文档中的链接是否有效，无效链接将显示在结果面板区域。10.3.7文件面板文件面板（如图10-13）可以管理当前站点的文件和文件夹，无论它们是本地站点还是在远程服务器上。文件面板还可以访问本地磁盘上的全部文件，类似于Windows资源管理器。文件面板提供了多种视图：本地视图、远程视图、测试服务器、地图视图。9图10-13文件面板10.3.8面板组面板组是分组在某个标题下面的相关面板的集合，如图10-14。若要展开一个面板组，可以单击组名称左侧的展开箭头；若要取消停靠一个面板组，可以拖动该组标题条左边缘的手柄。图10-14面板组该面板组中的面板均未展开，在这里我们对其做一简单说明：（1）CSS：显示当前元素的CSS式样，可以在该区域新建、修改或删除CSS声明语句。10（2）代码片段：代码片段部分收集了许多常用代码段，包括HTML代码、JavaScript代码等。（3）应用程序：应用程序面板为使用动态技术的页面的编写提供了方便，该部分包括了数据库的链接，数据集的绑定，组件的使用等方面的内容。（4）标签检查器：标签检查器动态关联到文档窗口内当前选定的元素标记，标签检查器列示出该标记具有的属性，可供该标记绑定的事件等。（5）资源：资源面板用于管理页面中使用的多媒体元素，图片、Flash动画、声音文件等。实际上DWCS3在默认状态下还有很多面板未显示，可以通过设置选择显示的面板，调整面板的布局，因此使用者可以根据自己的使用习惯定制该应用程序的显示项目。10.3.9菜单由于很多的常用功能在DW界面上都有快捷按钮，而菜单中更加复杂的功能也不是本书的介绍内容，因此我们本部分只介绍“编辑”菜单中的几项。（1）标签库：标签库显示如图10-15。我们可以新建标签，并且可以为标签添加属性。虽然对于符合W3C规范的HTM