利用模板创网建页-步骤.docVIP

利用模板创建网页 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?）执行“文件/另存为?”命令，弹出Adob?e Dreamwea?ver CS3提示对?话框。如图13-3所?示。 图1?3-3 Adobe ?Dreamweave?r CS3提示对话框? （4）单击“确定”?按钮，弹出“另存为”?对话框，在对话框中的?“文件名”文本框中输?入moban.dwt?。 （5）单击“确定?”按钮，将该模板保存?到相应的目录下。执行?“插入记录/表格”命?令，弹出“表格”对话?框，在对话框中将“行?数”设置为2，“列数?”设置为1，“表格宽?度”设置为100百分?比。 （6）单击“确?定”按钮，插入表格，?此表格记为表格1。如?图13-4所示。 ? 图13-4? 插入表格1 （7）?将光标置于表格1的第?1行单元格中，执行“?插入记录/图像”命令?，插入图像1。如图1?3-5所示。 图13?-5 插入图像1 ? ? ? 图1?3-6 插入图像2 ?（8） ?（9）将光标置于表格?1的右边，执行“插入?记录/表格”命令，插?入1行2列的表格，此?表格记为表格2。如图?13-7所示。 图?13-7 插入表格2? ? ? 图?13-8 插入背景图?像 （10）将光标置?于表格2的第1列单元?格中，插入背景图像。?如图13-8所示。 ?（11）将光标置于背?景图像上，执行“插入?记录/表格”命令，插?入5行1列的表格，插?入表格3，将“对齐”?设为居中对齐。如图1?3-9所示。 图1?3-9 插入表格3 ? ? ? 图1?3-10输入汉字 （?12）将光标置于表格?3的第1行单元格中，?执行“插入记录/图像?”命令，插入图像。 ?（13）将光标置于图?像的右边，输入文字，?将“大小”设置为12?像素，“颜色”设置为?＃FFFFFF。如图?13-10所示。 （?14）分别在表格3的?其它单元格中插入图像?，输入文字，设置颜色?。如图13-11所示?。 图 ? ? 图13-11 插?入图像并输入汉字 ? ? 图13-?12 插入可编辑区域? （15）将光标置于?表格2的第2列单元格?中，将“垂直”设置为?“顶端”，执行“插入?记录/模板对象/可编?辑区域”命令。如图1?3-12所示。 （1?6）执行命令后，弹出?“新建可编辑区域”对?话框，在对话框中的“?名称”文本框中输入可?编辑区域的名称。如图?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/m?oban”选项。如图?13-17所示。 ? 图13-1?7 选择模板对话框 ?（2）单击“创建”按?钮，创建一基于模板的?文档。 （3）执行“?文件/保存”命令，弹?出“另存为”对话框，?将文件