8.1创建网站模板.docVIP

第八单元 模板应用及网站发布 任务一 创建网站模板 一、提出任务 1．任务目标 将第三单元创建的“作品展示”页面转存为模板文件。 2. 解决的问题 通过完成本任务，学会利用原有页面创建网站模板。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：管理网站目录结构、文件面版的使用、表格的基本操作。 二、教学目标 1. 知识目标 ⑴ 掌握将原有网页转存为模板文件。 ⑵ 掌握添加可编辑区。 ⑶ 掌握设定可编辑区。 ⑷ 掌握删除可编辑区。 ⑸ 了解新建一个模板文件。 2. 能力目标 能够熟练地将现有网页转存为模板文件，并学会根据需要灵活地设定可编辑区域，增强利用模板制作统一风格页面的意识。 3. 情感目标 正确看待自己在团队中的作用，提高团队协作能力。 三、教学分析与准备 1. 教学重点 ⑴ 将原有网页转存为模板文件。 ⑵ 设定可编辑区。 2．教学难点 设定可编辑区。 3. 教学方法 提出任务并带领学生进行分析，通过分析形成解决问题的思路，通过提醒化解解决问题过程中遇到的问题，通过举一反三拓展对知识点的认识与理解。 4. 课时安排 2课时。 5. 教学环境 多媒体网络教室。 四、教学过程（组织课堂、复习知识、教师引领完成任务占1学时；举一反三占1学时。） 教学环节及手段 教学内容 备注 组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 知识总结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 1．通过提问学生，确认整个网站的完成情况。 运行Dreamweaver CS5，在“文件”面板中显示“幽幽我心的个人网站”的文件结构，教师引导学生分析整个网站共完成了哪些网页的设计，对应的文件名称是什么。 2．通过指定学生完成下列操作，复习与本任务有关的表格操作。 打开一个含有表格的页面，要求学生选择指定的表格、行、列和单元格，并删除指定表格中的内容。 在前面的单元中，制作了网站首页、“作品展示”、“心情日记”、“家乡山水”和“访客信息”等网页，引导学生观察这些网页的风格是否相同？如果不同的话存在哪些不同？ 作为一个网站上的各个网页必然要求风格统一，本任务将讲解利用网站模版方便快捷的使网站上的网页风格统一。 提出任务：创建网站模板 创建网站模板，就是将相同的页面元素制作成模板，这样不但可以统一整个网站的风格，而且能够加快网页的制作、更新与浏览的速度。 创建模板的方法有两种：一种方法是将原有页面转存为模板文件，另一种方法是新建一个模板文件。本任务采用第一种方法。 1．创建模板 ⑴ 打开第三单元创建的“作品展示”页面另存为模板。 在“文件”面板的列表中，双击文件“works.html”打开“作品展示”页面，选择 “文件”→“另存为模板”菜单项，弹出“另存为模板”对话框，在其中的“站点”下拉列表框中选择“幽幽我心的个人网站”选项，“另存为”文本框中输入模板名称“site”，单击“保存”按钮，弹出提示框，选择“是”按钮，将页面保存为模板文件。 ⑵ 利用网页创建模板的方式。 学生分组讨论：创建模板的方式还有哪些？ 教师归纳：利用网页创建模板的方式如下： A.选择“文件”→“另存为模板”菜单项。 B.单击“插入”栏“常用”类别中的“模板”按钮，在弹出的下拉菜单中选择“创建模板”选项。 C.选择“插入”→“模板对象”→“创建模板”菜单项。 ２．设定可编辑区域 ⑴ 删除表格“table2”与“table3”及其内容，并插入表格“edit”。 在“site.dwt”文档中，选中并删除表格“table2”与“table3”及其内部所添加的内容，把光标放到“table1”右边外侧，插入一个1行1列的表格，表格宽度为778像素，单元格边距、间距及边框均设置为0像素；设置“表格Id”为“edit”，居中对齐，背景颜色值为“#FFFFFF”。 ⑵ 通过选择“插入”→“模板对象”→“可编辑区域”选项创建可编辑区域。 将光标放入表格“edit”内，选择“插入”→“模板对象”→“可编辑区域”菜单项，弹出“新建可编辑区域”对话框，在“名称”文本框中输入“EditRegion”作为可编辑区域名称。单击“确定”按钮，为表格“edit”添加了一个可编辑区域。 ⑶ 删除可编辑区域方框内的文本内容并保存模板。 删除可编辑区域方框内的文本内容（注意不要把可编辑区域删掉），按键盘的Ctrl+S组合键保存模板，关闭文件。 3．与可编辑区域有关的相关知识 学生分组讨论以下问题： ① 在模板中有几种类型的区域？ ② 创建可编辑区域前，要做哪些准备工作？页面中可编辑区域名称不可见怎么办？命名可编辑区域时有哪些规定？ ③ 如何删除可编辑区域？ ④ 可编辑区域和锁定区域的作用？ 教师归纳： ⑴ 在模板中有可编辑区