网制作项目11-使用模板和库制作学校主-市公开课一等奖省赛课微课金奖课件

主讲：网页设计与制作——Dreamweaver81/24项目十一 使用模板和库制作学校主页任务一创建库──制作页眉和页脚任务二创建模板━━制作学校主页项目十一：

使用模板和库制作学校主页网页设计与制作Dreamweaver8任务一小结任务二实训2/24任务一创建库──制作页眉和页脚

在Dreamweaver中，库是一个特殊Dreamweaver文件，用来存放诸如文本、图像等网页元素，这些元素通常被广泛用于整个站点，而且经常被重复使用或更新。将网页制作中经常使用到广告条、页眉、页脚及菜单等制作成库是最适当。在网页中应用库，不但能够提升效率，也会给网站维护带来便利。本任务将经过创建库来制作学校主页页眉和页脚，要求读者掌握在Dreamweaver中创建和编辑库方法以及【资源】面板使用方法。Dreamweaver8网页设计与制作项目十一：

使用模板和库制作学校主页任务一小结任务二实训3/24操作一创建库文件经过本操作学习，应该掌握内容有：1、【资源】面板使用

【资源】面板将网页元素分为9类，面板左边垂直并排着【图像】、【颜色】、【URLs】、【Flash】、【Shockwave】、【影片】、【脚本】、【模板】和【库】9个按钮，每一个按钮代表一大类网页元素。面板右边是列表区，分为上栏和下栏，上栏是元素预览图，下栏是明细列表。

Dreamweaver8网页设计与制作项目十一：

使用模板和库制作学校主页创建库文件操作动画任务一小结任务二实训4/24

2、在【资源】面板中创建库文件方法在主菜单中选择【窗口】/【资源】命令打开【资源】面板，单击【库】按钮切换至【库】分类，并单击右下角【新建库项目】按钮新建一个库文件，在列表框中输入库名称并加以确认即可。Dreamweaver8网页设计与制作操作一创建库文件项目十一：

使用模板和库制作学校主页任务一小结任务二实训5/24

经过选择【文件】/【新建】命令打开【新建文件】对话框，然后选择【常规】/【基本页】/【库项目】选项也可创建库文件。从已经有网页中也能够创建库文件，方法是：首先打开一个已经有文档，从中选择要保留为库文件对象，然后在主菜单中选择【修改】/【库】/【增加对象到库】命令，该对象即被添加到库文件列表中，库文件名为系统默认名称，修更名称后按Enter键确认即可。Dreamweaver8网页设计与制作操作一创建库文件项目十一：

使用模板和库制作学校主页任务一小结任务二实训6/24操作一创建库文件Dreamweaver8网页设计与制作项目十一：

使用模板和库制作学校主页

3、应该注意问题创建库文件保留在网站依据目录下“Library”文件夹内，“Library”是自动产生，不能对它随意修改，不然库将不能正常使用。任务一小结任务二实训7/24

1、页眉特点学校主页页眉通常包含学校标志与名称、广告条以及导航栏等内容，其中导航栏表现形式各种多样，如文本格式、图片格式、Flash格式等。

2、在【资源】面板中打开库文件方法在【资源】面板中双击库文件或者先选中库文件再单击【资源】面板右下角【编辑】按钮即可打开库文件。

3、在【资源】面板中编辑库内容方法在库中编辑网页元素和平时制作网页没有本质区分。另外，在库中使用CSS样式时，注意不要创建“标签”类型CSS样式，以免破坏被插入文档文档属性。操作二制作页眉Dreamweaver8网页设计与制作项目十一：

使用模板和库制作学校主页经过本操作学习，应该掌握内容有：制作页眉操作动画任务一小结任务二实训8/241、页脚特点页脚通常包含版权信息及联络方式等内容。

2、应该注意问题库项目是能够在多个页面中重复使用页面元素。在使用库项目时，Dreamweaver不是向网页中插入库项目，而是向库项目中插入一个链接。每当更改某个库项目标内容时，都能够更新全部使用该项目标页面。操作三制作页脚Dreamweaver8网页设计与制作项目十一：

使用模板和库制作学校主页经过本操作学习，应该掌握内容有：制作页脚操作动画任务一小结任务二实训9/24

模板是制作含有相同版式和格调网页文档基础文档。在进行大量网页制作时，很多网页会用到一样版式和格调，为了防止重复劳动，能够将含有相同版面结构网页制作成模板，然后经过模板制作其它网页。本任务将介绍制作模板以及经过模板制作学校主页方法，主要知识点包含在模板中引用库方法以及在模板中插入可编辑区域、重复区域、重复表格方法。Dreamweaver8网页设计与制作任务二创建模板━━制作学校主页项目十一：

使用模板和库制作学校主页任务一小结任务二实训10/24操作一创建主页模板文件Dreamweaver8网页设计与制作项目十一：

使用模板和库制作学校主页经过本操作学习，应该掌握内容有：1、创建模板文件方法在主菜单中选择【窗口】/【资源】命令，打开【资源】面板并切换至【模板】分类,然后单击面板右下角【新建模板】按钮新建一个默认名称为“Untitled”模板,并输入模板新名称替换原来名称“Untitled”。双击模板文件或者先选中模板文件再单击面板右下角【编辑】按钮可打开模板文件进行内容编辑。也能够经过主菜单中【文件】/【新建】命令打开【新建文件】对话框，然后选择【常规】/【基本页】/【HTML模板】选项来创建模板文件。

2、应该注意问题创建模板文件保留在网站依据目录下“Templates”文件夹内，“Templates”是自动产生，不能对其进行随意修改，不然模板将不能正常使用。创建主页模板文件操作动画任务一小结任务二实训11/24操作二插入库项目页眉和页脚Dreamweaver8网页设计与制作1、在【资源】面板中把库项目插入到模板方法将光标置于模板文档中，然后在【资源】面板中切换至库分类，并在列表框中选中库文件，单击【资源】面板底部【插入】按钮，将库项目插入到模板顶部。在选中库文件后，也能够单击鼠标右键，在弹出快捷菜单中选择【插入】命令把库项目插入到当前文档中。

2、应该注意问题插入到模板中库项目不能直接修改，假如要修改,必须直接打开库项目进行修改，此时插入到模板中库项目将进行更新。经过本操作学习，应该掌握内容有：项目十一：

使用模板和库制作学校主页插入库项目页眉和页脚操作动画任务一小结任务二实训12/24Dreamweaver8网页设计与制作操作三插入模板对象1、重复区域及其插入方法

重复区域是指能够在模板中复制任意次数指定区域。重复区域不是可编辑区域，若要使重复区域中内容可编辑，必须在重复区域内插入可编辑区域或重复表格。重复区域能够包含整个表格或单独表格单元格。在一个重复区域内能够继续插入另一个重复区域。整个被定义为重复区域部分都能够被重复使用。经过本操作学习，应该掌握内容有：项目十一：

使用模板和库制作学校主页插入模板对象操作动画任务一小结任务二实训13/24Dreamweaver8网页设计与制作操作三插入模板对象

插入重复区域方法：在主菜单中选择【插入】／【模板对象】／【重复区域】命令，打开【新建重复区域】对话框，在【名称】文本框中输入名称。单击【确定】按钮，插入对应名称重复区域。也能够单击【插入】／【惯用】／【模板】面板中【重复区域】按钮打开【新建重复区域】对话框，将当前选定区域设置为重复区域。

项目十一：

使用模板和库制作学校主页任务一小结任务二实训14/24Dreamweaver8网页设计与制作操作三插入模板对象项目十一：

使用模板和库制作学校主页

2、可编辑区域及其插入方法可编辑区域是指以模板为基准创建文档区域，在该区域中能够进行添加、修改和删除网页元素等操作。可编辑区域在模板中由高亮显示矩形边框围绕，该边框使用在首选参数中设置高亮颜色。该区域左上角选项卡显示该区域名称。另外需要注意是，在一个可编辑区域内不能再插入另一个可编辑区域。

任务一小结任务二实训15/24Dreamweaver8网页设计与制作操作三插入模板对象项目十一：

使用模板和库制作学校主页

插入可编辑区域方法：在主菜单中选择【插入】／【模板对象】／【可编辑区域】命令，打开【新建可编辑区域】对话框，在【名称】文本框中输入名称，然后单击【确定】按钮插入可编辑区域。也可单击【插入】／【惯用】／【模板】面板中【可编辑区域】按钮，打开【新建可编辑区域】对话框，插入或者将当前选定区域设置为可编辑区域。任务一小结任务二实训16/243、重复表格及其插入方法能够使用重复表格创建包含重复行表格格式可编辑区域，能够定义表格属性并设置哪些表格单元格可编辑。假如在对话框中不设置单元格边距、单元格间距和边框值，则大多数浏览器按单元格边距为“1”、单元格间距为“2”、边框为“1”显示表格。对话框上半部分与普通表格参数没有什么不一样，主要是下半部分参数。【重复表格行】指定表格中哪些行包含在重复区域中，【起始行】将输入行号设置为包含在重复区域中第1行，【结束行】将输入行号设置为包含在重复区域中最终1行，【区域名称】为重复区域设置惟一名称。重复表格能够被包含在重复区域内，但不能被包含在可编辑区域内。另外，不能将选定区域变成重复表格，只能插入重复表格。Dreamweaver8网页设计与制作操作三插入模板对象项目十一：

使用模板和库制作学校主页任务一小结任务二实训17/24

插入重复表格方法：在主菜单中选择【插入】／【模板对象】／【重复表格】命令，打开【插入重复表格】对话框，进行设置后加以确认即可。也可单击【插入】／【惯用】/【模板】面板中【重复表格】按钮，打开【插入重复表格】对话框，在当前区域插入重复表格。Dreamweaver8网页设计与制作操作三插入模板对象项目十一：

使用模板和库制作学校主页任务一小结任务二实训18/244、选择模板对象方法：选择模板对象方法，一个是单击要选择模板对象名称，另一个是把光标定位在模板对象处，然后在工作区下面选择对应标签。在选择模板对象时会显示其【属性】面板，在【属性】面板中可修改模板对象名称。Dreamweaver8网页设计与制作操作三插入模板对象项目十一：

使用模板和库制作学校主页任务一小结任务二实训19/24

经过模板创建网页文档：在主菜单中选择【文件】／【新建】命令，打开【新建文档】对话框，切换至【模板】选项卡，然后选择已经创建主页模板“class_1.dwt”，单击【创建】按钮，打开基于模板文档窗口。假如在【从模板新建】对话框中没有对【当模板改变时更新页面】复选框打上“√”标志，那么模板改变了，由模板生成网页就不会改变。在这种情况下怎样才能让由模板生成页面也发生改变呢？能够在主菜单中选择【修改】/【模板】/【更新页面】命令，打开【更新页面】对话框，在对话框中设置对应参数后，单击【开始】按钮，Dreamweaver将对选定范围中由模板生成网页进行更新。Dreamweaver8网页设计与制作操作四经过模板制作学校主页项目十一：

使用模板和库制作学校主页经过本操作学习，应该掌握内容有：任务一小结任务二实训20/24

在文档中可编辑区域内，能够插入文本、图像、音频、视频、表单、表格等网页元素，并可进行格式设置，这与直接创建空白网页文档中操作没有区分。另外，在模板中能够引用库，在网页文档中也能够引用库。单击“+”按钮，能够添加一个重复栏目。假如要删除已经添加重复栏目，能够先选择该栏目，然后单击“-”按钮。应用了模板网页文档除了可编辑区域之外，其它部分无法进行编辑。不过假如把网页文档和模板分离，那么应用了模板网页文档就会转化为普通网页文档，这时就可在全部区域内进行随意编辑。分离模板和网页文档命令是【修改】/【模板】/【从模板中分离】。Dreamweaver8网页设计与制作操作四经过模板制作学校主页项目十一：

使用模板和库制作学校主页任务一小结任务二实训21/24

在主页模板中，因为页眉和页脚都是库，无法直接修改，假如要添加或修改相关内容，需要直接打开库文件进行修改。在库文件被修改后，通常引用该库网页文件会自动进行更新，假如没有进行更新，能够在主菜单中选择【修改】/【库】/【更新页面】命令进行更新。还有两种经过模板创建文档方法：（1）在【资源】面板中从现有模板创建文档。首先在【资源】面板中切换到模板分类，查看当前站点中模板列表，用鼠标右键单击要应用模板，在弹出快捷菜单中选择【从模板新建】命令，基于模板新文档即会在文档窗口中打开。（2）将当前文档应用模板。首先打开要应用模板文档，然后在【资源】面板模板列表框中选中要应用