1.2 Dreamweaver CS3的工作界面

选择“开始→程序→Adobe Dreamweaver CS3”命令，启动Dreamweaver CS3，弹出Dreamweaver CS3的启动界面，如图1-13所示。

图1-13 Dreamweaver CS3启动界面

单击该界面内“新建”栏中的“HTML”链接文字，即可进入Dreamweaver CS3的工作界面，可以看到其工作界面主要由标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性面板、状态栏、面板组等组成，如图1-14所示。

图1-14 Dreamweaver CS3工作界面

1．菜单栏

菜单栏位于Dreamweaver CS3窗口最上方，提供了各种操作命令，包括如下菜单。

●“文件”：用于新建、打开、保存、预览文档、转换文档格式和检查文档兼容性等。

●“编辑”：提供用于基本操作的标准菜单命令。

●“查看”：用于切换文档的各种视图，显示或隐藏不同类型的页面元素及工具。

●“插入记录”：向页面中插入各种页面元素，创建超链接。

●“修改”：用于设置页面属性及更改选定页面元素的属性。

●“文本”：用于设置文本及段落的格式。

●“命令”：提供了对各种命令的访问，包括根据格式参数的选择来设置代码格式、创建网站相册等。

●“站点”：提供了创建、编辑站点的命令，用于管理当前站点中的文件。

●“窗口”：用于设置工作区布局和各种面板的打开和隐藏。

●“帮助”：用于提供一些帮助信息。

2．插入栏

插入栏包含用于创建和插入对象（如表格、AP元素和图像）的按钮。当鼠标指针移到某一按钮上时，会出现一个工具提示，其中含有该按钮的名称，如图1-15所示。

图1-15 插入栏

●“常用”类别：用于创建和插入最常用的对象，如图像和表格等。

●“布局”类别：用于插入表格、Div标签、框架和Spry构件。还可以选择表格的两种视图：标准（默认）视图和扩展视图。

●“表单”类别：包含一些按钮，用于创建表单和插入表单元素（包括Spry验证构件）。

●“数据”类别：可以插入Spry数据对象和其他动态元素，如记录集、重复区域、插入记录表单和更新记录表单。

●“Spry”类别：包含一些用于构建Spry页面的按钮，包括Spry数据对象和构件。

●“文本”类别：用于插入各种文本格式和列表格式的标签，如b、em、p、h1和ul。

●“收藏夹”类别：用于将插入栏中最常用的按钮分组和组织到某一公共位置。

3．“文档”工具栏

“文档”工具栏左端是快速切换视图模式的按钮，然后是一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1-16所示。

图1-16 “文档”工具栏

●“文档标题”：用于为文档输入一个标题，浏览网页时，它将显示在浏览器的标题栏中。新建文档时，默认的网页标题是“无标题文档”。

●“文件管理”：显示“文件管理”下拉菜单，可完成文件的上传、下载等操作。

●“在浏览器中预览/调试”：从下拉菜单中选择一种浏览器预览或调试文档。

●“刷新设计视图”：在“代码”视图中对文档进行更改后刷新文档的“设计”视图。

●“可视化助理”：用户可以使用各种可视化助理来设计页面。

●“检查浏览器兼容性”：用于检查CSS是否对各种浏览器均兼容。

4．“文档”窗口

“文档”窗口显示当前打开的文档，用户在这里进行网页的编辑制作，分为“代码”视图、“设计”视图和同时显示“代码”视图和“设计”视图的“拆分”视图3种视图模式。

●“设计”视图：是文档窗口的默认视图方式。在“设计”视图下，用户可以直接看到网页的编辑效果，网页编辑排版完成后的效果与浏览器最终显示的效果完全一致，如图1-17所示。

图1-17 “设计”视图窗口

●“代码”视图：以网页源代码方式显示，如图1-18所示。

图1-18 “代码”视图窗口

●“拆分”视图：可在一个窗口中同时看到同一文档的“代码”视图和“设计”视图，如图1-19所示。

图1-19 “拆分”视图窗口

5．标签选择器

标签选择器位于状态栏的最左边，以HTML标记显示页面对象信息，通过它可以选择各种页面元素。例如，单击<body>标签可以选择整个网页内容。用鼠标右键单击任一标签，还可以使用弹出的快捷菜单中的命令对该标签进行删除、编辑等操作。

6．状态栏

状态栏位于文档窗口的底部，用于提供与正在编辑的文档有关的信息和工具，如图1-20所示。

图1-20 Dreamweaver CS3的状态栏

● 选取工具：用于选取“文档”窗口内的对象。

● 手形工具：对象大于“文档”窗口时，用来移动对象的位置。

● 缩放工具：使用该工具后，单击“文档”窗口可增大显示比例，按下【Alt】键单击可缩小显示比例。

● 窗口大小：显示当前文档窗口的大小，以像素为单位。在“窗口大小”区域单击，通过选择弹出的快捷菜单中的命令，可将“文档”窗口的大小调整到预定义或自定义的尺寸。

● 文件大小和预计的下载时间：显示页面（包括所有相关文件，如图像和其他媒体文件）的预计文档大小和预计下载时间。

7．“属性”面板

“属性”面板用于查看和编辑当前选定对象（如文本、图像等）的各种属性。不同页面元素对应的“属性”面板也不同。例如，选择页面上插入的图像，则“属性”面板会显示该图像的属性，包括图像的文件路径、图像的宽度和高度等，如图1-21所示。

图1-21 图像“属性”面板

8．面板组

Dreamweaver CS3的面板组中包含许多面板，每个面板都可以展开或折叠，如图1-22所示，关闭或打开面板可以通过“窗口”菜单来完成。

图1-22 面板组

用户在编辑网页时，若要扩大编辑窗口的大小，可以暂时隐藏面板组。单击面板组与文档窗口间的“隐藏/显示面板组”按钮，可以将所有面板隐藏，再单击该按钮，可以将所有面板显示，如图1-23所示。

图1-23 “隐藏/显示面板组”按钮

9．标尺和网格

在调整网页中一些对象的位置和大小时，利用Dreamweaver CS3提供的标尺和网格工具，可以使操作更加准确。标尺和网格只在网页文档窗口内显示，在浏览器中不显示。

（1）标尺

选择“查看→标尺→显示”命令，可在文档窗口的左边和上边显示标尺。选择“查看→标尺”命令下一级菜单中的“像素”、“英寸”或“厘米”命令，可以更改标尺的单位。

（2）网格

选择“查看→网格设置→显示网格”命令，可以显示或隐藏网格。选择“查看→网格设置→网格设置”命令，可弹出“网络设置”对话框，如图1-25所示，在其中可进行网格间隔、颜色、显示线或点，以及是否显示网格和是否靠齐网格等设置。

图1-25 “网格设置”对话框

图1-24 标尺和网格

上一章目录下一章