8. “文本”选项卡
第1章 Dreamweaver CS6简介
“文本”选项卡包含了多种特定的字符，如商标、引号等特殊字符，这些字符也可以以HTML的方式插入网页之中，如图1-19所示。
图1-19 “文本”选项卡
9. “收藏夹”选项卡
“收藏夹”选项卡用于将“插入栏”中最常用的按钮分组或将其组织到某一公共位置，如图1-20所示。
图1-20 “收藏夹”选项卡
1.4.3 文档工具栏
“文档工具栏”中包含一些按钮，使用这些按钮可以在“代码”视图、“设计”视图以及“拆分”视图间快速切换。文档工具栏还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-21所示。
图1-21 文档工具栏
? ?
?
“显示代码视图”按钮：只在“文档窗口”中显示“代码”视图。 “显示代码视图和设计视图”按钮：将“文档”窗口拆分为“代码”视图和“设计”视图。当选择了这种组合视图时，“文档”左侧显示“代码”视图，右侧显示“设计”视图。 “显示设计视图”按钮：只在“文档窗口”中显示“设计”视图。
注意：如果处理的是 XML、JavaScript、Java、CSS或其他基于代码的文件类型，则不能在“设计”视图中查看文件，而且“设计”和“拆分”按钮将会变暗。
? ? ? ? ? ?
“多屏幕”按钮：可以根据用户的需要选择屏幕的尺寸、大小和方向等。 “在浏览器中预览/调试”按钮：允许用户在浏览器中预览或调试文档，并可从弹出菜单中选择一个浏览器。
“文件管理”按钮：显示“文件管理”弹出菜单。
“W3C验证”按扭：包括验证当前文档、验证实时文档和设置W3C的功能，用于验证当前文档或选定的标签。
“检查浏览器兼容性”按钮：用于检查用户的 CSS是否对于各种浏览器均兼容，包括检查浏览器的兼容性、显示浏览器出现的问题、报告浏览器呈现的问题等。 “可视化助理”按钮：用户可以使用各种可视化助理来设计页面。
11
?
“刷新设计视图”按钮：在“代码”视图中对文档进行更改后，单击此按钮刷新文档的 “设计”视图，因为只有在执行某些操作(如保存文件或单击该按钮)之后，在“代码 ”视图中所作的更改才会自动显示在 “设计”视图中。
注意：刷新过程也依赖于 DOM(文档对象模型)的代码功能，如选择代码块的开始标签
或结束标签的能力。
?
“标题”文本框：允许为文档输入一个标题，该标题将显示在浏览器的标题栏中。如果文档已经有标题了，则该标题将显示在该区域中。
1.4.4 文档窗口
“文档窗口”用于显示当前文档，可以选择下列任一视图。
? 设计视图：一个用于可视化页面布局、可视化编辑和快速进行应用程序开发的设
计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图以在处理文档时显示动态内容。
? 代码视图：一个用于编写和编辑 HTML、JavaScript、服务器语言代码(如 PHP
或 ColdFusion标记语言(CFML))以及任何其他类型代码的手工编码环境。
? 拆分视图：使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设
计”视图。
当“文档窗口”有标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果用户对文档作了更改但尚未保存，则 Dreamweaver会在文件名后显示一个星号。
当“文档窗口”在集成工作区布局(仅适用于Windows系统)中处于最大化状态时，它没有标题栏，页面标题以及文件的路径和文件名则显示在主工作区窗口的标题栏中。并且“文档窗口”顶部会出现选项卡，上面显示了所有打开文档的文件名。若要切换到某个文档，则可单击它的选项卡。
1.4.5 状态栏
“文档窗口”底部的“状态栏”提供与正在创建的文档有关的其他信息，如图1-22所示。
图1-22 状态栏
?
“标签选择器”图标：显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。单击“标签选择器”图标可以选择文档的整个正文。若要在标签选择器中设置某个标签的 class 或 id 属性，则可右击(适用于Windows系统)或按住Ctrl键并单击(适用于Macintosh系统)该标签，然后从弹出的快捷菜单中选择一个“类”或 ID。
12
? ? ? ? ?
第1章 Dreamweaver CS6简介
“选取工具”图标：用于启用或禁用手形工具。
“手形工具”图标：用于在“文档”窗口中单击并拖动文档。 “缩放工具和设置缩放比率”下拉列表框：可以为文档设置缩放比率。 “窗口大小”图标：用于将 “文档窗口”的大小调整到预定义或自定义的尺寸。
“文档大小和下载时间”图标：显示页面(包括所有相关文件，如图像和其他媒体文件)的预计文档大小和预计下载时间。
1.4.6 功能面板
Dreamweaver CS6的功能面板位于文档窗口边缘。常见的功能面板包括“属性”面板、“CSS样式”面板、“应用程序”面板、“文件”面板等。
1. “属性”面板
“属性”面板并不是将所有的对象和属性都加载到面板上，而是根据用户选择的不同对象来动态地显示对象的属性。制作网页时，可以根据需要随时打开或关闭“属性”面板，或者通过拖动属性面板的标题栏将其移到合适的位置。
选定页面元素后系统会显示相应的“属性”面板(见图1-23)。例如，图像“属性”面板、表格“属性”面板、框架“属性”面板、Flash影片“属性”面板、表单元素“属性”面板等。
图1-23 “属性”面板
2. “CSS样式”面板
使用“CSS样式”面板可以跟踪影响当前所选页面元素的CSS规则和属性(“当前”模式)，或影响整个文档的规则和属性(“全部”模式)。单击“CSS样式”面板顶部的相应按钮可以在两种模式之间切换，在“全部”和“当前”模式下还可以修改 CSS属性，如图1-24所示。
在“当前”模式下，“CSS样式”面板包括三个窗格：“所选内容的摘要”窗格，显示文档中当前所选内容的CSS属性；“规则”窗格，显示所选属性的位置(或所选标签的层叠规则)；“属性”窗格，允许用户编辑、定义所选内容的规则的 CSS属性。
在“全部”模式下， “CSS样式”面板包括两个窗格：“所有规则”窗格(顶部)和“属性”窗格(底部)。“所有规则”窗格显示当前文档中定义的规则以及附加到当前文档的样式表中定义的所有规则的列表。使用“属性”窗格可以编辑“所有规则”窗格中任一所选规则的 CSS属性。
对“属性”窗格所作的任何更改都将立即应用，用户在操作的同时便可预览效果。
13
图1-24 “CSS样式”面板
3. “应用程序”面板
“应用程序”面板包含了数据绑定、数据库和服务器行为，是制作网页数据库时的重要面板，如图1-25所示。
4. “文件”面板
使用“文件”面板可查看和管理 Dreamweaver站点中的文件，如图1-26所示。
图1-25 “应用程序”面板
图1-26 “文件”面板
在“文件”面板中查看站点、文件或文件夹时，可以查看区域的大小，还可以展开或折叠“文件”面板。当“文件”面板折叠时，它以文件列表的形式显示本地站点、远程站点或测试服务器的内容。在展开时，它显示本地站点和远程站点或者显示本地站点和测试服务器。“文件”面板还可以显示本地站点的视觉站点地图。
对于 Dreamweaver站点来说，用户还可以通过更改折叠面板中默认显示的视图(本地站点或远程站点视图)来对“文件”面板进行自定义。
14
第1章 Dreamweaver CS6简介
1.5 Dreamweaver CS6的参数设置
本节介绍Dreamweaver CS6的参数设置。在Dreamweaver CS6中通过设置相关参数，可以改变操作环境，从而使其更加符合设计者的设计需要。常见的设置有“预览设置”、“设置外部编辑器”、“编辑快捷键”、“设置页面属性”等，其他的参数设置和这些方法相同，用户可以根据需要自行设置。
1.5.1 预览设置
在设计过程中，用户需要随时在浏览器中打开设计的文档，以便查看其设计效果和及时进行更改和完善。Dreamweaver CS6提供了在设计过程中预览的功能，用户只需使用菜单命令或快捷键就可以在浏览器中打开设计中的文档。
依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“在浏览器中预览”选项，右侧即出现相关界面，如图1-27所示。
图1-27 “首选参数”对话框
对话框中各选项的含义如下。 ? ：单击该按钮，可向列表中添加新的浏览器。 ? ：单击该按钮，可删除列表中选择的浏览器。 ? ：单击该按钮，弹出“编辑浏览器”对话框，从中可修改选定的浏览器
参数，如图1-28所示。
图1-28 “编辑浏览器”对话框
15
中文版+Dreamweaver+CS6网页设计教程 - IT168文库
