2015网页设计与制作DreamWeaver教案第十二讲使用模板.doc

第十二讲　使用模板和库制作网页 授课日期 班级名称 授课地点 教学课题 第十二讲　摸板和库 课时 2学时 教学目的 （1）理解模板和库的作用。 （2）学会将已有网页生成模板的操作方法。 （3）掌握如何编辑模板和将模板生成新网页的操作方法。 （4）掌握如何应用库项目制作网页。 知识目标 （1）模板和库的作用。 （2）将已有网页生成模板。 （3）编辑模板和将模板生成新网页。 （4）应用库项目制作网页。 能力目标 （1）会应用摸板创建新网页 （2）用库项目为网页添加元素 素质目标 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。 重点 （1）编辑摸板、将摸板生成新网页 难点 （1）编辑摸板、将摸板生成新网页 课型 讲授型＋操作型 教学方法 边讲、边练、讲练结合 教学手段 多媒体教学 教参 《网页设计与制作教程》 人民邮电出版社 教学环节 及 板书设计 时间安排 1．复习提问 如何实现层的精确定位？ 2 2．新课引入 摸板是一种特殊的文档，通过摸板来创建和更新网页可以大大提高工作效率，网站的维护也会轻松很多 3 3．知识技能目标说明 深刻理解摸板和库的应用，并且会应用摸板来创建和更新网页，用库项目为网页添加元素，从而快速地作出专业的网页 5 4．详细讲解各知识点 45 5．课堂实践 15 6．问题探讨 如何从摸板中分离文档？ 3 7．疑难解析 12 8．课堂小结 本讲主要学习了模板和库的网页布局方法，制作网页不仅追求美观、而且要提高制作效率，使用模板和库文件是提高网页制作效率的有效途径。 3 9.作业布置 2 总计 90 新授内容 模板概述 模板的概念 模板的特点 创建网页模板 新建网页 插入表格，布局网页 创建模板 编辑和更新模板 打开Templates文件夹中模板文件 定义可编辑区域 定义不可编辑的可选区域 定义可编辑的可选区域 设置可编辑标签属性 创建基于模板的网页 应用网页模板创建网页文档 编辑网页 更新模板的变化 库 创建库文件 创建一个待插入库对象的网页 在网页中插入库文件 更新库项目的变化 调整库文件 案例10应用模板制作相似网页——美文随笔 案例综述： 本案例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模板来创建，而当修改模板时，应用该模板的网页都将随之改变，这使网页的制作形成一种批量生产的形式，大大提高了工作效率。 通过本案例的学习将使学生掌握创建模板的方法、学会创建基于模板的网页文档、修改模板并更新网页。 操作步骤： 制作模板 （1）基本页面的制作 创建站点mb，将D：\mb设置为本地站点根目录，D：\mb\images\为默认图像文件夹。在站点中新建页面，修改/页面属性，设置页面标题为“美文随笔”，背景色为#AF99F2（淡紫色），文本色为#000080（深紫色）。 文件/另存为模板，文件名为page.dwt，自动存在站点Templates文件夹。 光标定位页面中，居中对齐。 插入/1×3表格T1，宽902，高84，单元格间距4，填充0，边框0。 设置第1单元格宽为115，第2单元格639。 第1单元格设置顶部对齐，插入图片ch10/images/logo.png；在第2单元格设置顶部对齐，插入图片ch10/images/banner.png。 另起一行，制作导航栏，插入1×1表格T2，宽902，高18，边框1，间距4，边框色为#FFFFFF。 光标定们在表的单元格中，设置边框色、背景色为#?DECEFF（淡粉紫），输入文章标题，中间用竖线间隔。“ HYPERLINK file:///I:\\2011年下半年教学Dreamweaver1\\网页制作基础教程（Dreamweaver%20CS3）\\素材\\成品\\9-14章\\ch10\\ch10\\page.htm 又毕业了　|　 HYPERLINK file:///I:\\2011年下半年教学Dreamweaver1\\网页制作基础教程（Dreamweaver%20CS3）\\素材\\成品\\9-14章\\ch10\\page1.html 边城续写 | HYPERLINK file:///I:\\2011年下半年教学Dreamweaver1\\网页制作基础教程（Dreamweaver%20CS3）\\素材\\成品\\9-14章\\ch10\\page2.html ?点一盏心灯期待诚信 | HYPERLINK file:///I:\\2011年下半年教学Dreamweaver1\\网页制作基础教程（Dreamweaver%20CS3）\\素材\\成品\\9-14章\\ch10\\page3.html ?守住心灵的契约 | HYPERLINK file:///I:\\2011年下半年教学Dreamweaver1\\网页制作