第5章用Dreamweaver可视化设计页面
如果要细数目前最优秀、最流行的可视化HTML设计工具，那么Dreamweaver应该是其中之
一。
在本书第1章已经提到过Dreamweaver的下载和安装的内容，没有安装的读者可以参考第1章中关于Dreamweaver的介绍，在电脑上安装一个Dreamweaver。
本章将介绍Dreamweaver的基础使用知识，了解Dreamweaver操作的一些方法，下一章将介绍如何在Dreamweaver中创建站点。
在后续的网站内容介绍中，还会穿插对该工具的讨论。
5.1Dreamweaver工作区 Adobe的CS系列软件都使用了统一的浮动窗口式布局，将所有的可供使用的操作和属性以浮动面板的方式呈现，既方便用户，也可以根据需要进行折叠来节省屏幕空间。
Dreamweaver的工作区非常灵活，它根据开发人员和设计人员的不同要求对浮动和工具面板进行了一系列默认的设置，一些喜欢经典Dreamweaver工作区布局的用户也可以切换到他们喜欢的窗口工作区。
5.1.1工作区布局简介 当安装好Dreamweaver之后，每次启动时，都会显示欢迎页面，这是可以设置的。
可以通过主菜单的“编辑｜首选参数”菜单项，从弹出的选项窗口中选择“常规”选项，取消勾选第1个选项，如图5.1所示。
取消欢迎页面的显示 图5.1首选参数窗口设置欢迎页面 第5章用Dreamweaver可视化设计页面 Dreamweaver根据开发人员和设计人员的不同习惯和工作方式提供了不同的布局排列，比如开发人员习惯于查看和编辑代码，主要是与开发相关的浮动面板的显示，而设计人员关心可视化设计的内容和元素，因此其布局会偏重于设计元素。
Dreamweaver提供了方便在各种不同的工作区面板之间切换的方法。
可以单击菜单栏右侧的下拉列表框选择不同的工作区布局，如图5.2所示。
切换窗口布局 图5.2窗口布局切换面板 在本书第1章对Dreamweaver的主界面有过简短的介绍，下面通过创建一个网页来详 细地看一下Dreamweaver主界面的各个面板如何协作来完成系统的功能。
打开 Dreamweaver，单击主菜单中的“文件｜新建”菜单项，Dreamweaver将弹出新建文档窗口， 该窗口提供了30多个预置的CSS模板样式，也可以基于现有网站的模板来创建一个新的 页面。
在本示例中选择“空白页|HTML|<无>”项，表示不使用任何模板，Dreamweaver将 弹出如图5.3所示的主窗口。
应用程序栏 工作区切换器 文档工具栏 网页设计或编码区域 插入面板 页面设置工具 CSS面板 标签选择器属性面板 图5.3Dreamweaver主窗口 折叠起来的面板 下面是对这几个界面元素的具体作用的介绍。
应用程序栏：应用程序栏提供了站点管理、扩展管理器、Dreamweaver主菜单及快 速帮助内容搜索框。
·151· 第2篇网页设计与制作 工作区切换器：用来切换到不同的工作区布局的快捷菜单。
文档工具栏：提供各种网页编辑窗口需要的一些工具和选项。
网页设计或编码区域：这里就是网页的主要编辑窗口，可以通过文档工具栏的几 个切换按钮在不同的视图之间进行切换。
标签选择器：显示鼠标所在位置的HTML标签，单击某标签可以选中该标签及标 签内所有元素。
页面设置工具：在这里可以设置页面的缩放、页面的尺寸。
属性面板：用来动态地显示各种不同的HTML元素的属性，设置不同的属性到 HTML元素。
插入面板：这个面板用来插入各种HTML元素，可以单击“常用”右侧的下拉箭 头切换到不同的元素插入面板。
CSS面板：提供CSS属性信息和创建工具，在第3章介绍CSS时曾经详细地介绍 过这个面板的作用。
灵活运用这些界面元素能显著地提高网站建设的效率，尤其重要的是属性面板，它提供了使用标签选择器选中的标签的详细属性，使得用户可以不用去查阅HTML辞典来了解不同标签的属性，是初学者学习HTML的重要武器。
5.1.2使用文档编辑器 文档窗口是设计网页与代码编辑的主窗口，基本上是网站建设人员日常工作的地方。
Dreamweaver提供了一个非常有用的特性，就是代码和设计的同步。
当使用设计人员的工作区打开或新建一个文件时，Dreamweaver会使用设计视图，此时可以通过文档工具面板的几个工具栏来切换到代码视图或分割视图。
在文档工具栏中，与文档编辑器切换相关的按钮如下所示。
代码：在文档窗口中显示代码视图，这是开发人员经常使用的视图。
拆分：将文档窗口拆分为代码和设计视图，当在代码编辑窗口中更改了代码时， 在设计视图中就可以看到更改呈现的效果；在设计视图中添加了元素，在代码窗口就可以看到元素的HTML代码。
设计：只显示设计视图窗口。
实时视图：允许不用打开浏览器，直接在Dreamweaver的文档窗口看到设计的结果，此时文档不可编辑，只能查看。
拆分视图的功能非常有用，这也是Dreamweaver得以流行的一个因素，但是默认情况下，Dreamweaver的拆分视图是垂直拆分，对于屏幕比较窄的用户来说有些不方便，垂直拆分如图5.4所示。
由图5.4中可见，设计视图显得有点窄小，如果设计的内容非常多，而且一些元素是按比较调整大小的，那么在设计视图中显示的内容将显得有点混乱，可以通过取消选中主菜单的“查看｜垂直视图”菜单项，将拆分切换为水平视图。
当切换为水平视图后，可以单击主菜单中的“查看｜顶部的设计视图”菜单项，将设计视图放在顶部，如图5.5所示。
·152· 第5章用Dreamweaver可视化设计页面 代码视图设计视图 设计视图代码视图 图5.4Dreamweaver的拆分视图 图5.5水平拆分的代码视图 文档工具栏还提供了如下的几个有用的工具按钮来帮助网站建设人员开发网页，如下所示。
调整窗口大小工具按钮：该按钮允许根据不同的目标浏览器分辨率调整窗口的大小，以便于设计人员根据指定的窗口大小来设计网页。
该工具按钮被单击后，将弹出一个选择各种不同窗口大小的下拉菜单，单击“编辑｜大小”菜单项，将打开首选参数的设置“窗口大小”对话框，在该对话框中，用户可以自定义要使用的窗口大小，如图5.6所示。
在浏览器窗口预览按钮：或者通过按F12键，将打开默认的浏览器窗口显示当前正在编辑的网页，这个按钮的下拉列表会显示可供使用的浏览器列表，允许用户选择当前系统中安装的浏览器来查看网页。
注意：由于HTML和CSS在不同的浏览器中经常会呈现一些差异，因此切换多个浏览 器进行调试查看是非常有用的一个功能。
·153· 第2篇网页设计与制作 已经设置的窗口大小列表 可以添加和删除窗口大小设置 图5.6编辑“窗口大小”窗口 远程服务器文件管理按钮：用来与远程服务器同步文件，在设置了远程服务器时比较有用，否则这个按钮的下拉项基本上都是灰色。
发送到W3C验证按钮：文档内容被发送到W3C进行验证，验证完成后会显示在如图5.7所示的验证结果对话框中。
图5.7W3C验证按钮 浏览器兼容性检查按钮：用来检测与浏览器的兼容性，它将打开浏览器兼容性检查面板，在该面板中针对不同的浏览器进行兼容性检查。
可视化助理按钮：主要是针对设计视图中的不可见元素的辅助可视化工具，比如
一。
在本书第1章已经提到过Dreamweaver的下载和安装的内容，没有安装的读者可以参考第1章中关于Dreamweaver的介绍，在电脑上安装一个Dreamweaver。
本章将介绍Dreamweaver的基础使用知识，了解Dreamweaver操作的一些方法，下一章将介绍如何在Dreamweaver中创建站点。
在后续的网站内容介绍中，还会穿插对该工具的讨论。
5.1Dreamweaver工作区 Adobe的CS系列软件都使用了统一的浮动窗口式布局，将所有的可供使用的操作和属性以浮动面板的方式呈现，既方便用户，也可以根据需要进行折叠来节省屏幕空间。
Dreamweaver的工作区非常灵活，它根据开发人员和设计人员的不同要求对浮动和工具面板进行了一系列默认的设置，一些喜欢经典Dreamweaver工作区布局的用户也可以切换到他们喜欢的窗口工作区。
5.1.1工作区布局简介 当安装好Dreamweaver之后，每次启动时，都会显示欢迎页面，这是可以设置的。
可以通过主菜单的“编辑｜首选参数”菜单项，从弹出的选项窗口中选择“常规”选项，取消勾选第1个选项，如图5.1所示。
取消欢迎页面的显示 图5.1首选参数窗口设置欢迎页面 第5章用Dreamweaver可视化设计页面 Dreamweaver根据开发人员和设计人员的不同习惯和工作方式提供了不同的布局排列，比如开发人员习惯于查看和编辑代码，主要是与开发相关的浮动面板的显示，而设计人员关心可视化设计的内容和元素，因此其布局会偏重于设计元素。
Dreamweaver提供了方便在各种不同的工作区面板之间切换的方法。
可以单击菜单栏右侧的下拉列表框选择不同的工作区布局，如图5.2所示。
切换窗口布局 图5.2窗口布局切换面板 在本书第1章对Dreamweaver的主界面有过简短的介绍，下面通过创建一个网页来详 细地看一下Dreamweaver主界面的各个面板如何协作来完成系统的功能。
打开 Dreamweaver，单击主菜单中的“文件｜新建”菜单项，Dreamweaver将弹出新建文档窗口， 该窗口提供了30多个预置的CSS模板样式，也可以基于现有网站的模板来创建一个新的 页面。
在本示例中选择“空白页|HTML|<无>”项，表示不使用任何模板，Dreamweaver将 弹出如图5.3所示的主窗口。
应用程序栏 工作区切换器 文档工具栏 网页设计或编码区域 插入面板 页面设置工具 CSS面板 标签选择器属性面板 图5.3Dreamweaver主窗口 折叠起来的面板 下面是对这几个界面元素的具体作用的介绍。
应用程序栏：应用程序栏提供了站点管理、扩展管理器、Dreamweaver主菜单及快 速帮助内容搜索框。
·151· 第2篇网页设计与制作 工作区切换器：用来切换到不同的工作区布局的快捷菜单。
文档工具栏：提供各种网页编辑窗口需要的一些工具和选项。
网页设计或编码区域：这里就是网页的主要编辑窗口，可以通过文档工具栏的几 个切换按钮在不同的视图之间进行切换。
标签选择器：显示鼠标所在位置的HTML标签，单击某标签可以选中该标签及标 签内所有元素。
页面设置工具：在这里可以设置页面的缩放、页面的尺寸。
属性面板：用来动态地显示各种不同的HTML元素的属性，设置不同的属性到 HTML元素。
插入面板：这个面板用来插入各种HTML元素，可以单击“常用”右侧的下拉箭 头切换到不同的元素插入面板。
CSS面板：提供CSS属性信息和创建工具，在第3章介绍CSS时曾经详细地介绍 过这个面板的作用。
灵活运用这些界面元素能显著地提高网站建设的效率，尤其重要的是属性面板，它提供了使用标签选择器选中的标签的详细属性，使得用户可以不用去查阅HTML辞典来了解不同标签的属性，是初学者学习HTML的重要武器。
5.1.2使用文档编辑器 文档窗口是设计网页与代码编辑的主窗口，基本上是网站建设人员日常工作的地方。
Dreamweaver提供了一个非常有用的特性，就是代码和设计的同步。
当使用设计人员的工作区打开或新建一个文件时，Dreamweaver会使用设计视图，此时可以通过文档工具面板的几个工具栏来切换到代码视图或分割视图。
在文档工具栏中，与文档编辑器切换相关的按钮如下所示。
代码：在文档窗口中显示代码视图，这是开发人员经常使用的视图。
拆分：将文档窗口拆分为代码和设计视图，当在代码编辑窗口中更改了代码时， 在设计视图中就可以看到更改呈现的效果；在设计视图中添加了元素，在代码窗口就可以看到元素的HTML代码。
设计：只显示设计视图窗口。
实时视图：允许不用打开浏览器，直接在Dreamweaver的文档窗口看到设计的结果，此时文档不可编辑，只能查看。
拆分视图的功能非常有用，这也是Dreamweaver得以流行的一个因素，但是默认情况下，Dreamweaver的拆分视图是垂直拆分，对于屏幕比较窄的用户来说有些不方便，垂直拆分如图5.4所示。
由图5.4中可见，设计视图显得有点窄小，如果设计的内容非常多，而且一些元素是按比较调整大小的，那么在设计视图中显示的内容将显得有点混乱，可以通过取消选中主菜单的“查看｜垂直视图”菜单项，将拆分切换为水平视图。
当切换为水平视图后，可以单击主菜单中的“查看｜顶部的设计视图”菜单项，将设计视图放在顶部，如图5.5所示。
·152· 第5章用Dreamweaver可视化设计页面 代码视图设计视图 设计视图代码视图 图5.4Dreamweaver的拆分视图 图5.5水平拆分的代码视图 文档工具栏还提供了如下的几个有用的工具按钮来帮助网站建设人员开发网页，如下所示。
调整窗口大小工具按钮：该按钮允许根据不同的目标浏览器分辨率调整窗口的大小，以便于设计人员根据指定的窗口大小来设计网页。
该工具按钮被单击后，将弹出一个选择各种不同窗口大小的下拉菜单，单击“编辑｜大小”菜单项，将打开首选参数的设置“窗口大小”对话框，在该对话框中，用户可以自定义要使用的窗口大小，如图5.6所示。
在浏览器窗口预览按钮：或者通过按F12键，将打开默认的浏览器窗口显示当前正在编辑的网页，这个按钮的下拉列表会显示可供使用的浏览器列表，允许用户选择当前系统中安装的浏览器来查看网页。
注意：由于HTML和CSS在不同的浏览器中经常会呈现一些差异，因此切换多个浏览 器进行调试查看是非常有用的一个功能。
·153· 第2篇网页设计与制作 已经设置的窗口大小列表 可以添加和删除窗口大小设置 图5.6编辑“窗口大小”窗口 远程服务器文件管理按钮：用来与远程服务器同步文件，在设置了远程服务器时比较有用，否则这个按钮的下拉项基本上都是灰色。
发送到W3C验证按钮：文档内容被发送到W3C进行验证，验证完成后会显示在如图5.7所示的验证结果对话框中。
图5.7W3C验证按钮 浏览器兼容性检查按钮：用来检测与浏览器的兼容性，它将打开浏览器兼容性检查面板，在该面板中针对不同的浏览器进行兼容性检查。
可视化助理按钮：主要是针对设计视图中的不可见元素的辅助可视化工具，比如
标签默认并不显示具体的呈现效果，但是通过可视化按钮中的可选项，可以在Dreamweaver的设计视图中为其显示一个区域，以便于设计人员更好地编辑，在运行时这些可视化助理是不可见的。
5.1.3使用属性面板 如果属性面板没有显示在窗口上，可以单击主菜单的“窗口｜属性”菜单项，属性面板将固定在文档视图的下方。
属性面板会显示出当前在设计视图或代码视图选中的元素的详细信息，例如选中一个表格标签，属性面板将显示如图5.8所示的信息。
5.1.3使用属性面板 如果属性面板没有显示在窗口上，可以单击主菜单的“窗口｜属性”菜单项，属性面板将固定在文档视图的下方。
属性面板会显示出当前在设计视图或代码视图选中的元素的详细信息，例如选中一个表格