网页设计第8章辅助工具共九章.pptVIP

 第八章 Dreamweaver辅助工具 本章学习目标 掌握模板的基本操作及应用 掌握库的基本操作及应用 了解插件的含义 掌握插件的使用方法 1. 模板的使用 模板最强大的用途是： 可以设计出风格一致的页面，省去重复劳动部分。 一次更新多个页面。从模板创建的文档与该模板保持连接状态（除非您以后分离该文档）。可以修改模板并立即更新基于该模板的所有文档中的设计。 创建模板 创建可编辑区域 模板的使用 1.1 创建模板 通过Dreamweaver MX 2004的新建模板页来全新的创建一个模板页面 把现有HTML文档通过适当的修改另存为一个模板，以使其应用于其它WEB文档。 选择菜单“【文件】→【新建】”，弹出“新建文档”对话框，选择“模板页”→“HTML模板”，单击“创建”按钮生成一个空的模板页面。 编辑该模板页面，加入图片、文字等元素。 选择菜单“【文件】→【保存】/【另存为】”，在弹出“另存为模板”对话框中输入english。 注意内容的改变 资源面板 1.2 添加可编辑区域 定义“D:\8-1-1”目录为站点根目录，打开Templates目录下的english.dwt 在表格中单击鼠标右键，选择“【模板】→【新建可编辑区域】”菜单命令 在弹出的“新建可编辑区域”对话框中，输入名称“EditRegion”即可 可编辑区域新建后，Dreamweaver MX 2004设计视图中会以蓝色边框突出显示 1.3 模板的使用 使用模板创建页面 使用模板更新网站 创建页面 1. 【文件】→【新建】 2. 【资源】面板 更新页面 打开应用了“english”模板的页面，在【资源】面板中选择“English”模板，在该模板上单击鼠标右键，在弹出的菜单中选择“更新当前页（U）”即可。 更新页面 在【资源】面板中选择“english”模板，在该模板上单击鼠标右键，在弹出的菜单中选择“更新站点（P）”。 2. 库的使用 库保存了页面中的某一HTML代码片断 代码复用 一般把页脚的版权信息、导航条、栏目信息等做成库，同步更新所有页面 库的使用 创建库项目 引用库项目 编辑库项目 重命名库项目 删除库项目 重新创建丢失或已删除的库项目 利用库项目更新网页 2.1创建库项目 文档 body 部分中的任意元素都可创建库项目，这些元素包括文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像等。 创建方法： 利用选定的内容创建库项目 创建一个空白库项目 利用选定的内容创建库项目 创建一个空白库项目 确保没有在“文档”窗口中选择任何内容。 在【资源】面板中，选择面板左侧的【库】类别 。 单击【资源】底部的“新建库项目”按钮。一个新的、无 标题的库项目将被添加到面板中的列表。 为库项目取名。 2.2 引用库项目 将鼠标光标插入点定位在“文档”窗口中。 在【资源】面板中，选择面板左侧的【库】 类别。 选择一个库项目从【资源】面板直接拖曳到“文档”窗口中即可。 或者选择一个库项目，然后单击面板底部的 按钮。 2.3 编辑库项目 在资源面板的库类别中选择库项目，单击面板底部的“编辑”按钮或双击库项目，进入库项目编辑状态 编辑库项目然后保存。 更新库项目对话 框，选择更新或不更新使用库项目的文档 2.4 重命名、删除、重建库项目 在【资源】面板中，选择面板左侧的【库】类别。 选择要重命名的库项目，按F2键，或单击鼠标右键，在弹出菜单中选择“编辑”，再选择“重命名”。 单击面板底部的“删除”按钮，然后确认要删除该项目。或按键盘“delete”键删除该项目。 打开使用了库项目的页面文档，并在页面中选择该项目。 在【属性】面板中单击“重新创建”按钮 2.5 利用库更新网页 在库面板中选择库项目，点击右键，选择“更新当前页”或者“更新站点”，更新应用该库项目的单个或所有页面。 3. 代码清理 删除一些对页面显示无效的代码或者其他文本编辑工具转换成网页生成的冗余代码。 清除多余的HTML代码 清除word代码 实例：Word文档转化为网页 3.1 清除多余的HTML代码 Dreamweaver MX 2004可以自动删除空标签，也可以改善杂乱或不可读的 HTML 和 XHTML 代码。 打开一个页面文档，选择主菜单“【命令】→【清理 HTML】”，弹出“清理HTML/XHTML”对话框。 3.2 清除Word代码 Dreamweaver MX 2004可