11.3 创建基于模板的页面

模板实际上也是一种文档，它的扩展名为.dwt，存放在根目录下的Templates文件夹中，如果该Templates文件夹在站点中尚不存在，Dreamweaver将在保存新建模板时自动将其创建。模板创建好之后，就可以应用模板快速、高效地设计风格一致的网页，下面通过如图11-13所示的效果讲述应用模板创建网页的方法，具体操作步骤如下：

01 执行“文件”|“新建”命令，弹出“新建文档”对话框，在对话框中选择“网站模板”|“站点11.3”|“moban”选项，如图11-14所示。

02 单击“创建”按钮，利用模板创建网页，如图11-15所示。

03 执行“文件”|“保存”命令，弹出“另存为”对话框，在对话框中的“文件名”组合框中输入名称，如图11-16所示。

04 单击“确定”按钮，保存文档，将光标置于页面中，执行“插入”|“表格”命令，弹出“表格”对话框，在对话框中将“行数”设置为1、“列”设置为1、“表格宽度”设置为100%，如图11-17所示。

05 单击“确定”按钮，插入表格，此表格记为表格1，如图11-18所示。

06 将光标置于表格1的单元格中，打开“代码”视图，在“代码”视图中输入背景图像代码background=images/bg_5.jpg，如图11-19所示。

07 返回“设计”视图，可以看到插入的背景图像，如图11-20所示。

08 将光标置于背景图像上，执行“插入”|“表格”命令，插入2行1列的表格，此表格记为表格2，如图11-21所示。

09 将光标置于表格2的第1行单元格中，执行“插入”|“图像”|“图像”命令，插入图像images/l_1_1.jpg，如图11-22所示。

10 将光标置于表格2的第2行单元格中，将第2行单元格的“背景颜色”设置为#fb501a、“高”设置为1，如图11-23所示。

11 将光标置于表格1的右边，执行“插入”“|表格”命令，插入1行1列的表格，此表格记为表格3，如图11-24所示。

12 将光标置于表格3的单元格中，输入相应的文字，如图11-25所示。

13 将光标置于文字中，执行“插入”|“图像”|“图像”命令，插入图像images/2012720153428134.jpg，如图11-26所示。

14 选中插入的图像，单击鼠标右键，在弹出的快捷菜单中选择“对齐”|“右对齐”命令，如图11-27所示。

15 保存文档，按F12键，在浏览器中预览，效果参见图11-13所示。