1.1 操作界面

1.1.1 【操作目的】

通过打开文件和弹出属性面板命令，熟悉菜单栏的操作。通过链接选项改变链接文字的状态，熟悉CSS功能的应用方法。

1.1.2 【操作步骤】

选择“文件>打开”命令，在弹出的“打开”对话框中，选择云盘中的“基础素材> Ch01 >在线留言网页> index.html”文件，单击“打开”按钮打开文件，如图1-1所示。

选择“修改 >页面属性”命令，弹出“页面属性”对话框。在对话框左侧的“分类”列表框中选择“链接（CSS）”选项，单击“加粗”按钮，将“链接颜色”设为白色（#FFF），在“下划线样式”下拉列表中选择“始终无下划线”选项，如图1-2所示。

单击“确定”按钮，链接文字发生变化，效果如图1-3所示。保存文档，按F12键预览效果，如图1-4所示。

1.1.3 【相关工具】

1.开始页面

启动Dreamweaver CS6后，首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等，如图1-5所示。

如果不想显示开始页面，可选择“编辑 >首选参数”命令，或按Ctrl+U组合键，在弹出的“首选参数”对话框中取消选择“显示欢迎屏幕”复选框，如图1-6所示。单击“确定”按钮完成设置。用户再次启动Dreamweaver CS6时，将不再显示开始页面。

2.不同风格的界面

Dreamweaver CS6的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。

若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口 >工作区布局”命令，弹出其子菜单，如图1-7所示，在子菜单中选择其中的一种界面风格，页面会发生相应的改变。

3.伸缩自如的功能面板

在浮动面板的右上角单击按钮，可以隐藏或展开面板，如图1-8所示。

如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时，拖曳鼠标，调整工作区的大小，如图1-9所示。若用户需要更大的工作区，可以将面板隐藏。

4.多文档的编辑界面

Dreamweaver CS6提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换，如图1-10所示。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。

5.“插入”面板

Dreamweaver CS6的“插入”面板在菜单栏的下方，如图1-11所示。

6.更完整的CSS功能

传统的HTML提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CS6就提供了这种方便有效的CSS功能。

“属性”面板提供了CSS功能。用户可以通过“属性”面板中的“类”下拉列表对所选的对象应用样式或创建和编辑样式，如图1-12所示。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。

“页面属性”按钮也提供了CSS功能。单击“页面属性”按钮，弹出“页面属性”对话框，如图1-13所示。用户可以在“分类”列表框中选择“链接（CSS）”选项，在“下划线样式”下拉列表中设置超链接的样式，这个设置会自动转化成CSS样式，如图1-14所示。

Dreamweaver CS6除了提供图1-15所示的“CSS样式”面板外，还提供图1-16所示的“CSS样式”面板。在“CSS样式”面板中，用户可轻松地查看规则的属性设置，并可快速修改嵌入当前文档或通过附加的样式表链接的CSS 样式。可编辑的网格使用户可以更改显示的属性值，对所做的更改，系统都将立即应用，用户可以在操作的同时预览效果。