发布时间 : 星期日 文章中文版+Dreamweaver+CS6网页设计教程 - IT168文库更新完毕开始阅读
? ? ? ? ?
第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
默认：选中“主浏览器”或“次浏览器”复选框，可设定选择的浏览器是否为主浏览器。
? 选项：选中“使用临时文件预览”复选框，可使用临时文件预览。
将Internet Explorer(简称IE)设置为默认浏览器的快捷键为F12。在设计过程中，如果想预览页面效果，可选择“文件”|“在浏览器中预览”命令或按快捷键F12。
?
1.5.2 设置外部编辑器
Dreamweaver CS6具有良好的外部程序接口，可以与各种页面元素相关的外部编辑器相连接，在设计过程中可以及时调用这些外部程序并编辑页面元素，完成后还可以将编辑好的元素直接应用在设计中，十分便捷。
设置外部编辑器示例：将Photoshop CS6设置为Dreamweaver CS6中.jpg、.jpe、.jpeg等文件的外部编辑器。设置外部编辑器的具体操作步骤如下。
(1) 依次选择“编辑”|“首选参数”菜单命令，打开“首选参数”对话框，在“分类”列表框中选择“文件类型/编辑器”选项，如图1-29所示。
图1-29 选择“文件类型/编辑器”选项
(2) 在“扩展名”列表框中选择.jpg .jpe .jpeg选项，然后单击“编辑器”列表框上方的按钮，打开“选择外部编辑器”对话框，如图1-30所示。
图1-30 “选择外部编辑器”对话框
16