第8章 综合实例1——应用模板制作“SM”网站子页.doc

实例1 Dreamweaver网页设计电子版教科书 第8章第8章 综合实例1应用面板制作“SM”网站子页本例将把第7章中制作的文档“sub1.html”另存为模板，然后在其基础上创建网站中的其它子页，如图8-2-1所示。 图8-2-1 基于模板创建文档制作思路为便于理解，我们将本例的制作分为“创建模板”和“应用模板”两部分来讲。此外，大家在制作过程中要注意在模板中设置可编辑区域，以及编辑基于模板创建的文档的方法。制作步骤1. 创建模板Step01 启动Dreamweaver 8后，切换到“SM”站点并打开其中的文档“sub1.html”。Step02 选择“文件”“另存为模板”菜单，打开“另存为模板”对话框，在“另存为”文本框中输入“sub”作为模板名，然后单击“保存”按钮，如图8-2-2所示。Step03 弹出提示框，单击“是”按钮更新来讲，如图8-2-3所示。 图8-2-2 “另存为模板”对话框 图8-2-3 提示框Step04 选中广告条所在的大表格，然后选择“插入”“模板对象”“可编辑区域”菜单，打开“新建可编辑区域”对话框，如图8-2-4上图所示。图8-2-4 新建可编辑区域Step05 单击“确定”按钮，所选表格变为可编辑区域“EditRegion3”，如图8-2-4下图所示。Step06 选中网页左侧的副导航条所在单元格，并将其定义为第2个可编辑区域“EditRegion4”，如图8-2-5所示。图8-2-5 定义第2个可编辑区域Step07 采取同样的方法，将“企业简介”所在的大表格定义为第3个可编辑区域“EditRegion5”，如图8-2-6所示。图8-2-6 定义第3个可编辑区域Step08 按【Ctrl+S】组合键保存模板文档，便完成了模板的创建。2. 应用模板Step01 关闭模板文档。选择“文件”“新建”菜单，打开“新建文档”对话框。Step02 选择“模板”选项卡，在“模板用于”列表中选择“站点SM”，在“站点SM”列表中选择前面创建的模板“sub”，如图8-2-6所示。图8-2-6 应用模板创建文档Step03 单击“创建”按钮，基于模板创建文档，如图8-2-7所示。图8-2-7 应用模板创建文档后效果Step04 按【Ctrl+S】组合键打开“另存为”对话框，将文档保存为“sub2.html”。Step05 将可编辑区域“EditRegion3”中的两个图片删除，并重新插入新图片“sub2_02.gif”和“sub2_03.gif”，如图8-2-8所示。图8-2-8 编辑第1个可编辑区域Step06 将可编辑区域“EditRegion4”中的图片删除，并重新插入新图片“sub2_04.gif”，如图8-2-9所示。图8-2-9 编辑第2个可编辑区域Step07 将可编辑区域“EditRegion5中的”企业简介“所在图片删除，并重新插入新图片“sub2_06.gif”，如图8-2-10所示。图8-2-10 编辑第3个可编辑区域Step08 将可编辑区域“EditRegion5“中下方的文本和两个图片全部删除，并将3个单元格合并1个单元格，如图8-2-11所示。图8-2-11 删除内容并合并单元格Step09 将插入点置于合并后的单元格中，单击“属性“面板中的”拆分单元格为行或列“按钮，打开”拆分单元格“对话框，首先将单元格拆分为8行，如图8-2-12所示。Step10 按照同样的方法，将拆分后的第2行至第7行的6个单元格分别拆分为4列，如图8-27所示。 图8-2-12 拆分单元格为8行图8-2-13 拆分各个单元格为4列Step11 在拆分后的歌单元格中分别插入图像