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

1、主讲：网页设计与制作Dreamweaver 8主讲：网页设计与制作Dreamweaver 8项目十一使用模板和库制作学校主页任务一 创建库制作页眉和页脚任务二 创建模板制作学校主页项目十一： 使用模板和库制作学校主页网页设计与制作Dreamweaver 8任务一小 结任务二实 训项目十一使用模板和库制作学校主页任务一 创建库制作页任务一 创建库制作页眉和页脚 在Dreamweaver中，库是一种特殊的Dreamweaver文件，用来存放诸如文本、图像等网页元素，这些元素通常被广泛用于整个站点，并且经常被重复使用或更新。将网页制作中经常使用到的广告条、页眉、页脚及菜单等制作成库是最合适的。在网页

2、中应用库，不仅可以提高效率，也会给网站的维护带来便利。 本任务将通过创建库来制作学校主页的页眉和页脚，要求读者掌握在Dreamweaver中创建和编辑库的方法以及【资源】面板的使用方法。Dreamweaver 8网页设计与制作项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训任务一 创建库制作页眉和页脚 在Dreamwea操作一 创建库文件通过本操作的学习，应该掌握的内容有：1、【资源】面板的使用 【资源】面板将网页的元素分为9类，面板的左边垂直并排着【图像】、【颜色】、【 URLs 】、 【 Flash 】、【 Shockwave 】、 【影片】、【脚本】、【模板】和【库】9个按钮

3、，每一个按钮代表一大类网页元素。 面板的右边是列表区，分为上栏和下栏，上栏是元素的预览图，下栏是明细列表。 Dreamweaver 8网页设计与制作项目十一： 使用模板和库制作学校主页创建库文件操作动画任务一小 结任务二实 训操作一 创建库文件通过本操作的学习，应该掌握的内容有：1、 2、在【资源】面板中创建库文件的方法 在主菜单中选择【窗口】/【资源】命令打开【资源】面板，单击 【库】按钮切换至【库】分类，并单击右下角的【新建库项目】按钮新建一个库文件，在列表框中输入库的名称并加以确认即可。Dreamweaver 8网页设计与制作操作一 创建库文件项目十一： 使用模板和库制作学校主页任务一小

4、 结任务二实 训 2、在【资源】面板中创建库文件的方法Dreamweav 通过选择【文件】/【新建】命令打开【新建文件】对话框，然后选择【常规】/【基本页】/【库项目】选项也可创建库文件。 从已有的网页中也可以创建库文件，方法是：首先打开一个已有的文档，从中选择要保存为库文件的对象，然后在主菜单中选择【修改】/【库】/【增加对象到库】命令，该对象即被添加到库文件列表中，库文件名为系统默认的名称，修改名称后按Enter键确认即可。Dreamweaver 8网页设计与制作操作一 创建库文件项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训 通过选择【文件】/【新建】命令打开【新建文件】对

5、话框操作一 创建库文件Dreamweaver 8网页设计与制作项目十一： 使用模板和库制作学校主页 3、应该注意的问题 创建的库文件保存在网站根据目录下的“Library”文件夹内，“Library”是自动产生的，不能对它随意修改，否则库将不能正常使用。 任务一小 结任务二实 训操作一 创建库文件Dreamweaver 8网页设计与制作 1、页眉的特点 学校主页的页眉通常包括学校标志与名称、广告条以及导航栏等内容，其中导航栏的表现形式多种多样，如文本格式、图片格式、Flash格式等。 2、在【资源】面板中打开库文件的方法 在【资源】面板中双击库文件或者先选中库文件再单击【资源】面板右下角的【编

6、辑】按钮即可打开库文件。 3、在【资源】面板中编辑库内容的方法 在库中编辑网页元素和平时制作网页没有本质区别。另外，在库中使用CSS样式时，注意不要创建“标签”类型的CSS样式，以免破坏被插入文档的文档属性。操作二 制作页眉Dreamweaver 8网页设计与制作项目十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有：制作页眉操作动画任务一小 结任务二实 训 1、页眉的特点操作二 制作页眉Dreamwe 1、页脚的特点 页脚通常包括版权信息及联系方式等内容。 2、应该注意的问题 库项目是可以在多个页面中重复使用的页面元素。在使用库项目时，Dreamweaver不是向网页中插入库

7、项目，而是向库项目中插入一个链接。每当更改某个库项目的内容时，都可以更新所有使用该项目的页面。操作三 制作页脚Dreamweaver 8网页设计与制作项目十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有：制作页脚操作动画任务一小 结任务二实 训 1、页脚的特点操作三 制作页脚Dreamweave 模板是制作具有相同版式和风格的网页文档的基础文档。在进行大量的网页制作时，很多网页会用到同样的版式和风格，为了避免重复劳动，可以将具有相同版面结构的网页制作成模板，然后通过模板制作其他网页。 本任务将介绍制作模板以及通过模板制作学校主页的方法，主要知识点包括在模板中引用库的方法以及在

8、模板中插入可编辑区域、重复区域、重复表格的方法。Dreamweaver 8网页设计与制作任务二 创建模板制作学校主页项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训 模板是制作具有相同版式和风格的网页文档的基础文档操作一 创建主页模板文件Dreamweaver 8网页设计与制作项目十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有： 1、创建模板文件的方法 在主菜单中选择【窗口】/【资源】命令，打开【资源】面板并切换至【模板】分类,然后单击面板右下角的【新建模板】按钮新建一个默认名称为“Untitled”的模板,并输入模板的新名称替换原来的名称“Untitled”。

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

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

11、设计与制作操作三 插入模板对象 1、重复区域及其插入方法 重复区域是指可以在模板中复制任意次数的指定区域。重复区域不是可编辑区域，若要使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格。 重复区域可以包含整个表格或单独的表格单元格。在一个重复区域内可以继续插入另一个重复区域。整个被定义为重复区域的部分都可以被重复使用。通过本操作的学习，应该掌握的内容有：项目十一： 使用模板和库制作学校主页插入模板对象操作动画任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对Dreamweaver 8网页设计与制作操作三 插入模板对象 插入重复区域的方法： 在主菜

12、单中选择【插入】【模板对象】【重复区域】命令，打开【新建重复区域】对话框，在【名称】文本框中输入名称。单击【确定】按钮，插入相应名称的重复区域。 也可以单击【插入】【常用】【模板】面板中的【重复区域】按钮打开【新建重复区域】对话框，将当前选定的区域设置为重复区域。 项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对Dreamweaver 8网页设计与制作操作三 插入模板对象项目十一： 使用模板和库制作学校主页 2、可编辑区域及其插入方法 可编辑区域是指以模板为基准创建文档的区域，在该区域中可以进行添加、修改和删除网页元素等操作

13、。 可编辑区域在模板中由高亮显示的矩形边框围绕，该边框使用在首选参数中设置的高亮颜色。该区域左上角的选项卡显示该区域的名称。 另外需要注意的是，在一个可编辑区域内不能再插入另一个可编辑区域。 任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对Dreamweaver 8网页设计与制作操作三 插入模板对象项目十一： 使用模板和库制作学校主页 插入可编辑区域的方法： 在主菜单中选择【插入】【模板对象】【可编辑区域】命令，打开【新建可编辑区域】对话框，在【名称】文本框中输入名称，然后单击【确定】按钮插入可编辑区域。 也可单击【插入】【常用】【模板】面板中的【可编辑区域】

14、按钮，打开【新建可编辑区域】对话框，插入或者将当前选定的区域设置为可编辑区域。 任务一小 结任务二实 训Dreamweaver 8网页设计与制作操作三 插入模板对 3、重复表格及其插入方法 可以使用重复表格创建包含重复行的表格格式的可编辑区域，可以定义表格属性并设置哪些表格单元格可编辑。 如果在对话框中不设置单元格边距、单元格间距和边框的值，则大多数浏览器按单元格边距为“1”、单元格间距为“2”、边框为“1”显示表格。对话框的上半部分与普通的表格参数没有什么不同，重要的是下半部分的参数。【重复表格行】指定表格中的哪些行包括在重复区域中，【起始行】将输入的行号设置为包括在重复区域中的第1行，【结

15、束行】将输入的行号设置为包括在重复区域中的最后1行，【区域名称】为重复区域设置惟一的名称。 重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。另外，不能将选定的区域变成重复表格，只能插入重复表格。Dreamweaver 8网页设计与制作操作三 插入模板对象项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训 3、重复表格及其插入方法 Dreamweav 插入重复表格的方法： 在主菜单中选择【插入】【模板对象】【重复表格】命令，打开【插入重复表格】对话框，进行设置后加以确认即可。 也可单击【插入】【常用】/【模板】面板中的 【重复表格】按钮，打开【插入重复表格】对话框，在当前区

16、域插入重复表格。Dreamweaver 8网页设计与制作操作三 插入模板对象项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训 插入重复表格的方法：Dreamweaver 8网页 4、选择模板对象的方法： 选择模板对象的方法，一种是单击要选择的模板对象的名称，另一种是把光标定位在模板对象处，然后在工作区下面选择相应的标签。 在选择模板对象时会显示其【属性】面板，在【属性】面板中可修改模板对象的名称。Dreamweaver 8网页设计与制作操作三 插入模板对象项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训 4、选择模板对象的方法：Dreamweaver 8 通过模板创建网

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

18、模板制作学校主页项目十一： 使用模板和库制作学校主页通过本操作的学习，应该掌握的内容有：任务一小 结任务二实 训 通过模板创建网页文档：在主菜单中选择【文件】【新建 在文档中的可编辑区域内，可以插入文本、图像、音频、视频、表单、表格等网页元素，并可进行格式设置，这与直接创建的空白网页文档中的操作没有区别。另外，在模板中可以引用库，在网页文档中也可以引用库。 单击“+”按钮，可以添加一个重复栏目。如果要删除已经添加的重复栏目，可以先选择该栏目，然后单击“-”按钮。 应用了模板的网页文档除了可编辑区域之外，其他部分无法进行编辑。但是如果把网页文档和模板分离，那么应用了模板的网页文档就会转化为一般网

19、页文档，这时就可在所有区域内进行随意编辑。分离模板和网页文档的命令是【修改】/【模板】/【从模板中分离】。Dreamweaver 8网页设计与制作操作四 通过模板制作学校主页项目十一： 使用模板和库制作学校主页任务一小 结任务二实 训 在文档中的可编辑区域内，可以插入文本、图像、音频、 在主页模板中，由于页眉和页脚都是库，无法直接修改，如果要添加或修改相关内容，需要直接打开库文件进行修改。在库文件被修改后，通常引用该库的网页文件会自动进行更新，如果没有进行更新，可以在主菜单中选择【修改】/【库】/【更新页面】命令进行更新。 还有两种通过模板创建文档的方法：（1）在【资源】面板中从现有模板创建文档。首先在【资源】面板中切换到模板分类，查看当前站点中的模板列表，用鼠标右键单击要应用的模板，在弹出的快捷菜单中选择【从模板新建】命令，基于模板的新文档即会在文档窗口中打开。（2）将当前文档应用模板。首先打开要应用模板的文档，然后在【资源】面板的模板列表框中选中要应用的模板，再单击【应用】按钮，也可以直接从模板列表中把要应