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

《第8章 综合实例1——应用模板制作“SM”网站子页》由会员上传分享，免费在线阅读，更多相关内容在PPT专区-天天文库。

1、实例1《Dreamweaver网页设计》电子版教科书第8章第8章综合实例1──应用面板制作“SM”网站子页本例将把第7章中制作的文档“sub1.html”另存为模板，然后在其基础上创建网站中的其它子页，如图8-2-1所示。图8-2-1基于模板创建文档制作思路为便于理解，我们将本例的制作分为“创建模板”和“应用模板”两部分来讲。此外，大家在制作过程中要注意在模板中设置可编辑区域，以及编辑基于模板创建的文档的方法。制作步骤1.创建模板Step01启动Dreamweaver8后，切换到“SM”站点并打开其中的文档“sub1.

2、html”。Step02选择“文件”→“另存为模板”菜单，打开“另存为模板”对话框，在“另存为”文本框中输入“sub”作为模板名，然后单击“保存”按钮，如图8-2-2所示。Step03弹出提示框，单击“是”按钮更新来讲，如图8-2-3所示。图8-2-2“另存为模板”对话框图8-2-3提示框Step04选中广告条所在的大表格，然后选择“插入”→“模板对象”→“可编辑区域”菜单，打开“新建可编辑区域”对话框，如图8-2-4上图所示。5实例1《Dreamweaver网页设计》电子版教科书第8章图8-2-4新建可编辑区域Ste

3、p05单击“确定”按钮，所选表格变为可编辑区域“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】组合键保存模板文档，便完成了模板的创建。5实例1《Dreamweaver网页设计》电子

4、版教科书第8章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

5、”中的两个图片删除，并重新插入新图片“sub2_02.gif”和“sub2_03.gif”，如图8-2-8所示。图8-2-8编辑第1个可编辑区域5实例1《Dreamweaver网页设计》电子版教科书第8章Step06将可编辑区域“EditRegion4”中的图片删除，并重新插入新图片“sub2_04.gif”，如图8-2-9所示。图8-2-9编辑第2个可编辑区域Step07将可编辑区域“EditRegion5中的”企业简介“所在图片删除，并重新插入新图片“sub2_06.gif”，如图8-2-10所示。图8-2-10编

6、辑第3个可编辑区域Step08将可编辑区域“EditRegion5“中下方的文本和两个图片全部删除，并将3个单元格合并1个单元格，如图8-2-11所示。图8-2-11删除内容并合并单元格Step09将插入点置于合并后的单元格中，单击“属性“面板中的”拆分单元格为行或列“按钮，打开”拆分单元格“对话框，首先将单元格拆分为8行，如图8-2-12所示。Step10按照同样的方法，将拆分后的第2行至第7行的6个单元格分别拆分为4列，如图8-27所示。5实例1《Dreamweaver网页设计》电子版教科书第8章图8-2-12拆分

7、单元格为8行图8-2-13拆分各个单元格为4列Step11在拆分后的歌单元格中分别插入图像或输入文本，最终效果如图8-2-13所示。图8-2-13设置单元格内容Step12按【Ctrl+S】组合键保存文档。可采取同样的方法制作网站中的其它子页。5