网页制作基础教程-模板和库的应用
网页设计与制作第12章 使用库和模板
12.2.4
可编辑区域
可编辑区域是指可以进行添加、修改和删除网页元素等操作的区域。 可编辑区域控制在基于模板的页面中，用户可以编辑哪些区域。在插入 可编辑区域之前，需要将文档保存为模板。如果是在普通网页文档而不 是模板文档中插入可编辑区域，则会提醒用户系统会将该文档自动另存 为模板。 在【文档】窗口中，选择要设置为可编辑区域的内容或将插入点放在 要插入可编辑区域的位置，然后选择菜单命令【插入】/【模板对象】/ 【可编辑区域】（也可在鼠标右键快倢菜单中选择【模板】/【新建可编 辑区域】命令，或在【插入】面板【常用】类别的【模板】按钮组中单 击【可编辑区域】按钮），来打开【新建可编辑区域】对话框。
12.1.5
二、更新库项目
维护库项目
在库项目被修改保存后，引用该库项目的网页会进行自动更新。如果 没有进行自动更新，可以选择菜单命令【修改】/【库】/【更新当前页】， 对应用库项目的页面进行更新。也可选择菜单命令【修改】/【库】/【更新 页面】，打开【更新页面】对话框，根据需要更新相关页面。如果在【更新 页面】对话框的【查看】下拉列表中选择【整个站点】选项，然后从其右侧 的下拉列表中选择站点的名称，将会使用当前库项目更新所选站点中的所有 页面。如果选择【文件使用…】选项，然后从其右侧的下拉列表中选择库项 目名称，将会更新当前站点中所有应用了该库项目的文档。
12.2.8
使用模板创建网页
12.2.9
一、 打开附加模板
维护模板
12.1.3
一、创建空白库项目
创建库项目
选择菜单命令【窗口】/【资源】，打开【资源】面板，单击 【库】按 钮切换至【库】分类，单击面板右下角的 【新建库项目】按钮，新建一个 库项目，然后在列表框中输入库项目的新名称并按Enter键确认。此时它还 是一个空白库项目，可单击面板底部的 【编辑】按钮或双击库项目名称打 开库项目，在里面添加内容保存即可。
网页制作基础教程-模板和库的应用
10.1 应用模板制作相似网页
10.1.1 案例综述
网 页
本例通过模板设计出网页的整体风格、布局，
制
当制作各个分页时，通过模板来创建，而当修改模
作
板时，与之相链接的网页都将随之改变。
基
础
教
程
10.1 应用模板制作相似网页
10.1.2 案例分析
网 页
在制作中，可利用模板来设计其相同部分，不
制
同之处留为可编辑区域，待在具体制作网页时，再
10.2 模板的基本操作
要点提示：
网 页
1.表格布局的模板定义可编辑区域时，可将整
制
个表格或表格的某个单元格定义为可编辑区
作
域，但是不能同时将多个单元格定义为一个
基 础
单独的可编辑区域。
教
程
2.AP元素和AP元素中的内容是不同的元素，当
AP元素设为可编辑区域时，在应用该模板编
辑文档时，可改变AP元素的位置和AP元素中
教
选择【修改】|【库】｜【更新当前页】
程
10.4 资源管理
利用【资源】面板的功能可以统一管理整个站点
网
的资源，避免反复查找某些网页元素，能大大提
页
高网页设计的效率，得到事半功倍的效果。
制
作
在【资源】面板中管理的几种对象分别是：
基
【图像】
础 教 程
【颜色】 【超链接】
【Flash】
【Shockwave】
页 制
【资源】面板可对本地站点内的图像完成插入、编
作 辑和管理，其操作步骤如下:
基 础 教
（1）打开[图像]资源：单击[资源]面板左侧的图 像按钮，可进入【图像】窗口。
dedecms详细模板制作教程(1)
第一步：解压dedecms环境安装包到你指定的文件目录或者磁盘下，完成后会有一个可执行文件，我们运行这个文件，它会提示你安装到具体的目录，选择好后进行安装！
第二步：dedecms环境安装包解压完成后，会有一个对话框跳出来！这就是我们需要安装dedecms的接口！你可以看到一些信息之类的！然后我们在点击“点击安装”，它会自动进行对环境的搭建；完成后对话框就会显示“浏览phpinfo”，“安装dedecms”，我们先点击第一个，看看我们的环境是不是真的搭建起来，如果页面正常跳转到phpinfo界面，那么恭喜你！dedecms环境你终于搭建成功了！那是不是到此就结束了？还没有，光有环境没有系统还是运行不起来的，那么接下来我们就来安装dedecms系统！
网页制作案例教程 清华大学出版社 教学课件第3章 HTML基础
文本字体、大小、颜色属性,主要是通过在<font>标签 中设置face、size、color的值，设置文本的字体、大 小和颜色。
案例3-13文本字体属性应用
3、<hr>标签的属性
在<hr>标签中，通过设置width和size属性，用来控制 水平线的长度和宽度，默认情况下，水平线的宽度是 100%，1像素的高度，在设置宽度和高度时可以是确 定的像素值也可以是占窗口的百分比。 color属性可以设置水平线的颜色，颜色表示和字体 颜色的表示相同.
表格标签、属性、单元格以及表格嵌套应用 框架基本结构、分割方式、属性及链接、浮动 窗口
本章学习导航
HTML标签的学习，是初学者掌握网页制作的 入门技术，也是后续学习创建静态、动态网站 必备基础知识，了解JavaScript的基本标签、 属性运用及作用，并使用它们制作精美的网页 ，是初学者掌握本章内容的基本要求。 本章内容在全书知识结构中所处位置如图所示
3.1.2 HTML基本结构及书写规范
1、HTML基本结构
在HTML中，由<>和</>括起来的文本叫做“标签”，<> 表示开始标签；</>表示结束标签，开始标签和结束标签配 对使用，它们之间的部分是该标签的作用域，比如 <html></html>等。HTML就是以这些标签来控制内容的显 示方式。
8）注释标签 在HTML文档中用来表示注释的标签为<!-- 注释内容-->
案例3-10 注释标签应用 9）水平分割线标签hr <hr>标签是水平线标签，用于段落和段落之间的分割， 使文档结构清晰明了，使文字的编排更整齐。加入一 个<hr>标签，就加入了一条默认的水平线。
《dreamweaver网页设计与制作》课程标准
《Dream weav er网页设计与制作》课程标准一、课程定位和课程设计（一）课程性质与作用“网页设计与制作”是高职电子商务专业的职业技能课，重点讲述网页设计与制作的基础知识、基本理论和基本技能，是一门包含了网页、网站的概念、网页主要工具软件dreamweaver中文版的使用以及网页制作的拓展内容（Flash、Firework）等诸多知识的操作性极强的技能型应用课程，是本专业的一门带有实践环节的专业基础课程，是电子商务专业学生的必修课程。
“网页设计与制作”是“电子商务网站规划与管理”和“动态网页设计与制作”等课程的前期基础课程。
通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。
本课程培养学生的职业素养和创新能力，为日后走向工作岗位打下理论与实践基础。
通过本课程的学习实现学生思想过硬、理论基础扎实、实际工作能力强的教学目标。
(二)课程基本理念本课程遵循职业性原则，以学生未来职业中可能用到的知识为中心，采用任务驱动的设计理念，以学生为主体，多元智力的学生观，突出课程的职业性，实践性和开放性，紧紧盯住产业需求，牢牢贴近一线服务，专业融入产业，规格服务岗位。
（三）课程设计思路主要指课程设计的总体思路：基于工作任务的结构模式，采取提出问题----介绍解决问题的方法----归纳总结，培养寻找答案的思维方法的模式。
以问题引导出相关原理和概念，在讲述实例的过程中融入，通过分析归纳，介绍解决工程实际问题的思想和方法，然后进行概括总结。
二、课程目标通过对网页设计与制作基础知识和技能的学习,使学生系统了解网页、网站的概念、网页主要工具软件dreamweaver的使用等基础知识，熟练运用网页制作的工具软件，使学生具有网页、网站制作的知识与能力，具备应用电脑独立开发网页、网站并将网站上传并测试的技能，具备解决网页设计、网站开发中出现各种问题的能力。
HTML5+CSS3网页设计与制作—教学大纲
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：5学分学时：74学时（其中：讲课学时：50学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript网页特效适用专业：信息技术及其计算机相关专业开课部门：计算机系一、课程的性质与目标《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。
教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求开发工具：Dreamweaver CS6或其他代码编辑工具四、课程的主要内容及基本要求第一章HTML5+CSS3网页设计概述学习单元HTML5+CSS3网页设计概述学时2学时学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√网页名词解释√Web标准√HTML简介√CSS简介√JavaScript简介√网页的展示平台—浏览器√认识Dreamweaver界面√Dreamweaver初始化设置√Dreamweaver基本操作√【阶段案例—创建第一个网页】√第二章初识HTML5学习单元初识HTML5 学时6学时学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。
中职网页设计与实训整套课件完整版ppt教学教程最全电子讲义教案最新
黄 色
#FFFF00
yellow
白 色
#FFFFFF
white
任务3.2 网页的基本制作
知识3.2.1 页面属性
建立网页时，需要对网页的“外观”、“链接”、“标题”等进行基本的设置，这些设置需要在“页面属性”中完成。
页面属性对话框
知识3.2.2 META标记
知识2.1.2 网站规划
一 ．确定目标群体
在创建一个站点之前，首先要确定站点是给什么人访问的，即确定站点的用户群体，以便于确定在站点内添加的内容、为网站设计不同的视觉内格、色彩效果等。
化妆品网
二 ．确定站点功能
确定了站点的目标群体后，就要设计网站需要为这些用户实现哪些愿望和功能，以确定网站各方面的内容及效果要求，例如如果是企业网站，就应立足于企业形象来展开，如果是购物网站，就要强化网站的在线购物等功能。
任务4.1 文本基本操作
文本作为网页中最基本的信息载体，以最直接、最直观的方式使用户获取信息，在网页中有着不可替代的地位与作用，它涵盖的信息量大，插入、编辑操作简便，容易被浏览器下载，不会像图片一样占用太长的等待时间，因此掌握好文本的操作，对于网页制作是最基本的技能。
知识4.1.1 选择性粘帖
Dreamweaver 8网页设计与实训
走进Dreamweaver8
创建本地站点
网页基础知识和基本制作
文本编辑
图像与多媒体的应用
网站链接
表格和布局
框架
表单
模板和库
CSS样式
行为和JavaScript
层和时间轴
整站建设、测试与上传
动态网站制作
项目一 —走进Dreamweaver 8
第5章 FrontPage网页型课件制作实例 第四版
③单击
5.4.5 用主题美化课件的外观
自动套用的 导航栏样式 自动套用的 水平线样式 自动套用的 网页背景
②单击
③选择位置
①单击
在FrontPage中，“主题”是指网页外观的类型或风 格，可使用FrontPage中的“主题”来快速美化课件的外 观。使用主题美化课件，可以在新建课件网页的时候使用 主题，也可以做好网页后应用主题美化网页。
5.2.1 规划课件网站
“雾凇”网站规划说明
网站总体规划
主题 建站目标
“雾凇”课件
名称
雾凇
图文介绍雾凇这一自然奇观，给学生真实体验，帮助 学生理解《雾凇》课文内涵，并提供学习交流平台。
网站栏目设置 主要栏目 研读成因 感受过程 栏目内容说明 图文介绍雾凇形成的原因。
网站内容规划
领悟奇观 课外交流
提供介绍雾凇的视频资料，帮助学生体验雾凇形成的 过程。 分析课文，帮助学生理解课文内涵 设立网上交流平台，帮助学生进一步交流学习心得。
5.4.3 使用框架组织网页
使用模板创建框架网页
②单击 ②单击 布局 ③单击 ③单击 布局
制作框架网页
①单击 布局
④单击 ④单击 布局
新建或设置各框架中的初始网页
正在保存 的区域
保存框架网页：
如果各框架中的网页是新建的， 保存时，需分别进行保存。
①单击 ①单击 布局 ②单击 ②单击 布局
5.4.3 使用框架组织网页
及时地记录设计
方案。
5.4.2 使用表格规划版面
网页上部 (表格 1 第 1 行 )
网页中部 (表格 1 第 2 行 )
网页下部 (表格 1 第 3 行 )
使用表格规划网页可以灵活安排网页版面，使网页整齐、 有序。首先在网页中插入表格并设置表格属性，然后再将文 字、图片等课件内容插入表格的单元格中。插入表格后将边 框线粗细设置为“0”，可以使表格在浏览时变为不可见。
网页设计与制作案例教程(HTML5+CSS3)第9章盒子模型
盒子模型
WEB 7
盒子模型
一个标准的W3C盒子模型由content、padding、border和margin这4个属性 组成。各属性含义如下： ➢ content（内容） - 盒子的内容，显示文本和图像。 ➢ padding（内边距） - 内容也边框之间的距离。会受到框中填充的背景颜色影响。 ➢ margin（外边距） - 盒子与其它盒子间的距离。margin是完全透明的，没有背
9.2.2 盒子模型的计算
注意：IE的盒子模型与标准的W3C盒子模型有区别，IE的盒 子模型中，width和height指的是内容区域+border+padding 的宽度和高度。 在盒模型中，外边距可以是负值，而且在很多情况下都要使 用负值的外边距。
9.2.2 盒子模型的计算
请按照W3C标准计算一下这个元素实际占用的空间
景色。 ➢ border（边框） - 盒子的边框，它具有border-style、border-width、
border-color属性。边框是受到盒子的背景颜色影响的。
8
9
9.2.2 盒子模型的计算
在CSS的标准盒子模型中，width和height指的是内容区域（content）的宽度和高度， 不是盒子的实际大小。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增 加元素框的总尺寸。
在标准的W3C盒子模型中： 元素框的总宽度 = 元素的width + padding的左右边距的值 + margin的左右边距 的值 + border的左右宽度； 元素框的总高度 = 元素的height + padding的上下边距的值 + margin的上下边距 的值 ＋ border的上下高度。
网站模板使用手册
1教程1.1网站标志Logo（1）登录企业网站（2）点击网站上方的“”按钮（3）在展开的选项卡中，进入网站设置选项卡，选择显示网站logo（默认为隐藏）（4）选择显示后，网站左上角会出现预置的logo图标，鼠标移动上去后，出现编辑Logo 和隐藏Logo两个按钮（5）点击编辑Logo，弹出编辑对话框（6）在弹出的对话框中，点击“图片上传”按钮，选择你的Logo，并根据需求设置Logo 位置与尺寸。
（7）Logo上传后，点击确定返回网站查看效果，可用鼠标拖拉图片调整位置。
（8）满意后，点击右上角的“保存”按钮，保存效果即可。
1.2地址栏图标（1）登录企业网站（2）点击网站上方的“”图标（3）进入网站设置——高级设置（4）启用网站头像，选择“是”（5）点击“文件上传”上传图标文件，文件格式为ico文件，大小为16*16像素注：可到/上传图片文件，将生成的favicon.ico保存到本地，然后上传。
（6）上传后，点击保存按钮，保存后刷新页面即可看到效果了。
1.3网站背景（1）登录企业网站（2）点击网站上方的“”按钮（3）在展开的选项卡中，进入网站设置选项卡，点击设置网站背景（4）在弹出的对话框中，选择“自定义背景”选项（5）用户可以不使用背景图片，只选择自定义背景颜色；也可以点击“图片上传”按钮，上传自定义的图片作为背景，可选择背景图片的显示方式（6）点击确定后即可返回网站查看网站背景的效果。
（7）设置完成后，点击网站右上方的保存按钮，保存效果即可。
1.4网站导航1.4.1隐藏/显示导航1.4.1.1隐藏导航（1）登录企业网站（2）鼠标移动到导航上方，浮出导航编辑按钮（3）点击隐藏按钮即可隐藏导航。
（4）隐藏后，点击网站右上角的保存按钮保存样式即可。
1.4.1.2显示导航（1）登录企业网站（2）点击网站上方的“”按钮（3）在展开的选项卡中，进入网站设置选项卡，点击显示网站导航（4）显示后，在页面即可看到网站导航，点击网站右上方的“保存”按钮后，即可保存。
2024版Joomla教程(Joomla模板)
调用自定义模块
在模板的适当位置插入自定义模块的占位符， 以便在网页中显示该模块的内容。
使用Joomla插件
根据需要安装和配置Joomla插件，以扩展 网站的功能。
优化性能加载速度
压缩CSS和JS文件
使用工具对CSS和JS文件进行压缩，以 减少文件大小并加快加载速度。
2
它具有易于使用、灵活性和可扩展性强的特点， 适合个人网站、企业网站、社区网站等多种类型。
3
Joomla提供了丰富的模板和扩展插件，用户可以 根据自己的需求定制网站外观和功能。
Joomla历史与发展
01
Joomla起源于2000年代初的一 个名为Mambo的开源项目。
02
由于Mambo项目内部纷争，部 分核心开发者于2005年பைடு நூலகம்道扬 镳，创建了Joomla项目。
安装和配置插件
上传插件文件
将下载的插件文件上传到Joomla网站的插件目录。
安装插件
在Joomla后台管理界面中，找到“扩展”->“插件” 选项，点击“安装”按钮上传并安装插件。
配置插件
安装完成后，找到已安装的插件并点击进入配置页 面，根据需要进行相关设置。
常用插件推荐
JCE编辑器
一款功能强大的WYSIWYG编辑器，提供丰 富的文本编辑和排版功能。
提高网站安全性措施
更新Joomla核心和扩展
定期更新Joomla核心和已安装的扩展，确保安 全漏洞得到及时修复。
限制登录尝试次数
设置登录尝试次数限制，防止暴力破解攻击。
ABCD
使用强密码策略
要求用户设置复杂且不易猜测的密码，降低被破 解的风险。
DWmx基础教程
2、框架的应用
创建普通框架集
利用框架属性面板来设置该框架 是否要边线以及边线的颜色、边线 宽度、框架的名称和框架中所要显 示的源文件。
可以查看框架集的文件的源代码， 这里面只保存了框架信息和它所对 应的源文件。
3、隐形框架的应用
实际就是<iframe></iframe> 的应用
三、 层的应用
层是网页中的一种容器，它可定位 在页面上的任意位置，并且其中可 包含文本、图像、表单等所有可直 接用于文档的元素。
命令可实现该操作。
6、创建图片热点
在插入的图片上，可以是交换式图 片，可以把图片分为若干个区域， 每个区被称为“热点”，可以为每 个热点指定相关的链接。当单击某 个热点时，系统显示相关的网页。 当绘制完热区后，属性面板会显示 热区的属性。
还可以调整热点区尺寸。
7、插入水平线
在对象面板中选择按钮，在页面中 点击，画面会自动生成一条水平线， 在水平线上单击，可以设置水平线 的宽度、高度、对齐方式、是否有 阴影等参数。
表单的应用P56－68
表单的创建与设置 表单类型
文本字段 文本域 按钮 单选按钮 复选按钮 下拉菜单 隐藏域
模板的运用 1．准备模板 2．定义区域 3．应用模板
感 谢
8、插入日期
在对象面板中选择按钮，在页面中 点击，会弹出对话框，可以设置日 期格式、星期格式、时间格式，点 击“OK”，就会在页面中自动加上 时间。
9、插入Flash对象 （1）插入Flash影片 （2）制作Flash文字 （3）制作Flash按钮
二、网页布局
网页布局主要使用到了表格、框 架、dw中网页布局以及隐形框架 的使用
到需要插入的图片文件，选择“确 定”。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
④ 模板修改完成后，选择【文件】｜【保存】命令，保存 模板。
10.2 模板的基本操作
2. 更新页面：
网
页
保存模板时，Dreamweaver CS3会询问它是
制 作
设置可编辑区域的具体步骤如下：
网 页 制
步骤1 在已创建的模板文件中，编辑网页， 其布局、制作方法与普通网页完全一致。
作
基
步骤2 将插入点放在想要插入可编辑区域的
础
地方
教
程 步骤3 在插入栏中选择【模板】，然后单击 【可编辑区域】按钮。
步骤4 在【新建可编辑区域】对话框中，输 入该区域的名称,单击【确定】按钮
10.2 模板的基本操作
要点提示：
网 页
1.表格布局的模板定义可编辑区域时，可将整
制
个表格或表格的某个单元格定义为可编辑区
作
域，但是不能同时将多个单元格定义为一个
基 础
单独的可编辑区域。
教
程
2.AP元素和AP元素中的内容是不同的元素，当
AP元素设为可编辑区域时，在应用该模板编
辑文档时，可改变AP元素的位置和AP元素中
建该文件夹。
模板文件的扩展名为.dwt。
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 1. 创建可编辑区域
制
作
可编辑模板区域控制基于模板的页面中的
基 础
哪些区域可以编辑。设置可编辑区域，需
教
要在制作模板的时候完成。
程
不同部分（设为可编辑区域）
相似网页
完全一样部分（在模板中制作）
10.2 模板的基本操作
页，选择需创建的模板类型。单击【确定】，
创建了一个空白模板
10.2 模板的基本操作
10.2.2 模板的创建与保存
网
页 1.模板的创建方法
制 作 方法二：在【资源】面板创建模板
基
础
1. 在文件面板中选择要创建模板的站点。
教 程
2. 选择【窗口】｜【资源】命令，打开【资源】面板，
选定面板左侧的【模板】按钮，单击“添加”按钮。
的内容。而将AP元素的内容设为可编辑区域
时，
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 2. 创建可重复区域
制
作
重复区域是可以根据需要在基于模板的页
基 础
面中复制任意次数的模板部分。
教
程
重复区域通常用于表格；但是，也可以为
其他页面元素定义重复区域。
作
将具体内容填入可编辑区域。
基 础
可编辑区域
重复区域
教
程
10.1 应用模板制作相似网页
10.1.3 实现步骤
网
页
1. 制作模板
制
作
1) 基本元素的制作
基
础
2) 插入模板区域
教
程
创建可编辑区域
创建重复区域
2. 创建基于模板的网页文档
3. 修改模板并更新
10.2 模板的基本操作
10.2.1 模板的基本特点
网 1. 使用菜单方式
页 制
1. 选择【文件】｜【新建】|【新建文档】|【模板】，
作
选择新建的页面存放的站点及所用模板名称。
基 础
2. 选中【当模板改变时更新页面】的复选框时，当模板
教
被修改后，用此模板创建的网页也会被修改。
程
3. 单击【创建】按钮，此时在网页编辑窗口建立了一个
由模板生成的网页，设计者可在可编辑区域输入相关
网
页
制 使用模板的好处在于：
作
基
础
1.可以生成大批的风格相近的网页。
教 程
2.一旦模板修改了，就修改了一批网页（自动
更新）。
10.2 模板的基本操作
10.2.2 模板的创建与保存
网 页
1.模板的创建方法
制 作
方法一：通过菜单创建模板
基 础
1. 在文件面板中选择要创建模板的站点。
教 程
2. 选择【文件】｜【新建】｜【常规】｜模板
10.1 应用模板制作相似网页
10.1.1 案例综述
网 页
本例通过模板设计出网页的整体风格、布局，
制
当制作各个分页时，通过模板来创建，而当修改模
作
板时，与之相链接的网页都将随之改变。
基
础
教
程
10.1 应用模板制作相似网页
10.1.2 案例分析
网 页
在制作中，可利用模板来设计其相同部分，不
制
同之处留为可编辑区域，待在具体制作网页时，再
10.2 模板的基本操作
网 10.2.3 创建模板区域
页 制
3. 修改模板区域
作 基
①在“文档”窗口中，选择区域选项卡。
础 教
②选择“修改”|“模板”|“删除模板标记”。
程
③对于“可选区域”，在选中其标识后，在
“属性”面板中单击“编辑”按钮进行修改。
10.2 模板的基本操作
10.2.4 创建基于模板的网页
网页制作基础教程 （Dreamweaver CS3）
第10章 模板和库的应用
本章重点：模板、库的创建、编辑、 应用、修改，站点的更新。
难点：如何合理的设置和定义模板 的可编辑区域。
第10章 模板和库的应用
10.1 应用模板制作相似网页 10.2 模板的基本操作 10.3 库的应用 10.4 资源管理
方法三：利用现成网页创建模板
1. 打开欲做模板的网页。
2. 选择【文件】｜【另存为模板】命令。
10.2 模板的基本操作
2、模板的保存
网
页
新建的模板文件会保存在本地站点的
制
作
Templates文件夹中。
基
础
如果该Templates文件夹在站点中尙不存在，
教
程
Dreamweaver CS3将在保存新建模板时自动创
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 2. 创建可重复区域
制 作
在模板中插入重复区域的操作步骤：
基
础
① 选择想要设置为重复区域的文本或内容。
教 程
② 选择“插入”|“模板对象”|“重复区域”。出现
“新建重复区域”对话框。
③ 在“名称”文本框中为模板区域输入唯一的名称。
④ 单击“确定”。 重复区域被插入到模板中。
内容。
10.2 模板的基本操作
10.2.4 创建基于模板的网页
网 2. 使用资源面板
页 制
1. 首先新建页面，通过【窗口】菜单打开资源面板
作
2. 选择面板中的模板资源。
基
础
3. 选中欲使用的模板，单击【应用】按钮；或将选中的
教 程
模板拖到编辑窗口。应用模板文档在右上角会标明模
板名称。
4. 在应用了模板的文档的可编辑区域内编辑相关内容。
10.2 模板的基本操作
10.2.5 更新模板及页面
网
页 1. 修改模板
制 作
① 选择【窗口】｜【资源】命令，打开资源面板，切换到
基
【模板】资源。
础
教
② 选中要修改的模板后右击鼠标，在快捷菜单中选择【编
程
辑】命令，或双击该模板，便可打开要修改的模板.
③ 在快捷菜单中选择【新建可编辑区域】╱【删除模板标 记】以添加或删除可编辑区域