网页设计与制作教材

在Dreamweaver中，创建的模板文件的文件扩展名为“.dwt”，保存 在“Templates”文件夹内，“Templates”文件夹是自动生成的，不能对其 名称进行修改。
2、创建模板文件
❖ 创建模板也有两种方法，即直接创建空白模板和将现有网页保存为模板。
（1）直接创建空白模板 在【资源】面板中切换到【模板】分类，然后单击【资源】面板右下角 的 （新建）按钮来创建空白模板。
的，不再详述。
❖
在库项目中使用CSS样式时，尽量不要使用“标
签”类型的CSS样式，因为HTML标签类型的CSS样
式定义后，所有引用该样式表的文档中只要有该HTML
标签，该样式就要自动起作用，容易引起混乱。
任务二 制作模板
（一）创建模板 （二）插入库项目 （三）插入模板对象
（一）创建模板
❖ 需要掌握的内容主要有： 1、模板概念的理解 2、创建模板文件 3、删除模板文件
对象即被添加到库项目列表中，库项目名为系 统默认的名称，修改名称后按Enter键确认即
可。
❖ 如果要删除库项目，只要先选中
该项目，然后单击【资源】面板右 下角的 （删除）按钮或按Delete 键即可。
❖
在【资源】面板中选中库项目，再单击【资源】
面板右下角的 （编辑）按钮，或者双击库项目名称
打开库项目进行添加内容。这和平常制作网页是一样
❖ 也可以在主菜单中选择【文件】／【新建】 命令打开【新建文件】对话框，然后选择【常 规】／【基本页】／【库项目】命令来创建空
白库项目。
❖ （2）从已有的网页创建库项目
❖
首先打开一个已有的文档，从中选择要
保存为库项目的对象，如表格、图像等，然后
在主菜单中选择【修改】／【库】／【增加对 象到库】命令或在【资源】面板【库】分类模 式下，单击右下角的 （新建）按钮，则该
种：一种是在【资源】面板中打开库项目，另一种是在引用库项
目的网页中选中库项目，然后在【属性】面板中单击
按钮，
打开库项目。在库项目被打开修改且保存后，通常引用该库项目
的网页会自动进行更新。如果没有进行自动更新，可以在菜单栏
中选择【修改】／【库】／【更新当前页面】或【更新页面】命
令进行更新。
❖
❖
在【属性】面板中单击
到文档中。
❖
库项目是可以在多个页面中重复使用的页面元素。在使用库
项目时，Dreamweaver不是向网页中插入库项目，而是向库项目
中插入一个链接，【属性】面板的“Src /Library/top.lbi”可以清楚
地说明这一点。
❖
在网页中引用的库项目无法直接进行修改，如果要修改库项
目，需要直接打开库项目进行修改。打开库项目的方式通常有两
排列着（插入）或（应用）、（刷新站点列表）、（新 建）、（编辑）和（删除）5个按钮。
❖
❖
（1）创建空白库项目。
❖
在主菜单中选择【窗口】／【资源】命
令，打开【资源】面板。在【资源】面板中单
击 （库）按钮切换至【库】分类，单击面
板右下角的 （新建）按钮新建一个库，然
后在列表框中输入库的名称并加以确认 。
3、删除模板文件
❖
如果要删除模板，只要先选中该模 板，然后单击【资源】面板右下角的 按钮或按Delete键即可。
❖
需要掌握的内容主要有：
❖
1、插入库项目
❖
2、修改库项目
❖
3、分离库项目
❖
在【资源】面板中切换至库分类，选中库文件，
单击面板底部的【插入】按钮或者单击鼠标右键，在
弹出的快捷菜单中选择【插入】命令，将库项目插入
按钮，可
将库项目的内容与库文件分离，分离后库项目的内容
将自动变成网页中的内容，网页与库项目不再有关联。
❖
需要掌握的内容主要有：
❖
1、重复区域
❖
2、可编辑区域
❖
3、 重复表格
❖
4、修改模板对象的名称
❖ 重复区域是指可以复制任意次数的 指定区域。重复区域不是可编辑区域， 若要使重复区域中的内容可编辑，必须 在重复区域内插入可编辑区域或重复表 格。在一个重复区域内可以继续插入另 一个重复区域。整个被定义为重复区域 的部分都可以被重复使用。
❖ 【资源】面板将网页的元素分为9类，面板的左边 垂直并排着（图像）、（颜色）、（URLs）、 （Flash）、（Shockwave）、（影片）、（脚本）、 （模板）和（库）9个按钮，每一个按钮代表一大类网
页元素。面板的右边是列表区，分为上栏和下栏，上栏
是元素的预览图，下栏是明细列表。
❖ 在【库】和【模板】分类的明细列表栏的下面依次
❖
（一）创建库项目 （二）编排库项目
❖ 需要掌握的内容主要有：
❖
1、库概念的理解
❖
2、【资源】面板
❖
3、创建库项目
❖
4、删除库项目
❖
如果在一个站点的众多网页中，有些内容是完
全相同的，就没有必要在每一页重复制作这些内容。
在Dreamweaver中，可以将众多网页相同的某一部
分内容做成库项目，然后将库项目插入到网页中。当
❖ 也可以在主菜单中选择【文件】／【新建】命令打开【新建文件】对话
框，然后选择【常规】／【模板页】／【HTML模板】命令来创建空白模板。 创建空白模板后，还需要打开模板文件，在其中添加网页元素和模板对
象。
（2）将现有网页保存为模板 首先打开一个已有内容的网页文档，根据实际需要在网页中选择网页元 素，并将其转换为模板对象，然后在主菜单中选择【文件】／【另存为模板】 命令将网页保存为模板。
1、模板概念的理解
通常在一个站点的众多网页中，有许多网页的结构是相同的，这时 就没有必要一页一页地重复制作这些网页。在Dreamweaver中，可以将
❖ 网页结构相同的网页做成库模板，然后通过模板创建网页。当模板修改
时，使用模板的网页也会自动进行更新。如果说库项目解决的是网页内 容相同的问题，那么模板解决的恰恰是网页结构相同的问题。
项目十 库和模板──制作职业学校主页
任务一 制作库 任务二 制作模板 任务三 制作网页 实 训 制作“一翔学校”网页模板
❖ 在Dreamweaver 8中，可以使用库 和模板来统一网站风格，提高工作效率。 本项目以制作职业学校主页为例，介绍 使用库和模板制作网页的基本方法。在 项目中，首先制作库项目页眉和页脚， 然后制作模板，最后根据模板制作主页。
需要修改时，只需修改库项目，使用库项目的网页就
会自动进行更新，这样即省时又省力。
❖
在DreamweaBiblioteka Baiduer中，创建的库项目的文件扩展
名为“.lbi”，保存在“Library”文件夹内，“Library”
文件夹是自动生成的，不能对其名称进行修改。
❖
在主菜单中选择【窗口】／【资源】命令，打开
【资源】面板。