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

第十二讲使用模板和库制作网页授课日期班级名称授课地点教学课题第十二讲摸板和库课时2学时教学目的（1）理解模板和库的作用。（2）学会将已有网页生成模板的操作方法。（3）掌握如何编辑模板和将模板生成新网页的操作方法。（4）掌握如何应用库项目制作网页。知识目标（1）模板和库的作用。（2）将已有网页生成模板。（3）编辑模板和将模板生成新网页。（4）应用库项目制作网页。能力目标（1）会应用摸板创建新网页（2）用库项目为网页添加元素素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。重点（1）编辑摸板、将摸板生成新网页难点（1）编辑摸板、将摸板生成新网页课型讲授型＋操作型教学方法边讲、边练、讲练结合教学手段多媒体教学教参《网页设计与制作教程》人民邮电出版社教学环节及板书设计时间安排1．复习提问如何实现层的精确定位？22．新课引入摸板是一种特殊的文档，通过摸板来创建和更新网页可以大大提高工作效率，网站的维护也会轻松很多33．知识技能目标说明深刻理解摸板和库的应用，并且会应用摸板来创建和更新网页，用库项目为网页添加元素，从而快速地作出专业的网页54．详细讲解各知识点455．课堂实践156．问题探讨如何从摸板中分离文档？37．疑难解析128．课堂小结本讲主要学习了模板和库的网页布局方法，制作网页不仅追求美观、而且要提高制作效率，使用模板和库文件是提高网页制作效率的有效途径。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）更新库项目的变化（5）调整库文件案例10应用模板制作相似网页——美文随笔案例综述：本案例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模板来创建，而当修改模板时，应用该模板的网页都将随之改变，这使网页的制作形成一种批量生产的形式，大大提高了工作效率。通过本案例的学习将使学生掌握创建模板的方法、学会创建基于模板的网页文档、修改模板并更新网页。操作步骤：1.制作模板（1）基本页面的制作A.创建站点mb，将D：\mb设置为本地站点根目录，D：\mb\images\为默认图像文件夹。在站点中新建页面，修改/页面属性，设置页面标题为“美文随笔”，背景色为#AF99F2（淡紫色），文本色为#000080（深紫色）。B.文件/另存为模板，文件名为page.dwt，自动存在站点Templates文件夹。C.光标定位页面中，居中对齐。D.插入/1×3表格T1，宽902，高84，单元格间距4，填充0，边框0。E.设置第1单元格宽为115，第2单元格639。F.第1单元格设置顶部对齐，插入图片ch10/images/logo.png；在第2单元格设置顶部对齐，插入图片ch10/images/banner.png。G.另起一行，制作导航栏，插入1×1表格T2，宽902，高18，边框1，间距4，边框色为#FFFFFF。H.光标定们在表的单元格中，设置边框色、背景色为#DECEFF（淡粉紫），输入文章标题，中间用竖线间隔。“又毕业了|边城续写|点一盏心灯期待诚信|守住心灵的契约|井口的天空|天若有情|冰の水蓝”I.另起一行，插入1×1表格T3，宽902，高23，用于拉开标题与正文的间隔。J.再另起一行，制作正文部分，插入3×1表格T4，宽902，高11，边框1，间距4，填充为0，边框色为#FFFFFF。设置单元格背景色为#DECEFF，单元格边框色为#DECEFF。拆分第一行为3列，从左到右宽度分别为153、597、128，选中各单元格，水平居中对齐，在第一单元格中输入“标题”，第三单元格中输入“作者：”，字体大小设置为9pt。K.设置第二行垂直对齐方式顶端对齐。在正文部分的下方，再插入1×1表格T5，宽902，高17，单元格间距为4，填充为0，边框为1，设置边框色为#FFFFFF，设置单元格背景色为#DECEFF，单元格边框色#DECEFF。该单元格用于放置版权信息，因为其内容是固定不变的，因此可在制作模板时直接输入。（2）插入模板区域在该例中，T4表格的第一、二行中的标题、作者及文章内容部分可通过插入可编辑区域，使这些单元格可以插入内容，而第三单元格中先只制作一行的表格，后面的内容通过创建重区域来实现。创建可编辑区域a)将光标定位在表格T4正文表格的第一行第二个单元格中，右击，从快捷菜单中选择“模板”|“新建可编辑区域”，将可编辑区域命名为title。b)将光标定们在第三个单元格中的“作者：”后面，用同样的方法定义一个可编辑区域，命名为author，再将光标定位在第二行的单元格中，定义一个名为content的可编辑区域。如下图：创建重复区域1）将光标定们在表格T4正文表格的第三行中，插入1×3表格T6，宽为100%，第1列宽为154，第2列宽为13（用于间隔），第3列宽为732。2）再在T6表格的第1单元格中插入4×1表格T7。3）在第三单元格中插入1×1表格，宽为100%，选中该表格，选择“插入”|“模板对象”|“重复区域”，用以显示新闻条目，将其创建为重复区域，名为wen。4）再次选中以上表格，单击右键，选择“模板”|“新建可编辑区域”，将其创建为可编辑区域，名为wen1。如下图5）在T6表格的第3列中插入1×6列表格T8，宽为732。6）在各单元格中分别插入1×1表格，宽98%，水平居中，插入图片和文字。7）选中T8表格，选择“插入”|“模板对象”|“重复区域”，将该表格创建成可重复区域，名为tu；再分别选中各单元格中的表格，将它们设置为可编辑区域，名为tu1、tu2、tu3、tu4、tu5和tu6。如下图所示：8）文件|保存。2、创建基于模板的网页文档1）新建页面。在“文件”面板中单击“资源”选项卡，打开“资源”面板，单击左侧“模板”按钮，选中完成的page.dwt模板，将其拖入页面编辑窗口，此时页页的周围绕着黄色的边框。模板的非可编辑是不可编辑的。2）在可编辑区域中，可以添加制作任何元素，将光标定位在名为title的可编辑区域中，输入“又毕业了”；定们在名为author的可编辑区域中，输入“刘舸”；定位在content的可编辑区域中，输入“又毕业了”的全文，将网页保存为index.htm。3）在重复区域中，单击“重复：wen”处的+加号按钮，增加一个表格，由于该表格同时定义了可编辑性，所以可以修改其中的内容，增加及修改后的结果如下图：4）用同样的方法可制作“重复区域：tu”部分，增加表格并更换其中的图片和文字，完成后如下图：5）在可编辑区域中，可以添加制作任何元素，将光标定位在名为title的可编辑区域中，输入“《边城》续写”；定们在名为author的可编辑区域中，输入“荆棘鸟”；定位在content的可编辑区域中，输入“《边城》续写”的全文，将网页保存为page1.htm。6）用同样的方法制作page2.htm，page3.htm页面，标题分别是“点一盏心灯期待诚信”和“守住心灵的契约”，作者分别是“刘舸”和“孙悦刚”。3、修改模板并更新1)在“资源”面板中，选中page模板，双击进入模板编辑状态。2)将导航栏中的“又毕业了”，“边城续写”，“点一盏心灯期待诚信”和“守住心灵的契约”，并分别创建超链接到index.htm，page1.htm，page2.htm，page3.htm。3)保存所修改的模板文件，会弹出一个对话框，询问是否要将改变应用到所有引用这个模板的页面中去，单击“更新”按钮，则Dreamweaver自动更新所有用到这个模板的文件。4)更新完成后，显示这个模板有四个页面引用，报告页面更新情况。5)为验证文件是否被改变，打开index.htm，page1.htm，page2.htm，page3.htm，预览验证其超链接。课堂实践（1）在“课堂实践”站点中创建如图7-101所示的模板文档“08.dwt”。（2）在“课堂实践”站点中创建如图7-102所示的库文件“RightRegion.lbi”。（3）在“课堂实践”站点文件夹“08模板和库”中创建基于模板08.dwt的网页文档“08.html”，并且在该网页中插入库“RightRegion.lbi”。疑难解析问题1：Dreamweaver8创建网页模板有哪些方法，其创建步骤怎样？答：创建网页模板有3种方法：方法之一：将现有网页文档另存为网页模板，其操作步骤详见本章前面的内容。方法之二：创建基于“HTML模板”的“模板页”图7-103基于模板和库的课堂实践网页的浏览效果在Dreamweaver8主窗口中，单击菜单【文件】→【新建】，弹出“新建文档”对话框，如图7-104所示。在该对话框左侧“类别”分类中选择“模板页”，然后在中间的“模板页”列表中选择相关的模板类型“HTML模板”，最后单击【创建】。接着在Dreamweaver8主窗口中，单击菜单【文件】→【保存】，弹出“另存为模板”对话框，如图7-105所示，在该对话框中选择保存模板的站点，输入模板名称和说明文字，然后单击【保存】按钮即可。图7-104新建文档对话框方法之三：利用“模板”面板直接创建模板利用“模板”面板可新建模板、编辑模板，创建的步骤如下：（1）在Dreamweaver8主窗口中，单击菜单【窗口】→【资源】，打开“资源”面板，然后在“资源”面板左侧单击【模板】按钮，切换到“模板”子面板，如图7-106所示。（2）单击“模板”子面板右下角的【新建模板】按钮，这时在“模板”子面板下半部分会出现一个默认名称为“Untitled”的模板文件，输入一个合适的模板文件名称，如图7-106所示。（3）单击“模板”子面板右下角的【编辑】按钮，打开模板文档进行编辑，在编辑窗口的左上角会出现模板的名称。（4）接下来就可以像制作普通网页一样编辑模板，然后单击菜单【文件】→【保存】即可。图7-105“另存为模板”对话框图7-106“模板”子面板问题2：网页中哪些页面元素可以设置成可编辑区，几个不同的单元格及内容是否可以设置为同一个可编辑区？网页中可设置可编辑区的页面元素主要有：（1）图像和文本。（2）表格及表格里的内容、单元格及单元格里的内容。（3）层和层里的内容，把层设置为可编辑区，则模板应用时层可以移动；把层里的内容设为可编辑区，则模板应用时层里的内容可被编辑，但是此时层不可以移动。（4）客户端行为几个不同的单元格及内容不可以设置为同一个可编辑区。问题3：如何对模板中不可编辑区域进行编辑？答：如果要更改基于模板的文档的不可编辑区域，必须将该文档从模板分离。将文档分离之后，整个文档都将变为可编辑的。问题4：如果将网页中的库文件和源文件分离？修改库文件之后，已脱离库文件的网页是否能进行更新？答：不能更新。如果断开了网页文档中的项目和库之间的链接，当库项目发生更改时不会更新该实例。课外拓展实践1．在“个人网站设计”站点中创建如图7-108所示的模板文档“08.dwt”。2．在“个人网站设计”站点中创建如图7-108所示的库文件“RightRegion.lbi”。3．在“个人网站设计”站点文件夹“08模板和库”中创建基于模板文件08.dwt的网页文档“08.html”，并且在该网页中插入库“RightRegion.lbi”。课后作业课后评析