DreamweaverCS3，FlashCS3，FireworksCS3网页制作培训教程第5课 模板与库.pptVIP

2. 创建库项目 将现有对象创建为库项目的具体操作如下： （1）选择对象，在【库】面板中单击 按钮，打开提示对话框。 （2）单击【确定】按钮，在项目区中就会显示创建的库项目。 （3）修改新建库项目的名称。此时，窗口中的对象就会变为库项目。 空库项目的创建方法比较简单，在【库】面板中直接单击 按钮，即会创建一个空库项目，再单击 按钮，可以打开空库项目，在文档窗口中添加内容。 3. 在网页中添加库项目 当向页面添加库项目时，将把实际内容以及对该库项目的引用一起插入到文档中。 添加库项目到网页的具体操作如下： （1）将鼠标光标定位在文档窗口中要添加库项目的位置。 （2）在【库】面板中选择要插入的库项目，单击【插入】按钮即可插入，或选中库项目，直接拖放到文档中需要插入的位置。 5.2.2 典型案例——使用库制作运输网络网页 案例目标 本案例将制作运输网络网页，主要介绍库项目的创建和添加等操作，完成后的效果如右图所示。 5.2.2 典型案例——使用库制作运输网络网页 操作思路： （1）管理ys站点。 （2）将网页中的图像元素创建为库项目。 （3）新建“yswl.html”文档，并以不同的方式添加库项目。 （4）将【资源】面板中的“dt.gif”图像插入文档。 操作步骤请老师参照软件讲解 5.2.2 典型案例——使用库制作运输网络网页 案例小结 本例制作了“yswl.html”文档，主要介绍了库项目的创建、库项目插入的不同方式和通过【资源】面板插入图像对象的方法。 在设计网站时，如果需要重复调用元素，可以将该元素创建为库项目。修改库项目后，应用到网页中的项目也会随之更新。 5.3 上机练习 5.3.1 制作模板 5.3.2 创建库项目 5.3.1 制作模板 下面练习制作模板，如下图所示，主要练习模板的创建和可编辑区域的定义。 5.3.1 制作模板 操作思路： 打开“第5课\源文件\bas\index.html”文档。 创建模板并保存。 将“简介内容”所在的表格创建为可编辑区域，并保存该文档。 5.3.2 创建库项目 下面练习把bas站点中“index.html”文档中的元素创建为库项目。 操作思路： 打开“第5课\素材\bas\index.html”文档，另存为“index2.html”文档。 选取顶部图片所在的表格，创建为“top”库项目。 选取左侧导航条所在的表格，创建为“left”库项目。 Dreamweaver CS3，Flash CS3，Fireworks CS3网页制作培训教程 第5课 模板与库 本课要点 具体要求 本课导读 上机练习 本课要点 用模板统一风格 使用库 具体要求 掌握创建模板的方法 掌握套用模板到页的方法 掌握站点文档的快速更新方法 掌握库项目的创建方法 掌握库项目的使用方法 本课导读 一个成功的网站，在网页设计上必须体现其独特的风格，以便访问者能够留下深刻的印象，要做到这点，需要依靠网站中所有的网页，通常统一网站的风格就是一个比较好的方法。要做到网站风格统一，可以通过复制网页来实现，但需要更改风格时就很麻烦了。而使用模板和库项目就轻松地解决该问题。 5.1 用模板统一网站风格 利用模板文件中的锁定区域，可以控制网站内多个网页间有共性的内容，对于个性化的内容，则可通过可编辑区域来完成，从而用最短的时间完成繁重的维护工作。网站中相对固定的元素是网页背景、导航菜单和网站标志等内容，可将这些元素设置为锁定区域。 5.1 用模板统一网站风格 5.1.1 知识讲解 5.1.2 典型案例——创建并应用模板 5.1.1 知识讲解 本节将学习模板的创建、套用模板到页、更新站点及从模板分离文档等知识。 5.1.1 知识讲解 1. 新建模板 2. 套用模板到页 3. 更新站点 4. 从模板分离文档 1. 新建模板 新建模板的具体操作如下： （1）编辑一页基本体现网站风格的网页。 （2）选择【文件】→【另存为模板】命令，或单击插入栏的【常用】选项卡中 按钮旁的下拉按钮，在弹出的下拉菜单中选择 【创建模板】命令，打开【另存模板】对话框。 1. 新建模板 （3）在【另存为】文本框中输入模板文件名。 （4）单击【保存】按钮，如果当前文档中存在图像或一些超链接，系统会打开提示对话框，询问用户是否要更新链接。 （5）单击【是】按钮，更新文档中的超链接，同时在站点中生成一个“Templates”文件夹，该文件夹用于放置保存的模板文件，模板文件以“dwt”为后缀。 1. 新建模板 下面给模板添加控制元素，包括可编辑区域、可选区域、重复区