下载掌阅APP，畅读海量书库
立即打开
Dreamweaver有着非常友好的操作界面，发展到CS6版之后，其界面更加实用。DreamweaverCS6提供了一个将全部工作区元素置于一个窗口中的集成布局，如图4-3所示。Dreamweaver CS6的工作区由应用程序栏、工具栏、文档窗口、属性检查器、标签选择器、面板等元素构成。下面分别对这些界面元素进行介绍。
图4-3 Dreamweaver CS6的工作区
文档工具栏包含一些按钮，这些按钮提供各种文档窗口视图，如“设计”视图和“代码”视图的选项、各种查看选项和一些常用操作，如在浏览器中预览。文档工具栏如图4-4所示。
图4-4 Dreamweaver CS6的文档工具栏
在文档工具栏中，从左到右依次是代码、拆分、设计、实时视图、多屏幕、在浏览器中预览/调试、文件管理、W3C验证、检查浏览器兼容性、标题。常用的功能介绍如下。
◆ 代码： 选择代码视图之后，文档窗口切换到编辑HTML、JavaScript、服务器语言代码（如PHP或ASP以及任何其他类型代码）的手工编码环境。
◆ 拆分： 选择拆分视图之后，文档窗口会被拆分成两部分，分别显示代码视图和设计视图。在Dreamweaver CS6中文档窗口默认是垂直的，可以通过“查看”菜单里面的“垂直拆分”命令来变成水平拆分。
◆ 设计： 选择设计视图之后，文档窗口切换到可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，用户可以采用所见即所得的方式来进行设计和开发。
◆ 实时视图： 与设计视图类似，实时视图更逼真地显示文档在浏览器中的表示形式，并使用户能够像在浏览器中那样与文档交互。实时视图不可编辑。不过，设计人员可以在代码视图中进行编辑，然后刷新实时视图来查看所做的更改。
◆ 检查浏览器兼容性： 该工具用于检查当前网页中的CSS代码是否对各种浏览器均兼容。
◆ 在浏览器中预览/调试： 允许用户在浏览器中预览或调试文档。单击该按钮之后，会出现一个浏览器的列表，可以从中选择一个浏览器进行预览。如果直接按快捷键F12，则会调用默认的浏览器预览。
◆ 标题： 用来设置当前文档的标题，即当前HTML文档的title属性。当新建一个HTML文档的时候，默认值为“无标题文档”。
文档工具栏主要是针对当前文档的一些操作，用于切换不同的视图。在Dreamweaver中设计网页经常用到的就是代码视图、设计视图及代码/设计拆分视图。当用户在任何一个视图中对当前文档进行修改或者选择其中的元素之后，其他视图都可以即时反映出来。
默认情况下，标准工具栏并不显示。要显示它，可以选择菜单栏中的“查看”→“ 工具栏”→“标准工具栏”命令。
使用标准工具栏中的按钮可以执行“文件”和“编辑”菜单中的常见操作，主要包括新建、打开、在Bridge中浏览、保存、全部保存、打印代码、剪切、复制、粘贴、撤销和重做，如图4-5所示。
图4-5 标准工具栏
样式呈现工具栏在默认情况下，也是隐藏的。若要显示该工具栏，可以选择菜单栏中的“查看”→“ 工具栏”→“样式呈现”命令。
如果在HTML文档中使用了依赖于媒体的样式表，使用该工具栏能够查看当前HTML文档在不同媒体类型中的呈现方式。它还包含一个允许用户启用或禁用CSS样式的按钮，如图4-6所示。
图4-6 样式呈现工具栏
只有在HTML文档使用了依赖于某种媒体的样式表时，此工具栏才有用。
默认情况下，Dreamweaver会显示屏幕媒体类型的设计。此外还可以查看其他媒体类型的呈现。
◆ 呈现屏幕媒体类型： 显示当前HTML文档在计算机屏幕上的显示方式。
◆ 呈现打印媒体类型： 显示当前HTML文档在打印纸张上的显示方式。
◆ 呈现手持型媒体类型： 显示当前HTML文档在手持设备上的显示方式。
◆ 呈现投影媒体类型： 显示当前HTML文档在投影设备上的显示方式。
◆ 呈现TTY媒体类型： 显示当前HTML文档在电传打字机上的显示方式。
◆ 呈现TV媒体类型： 显示当前HTML文档在电视屏幕上的显示方式。
◆ 切换CSS样式的显示： 用于启用或禁用CSS样式。此按钮可独立于其他媒体按钮之外工作。
◆ 设计时样式表： 可用于指定设计时样式表。
浏览器导航工具栏只有在实时视图中才可见，并显示当前文档的地址。从Dreamweaver CS5起，实时视图的作用类似于常规的浏览器，因此即使在地址栏里面输入本地站点以外的站点，Dreamweaver也将在文档窗口中加载该页面。浏览器导航工具栏如图4-7所示。
图4-7 浏览器导航工具栏
编码工具栏包含可用于执行多种标准编码操作的按钮，例如折叠和展开所选代码、高亮显示无效代码、应用和删除注释、缩进代码、插入最近使用过的代码片段等。在代码视图中，编码工具栏垂直显示在文档窗口的左侧，如图4-8所示。
图4-8 编码工具栏
状态栏位于文档窗口的底部，显示当前文档的有关信息，如图4-9所示。
图4-9 状态栏
在状态栏里面，包含标签选择器、选取工具、手形工具、缩放工具、设置缩放比例、窗口大小弹出菜单、文档大小和下载时间及编码指示器。
◆ 标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。如果单击<body>标签可以选择当前文档的整个正文。若要在标签选择器中设置某个标签的 class 或 ID 属性，可以右击该标签，然后从上下文菜单中选择一个类或ID。
◆ 选取工具启用和禁用手形工具。
◆ 手形工具用于在文档窗口中单击并拖动文档。
◆ 缩放工具和设置缩放比例弹出菜单使用户可以为当前文档设置缩放比例。
◆ 窗口大小弹出菜单用于将文档窗口的大小调整到预定义或自定义的尺寸。该工具在代码视图中不可以使用。
◆ 文档大小和下载时间显示页面的预计文档大小和预计下载时间。其中包括所有相关文件，如图像和其他媒体文件。
◆ 编码指示器显示当前文档的文本编码。
属性检查器使用户可以检查和编辑当前选定页面元素的最常用属性。属性检查器中的内容根据选定的元素会有所不同。图4-10中显示的是在设计视图中选中一个input标签之后的状态。里面包括字符宽度、最多字符、表单域的类型及CSS类。
图4-10 属性检查器
插入面板包含用于创建和插入对象的按钮。这些按钮按几个类别进行组织，用户可以通过从类别弹出菜单中选择所需类别来进行切换。当前文档包含服务器代码时，还会显示其他类别，例如ASP等。插入面板如图4-11所示。
图4-11 插入面板
图4-11中的插入面板包含以下类别。
◆ 常用类别： 用于创建和插入最常用的对象，例如图像和表格。
◆ 布局类别： 用于插入表格、表格元素、div标签、框架和Spry构件。用户还可以选择表格的两种视图，即标准（默认）表格和扩展表格。
◆ 表单类别： 包含一些按钮，用于创建表单和插入表单元素（包括Spry验证构件）。
◆ 数据类别： 使用户可以插入Spry数据对象和其他动态元素，例如记录集、重复区域及插入记录表单和更新记录表单。
◆ Spry类别： 包含一些用于构建Spry页面的按钮，包括Spry数据对象和构件。
◆ InContext Editing类别： 包含供生成InContext编辑页面的按钮，包括用于可编辑区域、重复区域和管理CSS类的按钮。
◆ 文本类别： 用于插入各种文本格式和列表格式的标签，如b、em、p、h1 和 ul。
◆ 收藏夹类别： 用于将“插入”面板中最常用的按钮分组和组织在一起。
◆ 服务器代码类别： 仅适用于使用特定服务器语言的页面，这些服务器语言包括ASP、CFMLBasic、CFML Flow、CFMLAdvanced和PHP。这些类别中的每一个都提供了服务器代码对象，用户可以将这些对象插入“代码”视图中。
为了便于使用，用户可以将“插入”面板从其默认停靠位置拖出并放置在“文档”窗口顶部的水平位置。这样做后，它会从面板更改为工具栏。
使用文件面板可查看和管理Dreamweaver站点中的文件，如图4-12所示。
使用CSS样式面板可以查看和编辑影响当前所选页面元素的CSS规则和属性，或影响整个文档的规则和属性。使用CSS样式面板顶部的切换按钮可以在两种模式之间切换，如图4-13所示。
图4-12 文件面板
图4-13 CSS样式面板
下拉菜单几乎是每个Windows窗口的必需元素。在网页设计中，为了在比较小的空间里面把网站里面的重要栏目都列出来，经常也会用到下拉菜单。
Dreamweaver集成了Spry。Spry是Adobe公司推出的轻量级的AJAX框架。利用这个框架可以为HTML文档增加一些Web 2.0的元素，增强网页的交互性。Spry还包含多个组件，本例将使用其中的Spry菜单栏。
step 1 在Dreamweaver CS6中，选择“文件”→“新建”命令。在弹出的“新建文档”对话框中选择“空白页”选项，在“页面类型”列表中选择“HTML”选项，在“布局”列表中选择“无”选项。单击“创建”按钮，创建一个新的HTML文档。
step 2 选择“文件”→“保存”命令，在弹出的“另存为”对话框里设置文件名为Menu.html，单击“保存”按钮。
step 3 在插入面板中，切换到“”Spry选项卡。单击其中的“Spry菜单栏”按钮，出现“Spry菜单栏”对话框，如图4-14所示。在此，用户可以选择是水平菜单还是垂直菜单。这里，选择“水平”单选按钮，单击“确定”按钮。
step 4 Dreamweaver会自动产生一些菜单项，如图4-15所示。单击标准工具栏上面的“保存”按钮，保存刚才所做的操作。
图4-14 Spry菜单栏
图4-15 Spry菜单栏
step 5 在文件面板中，单击“在浏览器中预览/调试”按钮，选择“预览在IExplore”命令或者按F12快捷键，在IE中预览当前文档，如图4-16所示。
图4-16 在IE中预览当前文档
step 6 单击设计视图中的Spry菜单栏，然后在文档窗口下面的标签选择器里面选中刚刚创建的菜单栏，在属性检查器里面会显示出该菜单栏的属性，如图4-17所示。
从图中可以看出，Dreamweaver已经为新创建的菜单栏指定了一个id，值为MenuBar1。在属性检查器的中间有3个列表，分别对应Spry菜单栏的一级菜单、二级菜单和三级菜单。属性检查器的右边有4个文本框，分别对应于当前菜单项的文本、当前菜单项的链接、当前菜单项中a标签的 title属性及target属性。用户可以为当前菜单项添加、删除以及修改其文本及其链接。
图4-17 Spry菜单栏的属性
step 7 在属性检查器的最左边的列表中，单击“项目 1”选项，在右边的第一个文本框里面把“项目 1”修改为“文件”，按回车键。此时，在最左边的列表中，“项目1 ”也同时变成了“文件”，如图4-18所示。
图4-18 修改菜单项
step 8 在保持最左边的列表中“文件”选项被选中的情况下，单击中间列表框中的第一项。此时，最右边的文本框里面显示了中间列表框中第一项的属性。按照同样的方法，把该项的文本修改为“新建”。
step 9 重复上面的操作。最终效果是把顶级菜单项依次修改为“文件”、“编辑”、“视图”和“帮助”。“文件”对应的第二级菜单依次为“新建”、“打开”和“退出”；“编辑”对应的二级菜单依次为“复制”、“剪贴”和“粘贴”；“视图”对应的二级菜单依次为“放大”和“缩小”；“帮助”对应的二级菜单为“关于”。
按F12快捷键，在IE中预览最终效果，如图4-19所示。
图4-19 Spry菜单
在文档窗口中，切换到代码视图，可以看到，Dreamweaver已经自动生成了很多代码。菜单的代码如下：
从以上代码可以看出，实际上，整个菜单是一个ul标签，每一个菜单的菜单项也是一个ul标签，只不过使用了JavaScript脚本和CSS使得ul标签的显示效果像一个菜单而已。
通过Dreamweaver可以在HTML文档里面生成类似于Windows应用程序的选项卡式面板，方法如下。
step 1 在Dreamweaver CS6中，选择“文件”→“新建”命令，新建一个HTML文档，并把该文档保存为tab.html。
step 2 在插入面板中，切换到“Spry”选项卡。单击其中的“”Spry 选项卡式面板选项，在当前文档中插入一个选项卡式面板，如图4-20所示。
step 3 在设计视图中，把鼠标移到新插入的面板上。当面板左上角出现绿色“Spry 选项卡式面板”的时候，单击绿色部分，选中整个面板。在属性检查器里面可以看到该面板的属性，如图4-21所示。
图4-20 插入Spry选项卡式面板
图4-21 Spry选项卡式面板属性
step 4 在设计视图中，单击“标签1”，把“标签1”修改为“我的文章”。按照同样的方法，把“标签2”修改为“我的照片”。修改完成后如图4-22所示。
图4-22 修改选项卡的标题
step 5 在设计视图中单击“内容1”所在的灰色区域，把“内容1”修改为自己想要的文字。单击面板左上的绿色部分，选中整个面板，在属性检查器里面，找到中间的“面板”列表，单击其中的“我的照片”选项。此时在设计视图里面，就切换到“我的照片”面板的内容了。
单击“内容2”所在的灰色区域，把“内容2”删掉。选择“插入”→“图像”命令，在出现的“选择图像源文件”对话框里面，选择一个图像文件，单击“确定”按钮，把图像插入到当前文档中，如图4-23所示。
图4-23 在“我的照片”面板中插入图像
step 6 单击标准工具栏上面的“保存”按钮，保存以上修改。按F12快捷键，在IE中预览效果，如图4-24所示。其中（a）为“我的文章”面板，（b）为“我的照片”面板。单击面板的名称，可以在这两个面板之间切换。
图4-24(a) 选项卡式面板
图4-24(b) 选项卡式面板
在代码视图中查看本文档的代码，可以得知实际上整个选项卡面板是一个div标签，里面的面板是ul标签。代码如下：
