下载掌阅APP，畅读海量书库
立即打开
Dreamweaver是美国Macromedia公司开发的一款用于开发和管理网页的专业编辑器，使用该软件可以快速编写网页，并对网站进行管理。本节主要介绍Dreamweaver的一些基本使用方法。
Dreamweaver经过多个版本的更新，目前的最新版本是Dreamweaver CC，打开该软件后，你会看到如图2.1所示的界面。
图2.1
单击该界面中的HTML图标即可创建一个HTML页面，效果如图2.2所示。
图2.2
Dreamweaver桌面的左上角是一排功能菜单按钮，通过这些菜单可以完成Dreamweaver中的所有功能操作，例如信件文件操作、代码管理、格式设置、属性设置、站点管理等。
桌面的左下角区域是属性区域，当用户在文档窗口中输入不同的内容时，属性区域会根据当前鼠标光标所在位置显示当前对象的属性。
中间的空白区域就是文档窗口，新建文档以“Untitled-”加数字序号命名，文档名称下面有3个按钮，分别用于切换代码视图、拆分视图和设计视图。例如，在代码视图中编写一段代码，这段代码用于插入一幅图片，当切换到拆分视图时，当前窗口会被分割成两个部分，一部分用于显示代码，另一部分用于显示代码呈现的效果，所以此时既可以看到代码，也可以看到插入的图片，当切换到设计视图时，用户只能看到当前页面的HTML代码效果。
桌面的右侧是一个快捷面板，在这个面版本中包含了“插入”“文件”“CSS设计器”和“CSS过滤效果”几个选项板，每个选项板中都对应有相关的操作，用于提高HTML页面的制作效率，用户还可以根据自己的需要自定义面板内容。
在Dreamweaver中对文档的操作主要是通过“文件”菜单来完成的，其中包括文档的新建、打开、编辑、关闭、保存、另存、导入和导出等操作。当用户启动Dreamweaver软件时，系统会自动为用户创建一个HTML文档并打开这个文档，用户可以直接在文档窗口中对当前的HTML文档进行编辑，还可以插入或粘贴从其他途径获取的HTML内容。如图2.3所示为代码视图效果。
图2.3
在设计视图中，用户还可以通过“查看”菜单控制网格与标尺的显示和隐藏，如果有需要还可以设置网格的颜色和行距，以及设置标尺的单位是像素、英寸或厘米。需要注意的是，在设计视图中看到的网页效果并非是网页在浏览器中的最终效果，只有通过在浏览器中预览才能得到网页的最终效果。如图2.4所示为设计视图效果，图2.5所示为浏览器中页面的显示效果。
图2.4
图2.5
在代码视图中，Dreamweaver有一套自己的代码格式标准。如果HTML页面中的代码比较多，不利于阅读，可以通过“命令”菜单，选择“应用源格式”命令对当前HTML页面中的代码进行格式化操作，格式化后的代码具有对称的代码结构，非常有利用阅读。如图2.6所示为格式化操作之前的代码效果，图2.7所示为格式化操作之后的代码效果。
图2.6
图2.7
所谓净化HTML代码，实际上就是对HTML源代码的一种净化。很多通过网页制作工具生成的文档中存在大量无用代码和错误代码，这些代码不仅冗余，还浪费下载时间，浏览器在解析这些代码时还可能出错，所以使用Dreamweaver的“命令”菜单，选择“清理HTML”功能，不仅可以修复这些问题，还可以提高代码质量。例如，在图2.8所示的代码中，被选中的H3标记中没有任何内容，属于冗余的代码，使用源代码净化就可以非常轻松地清理类似这样的标记，而且该功能还可以指定清除特定的标记。
图2.8
Dreamweaver的历史面板中记录了在文档窗口中操作的历史，包括输入的文本、插入的对象、编辑和删除的内容等，这些操作全部保留在历史面板中，用户可以撤销一个或多个步骤，恢复文档之前的操作。