Presentation is loading. Please wait.

Presentation is loading. Please wait.

《网页设计与制作》.

Similar presentations


Presentation on theme: "《网页设计与制作》."— Presentation transcript:

1 《网页设计与制作》

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

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

4

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

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

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

8

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

10

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

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

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

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

15

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

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

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

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

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

21


Download ppt "《网页设计与制作》."

Similar presentations


Ads by Google