Dreamweaver基础教程—使用Dreamweaver构建HTML结构.pdfVIP

网页制作与网站开发从入门到精通 使用 Dreamweaver 构建 HTML 结构 对于初学者来说， 如果不能熟练掌握一种或多种 Web 设计和开发工具， 将会面临众多挑战， 甚至是举步维艰。可以毫不夸张地说，精通一种工具对于所有 Web开发和设计人员来说都是至 关重要的。  Web 设计和开发的工具众多。 有小巧灵便的 EditPlus （高手的最爱 ）， 也有功能庞大的 Visual  Studio （.NET开发的必备工具），还有新兴时尚的 Aptana （支持Web 2.0 ）等。但是总体来说 ，  Dreamweaver  应 该算是比较经典 、 口碑 尚佳 的  Web  设计、开发和管理 工具 。横 向比较 ，  Dreamweaver 的优势在于它对 HTML技术和 CSS技术的支持比较完善。不管是成熟的工作流、 强大的可视化操作界面 ，还是性能卓越的站点管理表现 ，都让专业人士和业余爱好者爱不释手。 本章将从 HTML 结构重构方面来探索 Dreamweaver 工具的使用 ， 挖掘 Dreamweaver 为初学 者提供的最佳操作流程 ，以及 Web 设计和开发的整合功能。当然，本书不是 Dreamweaver 软件 操作教程 ，无法深 入讲解  Dreamweaver  界面操作 的每个 细节和技 巧 ，如果读者希望精通  Dreamweaver ，建议选购 Dreamweaver 软件操作类图书。 1 可视化网页编辑工作流 评价 Web 设计和开发工具的优劣不妨参考两点：第一，功能是否完善；第二 ，操作是否方 便 （即易用性）。从功能角度来分析，目前Dreamweaver 还不是最优秀的集成工具，特别是在相 关脚本和 Ajax 技术框架的支持方面稍显落后 ， 但是它的工作流是非常棒的， 操作起来非常方便。 综合起来比较，D reamweaver 应该是 Web 设计和开发人员的最佳操作工具。 无论是可视化设计、 编码环境、网站集成开发和 Web 拓展功能服务等方面都是非常优秀的。  1.1  可视化构建 HTML结构 在 Dreamweaver 可视化编辑环境中 ，我们习惯于把所有被操作的元素称为对象。例如 ，文本 对象、图像对象、视频对象、Flash 动画对象、声音对象、超链接对象、表单对象和表格对象等。 启动 Dreamweaver ，按常规步骤新建网页文档，Dreamweaver  会在提示对话框中要求选择 文件类型、 模板类型和文档类型等，这在一般 Web编辑器中是没有的功能，可谓服务细致入微。 新建的文档在可视化编辑环境中显示为一块空白区域，如图 1所示。 42 使用 Dreamweaver 构建 HTML 结构 图 1  Dreamweaver 的可视化编辑环境 光标闪烁处正是编辑区域的起始位置，此时可以在菜单栏的【插入】菜单中选择准备插入 的对象。该菜单中包含图像、多媒体 （如视频、音频、Flash 动画等 ）、表格、布局对象、表单 和超链接等网页中大部分的对象内容。插入对象时一般会打开对话框要求进行必要的设置 ，在 编辑窗口中的插入点显示对象效果。 插入对象之后 ，可以随时选中对象 ，并在窗口底部的【属性检查器】面板中设置对象的属 性，【属性检查器】面板能够自动侦测用户所选对象并显示该类型对象的设置项。所有设置都会 即时呈现在编辑窗口中的插入对象上，从而可以直观地查看对象的设置效果。小型编辑器一般 都不会提供这种即时预览功能。 例如， 下面以示例的形式演示使用 Dreamweaver 可视化操作构建 HTML结构的过程和方法。 所设计的结构如下： div id=wrap  div id header  h1网页标题/h1  h2网页副标题/h2  /div  div id body  div id main  h3栏目标题/h3  ul  li列表项 1/li  li列表项 2/li  /ul  /div