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