11.2创建模板（课件）-高二《网页设计与制作》同步教学（人民邮电版）

任务二 创建模板 （一） 创建模板文件 【操作步骤】 1.打开【资源】面板，单击 按钮，切换至【模板】分类。 2.单击面板右下角的 按钮，新建一个默认名称为“Untitled”的模板，在列表框中输入模板的新名称“index”以替换原来的名称“Untitled”，并按Enter键进行确认，如图所示。 3.双击模板文件“index.dwt”，或者先选中模板文件“index.dwt”，再单击【资源】面板右下角的 按钮，打开模板文件。 4.在菜单栏中选择【窗口】／【CSS样式】命令，打开【CSS样式】面板，单击右下角的 按钮，链接外部样式表文件“css.css”。 5.在菜单栏中选择【文件】／【保存】命令，保存文件。 （二） 插入库项目 【操作步骤】 1.将鼠标光标置于模板文件“index.dwt”中，然后在【资源】面板中切换至【库】分类，并在列表框中选中库文件“top.lbi”。 2.单击【资源】面板底部的 按钮，或者单击鼠标右键，在弹出的快捷菜单中选择【插入】命令，将库项目插入到模板顶部，如图所示。 3.利用相同的方法将页脚库项目也插入到模板中。 （三） 插入模板对象 【操作步骤】 1.单击页眉库项目，然后在菜单栏中选择【插入】／【表格】命令，在页眉库项目的下面插入一个1行1列的表格，表格Id为“midtab”，参数设置如图所示。 2.在“css.css”中创建基于表格“midtab”的高级CSS样式“#midtab”，设置背景图像为“images/bj.jpg”，不重复，水平位置为“左对齐”，垂直位置为“底部”，如图所示。 3.设置单元格的水平对齐方式为“右对齐”，垂直对齐方式为“顶端”，然后在其中插入一个2行3列的嵌套表格，表格Id为“maintab”，其他参数设置如图所示。 4.选中表格的所有单元格，设置其水平对齐方式为“左对齐”，垂直对齐方式为“顶端”，单元格宽度为“150”，高度为“120”，效果如图所示。 5.在“css.css”中创建基于表格“maintab”的【高级】CSS超级链接样式“#maintab a:link,#maintan a:visited”，设置文本颜色为“#0066FF”，无修饰效果。 6.在“css.css”中创建基于表格“maintab”的【高级】CSS超级链接悬停效果样式“#maintab a:hover”，设置文本颜色为“#000000”，有下划线。 7.将鼠标光标定位在第1行的第1个单元格内，然后在菜单栏中选择【插入】／【模板对象】／【可编辑区域】命令，打开【新建可编辑区域】对话框，在【名称】文本框中输入“最新动态”，然后单击按钮，在单元格内插入可编辑区域，如图所示。 8.运用同样的方法在第2行的第1个和第2个单元格内分别插入名称为“科技能手”和“花卉价格”的可编辑区域，如图所示。 9.将鼠标光标定位在第1行的第2个单元格内，然后在菜单栏中选择【插入】／【模板对象】／【重复表格】命令，插入一个重复表格，如图所示。 10.单击可编辑区域名称“EditRegion4”将其选择，在【属性】面板中将其名称修改为“内容1”，按照同样的方法修改可编辑区域名称“EditRegion5”为“内容2”，如图所示 。 11.将第3列的两个单元格进行合并，然后在菜单栏中选择【插入】／【模板对象】／【重复区域】命令，打开【新建重复区域】对话框，在【名称】文本框中输入“内容导读”，单击按钮，在单元格内插入名称为“内容导读”的重复区域，如图所示。 12.将重复区域内的文本“内容导读”删除，在其中插入符号“★”和两个换行符，然后在“★”和换行符之间再插入一个可编辑区域，如图所示。 13.将鼠标光标置于“校园公告”所在单元格，然后右键单击文档左下角的“<td>”标签，在弹出的快捷菜单中选择【快速标签编辑器】命令，打开快速标签编辑器，在其中添加“id=”tdline””，如图11-25所示。 14.在“css.css”中创建【高级】CSS样式“#tdline”，在【边框】分类中设置样式为“点划线”，宽度为“1像素”，颜色为“#99CC99”，如图所示。 15.把鼠标光标分别置于其他单元格内，并右键单击文档左下角的“<td>”标签，在弹出的快捷菜单中选择【设置ID】／【tdline】命令，把样式应用到这些单元格上，效果如图所示。至此，模板就制作完成了。 任务三 应用模板 【操作步骤】 1.在菜单栏中选择【文件】／【新建】命令，打开【从模板新建】对话框，切换至【模板】选项卡，选择已经创建的主页模板“index.dwt”，然后勾选【从模板新建】对话框右侧下面的【当模板改变时更新页面】复选框，以保证模板改变时更新基于模板的页面，如图所示。 2.单击