利用模板创建网页-步骤

利用模板创建网页 学习目标 1）了解模板的概念。 2）熟练掌握模板的创建、应用、更新和管理。 13.1 案例模板的典型应用 13.1.1 案例介绍 本案例是运用模板创建的某网站页面，用于查看该公司的相关信息，实例效果图如 13-1 所示。 图 13-1 创建模板网页效果 13.1.2 案例分析 本案例是一个典型的模板应用实例，用到的知识点主要有模板和表格。利用模板实现 把网页布局和内容分离，在布局好之后将其存储为模板，这样相同布局的页面可以通过模 板创建，因此能够极大地提高工作效率。本案例通过模板的创建、应用、更新等功能实现 某公司网页的制作。 13.1.3 案例实现 （1）执行“文件/新建”命令，弹出“新建文档”对话框，在对话框中选择“空模板 /HTML 模板/无”选项。如图 13-2 所示。 图 13-2 “新建文档”对话框 （2）单击“确定”按钮，创建空白文档。 （3）执行“文件/另存为”命令，弹出 Adobe Dreamweaver CS3 提示对话框。如图 13-3 所示。 图 13-3 Adobe Dreamweaver CS3 提示对话框 （4）单击“确定”按钮，弹出“另存为”对话框，在对话框中的“文件名”文本框中 输入 moban.dwt。 （5）单击“确定”按钮，将该模板保存到相应的目录下。执行“插入记录/表格”命 令，弹出“表格”对话框，在对话框中将“行数”设置为 2， “列数”设置为 1， “表格宽度” 设置为 100 百分比。 （6）单击“确定”按钮，插入表格，此表格记为表格 1。如图 13-4 所示。 图 13-4 插入表格 1 （7）将光标置于表格 1 的第 1 行单元格中，执行“插入记录/图像”命令，插入图像 1。如图 13-5 所示。 图 13-5 插入图像 1 图 13-6 插入图像 2 （8）将光标置于表格 1 的第 2 行单元格中，执行“插入记录/图像”命令，插入图像 2。如图 13-6 所示。 （9）将光标置于表格 1 的右边，执行“插入记录/表格”命令，插入 1 行 2 列的表格， 此表格记为表格 2。如图 13-7 所示。 图 13-7 插入表格 2 图 13-8 插入背景图像 （10）将光标置于表格 2 的第 1 列单元格中，插入背景图像。如图 13-8 所示。 （11）将光标置于背景图像上，执行“插入记录/表格”命令，插入 5 行 1 列的表格， 插入表格 3，将“对齐”设为居中对齐。如图 13-9 所示。 图 13-9 插入表格 3 图 13-10 输入汉字 （12）将光标置于表格 3 的第 1 行单元格中，执行“插入记录/图像”命令，插入图像。 （13）将光标置于图像的右边，输入文字，将“大小”设置为 12 像素， “颜色”设置 为FFFFFF。如图 13-10 所示。 （14）分别在表格 3 的其它单元格中插入图像，输入文字，设置颜色。如图 13-11 所 示。 图 图 13-11 插入图像并输入汉字 图 13-12 插入可编辑 区域 （15）将光标置于表格 2 的第 2 列单元格中，将“垂直”设置为“顶端” ，执行“插入 记录/模板对象/可编辑区域”命令。如图 13-12 所示。 （16）执行命令后，弹出“新建可编辑区域”对话框，在对话框中的“名称”文本框 中输入可编辑区域的名称。如图 13-13 所示。 图 13-13 “新建可编辑区域”对话框 图 13-14 插入可编辑区域 （17）单击“确定”按钮，插入可编辑区域。如图 13-14 所示。 （18）将光标置于表格 2 的右边，执行“插入记录/表格”命令，插入 1 行 1 列的表格， 此表格记为表格 4。如图 13-15 所示。 图 13-15 插入表格 4 图 13-16 插入图像 （19）将光标置于表格 4 中，执行 “插入记录/图像”命令，插入图像。如图 13-16 所示。 （20）执行“文件/保存”命令，保存当前已创建好的模板。 模板创建好后，就可以快速利用模板创建网页了，具体操作步骤如下： （1）执行“文件/新建”命令，弹出“新建文档”对话框，在对话框中选择“模板中 的页/zd1/moban”选项。如图 13-17 所示。 图 13-17 选择模板对话框 （2）单击“创建”按钮，创建一基于模板的文档。 （3）执行“文件/保存”命令，弹出“另存为”对话框，将文件保存到相应的目录下， 将文件命名为 index1.html。如图 13-18 所示。 图 13-18 创建模板文档 （4）单击“确定”按钮，保存文档。将光标置于可编辑区域中，执行“插入记录/表 格”命令，插入 1 行 2 列的表格， “表格宽度”设置为 100。 （5）单击“确定”按钮，插入表格，将“对齐”设置为“左对齐” 。 （6）将光标置于该表格的第 1 列单元格中插入背景图像 1。如图 13-19 所示。 图 13-19 插入背景图像 1 图 13-20 插入背景图像 2 （7）将光标置于该表格的第 2 列单元格中插入背景图像 2。如图 13-20 所示。 （8）将光标置于表格第 2 列单元格中，输入文字，将“大小”设置为 12 像素， “颜色” 设置为FFFFFF。 （9）将光标置于文字中，执行“插入记录/图像”命令，弹出“选择图像源文件”对 话框，选择所需图像，单击“确定”按钮，插入图像。 （10）单击“确定”按钮，插入图像，在属性面板中将“对齐”设置为“右对齐” 。如 图 13-21 所示。 图 13-21 插入图像 （11）保存文档，按 F12 键在浏览器中预览，效果如图 13-22 所示。 图 13-22 创建模板效果图 修改模板，在页面设置中将模板背景颜色设为#9D3120，并将模板另存为 moban1.dwt，再重命名为 moban2.dwt。具体操作步骤如下： （1）打开文件名为 moban.dwt 的模板网页。如图 13-23 所示。 图 13-23 打开模板网页 图 13-24 “页面设置”对话框 （2）将光标置于可编辑区域，打开属性面板，在属性面板中选择“页面设置” ，将背 景颜色输入#9D3120。如图 13-24 所示。 （3）单击“确定” ，插入背景颜色。如图 13-25 所示。 图 13-25 插入背景颜色 （4）执行“文件/保存”命令，弹出“更新模板文件”对话框，提示是否更新。如图 13-26 所示。 （5）单击“更新”按钮，弹出“更新页面”对话框，点击“关闭”即可。如图 13-27 所示。 图 13-26 “更新模板文件”对话框 图 13-27 “更新页面”对话框 （6）打开利用模板创建的网页，可以看到更新后的效果如图 13-1 所示。 （7）打开模板，执行“文件/另存为” ，弹出“另存为”对话框，将文件命名为 moban1.dwt。 （8）打开 moban1.dwt，执行“窗口/资源”命令，打开“资源”面板 （9）在面板中单击 打开模板列表，选中要重命名的模板名称，双击模板名称或右 键单击，在弹出的菜单中选择“重命名”选项。如图 13-28 所示。 图 13-28 重命名模板 （10）选择后，在反白区中输入 moban2.dwt，按 Enter 即可。 应用库元素 库是一种用来存储要在整个站点上经常重复使用或者更新的页面元素的方法。通过库 可以有效地管理和使用站点上的各种资源。 1. 创建库项目 在 Dreamweaver 中，可以将文档页面中的元素创建成库项目，这些元素包括文本、表 格、表单等。创建库项目的具体操作步骤如下： （1）执行“文件/新建”命令，打开“新建文档”对话框，在对话框中选择“空白页/ 库项目”选项。如图 13-46 所示。 图 13-46 “新建文档”对话框 图 13-47 新建文档 （2）单击“创建”按钮，创建一个空白的文档。如图 13-47 所示。 （3）将光标置于页面中，执行“插入记录/表格”命令，插入 2 行 1 列的表格。如图 13-48 所示。 图 13-48 插入表格 图 13-49 “选择图像源文件”对话框 （4）将光标置于第 1 行单元格中，执行“插入记录/图像”命令，弹出“选择图像源 文件”对话框，在对话框中选择图像。如图 13-49 所示。 （5）单击“确定”按钮，插入图像。如图 13-50 所示。 图 13-50 插入图像 图 13-51 插入背景图像 （6）将光标置于第 2 行单元格中，插入背景图像。如图 13-51 所示。 （7）执行“文件/保存”命令，弹出“另存为”对话框，在对话框中的“文件名”文 本框中输入 top.lbi。如图 13-52 所示。 （8）单击“保存”按钮，创建库。如图 13-53 所示。 图 13-52 “另存为”对话框 图 13-53 创建库项目 2. 应用库项目 将库项目应用到文档，实际内容以及对项目的引用就会被插入到文档中。在文档中应 用库项目的具体步骤如下。 （1）在 Dreamweaver