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

第十二讲 使用模板和库制作网页授课日期班级名称授课地点教学课题第十二讲摸板和库课时 2学时〔1〕理解模板和库的作用。教学目的学问目标力气目标素养目标

学会将已有网页生成模板的操作方法。把握如何编辑模板和将模板生成网页的操作方法。把握如何应用库工程制作网页。模板和库的作用。将已有网页生成模板。编辑模板和将模板生成网页。应用库工程制作网页。会应用摸板创立网页用库工程为网页添加元素培育学生的创力气与独立思考力气，并使其具有分析问题、解决问题的力气。重点〔1〕编辑摸板、将摸板生成网页难点〔1〕编辑摸板、将摸板生成网页课型讲授型＋操作型教学方法边讲、边练、讲练结合教学手段多媒体教学教参 《网页设计与制作教程》人民邮电出版社复习提问如何实现层的准确定位？课引入

时间安排2摸板是一种特别的文档，通过摸板来创立和更网页可以3大大提高工作效率，网站的维护也会轻松很多3．学问技能目标说明深刻理解摸板和库的应用，并且会应用摸板来创立和更网5页，用库工程为网页添加元素，从而快速地作出专业的网页教学环节4．具体讲解各学问点45及板书设计5．课堂实践156．问题探讨如何从摸板中分别文档？37．疑难解析128．课堂小结本讲主要学习了模板和库的网页布局方法，制作网页不仅追求美观、而且要提高制作效率，使用模板和库文件是提3高网页制作效率的有效途径。9.作业布置2总计90模板概述模板的概念模板的特点创立网页模板建网页插入表格，布局网页创立模板编辑和更模板Templates定义可编辑区域授内容

定义不行编辑的可选区域定义可编辑的可选区域设置可编辑标签属性创立基于模板的网页应用网页模板创立网页文档编辑网页更模板的变化库创立库文件创立一个待插入库对象的网页在网页中插入库文件更库工程的变化调整库文件10应用模板制作相像网页——美文随笔案例综述：本案例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模板来创立，而当修改模板时，应用该模板的网页都将随之转变，这使网页的制作形成一种批量生产的形式，大大提高了工作效率。通过本案例的学习将使学生把握创立模板的方法、学会创立基于模板的网页文档、修改模板并更网页。操作步骤：1.制作模板根本页面的制作创立站点mD\mbD\mb\images\为默认图像文件夹。在站点中建页面，修改/页面属性，设置页面标题为“美文随笔#AF99F〔淡紫色为#000080〔深紫色。文件/另存为模板，文件名为.dwt，自动存在站点Templates文件夹。光标定位页面中，居中对齐。插入/1×3T19028440，边0。11152639。第1ch10/images/logo.png；在2单元格设置顶部对齐，插入图片ch10/images/banner.png。另起一行，制作导航栏，插入1×1表格T2，宽90218，边14，边框色为#FFFFFF。#DECEFF〔淡粉紫|续写|点一盏心灯期盼诚信|守住心灵的契约|井口的天空|天假设有情|冰の水蓝”另起一行，插入1×1表格T3，宽902，高23，用于拉开标题与正文的间隔。3×1表格T490211，边框1，间距40，边框色为#FFFFFF。设置单元格背风光为#DECEFF，单元格边框色为#DECEFF。3列，从左到右宽度分别为153、597、128，选中各单元格，水平居中对齐，在第一单元格中输入“标题9p。设置其次行垂直对齐方式顶端对齐。在正文局部的下方，再插入1×1表格T5，宽902，高17，单元格间距为4，填充为0，边框为1，设置边框色为#FFFFFF，设置单元格背风光为#DECEFF，单元格边框色#DECEFF。该单元模板时直接输入。插入模板区域在该例中，T4表格的第一、二行中的标题、作者及文章内容局部可通过插入可编辑区域，使这些单元格可以插入内容，而第三单元格中先只制作一行的表格，后面的内容通过创立重区域来实现。创立可编辑区域将光标定位在表格T4正文表格的第一行其次个单元格中，右击，从快捷菜单中选择“模板”title。一个可编辑区域，命名为author，再将光标定位在其次行的单元格中，定义一个名为content的可编辑区域。如以以下图：创立重复区域将光标定们在表格T41×3表格T6，宽〔用于间隔，第3列宽为73。再在T614×1表T7。在第三单元格中插入1×1表格，宽为100“模板将其创立为重复区域，名为wen。再次选中以上表格，单击右键，选择“模板”|编辑区域，名为wen1。如以以下图T631×6列表格T8，732。1×198%，水平居中，插入图片和文字。T8|“模板对象”|tutu1tu2tu3、tu4、tu5tu6。如以以下图所示：文件|保存。2建页面。在“文件”面板中单击“资源”选项卡，翻开“资源”面板，单击左侧“模板”按钮，选中完成的.dwt模板，将其拖入页面编辑窗口，此时页页的四四周着黄色的边框。模板的非可编辑是不行编辑的。title的可编辑区域中，输入“又毕业了author的可编content辑区域中，输入“又毕业了”的全文，将网页保存为index.htm。在重复区域中，单击“重复：wen”处的+加号按钮，增加一个表增加及修改后的结果如以以下图：用同样的方法可制作“重复区域：tu”局部，增加表格并更换其中的图片和文字，完成后如以以下图：title的可编辑区域中，输入author的可编辑区域中，输入“荆棘鸟”；定位在content的可编1.htm。2.htm，3.htm页面，标题分别是“点一盏心灯期盼诚信”和“守住心灵的契约3在“资源”面板中，选中模板，双击进入模板编辑状态。将导航栏中“又毕业了“边城续写“点一盏心灯期盼诚信和“守住心灵的契约”，并分别创立超链接到 index.htm，1.htm，2.htm，3.htm。保存所修改的模板文件，会弹出一个对话框，询问是否要将转变应用到全部引用这个模板的页面中去，单击“更”按钮，则Dreamweaver自动更全部用到这个模板的文件。index.htm，1.htm2.htm，3.htm，预览验证其超链接。课堂实践

7-101所示的模板文档“08.dwt”在“课堂实践”站点中创立如图7-102所示的库文件“RightRegion.lbi”在“课堂实践”站点文件夹8模板和库”中创立基于模板t的网页”1：Dreamweaver83面的内容。方法之二：创立基于“HTML模板”的“模板页”疑难解析图7-103 基于模板和库的课堂实践网页的扫瞄效果在Dreamweaver87-104板页”，然后在中间的“模板页”列表中选择相关的模板类型HTML最终单击【创立】。接着在Dreamweaver8主窗口中，单击菜单【文件】→【保存】，弹7-105站点，输入模板名称和说明文字，然后单击【保存】按钮即可。图7-104 建文档对话框方法之三：利用“模板”面板直接创立模板利用“模板”面板可建模板、编辑模板，创立的步骤如下：〔1〕在Dreamweaver8主窗口中，单击菜单【窗口】→【资源】，翻开“资源”面板，然后在“资源”面板左侧单击【模板】按钮，切换到“模7-106单击“模板”子面板右下角的【建模板】按钮，这时在“模板”子面板下半局部会消灭一个默认名称为“Untitled”的模板文件，输入一个7-106单击“模板”子面板右下角的【编辑】按钮，翻开模板文档进展编辑，在编辑窗口的左上角会消灭模板的名称。文件】→【保存】即可。图7-105 “另存为模板”对话框图7-106 “模板”子面板问题2：网页中哪些页面元素可以设置成可编辑区，几个不同的单元格及内容是否可以设置为同一个可编辑区？网页中可设置可编辑区的页面元素主要有：图像和文本。表格及表格里的内容、单元格及单元格里的内容。层和层里的内容，把层设置为可编辑区，则模板应用时层可以移动；把层里的内容设为可编辑区，则模板应用时层里的内容可被编辑，但是此时层不行以移动。客户端行为几个不同的单元格及内容不行以设置为同一个可编辑区。问题3：如何对模板中不行编辑区域进展编辑？板分别。将文档分别之后，整个文档都将变为可编辑的。4：假设将网页中的库文件和源文件分别？修改库文件之后，已脱离