1 / 21

《 网页设计与制作 》

《 网页设计与制作 》. 7.3. 7.5. 7.1. 7.4. 7.2. 第七章 模板与库的应用. 实例导入：利用模板生成的站点. 创建模板. 模板的应用和更新. 使用库. 利用模板和库生成站点的制作过程. 本章主要介绍了利用模板和库设计风格一致的网站，使用模板和库的组合使得建设网站和维护网站变得很轻松，尤其是在对一个规模较大的网站进行建设与维护时，就能体会到模板和库的好处。 【 本章学习目的 】 本章通过一个典型的网站案例重点讲解了模板和库技术的应用，通过本章的学习，掌握利用模板和库技术创建风格一致的网站的方法。.

violet-jones
Download Presentation

《 网页设计与制作 》

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 《网页设计与制作》

  2. 7.3 7.5 7.1 7.4 7.2 第七章 模板与库的应用 实例导入：利用模板生成的站点 创建模板 模板的应用和更新 使用库 利用模板和库生成站点的制作过程

  3. 本章主要介绍了利用模板和库设计风格一致的网站，使用模板和库的组合使得建设网站和维护网站变得很轻松，尤其是在对一个规模较大的网站进行建设与维护时，就能体会到模板和库的好处。本章主要介绍了利用模板和库设计风格一致的网站，使用模板和库的组合使得建设网站和维护网站变得很轻松，尤其是在对一个规模较大的网站进行建设与维护时，就能体会到模板和库的好处。 【本章学习目的】 本章通过一个典型的网站案例重点讲解了模板和库技术的应用，通过本章的学习，掌握利用模板和库技术创建风格一致的网站的方法。

  4. 一个成功的网站首先要具备自己独特的风格，才能够在茫茫 的网络中脱颖而出，给人留下深刻的印象。但仅凭网站中的一两个较好的页面，很难收到良好的效果。因此就需要整个站点内的页面体现出统一的风格。因此通过使用模板能够生成多个具有相似结构和外观网页，从而提高网页制作效率。 【例7.1】利用模板技术生成网站实例，如图7.1所示。 在本网站实例主要涉及到以下知识点： 首先进行网页版面布局的设计； 划分模板锁定区域和可编辑区域； 创建模板和编辑模板，最后根据模板快速创建网页。

  5. 7.2 创建和设置模板 关于模板最显著的特征就是锁定区域和可编辑区域之分。锁定区域主要用来锁定体现网站风格部分，而将经常要改变的文字、图像、链接等网页元素设置成可编辑区域，网页中只编辑可编辑区域的内容，从而得到与模板相似但又有所不同的新的网页。

  6. 7.2.1 创建模板 创建模板有二种常用的方法：一是创建新模板，二是将当前网页另存为模板。 1. 创建新模板 创建新模板可通过以下两种方法来实现： 方法一：选择“文件”菜单｜“新建”命令，弹出“新建文档”对话框中，选择“常规”选项卡｜“基本页”｜“HTML模板”，单击“创建”按钮， 方法二：选择 “窗口”菜单｜“资源”命令，或按F11键打开“资源”面板，单击“资源”面板左边的“模板”选项，单击右下角的新建模板按钮，如图所示。 2. 将当前文档另存为模板 将一个编辑好的网页按照要求加以修改，然后另存为模板。

  7. 7.2.2 编辑模板 首先划分可编辑区域和锁定区域，然后编辑模板，通常是像编辑网页一样先将锁定区域编辑好，然后再定义可编辑区域。 可编辑区域：在模板中可编辑区域对应网页中的可编辑部分，锁定区域是那些不可编辑的部分。在默认的方式下，Dreamweaver将新模板的所有部分设置为不可编辑区域，由用户来定义可编辑区域。在编辑模板时，无论是可编辑区域还是锁定区域都是可以编辑的。但是将模板应用到网页中，在网页中的锁定区域是不可以编辑的。 常用定义可编辑区域的方法有二种，首先在模板中将光标单击要新建可编辑区域位置，选择“插入”菜单｜“模板对象”｜“可编辑区域”命令，或单击“插入”栏｜“常用”选项｜“模板”｜“可编辑区域”按钮，弹出一个“新建可编辑区域”对话框，如图所示，输入这个区域的名称，单击“确定”按钮。

  8. 7.3 模板的应用和更新 • 利用模板快速生成新的网页，也可以将模板应用于已经存在的网页。

  9. 7.3.2 模板的更新 1. 模板的修改 模板创建后，用户利用模板生成了网页文件。在网页文件的编辑过程中可能会有一些不合适的地方，比如：链接有错误、网页布局中单元格对齐方式不合理、图像不能正常显示等，而对于锁定区域，是无法在网页编辑状态进行修改，因此需要对模板进行修改。 打开模板文件，对模板文件进行修改，针对在网页编辑中发现的问题进行修改。 • 修改模板：对锁定区域进行修改。 • 删除可编辑区域：在模板编辑状态，选中已定义的可编辑区域，选择“修改”菜单｜“模板”｜“删除模板标记”命令，该可编辑区域就不存在了。 2. 用模板更新网页和网站 一旦模板被应用到多个网页文档中，对此模板的修改则会更新全部与其相关联的文档。这种使用模板更新文件的方法大大节省了用户的时间，尤其在涉及大量的改动时极为有效。

  10. 7.4 使用库 • Dreamweaver中提供了库的概念。库是用来存储想要在整个网站上经常重复使用或更新的网页元素，其它网页可调用库文件。这样一旦需要修改重复使用的部分，只需要修改库文件，而其它调用此库的页面将会被全部更新。

  11. 7.4.1 创建库 库项目可以包含多种网页元素，如：图像、链接、表格、脚本等，但CSS样式表文件不能作为库项目添加到库。 创建库的常用方法有三种： 方法一：选择“窗口”菜单｜“资源”命令，打开“资源”面板，选择“库”选项，单击“资源”面板下方的“新建库项目”按钮。 方法一：选择“文件”菜单｜“新建”命令，弹出“新建文档”对话框，选择“常规”选项卡｜“基本页”｜“库项目”命令，单击“创建”按钮，如图所示。 　　方法三：将已经编辑好的网页元素转换为库文件，首先选中要转换为库文件的网页元素，然后选择“修改”菜单｜“库”｜“增加对象到库”命令，当前选中的网页元素就会成为一个新的库项目以供其它网页调用。 创建库文件后，站点中就会多出子文件夹library，库文件的默认存储路径就是该文件夹。库文件的后缀名为lbi。库的编辑与普通网页的编辑完全相同。

  12. 7.4.2 应用库 库建立后，可以很轻松地将库应用于网页文件中。操作步骤如下： 步骤1　打开网页，把光标定位在需要插入库的位置。 步骤2　在“资源”面板中选择“库”选项，然后单击相应的库项目，单击“插入”按钮，或者将库项目直接拖到网页需要插入库的位置。 将库项目应用到网页文件中后，在Dreamweaver的网页编辑状态，库项目的背景呈现高亮度显示。

  13. 7.4.3 修改库 库被应用到网页文档中，在网页中是无法修改的。要修改库，必须首先打开库文件才能进行编辑。对库的修改则会自动更新所用与之关联的网页文档。 1. 编辑库 打开“资源”面板，选中“库”选项，然后双击某个库文件，进入库文件的编辑状态，对库文件进行修改。 将库文件修改完毕，保存库文件。。此时弹出 “更新库项目”对话框，或选择“修改”菜单｜“库”｜“更新”页面。单击“更新”按钮。 2. 删除库 打开“资源”面板，选中“库”选项，然后单击库文件名，按DEL键即可。删除库后，不会改变任何调用此库的其它网页内容。 3. 使网页中库项目可编辑 如果网页中添加了库项目，库项目以高亮显示，无法编辑。如果想要编辑调用库在当前网页的内容，则必须断开当前网页与库之间的关联。操作步骤如下： 在当前网页中选中项目，在“属性”面板中单击“从源文件分离”按钮。

  14. 7.5利用模板和库生成站点的制作过程 • 本节讲解【例7.1】利用模板和库快速创建一个网站实例。

  15. 本 章 小 结 本章通过网站实例的讲解，重点介绍了以下几点： 模板：创建模板，编辑模板，利用模板快速创建网页； 库：将多个网页重复使用的网页元素存储在库项目。 本章练习题 1. 选择题： （1）模板中（ ）的可以在网页编辑状态被使用者编辑。 A．可编辑区域 B．锁定区域 C．任何区域 D．以上都可以 （2）（ ）不可以作为库项目。 A．图像 B．CSS样式表文件 C．文本 D．JAVASCRIPT脚本 （3）下面叙述不正确的是（ ）。 A．模板和库的作用是有相同的地方。 B．模板主要应用在外观相同而内容不同的页面中，库主要应用在多个页面的相同部分 C．在应用模板的网页文档中可以直接修改模板文件　　 D．在应用库的网页文档中可以直接修改库文件 2. 简答题 （1）什么是模板？在Dreamweaver中如何使用模板？ （2）如何将库项目从源文件中分离？ （3）模板和库的区别是什么？

  16. 上 机 实 训 1. 背景知识 根据本章所学的模板和库的知识，并结合前面所学的网页编辑、表格排版的知识，进行网站设计与制作。 2. 实训准备工作 　　将网站的页面草图和网站的素材资料准备好，发送到学生主机，以供学生参考使用。 3. 实训要求 利用模板创建站点 要求：根据给定的网页素材，结合网页草图，创建和编辑模板，并利用模板快速生成相同风格、相似结构的网站。 在站点的多个网页上添加库项目 要求：在上一个实训的基础上，结合库项目独特优势，将多个网页中重复使用的网页元素存储为一个文件，即为库项目，然后在其它需要调用的网页或模板中调用，从来达到提高网页设计的效率。 4.课时安排：2课时

More Related