网页设计与制作-12 使用模板和库
网页设计与制作项目化教程 5 模板与库
图5-10 删除可编辑区域
提示： （1）创建好的模板文件必须建立可编辑区域，如果没有此步操作，以后的操作将无法进行。 （2）在新建的文档编辑区域中，用户必须将事先准备好的文档材料放进去，否则插入的模 板将不可编辑。
5.1.3 创建“中国联中国联通”子页面，操作步骤如下。 （1）新建站点，将素材文件夹中的文件复制到当前站点目录下。 （2）打开Dreamweaver CS6，选择“文件”→“新建”命令，打开“新建文档” 对话框，选择“模板中的页”选项，在“站点”列表中选择“中国联通”选项，然 后在右侧“站点‘中国联通网站’的模板”列表中选择5.1.1节中创建的模板ziye， 如图5-11所示。
图5-4所示。
图5-4 “新建可编辑区域”对话框
（3）单击“确定”按钮，建立名为EditRegion1的可编辑区域，如图5-5所示。
图5-5 在表格中插入EditRegion1标签
（4)删除主页中的企业文化、关爱服务所在的表格，插入2行1列表格宽度为100百 分比的表格，依照上面的方法，建立可编辑区域EditRegion3、EditRegion4，如图 5-6所示。
图5-6
模板的可编辑区域
（5）将光标置于EditRegion3可编辑区域中，利用css样式编辑规则，名称为zybt ，然后设置分类中类型相应的参数，如图5-7所示。
图5-7
zydt中CSS规则中类型的参数设置
（6）然后设置方框的相应参数，如图5-8所示。
图5-8 zydt中CSS规则中方框的参数设置
（2）单击“创建”按钮，打开模板编辑窗口。 （3）在空白网页中，根据需要设置网页的属性，并插入各个网页元素。 （4）选择“文件”→“保存”命令，打开“另存模板”对话框，在“另存为“文 本框中输入模板名称，单击“保存”按钮，如图5-3所示。
完整版)网页设计与制作课程标准
完整版)网页设计与制作课程标准网页设计与制作》是一门理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
该课程定位于WEB技术开发工作岗位，是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。
通过本课程的研究，学生将了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。
该课程旨在为今后从事网页设计与制作、网站开发和管理奠定基础，并在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主研究能力和探索创新能力。
该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：1.网页基本概念（第1章）2.基本开发工具的使用DW CS6软件介绍（第2章）3.建立与管理站点（第3章）4.制作主要内容为文本的网页（第4章）5.插入与编辑图像（第5章）6.插入多媒体元素（第6章）7.创建超级链接（第7章）8.HTML基础（第13章）9.表格处理与网页布局（第6章）10.网页布局AP Div的应用（第9章）11.使用CSS+DIV布局网页（第11章）12.网页美化CSS样式表（第10章）13.行为（第12章）14.动态网页基础（第15章）15.创建和使用模板（第9章）16.创建和使用库（第10章）该课程的教学目标为：1.掌握使用Photoshop进行图像处理的基本方法及操作技能；2.掌握DreamweaverCS5的基本知识及操作技能；3.掌握建立与管理站点的方法；4.掌握制作主要内容为文本的网页的方法；5.掌握在网页中插入与编辑图像的方法；6.掌握在网页中插入多媒体元素的方法；7.掌握表格处理与网页布局的方法；8.掌握创建超级链接的方法；9.掌握使用框架制作旅游网站的方法；10.掌握创建和使用模板的方法；11.掌握创建和使用库的方法；12.掌握在网页中添加AP Div的方法；13.掌握在网页中使用行为的方法；14.掌握HTML基础知识及通过代码修饰网页的方法。
网页设计与制作第12章 使用库和模板
12.2.4
可编辑区域
插入可编辑区域后，也可以在以后修改其名称。单击可编辑区域左上 角的标签，在【属性】面板的【名称】文本框中输入一个新名称，按 Enter键确认即可。 如果已经将模板文件的某个区域标记为可编辑，现在想要重新锁定该 区域（使其在基于模板的文档中不可编辑），请使用“删除模板标记” 命令。单击可编辑区域左上角的标签，然后选择菜单命令【修改】/【模 板】/【删除模板标记】，也可在鼠标右键快倢菜单中选择【模板】/【删 除模板标记】命令，该区域将不能再编辑。
12.1.5
一、修改库项目
维护库项目
库项目创建以后，根据需要适时地修改其内容是不可避免的。如果要 修改库项目，需要直接打开库项目进行修改。在【资源】面板的库项目列表 中双击库项目，或先选中库项目，然后单击面板底部的【编辑】按钮打开库 项目。也可以在引用库项目的网页中选中库项目，然后在【属性】面板中单 击【打开】按钮打开库项目，这是一种快速打开库项目的方法。在打开库项 目后，根据需要编辑内容并保存即可。
12.2.3
一、基于新文档创建模板
创建模板
在【资源】面板中单击 【模板】按钮，切换到【模板】类别， 单击底部的 【新建模板】按钮，新建一个模板，然后在列表框中输 入模板的新名称并按Enter键确认即可。
12.2.3
创建模板
也可以选择菜单命令【文件】/【新建】，打开【新建文档】对 话框，然后选择【空模板】，在【模板类型】列表框中选择相应选 项来创建模板文件。
第12Байду номын сангаас 使用库和模板
在Dreamweaver CS6中，可以使用库项目 制作网页内容相同的部分，使用模板制作网 页结构相同的部分。库项目通常代表诸如站 点徽标、版权信息或导航栏这类小型的设计 资源，对于较大的设计区域可使用模板。本 章将介绍库和模板的基本知识以及使用库和 模板制作网页的基本方法。
网页设计与制作练习题【可编辑】
网页设计与制作练习题一、单选题1. 由于（ B ）是网页制作的标准语言，因此无论什么样的网页制作软件，都提供直接以该语言方式来制作网页的功能。
A.JSPB.HTMLC.ASPD.PHP2. （ C ）是网页中最常见、运用最为广泛的元素之一，从某种意义上说它是网页存在的基础，其信息传载的有效性是其他任何一种网页元素都无法替代的。
A.图像B.表格C.文本D.多媒体3.（ C ）是网页传递信息的主要载体，传输速度快，而且可以设置其大小、颜色、段落、层次等属性。
A.图像B.表格C.文本D.多媒体4.打开 Dreamweaver软件之后，如果没有出现“属性”面板，可以执行（ B ）菜单中的“属性”命令将其打开。
A.插入B. 窗口C.修改D. 命令5. 在Dreamweaver软件中，按（ D ）键可以将网页置于浏览器中进行预览。
A.F1B.F3C.F9D.F126. HTML标签中用于设置背景颜色的属性是（ C ）。
A．alink B．vlink C．bgcolor D．background7. HTML标签中用于设置网页的背景音乐，可以使用( B )标记。
A.<sound>B. <bgsound>C.<bgmusic>D.<bgshengyin>8.在HTML语言中，background的作用是用来设置（ A ）。
A.背景图像B.背景颜色C.背景音乐D.超级链接9.下列（ A ）不属于在 Dreamweaver中可以插入的图像格式。
A.SWFB.JPEGC.PNGD.GIF10.在HTML语言结构中,（ B ）是用来指定文件的主体，文字、图形、图像、链接、动画和视频等元素都应包含在该标签内。
A. <html>……</html>B. <body>……</body>C. <head>……</head>D. <title>……</title>11.单击（ C ）可以跳转到当前页面中的某个位置，而不会打开新的网页文件。
网页设计与制作(Dreamweaver)《模板与库》
应用模板
2．从“资源”面板中的模板创建新文档：
在站点的“资源”面板中，选择“模板”，右击欲应用的模板， 选择“从模板新建”。然后在可编辑区域中添加内容，在网页标 题区输入每一个网页的标题等。
模板与库
应用模板
3．将模板应用到现有文档
选择“文件/打开”命令，打开要应用模板的文档。在“文档”窗 口中单击，然后选择“修改/模板/套用模板到页”命令。从列表 中选择一个模板并单击“选择”。
模板与库
使用库项目
1、库项目插入到网页中
简易方法：将“资源”面板中“库”列表 中的库项目直接拖动到文档中的合适位置。 在文档中将光标移至需要链接库项目的位 置。 在“资源”面板的库类中，单击库项目， 再单击面板底部的“插入”按钮。
模板与库
使用库项目
2、设置插入到网页中的库项目属性
选中插入的项目，在属性面板中设置。 打开：打开并编辑库项目。 从源文件中分离：断开与库项目的链接，成为独立的网页元素。 重新创建：重新创建一个库项目。
模板与库
创建和编辑库项目
创建库项目
（1）选择文档中欲存为库项目的元素；选 择“窗口/资源”,将选定内容拖动到“资 源”面板的“库”类别中。 （2）选择“修改/库/增加对象到库”
模板与库
创建和编辑库项目
编辑库项目
（1）在“资源”面板的“库”类别中，双 击欲修改的库项目。或者单击选中库项目， 再单击面板下方的“编辑”按钮。 （2）然后在文档窗口中象修改HTML网页 一样对其进行修改，最后在保存时，会提 示是否更途径。如：联系方式。
可编辑模板区域控制 基于模板的页面中的 哪些区域可以编辑。
（1）选定欲设置为可编辑区域的元素（一般是一个表格），在“常用”的 “模板”中，单击“可编辑区域”； （2）右击选“模板”中“新建可编辑区域”； （3）可以在“插入”菜单的“模板”中“可编辑区域”。
2015网页设计与制作DreamWeaver教案：第十二讲使用模板和库制作网页
第十二讲使用模板和库制作网页授课日期班级名称授课地点教学课题第十二讲摸板和库课时2学时教学目的（1）理解模板和库的作用。
（2）学会将已有网页生成模板的操作方法。
（3）掌握如何编辑模板和将模板生成新网页的操作方法。
（4）掌握如何应用库项目制作网页。
知识目标（1）模板和库的作用。
（2）将已有网页生成模板。
（3）编辑模板和将模板生成新网页。
（4）应用库项目制作网页。
能力目标（1）会应用摸板创建新网页（2）用库项目为网页添加元素素质目标培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。
重点（1）编辑摸板、将摸板生成新网页难点（1）编辑摸板、将摸板生成新网页课型讲授型＋操作型教学方法边讲、边练、讲练结合教学手段多媒体教学教参《网页设计与制作教程》人民邮电出版社教学环节及板书设计时间安排1．复习提问如何实现层的精确定位？2 2．新课引入摸板是一种特殊的文档，通过摸板来创建和更新网页可以大大提高工作效率，网站的维护也会轻松很多33．知识技能目标说明深刻理解摸板和库的应用，并且会应用摸板来创建和更新网页，用库项目为网页添加元素，从而快速地作出专业的网页5 4．详细讲解各知识点45 5．课堂实践15 6．问题探讨如何从摸板中分离文档？37．疑难解析12 8．课堂小结本讲主要学习了模板和库的网页布局方法，制作网页不仅追求美观、而且要提高制作效率，使用模板和库文件是提高网页制作效率的有效途径。
39.作业布置2总计90新授内容1．模板概述（1）模板的概念（2）模板的特点2．创建网页模板（1）新建网页（2）插入表格，布局网页（3）创建模板3．编辑和更新模板（1）打开Templates文件夹中模板文件（2）定义可编辑区域（3）定义不可编辑的可选区域（4）定义可编辑的可选区域（5）设置可编辑标签属性4．创建基于模板的网页（1）应用网页模板创建网页文档（2）编辑网页（3）更新模板的变化5．库（1）创建库文件（2）创建一个待插入库对象的网页（3）在网页中插入库文件（4）更新库项目的变化（5）调整库文件案例10应用模板制作相似网页——美文随笔案例综述：本案例通过模板设计出网页的整体风格、布局，当制作各个分页时，通过模板来创建，而当修改模板时，应用该模板的网页都将随之改变，这使网页的制作形成一种批量生产的形式，大大提高了工作效率。
《网页设计与制作—模板和库文件》
教学方案
ቤተ መጻሕፍቲ ባይዱ
学习内容 专业 能力
模板和库文件的应用
课时
2
1、理解模板和库在网页设计与制作中的作用； 2、能将已有网页生成模板； 3、能生成库项目及应用库项目 4、能熟练编辑已有模板及利用模板生成新的网页； 1、 能够利用模板技术制作风格统一的网站， 并能在同一个网站熟练 创建、编辑及修改多种风格的模板文件； 2、能在任务书的指导下完成任务，并解决任务实施过程中遇到的实 际问题。 1、各小组成员能养成自主学习、实事求是、理论与实际相结合的科 学态度与科学精神，能够相互交流、合作学习，培养学生与人合 作能力、与人交流能力。 2、能将任务成果进行汇报，培养语言表达能力。
2
时间 安排
教学过程 子任务四 设置网页间 的交互 （20 分钟）
教师活动设计 1、 布置任务：设置首页与子网页之 间的交互； 2、 提出问题：如何快速给所有子网 页设置超链接？ 3、 演示有关修改模板的操作。
学生活动设计 1、 完成任务： 设置首页 与子页之间的超链接； 2、 小组思考并讨论问 题； 3、 在老师的提示及指 导下通过模板给子网页 设置超链接。
3
教学环境 教学重点 与难点
教学内容 及能力训 练任务
教学方法 时间 安排
教学过程
教师活动设计
1
学生活动设计
时间 安排
教学过程
教师活动设计
学生活动设计
第 一 课 时
创设情境 引入任务 （5 分钟）
子 任 务 一 创建模板 （20 分钟）
第 一 课 时
实 例 探 究
子 任 务 二 制作子网页 （20 分钟）
第 二 课 时
子任务三在 实 子网页中设 例 置并修改动 探 究 画影片 （20 分钟）
第9章 模板、库和资源管理——(网页设计与制作共11章)
9.1案例1创建基于模板的网页
9.2 学习任务：使用库项目
9.3 学习任务：资源管理 9.4 上机实训
9.1案例1创建基于模板的网页
9.1.1 9.1.2 9.1.3 9.1.4 9.1.5 9.1.6 9.1.7 9.1.8
模板简介 创建模板 定义模板的可编辑区域 创建基于模板的文档 在现有文档上应用模板 编辑模板 从模板中分离文档 更新基于模板的页面
图9-16 “更新文件”对话框
图9-17 “更新页面”对话框
9.1.1 模板简介
在制作一个站点时，往往需要建立外观及部分内容相同的大 量网页，使站点具有统一的风格。如果逐一创建、修改，会 很费力，效率不高，而且整个站点很难做到有统一的外观及 结构，借助Dreamweaver中的模板功能就可以轻松地解决这 个问题。 模板的作用就如同现实生活中生产产品的样本模子，通过模 子可以生产大批量相同规格的产品。网页模板的主要功能是 把网页布局和内容分离，在布局设计好之后将其保存为模板， 相同布局的页面可以通过模板创建，然后对基于该模板的页 面进行内容的具体编辑，从而形成风格一致而内容不同的页 面。通过模板创建的网页与该模板保持连接状态（除非用户 对其分离），修改模板即可立即更新基于该模板的所有网页 文档。
图9-13“选择模板”对话框
图9-14“不一致的区域名称”对话框
9.1.6 编辑模板
1．重命名模板文件 具体方法：选择“窗口→资源”命令，打开“资源”面板， 单击左侧的“模板”类别，面板右侧显示本站点的模板列表。 在模板列表中，选中需要重命名的模板，单击鼠标右键，在 弹出的快捷菜单中选择“重命名”命令， 然后为模板输入一个新名称。按 下〈Enter〉键重命名生效，此时 弹出“更新文件”对话框，如图 9-15所示。如果更新网站中所有 基于此模板的网页，单击【更新】 按钮，否则选择【不更新】按钮。
网页设计与制作-12 使用模板和库
（1）可编辑区域 （2）可选区域 （3）重复区域
12.3 创建模板的可编辑区域
在模板中，可编辑区域是指用户 可以对其编辑和修改的区域。
1.插入可编辑区域
2. 选择可编辑区域
3. 删除（锁定）可编辑区域
如果已经将模板文件的一个区域标记为可 编辑区域，想要再次使其成为不可编辑区 域时，就使用“删除模板标记”命令。
12.12.4 使库项目可编辑
首先，使库项目可编辑，就可以在当前文档中选择该库项目。
然后，单击属性检查器中的“从源文件中分离”按钮。
12.12.5 应用库项目
12.12.6 修改库项目
通过对库项目的修改，用户可以引用外部库项目一次更新整个站点上的内容。
1.更新关于所有文件的库项目
当修改一个库项目时，可以选择更新使用该项目的所有文件。
在修改了模板之后，用户可以根据提示对应用了模 板的网页迚行更新。
12.8 在基于模板的文档中编辑内容
用户在模板文档和基于模板的文档中都可以很容易地通过标示确 认不可编辑区域（锁定区域）和可编辑区域，但只能编辑模板中 可编辑区域的内容。
12.9 管理模板
可以使用资源“面板”的“模板”类别来管理这些模板，包括重命 名模板文件、删除模板文件等，当然也可以使用“资源”面板将模 板应用于文档或编辑模板。
12.5.2 插入重复表格
12.6 应用模板
12.6.1 使用模板创建文档
12.6.2 在现有文档中应用或删除模板
1. 把模板应用到现有文档
用户可以利用“资源”面板或通过文档窗口将模板应 用于现有文档中。
2. 将文档与模板分离
12.7 编辑和更新12.12.2 在“资源”面板中添加库项目
【任务8-1】使用模板和库制作网页(1)
14 《网页设计与制作项目驱动教程（第3版）》
在名称框中输入新的库文件名称 “nav_left0801.lbi”，“.lbi”为库文件的扩展名。 然后按【Enter】键即可。
（4）Dreamweaver CC会把库项目文件保存 在本地站点根文件夹下的“Library”子文件夹中， 如果本地站点没有该文件夹，Dreamweaver会自 动创建该文件夹。
19 《网页设计与制作项目驱动教程（第3版）》
2．在表格3的下方插入库项目 nav_bottom0801
将光标置于表格3的右侧，在【资源】面 板中选中要插入的库项目“nav_bottom0801”， 然后单击该面板中左下角的【插入】按钮，即 可在表格3的下方插入另一个库项目。
20 《网页设计与制作项目驱动教程（第3版）》
(5)能灵活运用模板和库到小组作业科技强国、红色之旅、绿水青山网页中
(6)过程考核：考查学生的团队合作、创新意识、思维、专业技术能力等方面综合评价
标准分
计分
20
30 20
(7)网页作品：对设计作品中体现的中国传统文化、生态文明意识、与软件专业有关的最新科技 技术、创新性等方面进行评估
30
自我评价
小组评价
01
02Βιβλιοθήκη 03教学导航操作准备
引导训练
4
教学导航
5
教学导航 教学目标
知识目标
能力目标
思政目标
熟练创建创建基于模板 的网页、修改模板以更 新站点
能灵活运用模板和库到 小组作业科技强国、红 色之旅、绿水青山网页 中
渗透中国传统文化、渗 透社会主义先进文化教 育、渗透生态文明教育
教学导航 教学重点难点
网页设计与制作模版与库
1．Dreamweaver的模板
模板的原理是由可编辑区域和不可编辑区域两部分组 成。不可编辑区域包含了在所有面面中共有的元素， 即构成页面的基本框架；而可编辑区域是为添加相应 的内容而设置的。Dreamweaver的模板的扩展名为 “.dwt”。创建模板后，Dreamweaver会自动在当前站 点的根目录中创建一个名为“Templates”的目录，然 后将该模板文件存储在该目录中。用户可以在将模板 应用于文档之后，再修改模板。当使用修改后的模板 更新文档时，文档只有不可编辑的部分才会随模板更 新，不会影响到其他内容。
用模版与库的两大理由
统一模板
在开发Web网站时，使用Dreamweaver的模板功能有助于设计 风格一致的网页。众所周知，站点必须经常更新，才能赢得更多 的访问量，在Dreamweaver中通过模板来创建和更新网页，便 于网站的维护和管理，可以充分地重用资源，从而大大提高工作 的效率。 顾名思义，模板就是一种样板，照着这个样板，可以制作出多个 样式一致的网页。模板面板提供了一种建立同一风格网页基本框 架的方法。例如，对于一个大型站点，大多数文档上通常会出现 相同的内容，如公司的名称、网站的标志、公司徽标、网站导航 条等。如果将这些格式存储为模板，再通过该模板创建新文档， 所生成的新文档中会自动出现这些共有内容。这样，在编辑网页 时，只需输入每个文档中不同的内容就可以了。
2．Dreamweaver的库
除了模板之外，为了重复地使用网页设计资源，Dreamweaver 还提供了库。用户可以将Dreamweaver的库，理解为可重用的 网页对象集合，还可以利用库来处理在多个页面中出现的内容， 版权信息、公司地址等。 库是一种特殊的 Dreamweaver 文件，其中包含您已创建以便放 在 Web 页上的单独的资源或资源副本的集合，用来存储要在整 个 Web 站点上经常重复使用或更新的页面元素（如图像、文本 和其他对象）的方法。库里的这些资源称为库项目（Library Item），可以将单个网页对象创建为库项目，也可以将多个网页 对象的组合创建为库项目。库项目就是在网页中能重复使用的 “零件”。每当更改某个库项目的内容时，可以更新所有使用该 项目的页面。可以在库中存储各种各样的页面元素，如图像、表 格、声音和 Flash 文件。
《网页设计与制作》-实训指导书
目录实训1 站点创建实训2 搜集素材实训3 用表格设计主页布局实训4 在主页制作中插入文本操作实训5 在主页制作中插入图像操作实训6 在主页制作中超级链接的设置实训7 制作动感网页实训8 表单制作实训9 CSS样式表的使用实训10 JavaScript技术实训11 应用行为实训12 利用框架制作“公司简介"网页实训13 利用布局表格制作“新书推介”网页实训14 模板和库的使用实训15 利用层的布局制作“技术支持”网页实训16 网页设计与网站管理实训17 网站开发综合实训实训1 站点创建实训目的为了让学生能熟练掌握创建站点的方法，掌握设置网页的页面属性，掌握创建网站目录结构、栏目文件夹、网页文件的基本操作方法。
实训环境硬件环境：考核用机为奔腾以上兼容机，内存不少于 32M ，最好 64M 或128M ;硬盘不小于 500M ； VGA 彩显,带鼠标器。
操作系统：Windows95/98/me/2000/XP软件环境:Dreamweaver MX 2004特殊要求：必须将IIS配置好，能正常进行WEB浏览素材准备准备制作网页所需的文字素材.实训课时2学时实训内容创建站点：创建网站目录结构：创建栏目文件夹:创建网页文件：掌握设置网页的页面属性实训要求要求学生能掌握如何创建站点，正确创建网站目录结构及栏目文件夹，创建主页文件index。
htm，并正确命名，掌握设置网页的页面属性的方法.实训步骤1、在E盘中新建本地根文件夹，命名为bookman，并在该文件夹中新建image 文件夹以存放网站中所要用到的图片。
2、定义站点：设置”站点名称”，命名为 "博客人";设置本地根文件夹，指定为E盘下的bookman文件夹;设置 "HTTP地址"为localhost.3、创建网站目录结构及栏目文件夹（如下图）：4、E盘下的bookman文件夹创建主页文件index。
htm5、设置网页的页面属性。