《网页设计与制作》教案-第15讲 布局技术-模板、库二
- 格式：doc
- 大小：125.50 KB
- 文档页数：5
1 第15讲 布局技术-模板、库二
1.1教学目标：
知识目标
1. 掌握模板的基本操作
2. 掌握基于模板更新页面的方法
3. 掌握库的创建和应用
技能目标
1. 能合理运用模板
2. 使用模板更新页面
3. 能使用资源面板管理模板和库
品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1. 使用模板更新页面
2. 能使用资源面板管理模板和库
1.3 教学难点
理解可编辑区域的作用，使用模板更新页面。
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：
一、激趣导入，揭示课题
对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。
二、使用模板更新页面
在通过模板创建了若干个页面之后，如果需要更改页面或者增加栏目，我们可以通过Dreamweaver MX 2004的模板修改功能来解决这个问题。当你对模板不满意，只需修改模板。Dreamweaver MX 2004能自动更新所有用模板制作的页面，而不需要一个一个地进行修改。
比如我们在模板面板选择Template1，对模板进行了修改之后，运行“文件/保存”命令来保存模板，这时候会弹出“更新模板文件”提示框询问是否更新所有使用了该模板的页面如图3-14所示。
2
图3-14 使用模板更新页面
确认之后就会弹出“更新页面”对话框，显示出更新的页面总数以及更新的时间等信息。如图3-15所示。
图3-15 更新完成后显示更新信息
提示：Dreamweaver MX 2004提供的为页面更换模板的功能，有点像给人换衣服，只要把各种模板制作好，然后想穿哪件就穿哪件。具体的更换模板方法也很简单，只要在模板面板的列表区域挑选合适的模板，然后点击“应用”按钮，这样就可以很快完成模板更换操作了。
三、管理模板
使用“资源”面板的“模板”类别除了可以将模板应用于文档或编辑模板，还可以管理现有模板，包括重命名模板文件和删除模板文件。
四、使用库项目
很多页面设计师都厌烦频繁地改动网站，使用Dreamweaver的库，可以很好的解决这个问题。库和模板有异曲同工之妙，模板可以用来制作整体页面的重复部分，而库是用来制作页面局部重复部分的。如果使用了库，就可以通过改动库更新所有采用库的页面，不用一个一个的修改页面元素或者重新制作页面。使用库比使用模板，有更大的灵活性。
例如，在某些页面上要写上 XXXX版权所有，欢迎mail我之类的话。我们可以把这些文字或图像做成库项目，以后就可以从库中取出库项目重复使用了。
1 库的概念
利用模板我们可以控制网站的风格，这是所有的页面存在的共性，而对于个性化的内容，使用库项目可以为我们的工作提供便利。Dreamweaver提供了重复部件的功能，这些重复部件可以反复使用，从而使我们能够轻松完成某些需要重复制作或者需要经常变动的内容，帮助页面设计师用最短的时间来完成繁重的网站维护工作。这些重复部件我们通常称之为“库项
3 目”。
模板与库项目存在的最本质的区别就是：模板本质是一个页面，也就是一个独立的文件，而库项目则只是页面中的某一段HTML代码。
执行“窗口/资源”命令，就会打开“资源”面板，在面板左则的一排按钮中选择“库”按钮，就会显示库面板。如图3-68所示。
图3-68 库面板
2 创建库项目
创建库的方法十分简单，我们只要把页面中要生成库的元素，如表格、图像，直接拖到库面板中，输入库项目的名称即可。另外我们也可在库面板中建立，步骤如下：
1．打开一个页面文档，选择文档的一部分，例如一个图片。
2．在库面板中单击“新建库项目”按钮，或单击库面板右上角的菜单按钮，在弹出的菜单中选择“新建库项目”命令，在库面板中就添加了一个名为Untitiled的库项目。给库项目命名为Library1，一个新的库项目就建好了，如图3-69。
图3-69 创建库项目
库中的元素决不仅仅是图像或文字本身，而且还包含了页面中排列这些图像的代码。
3 应用库
1．插入库项目
我们可以像使用模板一样，在页面上添加相同的库元素，从而批量生产风格类似的页面。最简单的方法是在库面板中将元素拖回到新页面上，而相关的代码会自动复制到新页面上。同样，我们也可在库面板中建立，步骤如下：
打开要应用库项目的文档，将插入点放在要插入库项目的位置。
4 选择一个库项目，在库面板中单击“插入”按钮，或单击库面板右上角的菜单按钮，在弹出的菜单中选择“插入”命令，则在文档的插入点位置加入了库项目。
2．脱离库
文档中由库项目创建的元素，会随着库项目的变化而变化。如果我们修改了某个库项目，那么由这个库项目创建的页面元素也会自动更新。我们也可以让文档不受库项目的控制，以便可以自由地编辑。
打开要操作的文档，选择文档中由库项目创建的页面元素，则其属性面板显示如图3-70所示。
图3-70 库元素的属性面板
单击属性面板的“从源文件中分离”按钮，文档中的元素就和库脱离了。脱离了库的元素，库的修改就不会再反映到该元素了。
4
修改库和更新页面
库元素也可以实现网站的批量更新，当改变了库元素并进行保存时，凡是使用了库元素的页面，会自动进行同步更新。
1．在库面板的列表窗口中选择要修改的库项目，如Library1，单击“编辑”按钮，则打开该库文件。
2．对库文件稍作修改后保存该库文件，就弹出“更新库项目”对话框。如图3-71所示。
图3-71 更新库项目对话框
3．单击“更新”按钮，则弹出“更新页面”对话框，显示更新信息，单击“关闭”按钮关闭对话框就完成了页面的更新。如图3-72所示。
5
图3-72 更新页面对话框
若只想更新当前文档，可执行“修改/库/更新当前页”命令；若要更新多个使用了该库的文档，或者整个网站上的所有使用了该库的文档，可执行“修改/库/更新页面”命令。
6 管理模板
使用“资源”面板的“模板”类别除了可以将模板应用于文档或编辑模板，还可以管理现有模板，包括重命名模板文件和删除模板文件。
1.8归纳总结：
本讲让学生全面了解模板和库的用途与制作方法，有助于提高页面的开发效率，避免大量重复劳动。
① 模板和库的创建及属性设置；
② 定义模板的可编辑区域、可选区域、重复区域；
③ 模板和库的应用。
1.9课后作业题：
1. 库的作用？
2. 如何资源面板管理模板和库？
3. 如何用模板更新其他页面？
