《第2章网页制作工具Dreamweaver8.doc

第2章　网页制作工具Dreamweaver 8 在网页制作过程中，如果采用传统的HTML编辑方法，会使得整个工作复杂冗长，因此网页开发人员通常会使用一些所见即所得的工具来进行此项工作，例如Dreamweaver、FrontPage、ASP Edit、HotDog等。在这些工具中，Microsoft公司的FrontPage属于Office套装软件之一，它的操作界面类似于Word，因此非常容易学习，但是它的操作都是基于模板的，因此灵活性不大，适合初学者学习。对想要在可视化环境下制作复杂网页的专业网页制作者来说，Dreamweaver是最佳选择，它提供给网页制作者更快速的设计、更容易的编码及整合性更强的功能。利用它可以对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。根据Macromedia公司的调查，Dreamweaver目前已累计有超过70万名的使用者，占有率在网页编辑工具中居首。 Dreamweaver的优越性体现在以下几个方面。 (1)简洁高效的设计和开发界面：界面更易于使用，可使工作效率和工作质量均得到提高。 (2)“插入”工具栏的改进：简洁高效的新外观，占用更少的工作区空间。还新增加了一个“收藏”类别，可以对“插入”工具栏进行自定义，将最常使用的对象放置在该工具栏上。 (3)表格编辑可视化：在表格中进行列调整操作时能看到实际效果。 (4)用户界面改进：可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。 (5)起始页：能够访问最近使用过的文件，创建新文件和访问Dreamweaver 8资源。起始页会在启动Dreamweaver 8或尚未打开文档时显示。 (6)保存桌面选项：可以选择当重新启动Dreamweaver 8时重新打开上一次使用的文档。 (7)完全支持 Unicode：Dreamweaver 8支持 Internet Explorer所支持的所有文本编码方式。可以使用几乎所有的系统中安装的语言字体，Dreamweaver 8会正确地显示和保存这些字体。 (8)安全 FTP：能够完全加密所有文件传输。 (9)新式的页面布局和设计环境。 (10)增强的 CSS 功能：提供了一个更为精巧的方法来进行样式设计及提高设计交互性。 (11)动态跨浏览器验证：在保存文档时自动检查当前文档的跨浏览器兼容性问题。 下面将全面地介绍使用Dreamweaver 8完成网站开发的方法。 2．1　概述 2．1.1　Dreamweaver 8的窗口布局 Dreamweaver 8 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中，用户可以选择面向设计人员的布局或面向手工编码人员的布局。首次启动 Dreamweaver 时，会出现一个如图2.1所示的工作区设置对话框。 图2.1　Dreamweaver “工作区设置”对话框 用户可以从中选择一种工作区布局。如果不熟悉编写代码，可以选择“设计者”选项。如果以后想更改工作区，可以使用“编辑”→“首选参数”命令，在弹出的“首选参数”对话框中切换到一种不同的工作区布局。 “首选参数”对话框如图2.2所示。 图2.2　Dreamweaver “首选参数”对话框 2．1.2　Dreamweaver 8的工作界面 选择了工作区布局后就进入了Dreamweaver 8的工作界面，如图2.3所示。  图2.3　Dreamweaver 8 工作界面 在该界面中，主要包含以下几个部分。 1.标题栏 标题栏位于工作界面的顶部，包含了控制菜单按钮、应用程序名、当前网页的标题、打开的文档名称、“最小化”按钮、“还原/最大化” 按钮以及“关闭”按钮等。 2.菜单栏 标题栏下面是菜单栏，如图2.3所示。 3.“插入” 工具栏 “插入”工具栏在菜单栏下面，如图2.3所示。“插入”工具栏包含用于创建和插入对象(如表格、层和图像)的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。某些类别具有带弹出菜单的按钮，从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符” 选项，下次单击“图像”按钮时，Dreamweaver 8会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。 “插入”工具栏按以下的类别进行组织。 (1)“常用”类别可以创建和插入最常用的对象，例如图像和表格。 (2)“布局”类别可以插入表格、div 标签、层和框架。还可以从3个表格视图中进行选择：“标准”(默认)、“扩展表格”和“布局”。当选择“布局”模式后，可以使用 Dreamweaver 布局工具 “绘制布局单元格”和“绘