第10章-Dreamweaver-CS3基础知识
Dreamweaver CS3网页制作基础教程-教学大纲
《Dreamweaver CS3中文版网页制作基础》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS3界面的组成与使用方法2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握文本、图象、多媒体的主要属性与设置方法5、掌握制作超级链接的方法6、掌握表格的创建、编辑与属性设置方法7、掌握框架结构网页的制作方法8、掌握使用AP Div和CSS样式布局网页的方法9、掌握使用时间轴创建动画的方法10、掌握使用模板和库项目创建网页的方法11、掌握使用行为和Spry构件的方法12、掌握使用表单设计网页的方法13、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章Dreamweaver CS3概况∙了解Dreamweaver CS3的基本概况。
∙熟悉Dreamweaver CS3的工作界面。
∙掌握常用工具栏和面板的基本使用方法。
∙了解Dreamweaver CS3的新特性。
第2章规划、创建和管理站点∙了解网站制作的一般流程。
∙了解网页布局的基本方式。
∙了解网页色彩搭配的基本原理。
∙掌握定义站点的基本方法。
∙掌握设置首选参数的基本方法。
∙掌握创建文件夹和文件的基本方法。
∙掌握编辑、复制和删除站点的基本方法。
∙掌握导出和导入站点的基本方法。
第3章创建和设置文档∙掌握创建、打开、保存和关闭文档的方法。
∙掌握添加文档内容的方法。
∙掌握设置文档格式的方法。
第4章使用图像和媒体∙了解网页中常用图像的基本格式。
∙掌握插入图像和设置图像属性的方法。
∙掌握插入图像占位符的方法。
∙掌握设置网页背景颜色和背景图像的方法。
∙掌握插入Flash动画、图像查看器、ActiveX视频的方法。
第5章设置超级链接∙了解超级链接的种类。
∙掌握设置文本和图像超级链接的方法。
网页制作Dreamweaver-CS3
《网页制作Dreamweaver CS3》目录基础篇第一章网页制作基础知识和Dreamweaver 软件基础活动一：初识网页活动二：认识HTML活动三：制作“我的第一章网页”本章实验：制作“我的个人介绍”网站第二章站点的建立和管理活动一：为个人网站做准备活动二：规划自己的网站活动三：打造自己的个性化站点活动四：编辑我的站点本章实验：制作“个人空间”网站第三章新建文档和对象活动一：初识网页活动二：给网页加入文字和特殊字符活动三：插入列表和其他网页元素本章实验：制作“中国民俗文化”网站第四章表格处理和网页布局活动一：利用表格布局页面活动二：编辑单元格活动三：数据表格的制作本章实验：制作“世锦赛”网站第五章图像的插入和编辑活动一：为网页添加图像活动二：设置图像的属性活动三：在网页中插入图像对象活动四：使用编辑器编辑网页中的图像活动五：为站点打造网站相册本章实验：制作“七彩云南”旅游网站第六章创建超级链接活动一：用不用的方式链接网页活动二：给网页添加邮件链接和书签链接活动三：巧用无址链接和脚本链接活动四：管理站点链接资源本章实验：制作“庐山风景”网站提高篇第七章建立框架网页活动一：初识框架网页活动二：设置框架属性活动三：创建内嵌框架和无框架内容本章实验：制作“中职教育网”网站第八章插入多媒体元素活动一：在网页中插入Flash元素活动二：给网页添加其他多媒体元素活动三：在网页中添加视频和音效本章实验：制作“时尚服饰网”网站第九章建立表单活动一：初识表单活动二：验证表单的输入结果并设置接收结果的方式活动三：Spry构件的使用本章实验：制作“彩虹部落购物商城”网站第十章使用模板和库活动一：网页模板的使用活动二：库项目的使用本章实验：制作“驴友俱乐部”网站第十一章CSS样式表活动一：初识样式表活动二：CSS样式的使用活动三：使用CSS布局页面及样式表的载入本章实验：制作“爱美特电子科技”网站精通篇第十二章AP Div 的使用活动一：AP Div 的创建及基本操作活动二：表格和AP元素的相互转换活动三：AP元素的综合使用本章实验：制作“电影频道”网站第十三章行为活动一：初识行为活动二：行为综合使用一活动三：行为综合使用二本章实验：制作“茶文化”网站第十四章编辑源代码活动一：快速编辑源代码活动二：导入Word和Excel文档活动三：设置源代码参数选项以及整理源代码本章实验：制作“手机销售网”网站综合篇第十五章Fireworks 在网页中的使用活动一：设计网页版面活动二：网页中的GIF动画活动三：切片导出网页本章实验：设计制作“上海美食”网站第十六章Flash在网页中的使用活动一：制作首页标题动画活动二：制作网页中的动画活动三：制作Flash导航栏活动四：在网页中加入Flash本章实验：为“上海美食”网站制作Flash。
Dreamweaver-CS3教案设计
《网页制作基础》教案第1章基础知识（5课时）教学目标1．掌握HTML的基本知识及作用；2．掌握安装和配置IIS的方法；3．熟悉Dreamweaver CS3的工作界面；4．掌握创建和设置Dreamweaver CS3站点的方法。
教学重点1．HTML语言2．熟悉Dreamweaver CS3的工作界面3．创建本地站点教学难点HTML的基本知识教学方法任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。
学生上机操作完成实例与实训。
任务1 认识网页教学目标：1．理解掌握网页的概念2．HTML的概念3．掌握HTML的基本知识及作用教学重点：1．网页的实质2．HTML的基础知识教学难点：HTML标记教学方法：任务驱动法，讲练结合法教具准备：多媒体教学教学内容：第1课时一、网页1、网页的概念：网页是网站的基本组成元素。
网页文件的扩展名通常为.htm或.html。
一般是由HTML 语言编写的文本文件。
2、网页的实质网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。
二、HTML1、Html的中文含义Html是Hypertext Markup Language的缩写，其中文含义是“超文本标记语言”。
2、Html的概念它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB页面。
3、网页文档的组成一个HTML文档通常分为文档头和文档主体两部分。
三、标记1、标记的格式在HTML中定义了许多标记，这些标记用来描述文档。
这些标记使用“<”和“>”括起来。
标记通常分为开始标记和结束标记。
其格式为：<标记名属性名=属性值>标记内容</标记名>注意：若一个标记有多个属性，属性和属性之间要用空格隔开。
示例：简单的网页文档<html><!—文档头部—><head><title>我的第一个网页</title></head><!—文档主体—><body bgcolor=blue text=red><h1>这是我的第一个网页<p>欢迎大家</body></html>第2课时2、常用标记<html>…</html> 标记一个HTML文档的开始和结束。
网页设计DreamweaverCS3教案(华东师范大学)
第 7章建立框架网页教学目标：1．能够理解框架的作用2．能够合理使用框架划分窗口布局3．能够明白框架和框架集的关系4．能在框架中创建编辑网页5．能在框架中打开已有的网页进行编辑6．能够正确保存框架和框架集7．能够理解和编辑框架的属性教学重点：绘制布局表格、绘制布局单元格、设置布局表格和布局单元格的属性教学难点：绘制嵌套布局表格教学课时：理论：2课时实训：4课时教学方法：讲授法、任务驱动法。
教学过程:一、导入新课网页布局技术还有一种，叫做框架。
然而框架本质上是一种浏览器窗口的分割技术。
而前面我们学习的表格和层的布局方式则属于页面分割技术，只是对一个网页的页面做了的划分，在页面不同的位置放置不同的内容，但这些内容仍在同一个页面上。
利用框架，我们可以把浏览器窗口分成几个部分，每一部分都相当于浏览器窗口的一个子窗口，都可以用来显示一个完整的网页，从而可以实现多个页面在浏览器中的同时显示，所以说框架应该算作是一种“窗口”的布局技术。
按照布局要求，把浏览器窗口分成若干子窗口，并在各个子窗口中显示具有不同内容的网页，这些网页有机的结合在一起，达到一个完整的布局效果。
二、讲授新课（一）、框架和框架集的概念框架是一种窗口分割布局技术，利用框架我们可以把窗口分成规划好的若干子窗口，每一个框架都相当于一个子窗口，我们可以在框架中编辑和显示一个完整的网页。
不同框架中的网页是互不相干，根据我们的整体规划，可以把不同的信息放置在不同框架中页面上，从而实现我们想要的布局效果。
每一个框架都属于某个框架集，我们可以把框架集中的一个框架拆分，来实现更多子窗口的划分，就像我们项目中一样，这其实是通过在框架集中不断的嵌套子框架集来实现的。
（二）、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集(1)、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
Dreamweaver CS3 详解
Dreamweaver CS3 简介Dreamweaver CS3是一款功能强大的可视化的网页编辑与管理软件。
利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写一行源代码。
Dreamweaver CS3 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。
用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
1 Dreamweaver CS3概述Dreamweaver CS3是由Adobe公司在并购Macromedia之后推出的最新版本，它是一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。
在业界通常将Dreamweaver、Flash、Fireworks称为网页三剑客。
将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点，同时良好的插件体系，使Dreamweaver CS3可通过第三方插件进行补充。
另外，Dreamweaver CS3还为开发人员提供了动态语言支持与丰富的模板。
另外值得称道的是，Dreamweaver CS3不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。
Dreamweaver CS3在功能强大与易用性之间具有很好的平衡，使用Dreamweaver CS3可以有效地提高Web开发的工作效率。
2 Dreamweaver CS3的新增功能相对于以前的版本Dreamweaver CS3的功能主要在以下方面进行了增强：1. Ajax 的Spry 框架通过Adobe Dreamweaver CS3，可以使用Ajax 的Spry框架进行动态用户界面的可视化设计、开发和部署。
Ajax 的Spry 框架是一个面向Web 设计人员的JavaScript 库，用于构建向用户提供更丰富体验的网页。
Dreamweaver CS3
1．了解网站所要传达的讯息和品牌 2．了解网站的目标人群 3．配色过程中不要滥用颜色 4．阅读主体内容部分建议使用对比色 6．配色要有时效性
网站的框架与布局 大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash 型、变化型。在做设计的时候要抓住客户的需求，把握网站的定位做出合理的框 架布局。下面列出了一些在网站的框架与布局设计时应该注意的地方。
网站开发流程
收集资料和素材 定义站点及配置服务器 网页制作 测试与调试 发布和维护
网站开发注意事项
网站的风格(style)是指站点的整体形象给浏览者的综合感受。一个拥有自己独 特风格的网站，就会使网站浏览者愿意花更多的时间去品尝该站。 网站的形象设计与配色 一个好的形象设计，首先要有一个好的视觉效果。检验网站是否有一个好的形 象设计，下面就介绍一种最为简单的方法——感观判别法。下面将介绍一些网站 形象设计中配色的使用技巧：
Dreamweaver CS3
学习概述
本部分内容是设计网页的基础。了解一些 与Internet和网页设计相关的基础知识，是设计 网页必不可少的知识。虽然利用DW可以不用 编写一行代码就能设计出专业水准的网页，但 理解和掌握HTML语言对网页设计很有帮助， 对以后学习服务器端的编程语言也大有裨益。 因为本课程定位于静态网页设计，所以只对 HTML语言最常用的标签元素作简单的讲解。
1．分辨率是设计网页时必须考虑的问题 2．空间的合理利用也极为重要 3．合理的广告布局
HTML简介
作为一名Web开发人员，是不可避免的要接触和使用HTML语言。HTML语法 非常简单。它通过各种标记来表示，可以先来看一个建立简单网页的例子如： 1. 实例代码 在记事本中输入以下代码（从<html>开始到</html>结束）： <html> <head> <title> HTML基础 </title> </head> <body> 一个简单的网页 </body> </html> 2. 保存文件 注意要保存为htm类型文件。 3. 查看所创建的文件 在桌面上找到它双击。此时windows默认的IE浏览器打开了它
Dreamweaver+CS
3.2 定义页面属性
4．标题/编码属性
3.3 保存和显示文档
执行“文件”|“另存为”命令，打开“另存为” 对话框， 在“另存为”对话框中可以定义文档的名称， 也可以选择保存文档的类型。选择“保存类型” 选项，打开“保存类型”下拉列表，从中选择 需要保存的文档类型。 保存后的文档可以在浏览器中预览。执行“文 件”|“在浏览器中预览”命令，可以打开浏览 器选择下拉菜单，在下拉菜单中显示的是操作 系统中当前安装的浏览器。
2 管理站点
一般在制作网页之前，都要在本地的计算 机中创建本地的测试站点。当测试完成之 后，再传到Internet服务器上。在 Dreamweaver CS3中，可以方便地构建和管 理站点。
2.1 新建站点
在新建站点之前，首先要在磁盘中新建一 个站点文件。新建文件时可以直接在磁盘 中建立，也可以在文件面板中建立。
1.4 文档窗口
2．“代码”视图
1.4 文档窗口
3．“拆分”视图
1.5 属性面板
属性面板用来定义页面元素或内容的相应 属性。由于选择的元素或者内容不同，属 性面板中显示的属性也有所区别。下面是 是选择图像内容后，属性Dreamweaver CS3中，面板都整合到面板组中，通过单击 面板的标题可以显示和隐藏相应的面板。面板和面板组处 于Dreamweaver CS3工作界面的右侧。当面板关闭时，面 板组的显示效果如图所示，打开某个面板后的显示效果如 图所示。
1.3 插入栏
插入栏用来插入各种常用和布局对象。根 据选择的选项不同，在插入菜单中显示的 内容也有所区别。选择“常用”和“布局” 选项时，插入栏的显示效果如图11-4和图 所示。
1.4 文档窗口
文档窗口用来显示当前文档。在文档窗口中，可以使用三种方式显示 文档内容：分别是“设计”视图、“代码”视图、“拆分”视图。下 面分别进行介绍。 1．“设计”视图
PhotoshopCS3FlashCS3DreamweaverCS3商业网站开发从入门到精通
23.1.2 时间轴
l 4．复制、粘贴、移动、清除帧（或关键帧） l 在Flash CS3中复制、粘贴、移动、清除帧（或关键帧）
的方法如下所示。
l 打开或者新建文件。
l 选择所要复制的帧。
l 执行下列操作之一，复制帧（或关键帧）。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
l 打开或者新建文档。
l 执行“插入”|“新建元件”命令。
l 打开“创建新元件”对话框，选择“影片剪辑”选项， 并定义新元件的名称为“影片剪辑元件1”。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
23.2.5 编辑和删除元件
l 创建各种元件之后，如果要修改元件的内容，或者某些 元件将不会再被使用时，就要编辑和删除已建立的元件， 编辑和删除元件的操作如下所示。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
23.2.8 创建补间形状
l 使用补间形状可以制作对象变形的动画，例如由一种形 状变为另一种形状，或由一种颜色变为另一种颜色等， 创建补间形状的操作如下所示。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
l 单击图层（或者图层文件夹）名称，选择图层（或者图 层文件夹）。
l 执行“编辑”|“时间轴”|“复制帧”命令，复制图层（或 者图层文件夹）内容。
PhotoshopCS3FlashCS3Dreamwea verCS3商业网站开发从入门到精通
23.1.3 图层
l 5．移动图层或文件夹
l 在制作Flash文档时，有时会更改图层（或者图层文件 夹）的顺序，具体方法如下所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第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 文档窗口文档窗口有三种视图状态，分别是：代码、拆分和设计。
在文档工具栏部分有三个按钮，如图10-2，可以快速地切换三种视图。
图10-2 视图切换按钮代码视图状态下，文档窗口显示网页的代码，如图10-1中所示。
设计视图状态下，文档窗口显示网页的外观，即我们所说的“所见即所得”的编辑方式。
拆分视图状态下，文档窗口被拆分成上下两个窗口，两个窗口分别是代码视图状态和设计视图状态，而且在这种状态下，两个窗口是关联的，无论是你在代码窗口选定代码或是在设计窗口选定元素，另一个窗口都会定位到相应的位置。
10.3.2状态栏状态栏提示当前创建的文档的有关信息，如图10-3所示。
首先左侧显示当前编辑的内容所属的节点。
右侧提供的选取工具、手型工具、缩放工具是在设计视图下的快捷按钮，作用分别是选取页面元素，移动页面以方便浏览，放大或缩小页面的显示比例。
以图10-3所示状态栏为例，“100%”表示当前的显示比例，“524×159”表示当前文档窗口中页面显示部分的宽度和高度，“1K / 1秒”表示当前页面文件的大小，以及浏览时页面下载所需的时间（参照的下载速度可以自行设定）。
图10-3 状态栏10.3.3 插入工具栏插入工具栏提供的是部分操作或功能的快捷按钮，这些功能或操作是在编辑网页中频繁使用的，非常方便。
下面我们给出的图像展示了常用、布局、表单和文本四个部分，这四个部分的功能对于编写静态页面是最为常用的。
常用部分包含了在页面中插入超链接、图像、表格、锚标记、注释、脚本、日期等等操作的快捷按钮。
图10-4 插入工具栏（常用）布局部分提供了插入<div>元素、框架、以及借助Spry框架实现的菜单、选项卡面板等操作的快捷按钮。
图10-5 插入工具栏（布局）表单部分提供了插入表单标记及各个控件的快捷按钮。
此外提供了借助Spry框架实现的部分控件输入值验证的功能按钮。
图10-6 插入工具栏（表单）文字部分提供了插入特殊符号文本的快捷按钮。
如果不使用这些按钮我们就要在代码中输入相应的字符实体来实现。
图10-7 插入工具栏（文本）10.3.4 文档工具栏文档工具栏上有我们前面提到的文档视图切换按钮，同时还有新建、打开、保存、剪切、复制、粘贴、页面预览、上传、根据DTD声明验证HTML标记等快捷按钮。
此外DW CS3版本为文档工具栏增加了部分按钮，主要就是对不同媒体类型的支持。
我们前面学习过定义CSS样式表可以针对不同的媒体类型，比如说计算机、投影仪、手持设备等。
文档工具栏提供了不同媒体类型的切换按钮，以便根据你的样式表显示相应媒体下的效果。
图10-8 文档工具栏10.3.5 属性面板属性面板用于对网页中元素属性的设置，属性面板中的属性项动态关联至鼠标选定的网页元素。
如图，该图分别展示的是网页中文本的属性页和图像元素的属性页。
图10-9 属性面板（文本属性）图10-10 属性面板（图像属性）10.3.6 结果面板结果面板用于显示几种常用操作的操作结果，如图10-11。
图10-11 结果面板以下我们详细介绍结果面板中较为常用的几种功能：（1）搜索：DW提供的搜索十分强大。
如图，DW搜索的范围可以是鼠标选定的一段文字，当前文档，当前打开的几个文档，某个文件夹下的所有文档，甚至是整个站点的文档。
而且查找的内容可以是源代码，可以是文本，可以是某个标记。
图10-12 查找和替换功能（2）参考：参考部分准备了十余本参考书，大部分是O’REILL Y公司出版的有关Web 技术方面的手册，涉及HTML、JavaScript、ASP、PHP、JSP等。
对于英文基础比较好的学习者有很大的帮助。
（3）验证：我们知道HTML规范有着不同版本，我们编写网页时规范的做法是在第一行便声明页面代码遵循哪一个的HTML规范。
验证部分就是根据你的声明或在没有声明的情况下根据默认设置验证你的页面是否符合规范。
如果不符合规范则会在结果面板区域列示网页中不符合规范的标记或属性。
这对于我们编写符合W3C标准的网页十分有帮助。
（4）浏览器兼容性检查：近似与验证功能，预先设定所要编写的网页适合哪些浏览器类型及版本，通过此功能检查网页中使用的标记在这些浏览器中是否能够正常显示。
（5）链接检查器：检查选定的文档中的链接是否有效，无效链接将显示在结果面板区域。
10.3.7 文件面板文件面板（如图10-13）可以管理当前站点的文件和文件夹，无论它们是本地站点还是在远程服务器上。
文件面板还可以访问本地磁盘上的全部文件，类似于Windows 资源管理器。