《《网页设计与制作教程与实训》全套PPT电子课件教案第七章 模板和库》由会员分享，可在线阅读，更多相关《《网页设计与制作教程与实训》全套PPT电子课件教案第七章 模板和库（78页珍藏版）》请在金锄头文库上搜索。
1、第7章 模板和库第第7 7章章 模板和库模板和库n7. 1 创建模板创建模板 n7. 2 编辑模板编辑模板n7. 3 应用模板应用模板n7. 4 更新模板更新模板n7. 5 库库n7. 6 综合实训综合实训第7章 模板和库 l模板的创建，编辑和更新模板的创建，编辑和更新l库的创建，编辑和更新库的创建，编辑和更新本章要点本章要点第7章 模板和库7.1 创建模板 网页模板实际上是一种文档，是用来作为创建其它网页文档的基础文档。我们在创建一个模板时，可以指定页面的哪些内容可以长期保存，不可编辑，哪些内容可以进行编辑修改。假如我们要编一份在线的杂志，报头应该是不变的，而标题和内容要时时更新。我们就可以
2、把每日要更新的内容设为可编辑区，允许编辑，而把报头，栏目标题，版权信息等设为锁定区，不允许编辑。这样做可以大大提高效率，意味着我们可以摆脱不停地做一件事的痛苦了。而且可以使整个网页保持相对一致的风格，便于给浏览者留下好的映像。因此，我们在设计网页时，最好是使用模板来设计。应用模板创建和更新网页的基本流程是：创建模板，编辑模板，使用模板设计网页，最后通过修改模板来更新网页。第7章 模板和库在Dreamweaver MX2004里面创建模板十分容易，我们可以从空白的HTMLLL文档开始创建模板，也可以把现有的HTMLLL文档保存为模板，然后通过修改，使它符合要求.下面我们来看一看具体的方法。1)创
3、建一个新的空白模板： 我们选择主菜单中的【文件】|【新建】，在“新建文档”对话框中选择“模板页”选项，打开一个模板文件，如图1所示：第7章 模板和库第7章 模板和库2)把现有的网页文档保存为模板：我们可以将一个网页文档选择【文件】|【另存为模板】，然后在弹出的“另存模板”的对话框中选择站点，输入模板名称。如图2所示：第7章 模板和库最后单击“保存”，模板文件就被保存在指定的站点的Templates文件夹中。如图3所示：第7章 模板和库3)使用资源面板创建模板我们选择【窗口】|【模板】，打开“资源”面板，如图4所示：第7章 模板和库然后单击下方的按钮，进入模板中，再打开 按钮，新建一个模板页，在
4、面板中为模板命名，如图5：第7章 模板和库在我们把模板建立好以后，在“网站”的管理器中会出现一个保存模板文件的目录“Templates”，里面会出现建好的模板，如图6所示：第7章 模板和库我们在保存模板时，如果此模板中没有定义任何可编辑的区域，那么Dreamweaver会提醒我们模板不包含任何可编辑区域。此时，可以保存模板，它的后缀名为 .dwt。但是我们不能修改基于这个模板创建的网页。我们在模板建好后，在它里面创建的都是不可编辑区域，如图7所示：第7章 模板和库第7章 模板和库7.2 编辑模板刚才我们创建元素都是不可编辑的，下面我们对模板创建可编辑区域。1. 创建可编辑区域一个模板文档分为两
5、个部分：可编辑区域和锁定区域。锁定区是用模板创建的网页中相对保持不变的区域，而可编辑区是网页中变化的部分。因此，利用模板创建的网页上，我们只能修改网页文档中的可编辑区，锁定区域是不能被修改的，这就省去了许多重复的工作，同时也可以防止随意编辑导致网页风格的不一样。设定可编辑区域，需要我们在制作模板的时候完成第7章 模板和库当新创建一个模板或是把已有的文档保存为模板时，Dreamweaver把所有的区域标记为锁定，因此我们必须把一些部分设定为可编辑区。有两种方法可以设定可编辑区域。1）1）把模板中已有的内容定义为可编辑区域(1)打开模板文件，在文档中选择要设定为可编辑区域的内容。(2)选择【插入】
6、|【模板对象】|【可编辑区域】命令。(3)为新建的可编辑区域命名。2) 在模板中定义新的可编辑区域。(1（1)在模板中把光标置于想插入可编辑区的位置。( （2)选择【插入】|【模板对象】|【可编辑区域】命令，在【新建可编辑区域】对话框中输入名称。第7章 模板和库具体操作，打开刚才做好的“moban.dwt”文件。1)在模板中把光标移到“姓名”左面的单元格里，单击“工具栏”里的“模板面板里”的按钮，在“新建可编辑区域里”为它命名。如图8所示：第7章 模板和库将其它的单元格定义为可编辑区域并命名。如图9：第7章 模板和库这时候我们可以看到，在可编辑区域上有蓝色的标签，标签上是可编辑区域的名称，表示
7、当前区域为可编辑区域。当然，我们也可以删除可编辑区域，首先将光标置于要删除的区域里，然后选择【修改】|【模板】|【删除模板标记】，光标所在的可编辑区域即被删除。如图10所示：第7章 模板和库第7章 模板和库我们在创建了可编辑区域后，在可编辑区域里面可以插入文本，图片，表格等对象，对象的编辑和正常的网页没有任何区别。2.创建可选区域在Dreamweaver MX2004里我们可以利用定义模板可选区这一个功能来设置一个区域在利用模板生成的文档中是否被显示。我们可以根据它来设定是否将一个区域显示给浏览者观看。定义模板可选区域的具体操作如下：1)在模板文档中，将光标置于要设置为可选区的位置。2)执行
8、【插入】|【模板对象】|【可选区域】，将弹出一个新建可选区域的对话框，如图11,图12所示：第7章 模板和库第7章 模板和库第7章 模板和库我们在名称对话框中为它命名，若选中“默认显示”对话框，则可以在默认情况下显示此区。单击“高级”选项卡，弹出对话框如图13所示：第7章 模板和库单击“使用参数”，然后单击其右侧的下拉按钮，从弹出的下拉列表中选择参数的设置区域是否可见。(1)单击“输入表达式”单选框，然后在其下方的文本框中输入表达式来设置区域显示与否。(2)设置完以后，单击“确认”来完成设置。如图14所示：第7章 模板和库第7章 模板和库我们需要注意的是，可选区不是可编辑区，它仍然是锁定区，我
9、们可以将可选区域设置为不可编辑区。3.创建重复区域重复区域是指在文档中重复出现的区域，它主要应用于动态网页中。我们在制作网页时经常用到重复区域，例如将文章标题排列在网页上，它下面用到的表格我们可以用重复区域来做，它包含的内容的数量是经常变换的。这样可以节约时间，提高效率。我们需要注意的是，重复区域不是可编辑区域，因此我们在插入重复区域后，还要插入可编辑区域。第7章 模板和库1 1)插入重复区域(1)将插入点放入文档中想要插入重复区域的地方。 (2) 选择【插入】|【模板对象】|【重复区域】。(3) 在“名称”文本框中为模板区域输入唯一的名称。不能对一个模板中的多个重复区域使用相同的名称。 (4
10、) 单击“确定”。重复区域被插入到模板中如图15所示：第7章 模板和库第7章 模板和库我们在网页最下面插入一个表格，先将其定义为重复区域。然后单击重复区域上方的名称，将其选定后插入模板面板中的可编辑区域按钮，在出现的对话框中为其命名为“相关链接”， 这样，重复表格就做好了，我们可以在里面对其内容多次添加。 效果如图16所示：第7章 模板和库此外，对一个已经创建好的模板，我们可以在文档窗口的下拉菜单中选择【窗口】|【资源】命令，打开“资源”面板，从中选择创建好了的模板，单击底部的 按钮，即可打开 它对它进行编辑。 或者我们直接在“资源”面板里双击需要编辑的模板，也可对它进行修改。 第7章 模板和
11、库7.3 应用模板 有了模板，我们就可以高效，快速的设计出风格一致的网页。在需要的时候，也可以通过修改模板来自动更新使用模板创建的网页，使网页的维护变得非常轻松。下面我们再来学习一下如何用模板来创建新的网页和应用模板于已存在的网页里。应用模板创建新的网页有两种操作方法：1）1）直接从模板中创建网页选择【文件】|【从模板新建】，在弹出的对话框中选择一个模板就可以了。如图17所示： 第7章 模板和库第7章 模板和库新建好以后，我们就可以打开文档，对它的可编辑区进行编辑了。如图18所示：第7章 模板和库2）使用新网页后再应用模板选择“文件”新建一个网页文档，然后在“资源”面板的模板中选定将要使用的模
12、板，点击“应用”，就可以把此模板应用到新建的文档中去。当然，我们也可以对已经存在的网页使用模板，具体操作如下：（11）打开要应用模板的网页（22）选择【修改】|【模板】|【应用到模板】在弹出的模板中选择一个模板到网页里面。于是我们就可以在网页里对其进行编辑了。当然了，我们只能对其的可编辑区域进行操作。 我们在应用模板时，为了满足网页需要，可以对模板的页面属性作设定。但是不能对文档的页面属性作修改。操作如下：1)选择【修改】|【页面属性】，打开“页面属性”对话框以后，就可以对其作设定了。如图19所示第7章 模板和库第7章 模板和库3)设定好以后，按“确定”按钮就可以把其运用于模板里了。除此之外，
13、我们还可以定义模板的可编辑区和锁定区的高亮显示。操作如下：1)选择【编辑】|【首选参数】，然后在弹出的对话框中选择“标记色彩”如图20所示：第7章 模板和库第7章 模板和库在这里，我们可以对模板里的一些参数，比如“可编辑区域”，“锁定的区域”以及“嵌套可编辑”区域的显示色彩作设置。首先单击它，然后在弹出的拾色器中选择一种颜色作为高亮显示色，其它区域照此操作。1）2）选中“显示”，使其颜色能够在文档窗口中显示出来。2）3）单击“确定”按钮应用它。使用了这些高亮色以后，可以很轻松的让自己和使用其模板的人辨认出可编辑区域和锁定区域来。不过有时候我们需要对模板的不可编辑区域进行编辑，如添加网页的样式或
14、者改变网页的外观等。这时我们就必须将模板生成的网页脱离原来的模板，具体的方法如下：1)打开由模板生成的网页。2)选择【修改】|【模板】|【从模板中分离】，这时由模板生成的网页即脱离模板，成为普通意义上的网页。我们就可以按照一般网页的操作方法对其进行修改了。 第7章 模板和库7.4 更新模板我们在创建一个网站时，如果网站里面的所有网页都是基于一个或者是几个模板创建的，那么我们的维护工作就会变得很简单，高效，这也是为什么我们要使用模板来创建网站的一个重要原因。用模板来更新整个网站或是一个网站里面的几个页面，可以通过修改模板，然后对它更新来实现。修改模板及更新的具体操作如下：1)打开“资源”面板，在
15、“模板”菜单里选择要修改的模板，双击即可以对它进行操作了。2)在文档窗口编辑模板，如把“标题栏”里的“link”改为“新闻”，“体育”等链接。如图21所示：第7章 模板和库第7章 模板和库3)修改以后，选择【文件】|【保存】，对修改的模板文件进行保存，这时会弹一个对话框，询问是否更新当前编辑模板创建的网页文件。对话框中列出的是使用本模板创建的所有网页文件。如图22所示：第7章 模板和库4)单击“更新”按钮，对网页中使用本模板的页面内容进行更新，并给出更新报告，如图23所示：第7章 模板和库5)我们浏览相关的网页，会发现其已经被更新了。我们需要注意的是，这种方法只能更新当前站点中的网页，对于其它
16、站点里的网我们是无能为力的。如果要更新指定站点中应用的模板，可以采用下面的方法： 1)选择【修改】|【模板】|【更新页面】这时会出现一个对话框，如图24所示：第7章 模板和库第7章 模板和库2)在“查看”中选择“整个站点”，从相邻的下拉菜单中选择需要更新的站点名称。3)在选择好以后，单击“开始”这时 Dreamweaver 将会搜索指定的站点。并对点中用该模板创建的网页进行更新，并给出更新报告。 第7章 模板和库7.5 库库是一种特殊的Dreamweaver文件，其中包含已经创建好了以便放在网页上的单独的资源或资源拷贝的集合。库文件夹由Dreamweaver在站点的根目录中自动创建。库中可以存
17、放各种各样的页面元素，比如图像，文本，表格，层，声音或是Flash影片。我们一般把存入库中的元素叫做库项目或库元素。库项目是可以在多个页面里重复使用的存储页面元素。每当我们更改一个库项目的内容的时候，都可以更新所有使用该项目的页面，这一点上库和模板很相似。如果我们想让页面具有相同的标题和脚注，却有不同的页面布局，就应该使用库项目来保存标题和脚注。在使用库项目的时候，Dreamweaver不是向网页中插入库项目，而是向库里插入一个链接。以后我们如果需要更改库项目，则自动更新已经插入该项目的页面更新库的实例。这样可以使得我们的工作变得高效而且简单。第7章 模板和库1.创建库项目在网页中，凡是位于之
18、间的HTMLLL元素都可以作为库项目，包含文本，图像，表格等。创建库项目有两种方法：新建库项目和将网页内容转换为库项目1)1）在网页中新建库项目(1)选择【窗口】|【资源】，然后单击按钮，就可以进入库面板，如图25所示： 第7章 模板和库第7章 模板和库这时我们看到在库面板里还没有库项目存在，它是一个空白的面板。在面板下方有4个按钮，分别是刷新站点列表 ，新建库项目，编辑和删除。(2)单击新建库项目按钮，然后输入库名称即可，如图26所示：第7章 模板和库2)将现有的文档保存为库项目。(1)在网页文档中选中要保存为库项目的内容，比如图片，如图27所示：第7章 模板和库(2)单击库面板中的新建库项
19、目按钮。(3)输入库项目名称即可，如图28所示：第7章 模板和库此外，直接拖动选中的内容到库面板里也可以把它存贮为库项目。我们可以看到，库项目建好以后，它的后缀名为.lbi，同时保存在站点下一个单独的文件夹里，文件夹名称为Library.以后便可以随时使用了，非常方便。2.编辑库项目我们新建了一个库项目以后，就可以通过编辑它来实现多网页的更新。编辑库项目的具体操作如下：1)选择【窗口】|【资源】，打开“资源”面板。第7章 模板和库2) 1)在“资源”面板里选择库项目，然后再单击面板下方的“编辑”按钮，或者双击库项目。如图29所示：第7章 模板和库这时会出项一个新的窗口，在里面我们可以对库项目进
20、行编辑。3)编辑库项目，如图30所示： 第7章 模板和库4)在编辑完成以后，我们再选择【文件】|【保存】，保存修改后的库项目。5)编辑保存以后，我们选择【修改】|【库】|【更新页面】这时会弹出一个更新页面的对话框，如图31所示：第7章 模板和库我们选择更新“库”，然后从下拉菜单中选择一个站点，更新上面的文档。最后在“查看”中选择“文件使用”，在下拉菜单中选择一个库项目，更新指定的文档内容，如图32所示： 第7章 模板和库选好以后，单击“开始”，Dreamweaver会自动更新文档，并将编辑过的库项目保存在相关的文档里。 3.在文档中插入库项目在网页中添加库项目有如下几种方法：1)在库面板里，选
21、择要添加到网页文档中的库项目，然后单击“插入”即可。 2) 直接拖动库项目到网页中。第7章 模板和库需要我们注意的是，如果想在文档中插入库项目的内容而不包含对该项目的引用则在从“库”里向外拖动库项目时按住“Ctrl”键。用这种方法插入库项目，可以在文档中编辑该项目，但是当更新使用该库项目的时候，文档不会随之改变。 当然了，我们不但可以在网页中添加库项目，还可以删除库项目。操作如下：1)在库面板的列表中，选中要删除的库项目。 2) 按删除键或者按Delete键进行删除。3)确认删除操作。 第7章 模板和库如图33所示：我们在使用库的时候有几点需要注意：1)添加到网页中的库项目是不能被编辑的。如确
22、实对它编辑，必须先将文档中库项目与库中的库项目分离，分离以后我们就可以对它进行编辑了。但是被分离修改后的库项目将不能随着库项目的更新而更新了。 第7章 模板和库2)库项目里不能包含时间轴和样式表，因此如果我们使用这些元素的话会出现错误。3)不能随便移动库文件夹Library，否则会导致库项目的错误。下面我们再来看一看库的参数设置。首先选择【编辑】|【首选参数】，在对话框中选择“标记色彩”在里面我们可以对库项目选取高亮色，此外，还需要把“显示”勾上。最后点“确定”，对作设置作保存并退出。如图34所示：第7章 模板和库第7章 模板和库7.6 综合实训网页制作不仅是一种艺术上的创造，还是一种工业化的
23、生产。我们制作网页，不仅要页面精美，还要提高制作效率。因此利用Dreamweaver里的高效建网站工具模板，可以实现在网页里的对页面的风格保持一致。这样网页看起来很和谐并且统一。冬夏换壳冬夏换壳1.特色说明特色说明我们在制作网页的时候，利用DremweaverMX2004里模板的功能，可以制作同样格调的网页页面，并且能够迅速的改换网页的内容，对它进行更新。第7章 模板和库2. 2. 操作步骤操作步骤7.6.1制作空模板首先我们制作一个空模板，具体步骤如下：1)打 开 Dreamweaver MX2004， 新 建 一 个 文 档 ， 并 命 名 为“index.html”。2)选择 【修改】|
24、【页面属性】对页面外观作设置。设置标题为“冬夏换壳”，背景颜色为“#ffff99”.。点“确定”保存此设置。3)回到设计视图里，在第一行插入一个1*1的表格，居中，并在里面写入文字“四季如歌”，设置字体大小为“24”，字体颜色为“#ff0000”“居中”，如图35所示：第7章 模板和库第7章 模板和库4）1)在第二行再插入一个1*4表格, 居中。在其中输入文字“春节如花”，“夏季如画”，“秋季如诗”，“冬季如歌”，居中排列，如图36所示：第7章 模板和库5）在第三中插入1*1表格，居中排列，在里面输入文字如下：“有的人喜欢春天，因为它让人振奋；有的人喜欢夏天，因为它给人热情；有的人喜欢秋天，因
25、为它给人丰收；还有的人喜欢冬天，因为它给人以希望。那么，亲爱的朋友，你最喜爱哪一季呢？”如图37所示：第7章 模板和库第7章 模板和库7.6.2为模板制作冬夏网页1)创建模板。选择【插入】|【模板对象】|【创建模板】，将当前页创建为模板。如图38所示： 第7章 模板和库在弹出的“另存模板”对话框中，将模板命名为“template”.如图39所示： 第7章 模板和库我们可以在“资源”面板里看到新建的模板，如图40所示：第7章 模板和库2)插入可编辑区。上面做好的模板由于没有可编辑区，因此不能编辑。首先我们要创建可编辑区，才能对它内容作改变，将光标插入表格下方，选择【插入】|【模板对象】|【可编辑
26、区域】，在弹出的对话框里，输入“EditRegion1”为它命名,完后单击“确定”。如图41所示： 第7章 模板和库我们可以看到可编辑区域在模板中由高亮显示的矩形边框围绕。3)制作冬夏不同的网页效果。选择【文件】|【新建】|【HTML】 。新建一个HTML文档，取名为“xia”。同样的，再新建一个HTML文档，命名为“dong”。4)选中“xia”，在“资源”面板里选中刚才创建的模板“template”点击“应用”，把它应用到网页里面。这时我们可以看到，在不可编辑区域里，光标变成了一个带一横杠的圆圈。我们在可编辑区域里面输入文字如下：“只有当秋风渐起的时候，我们才能再次回味夏天的美丽。 在我的
27、记忆里，故乡拂晓的那层薄膜，是出土的蝉在脱壳时顶破的。当白杨树和老柳树在“知了”的奏鸣曲里摇曳时，我的摇篮也晃动了。 当然，还有满树满树的米色女贞花，那诱人的清香，使我突然变得贪婪起来。 当然，还有满湖满湖微笑的芙蓉花，那动人的姿色，使我一辈子也忘不了“映日荷花别样红”的诗句。 还有满坡满坡合唱的蝈蝈儿，那迷人的音乐，使我童年的脚印里贮满了留连。 带阳电的云朵与带阴电的云朵，常常会在午后热吻。闪电，是它们的倩影；雷声，是它们的笑语；雨滴，是它们的情泪；彩虹，是它们的后代。 雨后，被打湿的蛙鼓变得脆亮起来。田野的风，飘来阵阵瓜香，飘来三两声看瓜人的民歌小调。 有人说，姑娘和孩子，是夏天里的活的花
28、朵。我还要补充说，老人和小伙也是活的花朵。” 第7章 模板和库如图42所示：第7章 模板和库同样的做法，打开“dong”，把模板应用到里面，在可编辑区域里写上一下文字“冬天的自然景物是最美的阳光是一年之中最灿烂、辉煌的。广阔的麦田铺上了鲜艳的地毯，而天际低矮的太阳在上面投下了绿宝石的光辉。地面披上了美丽的苔藓。华丽的常春藤涂上了大理石般的鲜红和金色的斑纹。报春花、紫罗兰和孟加拉玫瑰躲在雪层下面微笑。还有几种花儿躲过严寒幸存下来，而随时使你感到意想不到的欢愉。虽然百灵鸟不见踪影，但有多少喧闹而美丽的鸟路过这儿，在河边栖息和休憩！当地面的白雪像璀璨的钻石在阳光下闪闪发光，或者当挂在树梢的冰凌组成神
29、奇的连拱和无法描绘的水晶的花彩时，有什么东西比白雪更加美丽呢？” 第7章 模板和库如图43所示： 第7章 模板和库7.6.3为冬夏网页快速换壳1）打开模板“template”,在可编辑区域里写上文字“不同的季节，不同的心情”，并为“夏季如画”建立超级链接“xia.html”，为“冬季如歌”建立超级链接“dong.html”，如图44所示：第7章 模板和库2）新建一个网页文档，作为首页面。命名为“index1.html”,选中我们做好的模板“template”应用到网页里面。 3）单击“保存全部”，弹出一个更新的对话框如图45所示： 第7章 模板和库我们单击“更新”，让网页里的内容自动更新保存。4)最后，让我们来看一看预览网页的效果。如图46，图47所示：第7章 模板和库
