2015网页设计与制作DreamWeaver教案：第十二讲 使用模板和库制作网页

《2015网页设计与制作DreamWeaver教案：第十二讲 使用模板和库制作网页》由会员分享，可在线阅读，更多相关《2015网页设计与制作DreamWeaver教案：第十二讲 使用模板和库制作网页（10页珍藏版）》请在金锄头文库上搜索。

1、第十二讲 使用模板和库制作网页授课日期授课日期班级名称班级名称授课地点授课地点教学课题教学课题第十二讲 摸板和库课时课时2 学时教学目的教学目的（1）理解模板和库的作用。（2）学会将已有网页生成模板的操作方法。（3）掌握如何编辑模板和将模板生成新网页的操作方法。（4）掌握如何应用库项目制作网页。知识目标知识目标（1）模板和库的作用。（2）将已有网页生成模板。（3）编辑模板和将模板生成新网页。（4）应用库项目制作网页。能力目标能力目标（1）会应用摸板创建新网页（2）用库项目为网页添加元素素质目标素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重点重点（1）编辑摸板、

2、将摸板生成新网页难点难点（1）编辑摸板、将摸板生成新网页课型课型讲授型操作型教学方法教学方法边讲、边练、讲练结合教学手段教学手段多媒体教学教参教参网页设计与制作教程 人民邮电出版社时间安排1复习提问如何实现层的精确定位？22新课引入摸板是一种特殊的文档，通过摸板来创建和更新网页可以大大提高工作效率，网站的维护也会轻松很多33知识技能目标说明深刻理解摸板和库的应用，并且会应用摸板来创建和更新网页，用库项目为网页添加元素，从而快速地作出专业的网页54详细讲解各知识点455课堂实践156问题探讨如何从摸板中分离文档？37疑难解析128课堂小结本讲主要学习了模板和库的网页布局方法，制作网页不仅追求美观

3、、而且要提高制作效率，使用模板和库文件是提高网页制作效率的有效途径。39.作业布置2教学环节教学环节 及及 板书设计板书设计总计90新授内容新授内容1模板概述（1）模板的概念（2）模板的特点2创建网页模板（1）新建网页（2）插入表格，布局网页（3）创建模板3编辑和更新模板（1）打开 Templates 文件夹中模板文件（2）定义可编辑区域（3）定义不可编辑的可选区域（4）定义可编辑的可选区域（5）设置可编辑标签属性4创建基于模板的网页（1）应用网页模板创建网页文档（2）编辑网页（3）更新模板的变化5库（1）创建库文件（2）创建一个待插入库对象的网页（3）在网页中插入库文件（4）更新库项目的变化

4、（5）调整库文件案例案例 10 应用模板制作相似网页应用模板制作相似网页美文随笔美文随笔 案例综述：案例综述： 本案例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模 板来创建，而当修改模板时，应用该模板的网页都将随之改变，这使网页的 制作形成一种批量生产的形式，大大提高了工作效率。 通过本案例的学习将使学生掌握创建模板的方法、学会创建基于模板的网页 文档、修改模板并更新网页。 操作步骤：操作步骤： 1.制作模板制作模板 （1）基本页面的制作）基本页面的制作 A.创建站点 mb，将 D：mb 设置为本地站点根目录， D：mbimages为默认图像文件夹。在站点中新建页面，修改/ 页

5、面属性，设置页面标题为“美文随笔” ，背景色为 #AF99F2（淡紫色） ，文本色为#000080（深紫色） 。 B.文件/另存为模板，文件名为 page.dwt，自动存在站点 Templates 文件夹。 C.光标定位页面中，居中对齐。 D.插入/13 表格 T1，宽 902，高 84，单元格间距 4，填充 0，边 框 0。 E.设置第 1 单元格宽为 115，第 2 单元格 639。 F.第 1 单元格设置顶部对齐，插入图片 ch10/images/logo.png；在 第 2 单元格设置顶部对齐，插入图片 ch10/images/banner.png。 G.另起一行，制作导航栏，插入 1

6、1 表格 T2，宽 902，高 18， 边框 1，间距 4，边框色为#FFFFFF。 H.光标定们在表的单元格中，设置边框色、背景色为 # DECEFF（淡粉紫） ，输入文章标题，中间用竖线间隔。 “又毕 业了 | 边城续写 | 点一盏心灯期待诚信 | 守住心灵的契约 | 井口的天空 | 天若有情 | 冰水蓝” I.另起一行，插入 11 表格 T3，宽 902，高 23，用于拉开标题 与正文的间隔。 J.再另起一行，制作正文部分，插入 31 表格 T4，宽 902，高 11，边框 1，间距 4，填充为 0，边框色为#FFFFFF。设置单元 格背景色为#DECEFF，单元格边框色为#DECEFF

7、。 拆分第一行为 3 列，从左到右宽度分别为 153、597、128，选 中各单元格，水平居中对齐，在第一单元格中输入“标题” ，第 三单元格中输入“作者：” ，字体大小设置为 9pt。 K.设置第二行垂直对齐方式顶端对齐。 在正文部分的下方，再插入 11 表格 T5，宽 902，高 17，单 元格间距为 4，填充为 0，边框为 1，设置边框色为#FFFFFF， 设置单元格背景色为# DECEFF，单元格边框色#DECEFF。该 单元格用于放置版权信息，因为其内容是固定不变的，因此可 在制作模板时直接输入。 （2）插入模板区域）插入模板区域 在该例中，T4 表格的第一、二行中的标题、作者及文章

8、内容部分可通过 插入可编辑区域，使这些单元格可以插入内容，而第三单元格中先只制作 一行的表格，后面的内容通过创建重区域来实现。 创建可编辑区域创建可编辑区域 a)将光标定位在表格 T4 正文表格的第一行第二个单元格中，右击，从快捷菜单中选择“模板”|“新建可编辑区域” ，将可编辑区域命 名为 title。 b)将光标定们在第三个单元格中的“作者：”后面，用同样的方法定 义一个可编辑区域，命名为 author，再将光标定位在第二行的单元 格中，定义一个名为 content 的可编辑区域。如下图：创建重复区域创建重复区域 1） 将光标定们在表格 T4 正文表格的第三行中，插入 13 表格 T6，

9、宽为 100%，第 1 列宽为 154，第 2 列宽 为 13（用于间隔） ，第 3 列宽为 732。 2） 再在 T6 表格的第 1 单元格中插入 41 表格 T7。 3） 在第三单元格中插入 11 表格，宽为 100%，选中该表格，选择“插入”|“模 板对象”|“重复区域” ，用以显示新闻条 目，将其创建为重复区域，名为 wen。 4） 再次选中以上表格，单击右键，选择“模 板”|“新建可编辑区域” ，将其创建为可 编辑区域，名为 wen1。如下图5） 在 T6 表格的第 3 列中插入 16 列表格 T8，宽为 732。 6） 在各单元格中分别插入 11 表格，宽 98%，水平居中，插入图

10、片 和文字。 7） 选中 T8 表格，选择“插入”|“模板对象”|“重复区域” ，将该表 格创建成可重复区域，名为 tu；再分别选中各单元格中的表格， 将它们设置为可编辑区域，名为 tu1、tu2、tu3、tu4、tu5 和 tu6。如下图所示：8） 文件|保存。 2、 创建基于模板的网页文档创建基于模板的网页文档 1）新建页面。在“文件”面板中单击“资 源”选项卡，打开“资源”面板，单击左侧“模板”按钮，选中完成的 page.dwt 模板，将其拖入页面 编辑窗口，此时页页的周围绕着黄色的边框。模板的非可编辑 是不可编辑的。 2）在可编辑区域中，可以添加制作任何元素，将光标定位在名为 titl

11、e 的可编辑区域中，输入“又毕业了” ；定们在名为 author 的 可编辑区域中，输入“刘舸” ；定位在 content 的可编 辑区域中，输入“又毕业了”的全文，将网页保存为 index.htm。 3）在重复区域中，单击“重复：wen”处的+加号按钮，增加一个 表格，由于该表格同时定义了可编辑性，所以可以修改其中的 内容，增加及修改后的结果如下图：4）用同样的方法可制作“重复区域：tu”部分，增加表格并更换其 中的图片和文字，完成后如下图：5）在可编辑区域中，可以添加制作任何元素，将光标定位在名为 title 的可编辑区域中，输入“边城续写” ；定们在名为 author 的可编辑区域中，输

12、入“荆棘鸟” ；定位在 content 的可编 辑区域中，输入“边城续写”的全文，将网页保存为 page1.htm。 6）用同样的方法制作 page2.htm，page3.htm 页面，标题分别是“点 一盏心灯期待诚信”和“守住心灵的契约” ，作者分别是“刘舸” 和“孙悦刚” 。 3、 修改模板并更新修改模板并更新 1)在“资源”面板中，选中 page 模板，双击进入模板编辑状态。 2)将导航栏中的“又毕业了” ， “边城续写” ， “点一盏心灯期待诚 信”和“守住心灵的契约” ， 并分别创建超链接到 index.htm，page1.htm， page2.htm，page3.htm。 3)保存

13、所修改的模板文件，会弹出一个对话框，询问是否要将改 变应用到所有引用这个模板的页面中去，单击“更新”按钮， 则 Dreamweaver 自动更新所有用到这个模板的文件。 4)更新完成后，显示这个模板有四个页面引用，报告页面更新情 况。 5)为验证文件是否被改变，打开 index.htm，page1.htm， page2.htm，page3.htm，预览验证其超链接。课堂实践（1）在“课堂实践”站点中创建如图 7-101 所示的模板文档“08.dwt” 。（2）在“课堂实践”站点中创建如图 7-102 所示的库文件“RightRegion.lbi” 。（3）在“课堂实践”站点文件夹“08 模板和

14、库”中创建基于模板 08.dwt的网页文档“08.html” ，并且在该网页中插入库“RightRegion.lbi” 。疑难解析问题问题 1 1：DreamweaverDreamweaver 8 8 创建网页模板有哪些方法，其创建步骤怎样？创建网页模板有哪些方法，其创建步骤怎样？答：创建网页模板有 3 种方法：方法之一：将现有网页文档另存为网页模板，其操作步骤详见本章前面的内容。方法之二：创建基于“HTML 模板”的“模板页”图 7-103 基于模板和库的课堂实践网页的浏览效果在 Dreamweaver 8 主窗口中，单击菜单【文件】【新建】，弹出“新建文档”对话框，如图 7-104 所示。

15、在该对话框左侧“类别”分类中选择“模板页”，然后在中间的“模板页”列表中选择相关的模板类型“HTML模板”，最后单击【创建】。接着在 Dreamweaver 8 主窗口中，单击菜单【文件】【保存】，弹出“另存为模板”对话框，如图 7-105 所示，在该对话框中选择保存模板的站点，输入模板名称和说明文字，然后单击【保存】按钮即可。图 7-104 新建文档对话框方法之三：利用“模板”面板直接创建模板利用“模板”面板可新建模板、编辑模板，创建的步骤如下：（1）在 Dreamweaver 8 主窗口中，单击菜单【窗口】【资源】，打开“资源”面板，然后在“资源”面板左侧单击【模板】按钮，切换到“模板”子面板，如图 7-106 所示。 （2）单击“模板”子面板右下角的【新建模板】按钮 ，这时在“模板”子面板下半部分会出现一个默认名称为“Untitled”的模板文件，输入一个合适的模板文件名称，如图 7-106 所示。（3）单击“模板”子面板右下角的【编辑】按钮，打开模板文档进行编辑，在编辑窗口的左上角会出现模板的名称。（4）接下来就可以像制作普通网页一样编辑模板，然后单击菜单【文件】【保存】即可。图 7-105 “另存为模板”对话框图 7-106 “模板”子面板问题问题 2 2：网页中哪些页面元素可以设置成可编辑区，几个不同的单元格：网页中哪些页