《网站制作基础：DreamweaverCS6介绍》

启动Dreamweaver CS6时，软件会打开【欢迎界面】窗口，在该窗口中有三个区域，分别是“打开最近的项目”“新建”和“主要功能”，如图 1-1-1 所示。当需要新建一个空白网页时，可以点击“新建”区域的“HTML”项。

图1-1-1　【欢迎界面】窗口

进入Dreamweaver CS6操作界面，该操作界面主要由标题栏、菜单栏、文档窗口、插入栏和浮动面板组所组成，如图1-1-2所示。

图1-1-2　Dreamweaver CS6操作界面

下面将对这5个主要组成部分的功能和使用方法进行详细介绍。

1.标题栏

标题栏主要显示正在编辑的网页文档信息，包括网页文件的存放路径和网页名称。如果对当前网页做了更改但并未保存，则文件名会追加一个星号在后面。

2.菜单栏

菜单栏将Dreamweaver CS6的所有常用功能划分为文件、编辑、插入等10项菜单。其中每项菜单都有对应的快捷菜单，快捷菜单中又有对应的若干命令，如图1-1-3所示。

3.插入栏

通过插入栏可以方便并快捷地在网页中插入（表格、超链接、图像等）网页元素，用鼠标点击左边类别按钮进行切换，如图1-1-4所示。

图1-1-3　【查看】菜单和快捷菜单

图1-1-4　【插入栏】切换类别

4.文档窗口

文档窗口是编辑网页的主要窗口，在文档窗口中有4个视图，即“代码”视图、“设计”视图、“拆分”视图和“实时视图”。在“代码”视图中可以编辑HTML代码。“设计”视图中的显示效果与浏览器预览的效果相似。“拆分”视图可以同时查看“代码”视图和“设计”视图，如图1-1-5所示。

图1-1-5　4种视图工具栏

5.浮动面板组

面板组是Dreamweaver CS6中按照不同的分类将许多功能集中到窗口的选项卡集合。每个选项卡可以展开和折叠，并且与其他选项卡组合和取消组合，所以被称为浮动面板。在实际的网页制作过程中，使用Dreamweaver CS6的浮动面板，可以将常用的面板显示在界面上，以便提高工作效率，如图1-1-6所示。

下面介绍Dreamweaver CS6中常用的5个面板。

1）【CSS】面板

【CSS】面板中包含“CSS 样式”和“AP元素层”两个选项卡。“CSS样式”选项卡用于定义网页文档中元素的特定样式规则的列表集。“层”选项卡用于设置网页中层元素的格式化工具，如图1-1-7所示。

图1-1-6　常用【面板组】

图1-1-7【CSS】面板

2）【应用程序】面板

【应用程序】面板中包含“数据库”“绑定”“服务器行为”和“组件”4个选项卡，主要用于动态网页的设计与数据库管理，如图1-1-8所示。

3）【标签检查器】面板(www.xing528.com)

【标签检查器】面板中包括“属性”和“行为”两个选项卡，主要用于对选定的标签进行属性和行为的设置工作，如图1-1-9所示。

4）【文件】面板

【文件】面板中包括“文件”“资源”和“代码片断”3 个选项卡。“文件”和“资源”选项卡主要提供站点资源的管理功能，“代码片断”选项卡提供快速插入集成好的代码片断到网页中，代码片断支持JavaScript、META.导航和文本等，如图1-1-10和图1-1-11所示。

5）【属性】面板

【属性】面板是针对当前选定的网页元素的属性设置窗口。选定不同的网页元素，【属性】面板中的内容可能有所不同，如图1-1-12所示为段落的【属性】面板，图1-1-13所示为表格的【属性】面板。

图1-1-8　【应用程序】面板

图1-1-9　【标签检查器】面板

图1-1-10　【文件】选项卡

图1-1-11　【代码片断】选项卡

图1-1-12　段落的【属性】面板

图1-1-13　表格的【属性】面板