2.1　Dreamweaver CS6简介

Dreamweaver CS6是世界顶级软件厂商Adobe推出的集网页制作和管理网站于一身的所见即所得网页编辑器，拥有可视化编辑界面，用于制作并编辑网站和移动应用程序的网页。Dreamweaver CS6支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，对于初级人员来说，可以无须编写任何代码就轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

2.1.1　Dreamweaver CS6新增功能

相对于Dreamweaver之前的版本，Dreamweaver CS6新增了以下一些功能。

（1）自适应网格版面。使用响应迅速的CSS3自适应网格版面，来创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码为各种不同设备和计算机开发项目，提高工作效率。直观地创建复杂网页设计和页面版面，无须忙于编写代码。

（2）改善的FTP性能。利用重新改良的多线程FTP传输工具节省上传大型文件的时间。更快速高效地上传网站文件，缩短制作时间。

（3）增强jQuery移动支持。使用更新的jQuery移动框架支持为iOS和Android平台建立本地应用程序。借助jQuery代码提示加入高级交互性功能。jQuery可轻松为网页添加互动内容。

（4）支持CSS3的动画过渡效果。将CSS属性变化制成动画转换效果，使网页设计栩栩如生。在处理网页元素和创建优美效果时保持对网页设计的精准控制。

（5）多屏幕预览。借助“多屏幕预览”面板，为智能手机、平板电脑和台式计算机进行设计。使用媒体查询支持，为各种不同设备设计样式并将呈现内容可视化。

2.1.2　Dreamweaver CS6工作区

1．启动Dreamweaver CS6

安装好Dreamweaver CS6后，选择【开始】|【程序】|Adobe Dreamweaver CS6命令。软件打开后，启动界面如图2-1所示。

在启动界面的起始页窗口中，提供有【打开最近的项目】、【新建】、【主要功能】三个选项，起始页如图2-2所示。

如果想要隐藏起始页窗口，可勾选窗口左下方的复选框，下一次启动Dreamweaver CS6时就不会有起始页窗口了。如果需要重新打开起始页窗口，则可通过选择【编辑】|【首选参数】|【常规】|【显示欢迎屏幕】选项恢复。

当选择了起始页窗口中的【新建】|HTML选项，会创建一个新的静态HTML网页文件，并进入Dreamweaver CS6的主工作区。

2．Dreamweaver CS6主工作区

Dreamweaver CS6的标准工作界面包括菜单栏、文档标题栏、应用程序栏、文档工具栏、标准工具栏、文档窗口、面板组等区域，如图2-3所示。

（1）菜单栏。

Dreamweaver CS6的菜单共有10个，即文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助。Dreamweaver几乎所有的功能都可以通过这些菜单来实现。

①文件：【文件】菜单主要用于文件的管理，例如新建、打开、导入等功能。除此之外，还有对当前文档执行操作的命令，如【打印代码】、【在浏览器中预览】等。

②编辑：【编辑】菜单主要用于编辑文本，提供一些常用编辑命令，如剪切、复制、撤销、重做、快捷键等。用户还可以通过【编辑】菜单中的【首选参数】选项设置Dreamweaver CS6的环境参数。例如，是否显示欢迎屏幕、是否允许多个连续的空格、CSS样式的设置等。

③查看：【查看】菜单用于切换视图模式，如设计、代码、拆分的切换，还可以显示或隐藏面板、工具栏以及标尺、辅助线等辅助工具。

④插入：【插入】菜单用于插入各种对象，如图像、媒体、表格、表单、超级链接、HTML元素等，与【插入】面板的功能相同。

⑤修改：【修改】菜单具有对页面元素进行修改的功能，可以实现对网页页面属性（如页面的外观、链接、标题等）的设置，还可以对表格、图像、框架集等对象进行修改和调整。

⑥格式：【格式】菜单用于设置文本属性，例如，设置文本的缩进、颜色，设置段落的段落格式、对齐方式，编辑HTML和CSS样式等。

⑦命令：【命令】菜单提供了一些常用操作命令，如录制播放命令、编辑命令列表、排序表格等。除此之外，还可以利用扩展管理命令安装下载的各类插件。

⑧站点：【站点】菜单用于创建和管理站点，同时通过Dreamweaver CS6中集成的FTP功能可完成上传和存回网站文件。

⑨窗口：【窗口】菜单用于显示或隐藏面板、检查器和窗口，还可以通过该菜单实现在各文档窗口之间的切换。

⑩帮助：【帮助】菜单主要是各种联机帮助功能，以及关于Dreamweaver的版本信息。例如，按F1键，就会打开电子帮助文本。需要注意的是，要在安装软件时安装了帮助文件才能打开帮助文档。

（2）文档标题栏或者叫文档选项卡。文档标题栏位于文档窗口的左上方，标题栏上显示了当前文档的文件名。Dreamweaver允许多个文档同时打开，利用选项卡可以方便地选择要编辑的文档，还可以在标题栏处关闭当前文档。

（3）文档工具栏。文档工具栏包括文档窗口的4种视图切换按钮。还包含文件管理、可视化助理、在浏览器中预览／调试等按钮。

（4）文档窗口。文档窗口是Dreamweaver主界面中最大的一个区域，用于显示和编辑当前文档。当设计者打开或新建一个项目时即可进入文档窗口，可以在文档窗口中实现输入文字、插入表格和编辑图片等操作。

文档窗口有以下4种视图。

【设计】视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。

【代码】视图：是一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。

【拆分】视图：可以使用户在单个窗口中同时看到同一文档的代码视图和设计视图的内容。

【实时视图】：类似于设计视图，实时视图更逼真地显示文档在浏览器中的表示形式，并能够像在浏览器中那样与文档进行交互。实时视图不可编辑，但可以在代码视图中进行编辑，然后刷新实时视图来查看所做的更改。

文档窗口的这几种视图可以通过【查看】菜单的相应选项进行切换，也可以通过单击文档工具栏中的按钮进行切换。

（5）状态栏。状态栏位于文档窗口的底部，提供当前文档的相关信息，如当前文档的文件大小、当前文档的窗口大小等，如图2-4所示。

标签选择器用HTML标记方式显示当前选定内容的信息。单击该层次结构中的任何标签以选择该标签及其全部内容。单击＜body＞可以选择文档的整个正文。显示百分比用于调节当前文件在窗口中的显示比例，如果网页中的内容突然变得很小，那应该是用快捷方式调节了文件的显示百分比。按住Ctrl键，再滚动鼠标中键，可以设置文件的显示百分比。设置窗口大小菜单用于将【文档】窗口的大小调整到预定义或自定义的尺寸。表示手机尺寸，表示平板电脑大小，表示PC大小。预计下载时间是指当前网页预计的下载时间。

（6）工作区切换器。Dreamweaver CS6默认以【设计器】方式显示工作区，用户可通过其下拉菜单选择其他方式展示工作区，如果选择【经典】选项，则将与Dreamweaver早期版本的工作区展示方式一样。

（7）面板组。面板组是用来显示用户所用工具面板的。默认情况下，右侧面板组里有【插入】面板、【CSS样式】面板、【文件】面板等，窗口下方的是【属性】面板。所有的面板都可以通过【窗口】菜单对应的命令项来打开或者隐藏。下面介绍一下常用面板。

【插入】面板：包含用于创建和插入对象（例如表格、图像和链接）的按钮。这些按钮按几个类别进行组织，用户可以通过从【类别】菜单中选择所需类别来进行切换，如图2-5所示，当前文档包含服务器代码时（例如ASP或CFML文档），还会显示其他类别，默认显示【常用】类别，如图2-6所示。

①常用类别：用于创建和插入最常用的对象，例如图像和表格。

②布局类别：用于插入表格、表格元素、div标签、绘制AP div等。还可以选择表格的两种视图：标准（默认）表格和扩展表格。

③表单类别：包含一些按钮，用于创建表单和插入表单元素、Spry验证等。

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

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

⑥jQuery Mobile类别：包含构建jQuery部件，如文本输入、密码输入等。

⑦InContext Editing类别：包含供生成InContext编辑页面的按钮，包括用于“可编辑区域”和“重复区域”。

⑧文本类别：包含对文本内容进行属性设置的标签，如加粗、斜体等。

⑨收藏夹类别：用于将【插入】面板中最常用的按钮分组和组织到某一公共位置。

【文件】面板：使用【文件】面板可以查看和管理Dreamweaver站点中的文件。在【文件】面板中查看站点、文件或文件夹时，可以更改查看区域的大小，还可以展开或折叠【文件】面板，如图2-7所示。

【属性】面板：默认情况下，【属性】面板位于工作区的底部，如图2-8所示。但是如果需要的话，用户可以将它拖放到工作区的顶部，也可以将它变为工作区中的浮动面板。【属性】面板并不是将所有的属性加载在面板上，而是根据设计者选择的对象来动态显示对象的属性。【属性】面板显示的内容是随当前在文档中选择的对象来确定的。例如，当前选择了一幅图像，那么【属性】面板上就出现该图像的相关属性。