网页设计与制作-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所示。如果更新网站中所有 基于此模板的网页，单击【更新】 按钮，否则选择【不更新】按钮。