1.1 了解Dreamweaver
Dreamweaver是Adobe系统公司推出的一款“所见即所得”的可视化网页设计和开发工具。它提供了可视化布局、应用程序开发和代码编辑的强大组合，使不同技术级别的开发者和设计人员都能够快速创建符合标准的网页和网站。
1.1.1 Dreamweaver发展历史
视频讲解
Dreamweaver于1997年由Macromedia公司开发，版本经历多次升级，目前为CC版本。
2000年推出的Dreamweaver UltraDev版本是第一个专为商业用户设计的开发工具。成为当时最受欢迎的网页设计工具，Dreamweaver也一举成为专业网站外观设计的先驱。
2002年5月Macromedia推出Dreamweaver MX（Dreamweaver 6.0），功能强大，不需要编写任何代码，即可设计动态的网页，能提供智能代码提示，使Dreamweaver一跃成为专业级别的开发工具。
2003年9月Macromedia推出Dreamweaver MX 2004（Dreamweaver 7.0），新增对CSS的可视化支持，将网页设计提升到新的层次，促进了CSS的普及。
2005年末，Adobe公司收购Macromedia，从此Dreamweaver归Adobe公司所有。
Dreamweaver主要版本以及它们的发布时间如表1.1所示。
表1.1 Dreamweaver主要版本列表
1.1.2 熟悉Dreamweaver界面
启动Dreamweaver CC之后，会显示欢迎界面，并要求用户从中选择新建、打开或以其他方式创建文档，然后就可以打开编辑窗口。如果不希望每次启动软件或者关闭所有文档时，总显示欢迎界面，可以在欢迎界面中选中【不再显示】复选框，如图1.1所示。
图1.1 欢迎界面
打开编辑窗口，Dreamweaver CC主窗口工作界面分成了标题栏、菜单栏、工具栏、状态栏、属性面板、浮动面板等，如图1.2所示。
图1.2 Dreamweaver CC主窗口工作界面
1. 标题栏
在Dreamweaver CC主窗口的顶部是标题栏，当窗口变宽时，标题栏和菜单栏会并行显示，如图1.3所示。
图1.3 标题栏和菜单栏并行显示
标题栏左侧是Dreamweaver图标，右侧提供3个常用工具按钮：
（工作区布局）、
（同步设置）和
（帮助）。最右侧还显示了3个按钮，分别对应主窗口的【最小化】、【最大化】和【关闭】命令。
2. 菜单栏
Dreamweaver CC菜单栏共有10个菜单项，包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助，如图1.3所示。单击其中任意一个菜单名，就会打开一个下拉菜单，如图1.4所示是打开【修改】下拉菜单。
操作说明：
☑ 如果菜单命令显示为浅灰色，则表示在当前的状态下不能执行。
☑ 如果菜单命令右侧显示有该命令的快捷键，则表示可以不打开菜单，直接按下该快捷键就可以执行该菜单命令。熟练使用快捷键可有助于提高工作效率。
☑ 如果菜单命令右侧显示小黑三角标记（
），则表示该命令还包含子菜单，鼠标指针停留在该菜单命令上片刻即可显示子菜单，也可以单击打开子菜单。
☑ 如果菜单命令右侧显示有省略号（
），则表示该命令能打开一个对话框，需要用户进一步设置才能执行命令。
提示：除了菜单栏菜单外，Dreamweaver CC还提供各种快捷菜单，利用这些快捷菜单可以很方便地使用与当前选择区域相关的命令。例如，单击面板右上角的菜单按钮
，可以打开面板菜单，如图1.5所示。右键单击页面对象或者编辑窗口，可以打开快捷菜单等。
图1.5 面板菜单
3. 工具栏
工具栏提供了一种快捷操作的方式。选择【查看】|【工具栏】命令，在打开的子菜单中可以选择【文档】、【标准】和【编码】3种类型工具栏。其中【编码】工具栏只能够在【代码】视图下观看和使用。
【插入】工具栏在CC版本中设计为【插入】面板。选择【窗口】|【插入】命令，可以打开或关闭【插入】面板，如图1.6所示。
图1.6 工具栏和【插入】面板
提示：【插入】面板中包含8类对象的快捷控制按钮，如常用、结构、媒体、表单、jQuery Mobile、jQuery UI、模板和收藏夹。系统默认显示为【常用】工具类，如果单击【插入】面板顶部的向下箭头，可以进行切换。
4. 状态栏
状态栏位于编辑窗口的底部，如图1.7所示。在状态栏最左侧是【标签选择器】，显示当前选定内容标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。例如，单击<body>可以选择整个文档。
图1.7 编辑窗口及其状态栏
状态栏右侧为设备类型，用以选择不同设备类型窗口，或者自定义窗口显示大小，以便设计在不同尺寸的屏幕下的网页显示效果。
5. 属性面板
当在编辑窗口中选中特定网页对象，如文字、图像、表格等，就可以在属性面板中设置对象的属性。属性面板的设置项目会根据对象的不同而不同。
选择【窗口】|【属性】命令，可以打开或关闭属性面板，属性面板上的大部分内容都可以在【修改】菜单项中找到。如图1.8所示是选中文字之后的属性面板效果。
图1.8 属性面板
属性面板一般包含两个选项卡：HTML和CSS。其中HTML表示使用HTML标记或HTML标记属性定义对象的显示效果，而CSS表示使用CSS行内样式定义对象的显示效果。
提示：如果希望使用样式表控制对象显示效果，则建议使用【CSS设计器】进行定义，属性面板设置所产生的代码都会夹杂在标签之中，不利于代码优化，不便于HTML和CSS分离的设计原则的实现。
6. 浮动面板
浮动面板在Dreamweaver CC操作中使用频率比较高，每个面板都集成了不同类型的功能。用户可以根据需要显示不同的浮动面板，拖动面板可以脱离面板组，使其停留在不同的位置。例如，使用鼠标单击左侧浮动面板上面的小三角按钮
，可以展开或折叠面板，如图1.9所示。
图1.9 展开／折叠整个浮动面板
双击浮动面板标题栏区域，可以展开或折叠当前面板组，如图1.10所示。
图1.10 展开／折叠当前浮动面板组
使用鼠标拖动面板标题栏，可以把面板从面板组中拖出来，作为单独的窗口放置在Dreamweaver工作界面的任意位置上。同样，用相同的方法可以将单独面板拖回默认状态。