网页制作：项目11-使用模板和库制作学校主页-

1、主讲：网页设计与制作Dreamweaver 8工程十一使用模板和库制作学校主页任务一 创立库制作页眉和页脚任务二 创立模板制作学校主页工程十一： 使用模板和库制作学校主页网页设计与制作Dreamweaver 8任务一小 结任务二实 训任务一 创立库制作页眉和页脚 在Dreamweaver中，库是一种特殊的Dreamweaver文件，用来存放诸如文本、图像等网页元素，这些元素通常被广泛用于整个站点，并且经常被重复使用或更新。将网页制作中经常使用到的广告条、页眉、页脚及菜单等制作成库是最适宜的。在网页中应用库，不仅可以提高效率，也会给网站的维护带来便利。 本任务将通过创立库来制作学校主页的页眉和页

2、脚，要求读者掌握在Dreamweaver中创立和编辑库的方法以及【资源】面板的使用方法。Dreamweaver 8网页设计与制作工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训操作一 创立库文件通过本操作的学习，应该掌握的内容有：1、【资源】面板的使用 【资源】面板将网页的元素分为9类，面板的左边垂直并排着【图像】、【颜色】、【 URLs 】、 【 Flash 】、【 Shockwave 】、 【影片】、【脚本】、【模板】和【库】9个按钮，每一个按钮代表一大类网页元素。 面板的右边是列表区，分为上栏和下栏，上栏是元素的预览图，下栏是明细列表。 Dreamweaver 8网页设计与制

3、作工程十一： 使用模板和库制作学校主页创立库文件操作动画任务一小 结任务二实 训 2、在【资源】面板中创立库文件的方法 在主菜单中选择【窗口】/【资源】命令翻开【资源】面板，单击 【库】按钮切换至【库】分类，并单击右下角的【新建库工程】按钮新建一个库文件，在列表框中输入库的名称并加以确认即可。Dreamweaver 8网页设计与制作操作一 创立库文件工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训 通过选择【文件】/【新建】命令翻开【新建文件】对话框，然后选择【常规】/【根本页】/【库工程】选项也可创立库文件。 从已有的网页中也可以创立库文件，方法是：首先翻开一个已有的文档，从中选

4、择要保存为库文件的对象，然后在主菜单中选择【修改】/【库】/【增加对象到库】命令，该对象即被添加到库文件列表中，库文件名为系统默认的名称，修改名称后按Enter键确认即可。Dreamweaver 8网页设计与制作操作一 创立库文件工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训操作一 创立库文件Dreamweaver 8网页设计与制作工程十一： 使用模板和库制作学校主页 3、应该注意的问题 创立的库文件保存在网站根据目录下的“Library文件夹内，“Library是自动产生的，不能对它随意修改，否那么库将不能正常使用。 任务一小 结任务二实 训 1、页眉的特点 学校主页的页眉通常

5、包括学校标志与名称、广告条以及导航栏等内容，其中导航栏的表现形式多种多样，如文本格式、图片格式、Flash格式等。 2、在【资源】面板中翻开库文件的方法 在【资源】面板中双击库文件或者先选中库文件再单击【资源】面板右下角的【编辑】按钮即可翻开库文件。 3、在【资源】面板中编辑库内容的方法 在库中编辑网页元素和平时制作网页没有本质区别。另外，在库中使用CSS样式时，注意不要创立“标签类型的CSS样式，以免破坏被插入文档的文档属性。操作二 制作页眉Dreamweaver 8网页设计与制作工程十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有：制作页眉操作动画任务一小 结任务二实 训

6、 1、页脚的特点 页脚通常包括版权信息及联系方式等内容。 2、应该注意的问题 库工程是可以在多个页面中重复使用的页面元素。在使用库工程时，Dreamweaver不是向网页中插入库工程，而是向库工程中插入一个链接。每当更改某个库工程的内容时，都可以更新所有使用该工程的页面。操作三 制作页脚Dreamweaver 8网页设计与制作工程十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有：制作页脚操作动画任务一小 结任务二实 训 模板是制作具有相同版式和风格的网页文档的根底文档。在进行大量的网页制作时，很多网页会用到同样的版式和风格，为了防止重复劳动，可以将具有相同版面结构的网页制作成

7、模板，然后通过模板制作其他网页。 本任务将介绍制作模板以及通过模板制作学校主页的方法，主要知识点包括在模板中引用库的方法以及在模板中插入可编辑区域、重复区域、重复表格的方法。Dreamweaver 8网页设计与制作任务二 创立模板制作学校主页工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训操作一 创立主页模板文件Dreamweaver 8网页设计与制作工程十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有： 1、创立模板文件的方法 在主菜单中选择【窗口】/【资源】命令，翻开【资源】面板并切换至【模板】分类,然后单击面板右下角的【新建模板】按钮新建一个默认名称为“Un

8、titled的模板,并输入模板的新名称替换原来的名称“Untitled。双击模板文件或者先选中模板文件再单击面板右下角的【编辑】按钮可翻开模板文件进行内容的编辑。 也可以通过主菜单中的【文件】/【新建】命令翻开【新建文件】对话框，然后选择【常规】/【根本页】/【HTML模板】选项来创立模板文件。 2、应该注意的问题 创立的模板文件保存在网站根据目录下的“Templates文件夹内，“Templates是自动产生的，不能对其进行随意修改，否那么模板将不能正常使用。创立主页模板文件操作动画任务一小 结任务二实 训操作二 插入库工程页眉和页脚Dreamweaver 8网页设计与制作 1、在【资源】面

9、板中把库工程插入到模板的方法 将光标置于模板文档中，然后在【资源】面板中切换至库分类，并在列表框中选中库文件，单击【资源】面板底部的【插入】按钮，将库工程插入到模板顶部。 在选中库文件后，也可以单击鼠标右键，在弹出的快捷菜单中选择【插入】命令把库工程插入到当前文档中。 2、应该注意的问题 插入到模板中的库工程不能直接修改，如果要修改,必须直接翻开库工程进行修改，此时插入到模板中的库工程将进行更新。通过本操作的学习，应该掌握的内容有：工程十一： 使用模板和库制作学校主页插入库工程页眉和页脚操作动画任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对象 1、重复区域及

10、其插入方法 重复区域是指可以在模板中复制任意次数的指定区域。重复区域不是可编辑区域，假设要使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格。 重复区域可以包含整个表格或单独的表格单元格。在一个重复区域内可以继续插入另一个重复区域。整个被定义为重复区域的局部都可以被重复使用。通过本操作的学习，应该掌握的内容有：工程十一： 使用模板和库制作学校主页插入模板对象操作动画任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对象 插入重复区域的方法： 在主菜单中选择【插入】【模板对象】【重复区域】命令，翻开【新建重复区域】对话框，在【名称】文本框中输入名称。

11、单击【确定】按钮，插入相应名称的重复区域。 也可以单击【插入】【常用】【模板】面板中的【重复区域】按钮翻开【新建重复区域】对话框，将当前选定的区域设置为重复区域。 工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对象工程十一： 使用模板和库制作学校主页 2、可编辑区域及其插入方法 可编辑区域是指以模板为基准创立文档的区域，在该区域中可以进行添加、修改和删除网页元素等操作。 可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。该区域左上角的选项卡显示该区域的名称。 另外需要注意的是，在一个可编辑区域

12、内不能再插入另一个可编辑区域。 任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对象工程十一： 使用模板和库制作学校主页 插入可编辑区域的方法： 在主菜单中选择【插入】【模板对象】【可编辑区域】命令，翻开【新建可编辑区域】对话框，在【名称】文本框中输入名称，然后单击【确定】按钮插入可编辑区域。 也可单击【插入】【常用】【模板】面板中的【可编辑区域】按钮，翻开【新建可编辑区域】对话框，插入或者将当前选定的区域设置为可编辑区域。 任务一小 结任务二实 训 3、重复表格及其插入方法 可以使用重复表格创立包含重复行的表格格式的可编辑区域，可以定义表格属性并设置哪些表格单

13、元格可编辑。 如果在对话框中不设置单元格边距、单元格间距和边框的值，那么大多数浏览器按单元格边距为“1、单元格间距为“2、边框为“1显示表格。对话框的上半局部与普通的表格参数没有什么不同，重要的是下半局部的参数。【重复表格行】指定表格中的哪些行包括在重复区域中，【起始行】将输入的行号设置为包括在重复区域中的第1行，【结束行】将输入的行号设置为包括在重复区域中的最后1行，【区域名称】为重复区域设置惟一的名称。 重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。另外，不能将选定的区域变成重复表格，只能插入重复表格。Dreamweaver 8网页设计与制作操作三 插入模板对象工程十一： 使

14、用模板和库制作学校主页任务一小 结任务二实 训 插入重复表格的方法： 在主菜单中选择【插入】【模板对象】【重复表格】命令，翻开【插入重复表格】对话框，进行设置后加以确认即可。 也可单击【插入】【常用】/【模板】面板中的 【重复表格】按钮，翻开【插入重复表格】对话框，在当前区域插入重复表格。Dreamweaver 8网页设计与制作操作三 插入模板对象工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训 4、选择模板对象的方法： 选择模板对象的方法，一种是单击要选择的模板对象的名称，另一种是把光标定位在模板对象处，然后在工作区下面选择相应的标签。 在选择模板对象时会显示其【属性】面板，在【

15、属性】面板中可修改模板对象的名称。Dreamweaver 8网页设计与制作操作三 插入模板对象工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训 通过模板创立网页文档：在主菜单中选择【文件】【新建】命令，翻开【新建文档】对话框，切换至【模板】选项卡，然后选择已经创立的主页模板“class_1.dwt，单击【创立】按钮，翻开基于模板的文档窗口。 如果在【从模板新建】对话框中没有对【当模板改变时更新页面】复选框打上“标志，那么模板改变了，由模板生成的网页就不会改变。在这种情况下如何才能让由模板生成的页面也发生变化呢？可以在主菜单中选择【修改】/【模板】/【更新页面】命令，翻开【更新页面】

16、对话框，在对话框中设置相应参数后，单击【开始】按钮，Dreamweaver将对选定范围中由模板生成的网页进行更新。Dreamweaver 8网页设计与制作操作四 通过模板制作学校主页工程十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有：任务一小 结任务二实 训 在文档中的可编辑区域内，可以插入文本、图像、音频、视频、表单、表格等网页元素，并可进行格式设置，这与直接创立的空白网页文档中的操作没有区别。另外，在模板中可以引用库，在网页文档中也可以引用库。 单击“+按钮，可以添加一个重复栏目。如果要删除已经添加的重复栏目，可以先选择该栏目，然后单击“-按钮。 应用了模板的网页文档除

17、了可编辑区域之外，其他局部无法进行编辑。但是如果把网页文档和模板别离，那么应用了模板的网页文档就会转化为一般网页文档，这时就可在所有区域内进行随意编辑。别离模板和网页文档的命令是【修改】/【模板】/【从模板中别离】。Dreamweaver 8网页设计与制作操作四 通过模板制作学校主页工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训 在主页模板中，由于页眉和页脚都是库，无法直接修改，如果要添加或修改相关内容，需要直接翻开库文件进行修改。在库文件被修改后，通常引用该库的网页文件会自动进行更新，如果没有进行更新，可以在主菜单中选择【修改】/【库】/【更新页面】命令进行更新。 还有两种通过

18、模板创立文档的方法：1在【资源】面板中从现有模板创立文档。首先在【资源】面板中切换到模板分类，查看当前站点中的模板列表，用鼠标右键单击要应用的模板，在弹出的快捷菜单中选择【从模板新建】命令，基于模板的新文档即会在文档窗口中翻开。2将当前文档应用模板。首先翻开要应用模板的文档，然后在【资源】面板的模板列表框中选中要应用的模板，再单击【应用】按钮，也可以直接从模板列表中把要应用的模板拖到文件窗口中。Dreamweaver 8网页设计与制作操作四 通过模板制作学校主页工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训实训 认识学校的主页 本工程着重介绍了利用模板和库来创立网页的根本方法。通过本实训，可以让读者从感性上认识学校主页的版块组成、层次结构，特别是模板和库的功能及应用等。【实训目的】了解学校网页的特点和版块组成。 掌握创立库文件的方法。 掌握创立模板文件的方法。掌握重复区域、可编辑区域和重复表格的使用方法。 Dreamweaver 8网页设计与制作工程十一： 使用模板和库制作学校主页任务一小 结任务二实 训小结 本工程以