《网页设计与制作》课程教学资源（PPT课件讲稿）第七章 模板与库的应用

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

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

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

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

某某市中心医院一眼科 眼科简介 返回主页 西安市s 》眼科简介 精湛医术 )专家门诊 先进设备 网上问医 中心医院眼科成立于1952年,至今已近50年。刨建初期得益于留英 学者、业洲人工晶体之父一一张锡华博士指导 等老一代主任的带领下自编讲义,举办了陝西省眼科学 童弱视的治疗,集中力量攻关, 结合国内、特别是西北地区的特点研制了一系列商易、便携 总机电话:XXX 仪,填补了西北的空白,治愈了数以千记的、以往认为不治之症的儿童 XXXXXXX 并解决了弱视复发的棘手难题,提岀了榈彐 见力状态 XXX XXXXXXX 转3288〔 同治疗阶段而设计治疗方案的原则,使我院眼科在 持别是弱视 转3242〔门诊〕 治疗家庭化治疗方面处于西安、西北、乃至国内领先地位。目前,这一专 转3151〔住院部〕 进一步发展为儿童眼病诊疗及研究中心,特别是周末开展的眚少年方便特 诊,定期大、中、小学及幼儿园儿童和青少年的眼部查体,将这一研宄推向 纵深—一—预防眼科学 XXX医学博士留美回国后,从80年代末积极引进国外先进技术及仪器 设备

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

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

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

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

7.2.1创建模板 刨建模板有二种常用的方法:一是创建新模板,二是将 当前网页另存为模板。 1.创建新模板 创建新模板可通过以下两种方法来实现: :选择“文件”菜单L_“新建”命令,弹出“新 建文档”对话框中选择。规”卡“基本 HTML模 单害“创建”按钮, 单若下函减,款的 2.将当前文档另存为模板 将一个编辑好的网页按照要求加以修改,然后另存为模 板

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

新建文档 常规模板 类别 基本页 预览 基本页 aHTML 动态页 模板页 KsLT〔整页 其他 aSLT〔片断 CSs样式表 a厍项目 框架集 预览> 页面设计Css) a Javascript 入门页面 页面设计〔有辅助功能的)a动作脚本 描述 Dreamweaver模板文档 文档类型mTD XHTML 1.0 Transi ti on 帮助首选参数①) 获取更多内容 匚创建)□取消

7.2.2编辑模板 首先划分可编辑区域和锁定区域,然后编辑模板,通常 是像编辑网员一样先将锁定区域编辑好,然后再是义可编 辑区。 可编辑区城;在模板中可编辑区城对应网页中的可编辑 邗分,锁定区回 不可编辑的 在默认的式下, Dreamweaver将新 由用户来定义可编辑区 糖校的时分者为不 是可编 区域还是定区城都是可以编辑的 模板应用到 页中,在网贡中的锁定区是不可以编辑的。 常用定义可编辑区 去有〓种,首先在模板中将 标 瘦新建可编辑区 选择插 瑙 板对象 编辑区域命令,或单插 栏 “常用”选项“模板”⊥“可编辑区”按钮,弹出 个“新建可编辑区域”对话框,如图所示,输入这个区域 的名称,单击“确定”按钮

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

新建可编辑区城 名称: edi regiona 确定 此区域将可以在基于该模板的文档 取消 中进行编辑。 「帮助

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

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