1.3 Dreamweaver CS6工具介绍和基本操作

Dreamweaver CS6是一个“所见即所得”的网页编辑工具，是流行的网页制作工具，Dreamweaver具有强大的网页元素组合编辑功能，可以方便地插入图片、视频、Flash动画等网页元素，方便地实现网页元素的定位，自动生成HTML代码，轻松地与CSS和JavaScript脚本结合使用，使用Dreamweaver可以快速地完成网页的编辑工作。

1.3.1 Dreamweaver CS6工具介绍

1.启动Dreamweaver CS6

安装好Dreamweaver CS6后，可以创建桌面的快捷启动图标，通过双击图标启动Dreamweaver CS6，也可以单击操作系统中的【程序】→【所有程序】→ 命令。打开Dreamweaver CS6后，可以看到“欢迎屏幕”页，这页也称为“起始页”（见图1-3-1）。

设置【起始页】：选择“起始页”左下角的【不再显示】的复选框，可设置关闭“起始页”的效果，如需重新开启该项功能，单击菜单栏的【编辑】→【首选参数】→【常规】→【文档类型】→【显示欢迎屏幕】，选择这个选项重新启动“起始页”（见图1-3-2）。

2.认识Dreamweaver CS6工作面板

Dreamweave的工作界面是一个集成布局界面，将全部的元素置于一个窗口内，在集成的工作界面中，全部窗口和面板都被集成到一个更大的应用程序窗中，多个工具栏被集合到一起，工具栏可以通过拖动的方式从Dreamweaver的界面中单独分开，也可以重新组合到Dreamweaver的界面中，工具栏可以通过菜单栏中【窗口】菜单选择显示和隐藏，Dreamweaver CS6工作布局如图1-3-3所示。

• 菜单栏：Dreamweaver CS6工作布局的菜单共有10个，即【文件】、【编辑】、【查看】、【插入】、【修改】、【格式】、【命令】、【站点】、【窗口】和【帮助】，各菜单选项的功能如表1-3-1所示。

注意：工具面板可通过菜单栏中的【窗口】菜单来实现显示和关闭，如要打开【插入】面板，则单击菜单栏的【窗口】→【插入】（见图1-3-4）。工具面板上就可找到【插入】工具面板。

• 常用面板：常用面板集合了多个使用频率较高的工具面板，如【插入】、【CSS样式】、【文件】等（见图1-3-5）。这些工具面板是将菜单栏上的菜单项设置成工具栏上的按钮，单击按钮就可直接使用，方便用户操作。

• 工作区：Dreamweaver CS6提供3种工作区的视图效果，分别为【代码】、【拆分】和【设计】（见图1-3-6）。

【代码】：工作区只显示HTML、CSS、JavaScript或其他的代码内容。

【设计】：工作区只显示设计效果，不显示代码。

【拆分】：工作区分成两部分，一边为【代码】区，另一边为【设计】区，默认为左右拆分效果，可通过取消菜单栏的【查看】→【垂直拆分】改成上下拆分效果。

【实时视图】：可以在DW的工作区中实现在“浏览器中预览”的效果，单击【实时视图】后，在【实时视图】按钮右边出现【实时代码】和【检查】两个按钮（见图1-3-7）。【实时代码】显示网页的HTML源代码，【检查】的作用是自动检查源码中的错误代码。

•【属性】面板：Dreamweaver CS6的属性面板默认在Dreamweaver界面的底部，会随着光标所在位置或鼠标选择的对象不同而显示相对应的属性面板内容（见图1-3-8）。

•【当前标签】：光标所在位置的HTML标签名称（见图1-3-9）。

•【状态栏】：状态栏位于文档窗口的底部，它的作用是显示当前正在编辑的文档的相关信息，主要包含当前窗口大小、文档大小、当前标签、估计下载时间、当前页面编码类型等（见图1-3-9）。

•【当前文档】：表示当前编辑的文档名称，通过鼠标单击文档名称可更改当前编辑的文档。图 1-3-9 表示当前编辑文档为“index.html”，文档名称上没有文件后缀，如，表示该文档从末被保存过，保存过的网页会有文件的后缀名，如“index. html.”文档后带有“*”，表示该文档被修改后没有保存。当前文件如果有链入其他的文件，例如 CSS 文件，在代码区中单击中的文件名称，代码区的内容将切换对应的文档的内容，但是设计区的内容仍为网页文件的内容。

3.Dreamweaver CS6常用工具面板介绍

1）【插入】工具面板

【插入】工具面板可以从工具栏通过鼠标单击并拖曳的方式放置到窗口的其他位置，一般将【插入】面板放置到【菜单栏】的下方。【插入】面板包括9个项目，分别为【插入】（见图1-3-10）、【布局】、【表单】、【数据】、【Spry】、【jQuery Mobile】、【InContext Editing】、【文本】、【收藏夹】。

【插入】工具面板中选项的功能如表1-3-2所示。

2）【文档】工具栏

文档工具栏主要包含一些对文档进行常用操作的功能按钮，通过单击这些按钮，用户可以在文档的不同视图模式间进行快速切换（见图1-3-11）。

【多屏幕】：单击该按钮，在弹出的菜单用户可以选择网页显示的屏幕分辨率选项，可以选择预览的设备，如功能手机、智能手机和平板电脑。

【在浏览器中预览/调试】：该按钮通过指定浏览器预览网页文档，可以在文档中存在JavaScript错误时查找错误。

【文件管理】：用于快速执行【获取】、【取出】、【上传】、【存回】等文件管理命令。

【W3C验证】：单击该按钮，可弹出W3C验证菜单。

【可视化助理】：用于在文档窗口中显示各种可视化助理。

【检查浏览器兼容性】：用于检查所设计的页面对不同类型的浏览器的兼容性。单击该按钮，在弹出的菜单中选择相应的命令检查对应的兼容性。

【刷新设计视图】：在代码视图中修改网页内容后，可以使用该按钮刷新文档窗口。

【标题】：可以输入要在网页浏览器上显示的文档标题的文字信息。

3）【文件】工具栏

【文件】工具栏的功能主要是文件管理、转换站点。单击【本地视图】选项，可以选择【本地视图】、【远程服务器】、【测试服务器】和【存储库视图】（见图1-3-12），常用的是【本地视图】选项，并选择对应的站点转换文件信息。

4.创建和管理站点

网站的站点，其实是文件夹，其作用是存储网站的所有元素、文件等，方便文件的链接和站点的移动。站点的位置可以是本地计算机，也可以是远端服务器中的虚拟文件夹。

创建站点的步骤如下：

在定义站点前，必须先规划好网站中的文件夹，定义好网站的制作过程中各种文件的存放的位置，如定义“D:\web”文件夹为网站的站点文件夹，在“web”文件夹中分别创建“image”“files”“css”“js”文件夹（见图1-3-13）。“image”文件夹用来存放图像文件，“files”文件夹用来存放除了首页外的其他网页文件，“css”文件夹用来存放站点中的CSS文件，“js”文件夹用来存放网页特效文件。

单击Dreamweaver菜单栏的【站点】→【新建站点（N）】命令，即可打开【站点设置面板】对话框，修改【站点名称】为“mysite”（名称可以自定义）（见图1-3-14），设置本地计算机站点文件位置为“D:\Web”（位置可以自定义）后，若直接单击【保存】则创建了最简单的站点，如果想设置的图像文件夹，则单击【高级设置】设置。

单击【高级设置】→【本地信息】选项中的【默认图像文件夹】，设置站点中图片存放的默认位置（见图1-3-15），当从站点外插入一张图片时，图片会自动存放在该文件夹中。【站点范围媒体查询文件】是指站点的CSS文件（见图1-3-16），该选项需要CSS文件已创建好的情况下选择，如果没有CSS文件，则不需要设置。

单击【保存】按钮完成站点的创建。

管理站点。站点创建完成后，当要修改站点信息时，在菜单栏中选择【站点】→【管理站点】，打开【管理站点】面板，可双击站点的名称“mysite”，或者选择站点后，单击【编辑当前选定的站点】图标，打开【站点设置对象】面板（见图1-3-17）进行修改。

除了修改站点外，Dreamweaver 还提供删除站点、复制站点信息、导出站点、导入站点的功能。

复制站点就是将当前站点信息进行复制，请注意，只是复制站点的信息，并不是复制站点的文件，这与站点的文件无关。导出站点就是将站点信息导出并存为“mysite.ste”文件，方便移动到其他设备上导入站点信息。【导入站点】就是将导出的站点导入到 Dreamweaver 中，单击【管理站点】中的【导入站点】（见图1-3-18），选择“mysite.ste”文件，可以自动将站点定义完成。

导出、导入站点功能可以很方便用户从本地计算机中导出站点信息，在其他计算机设备上快速地创建站点的方式，是一个很好的功能。

1.3.2 Dreamweaver对网页文档的基本操作

1.创建一个新的HTML网页

在Dreamweaver中创建网页文档的方式主要有3种。

方法一：单击【起始页】→【新建】→【HTML】（见图1-3-19）新建一个空白的HTML网页文档；

方法二：选择菜单栏中的【文件】→【新建】，在弹出的【新建文档】对话框中，选择【空白页】→【页面类型-HTML】→【布局-无】→【创建】新建一个空白的HTML网页文档（见图1-3-20）；

方法三：选择工具面板的【文件】→【本地文件】，在空白位置单击鼠标右键，在弹出的菜单中选择【新建文件（F）】，新建一个空白的HTML网页文档（见图1-3-21）。

注意：新建的文件名默认为“Untitled-X”（X 表示从1开始的数字），保存时注意更改网页文件的名称。

2.保存网页文档

单击Dreamweaver的选择菜单栏【文件】→【保存】命令（或按Ctrl+S键），打开【另存为】对话框（见图1-3-22），然后在该对话框中选择文档存放的位置并输入保存的文件名称，单击【保存】按钮，即可将当前打开的网页保存。

还可以通过单击菜单中的【文件】→【保存全部】保存正在Drewmweaver中打开的所有文档。

3.打开网页文档的方式

要在Dreamweaver中打开网页文档，可采用以下两种方式：

方法一：选择菜单栏的【文件】→【打开】，在【打开】对话框的【查找路径】中选择对应文件夹，单击需打开的文件名，单击【打开】按钮打开对应文档（见图1-3-23）。

方法二：在工具面板中单击【文件】，在打开的文件面板中，单击【本地试图】的【本地文件】（见图1-3-24），然后在显示的界面中选择需要打开的文档，双击鼠标左键即可。

4.网页预览的方式

在制作网页的时候，常常需要通过浏览器查看网页的效果，Dreamweaver CS6提供网页的预览功能，单击【文档】工具栏中的预览工具按钮（见图1-3-25），选择预览的浏览器工具，即可使用该浏览器打开网页并查看该网页的效果。

单击【编辑浏览器列表】可打开浏览器的编辑面板（见图1-3-26），通过面板中的增加或减少浏览器工具。如单击按钮，弹出【添加浏览器】面板（见图1-3-27），输入名称，单击【浏览】按钮选择浏览器工具，再单击【确定】按钮完成添加，并可以将浏览器工具设置为【主浏览器】或【次浏览器】。【主浏览器】为默认的预览浏览器，当按下键盘的“F12”时默认使用浏览器工具，【主浏览器】只能设置一种浏览器工具。

Dreamweaver CS6还提供了实时视图功能，用户可以通过单击【文档】工具栏中的【实时视图】按钮，在Dreamweaver中直接预览网页效果，但采用实时视图功能只能查看当前网页的效果，不能实现超链接效果，即只能查看一个网页的效果，不能实现网页间的跳转。用鼠标单击【实时视图】按钮，【设计】界面显示网页的预览效果，再单击【实时视图】按钮，可取消实时视图的效果。

Dreamweaver CS6提供多屏幕预览工具，用户可以根据不同设备，模拟如手机、iPad等分辨率不同的网页预览效果。单击【文档】工具栏的【多屏幕】（见图1-3-28），用户可以直接选择对应的设备，也可单击【编辑大小】，打开【窗口大小】（见图1-3-29）面板，按来增加或减少浏览窗口的宽度和高度，多屏幕预览工具实现的预览效果是在Dream weaver的设计视图中显示。

也可以单击当前标签栏的右边的设备按钮或单击窗口大小的位置，选择适当的窗口大小进行预览（见图1-3-30）。