(教学课件)chapter10利用模板与库制作系列网页.pptx

1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第10章利用模板与库制作系列网页制作“方案”栏目系列页面深 圳 职 业 技 术 学 院 计 算 机 基 础 教 学 部学习目标 了解库及其在网页制作中的作用 掌握创建和应用库项目的方法 掌握利用库项目成批更新网页的方法 了解模板及其在网页制作中的作用 掌握创建和应用模板的方法 掌握利用模板创建系列页面的方法 深刻体会库和模板对网页制作效率的影响网 页 设 计 与 制 作 实 用 教 程（第 3 版）2深圳职业技术学院计算机基础教研室实训项目深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系列子页面，

2、内容是各类网站建设和网络营销的解决方案。网 页 设 计 与 制 作 实 用 教 程（第 3 版）3深圳职业技术学院计算机基础教研室项目分析设计思路：（1）页面页面元素元素：深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系列子页面，内容是各类网站建设和网络营销的解决方案。（2）版面布局版面布局：对于“方案”栏目系列页面来说，为保持整体风格的一致性，均采取常用的“匡”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载主要栏目列表；占据页面最大空间的右侧区域，用于装载主体内容（方案），底部区域装载页脚信息。（3）配色方案配色方案：色彩搭配和公司网站主页保持一致，采用蓝色主题。

3、网 页 设 计 与 制 作 实 用 教 程（第 3 版）4深圳职业技术学院计算机基础教研室设计目标网 页 设 计 与 制 作 实 用 教 程（第 3 版）5深圳职业技术学院计算机基础教研室预备知识1库和库项目及其作用库就是用来存放和管理公共元素的一种技术。被添加到库中的网页元素称为库项目，库项目由单个网页元素或多个网页元素组成。2模板及其作用模板（Template）相当于模子，利用模子制作出来的网页，在外观、风格上是一致的。网 页 设 计 与 制 作 实 用 教 程（第 3 版）6深圳职业技术学院计算机基础教研室制作流程任务1：利用库项目创建网页任务3：利用模板创建系列页面任务4：利用模板更新

4、系列网页任务2：利用库项目成批更新网页网 页 设 计 与 制 作 实 用 教 程（第 3 版）7深圳职业技术学院计算机基础教研室任务1 1 利用库项目创建网页1创建库项目2应用库项目网 页 设 计 与 制 作 实 用 教 程（第 3 版）8深圳职业技术学院计算机基础教研室STEP1STEP1：创建库项目深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）9将主页中的banner创建为“banner.lbi”库项目。将主页中的导航条创建为“nav.lib”库项目。将主页底部的页脚区域创建为“footer.lib”库项目。STEP2STEP2：应用库项目网 页

5、设 计 与 制 作 实 用 教 程（第 3 版）10深圳职业技术学院计算机基础教研室将“banner.lbi”、“nav.lb”及“footer.lbi”库项目分别应用到方案栏目“scheme.html”页面中。将“banner.lbi”、“nav.lbi”及“footer.lbi”库项目分别应用到“外贸网站建设和海外市场营销推广”方案“scheme01.html”页面中。任务2 2 利用库项目成批更新网页1编辑库项目和更新网页2管理库项目网 页 设 计 与 制 作 实 用 教 程（第 3 版）11深圳职业技术学院计算机基础教研室STEP1STEP1：编辑库项目和更新网页网 页 设 计 与 制

6、 作 实 用 教 程（第 3 版）12深圳职业技术学院计算机基础教研室修改“nav.lbi”库项目中的版权信息。STEP2STEP2：管理库项目网 页 设 计 与 制 作 实 用 教 程（第 3 版）13深圳职业技术学院计算机基础教研室对库项目重新命名。删除库项目。重新创建库项目。解除库项目内容与原始库项目之间的关联。任务3 3 利用模板创建系列页面1创建模板2定义可编辑区域3创建基于模板的新页面网 页 设 计 与 制 作 实 用 教 程（第 3 版）14深圳职业技术学院计算机基础教研室STEPSTEP深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）15

7、1创建模板将设计好的“scheme01.html”网页另存为“scheme.dwt”模板。2定义可编辑区域将“scheme.dwt”方案模板中的页面右侧的内容区域定义为可编辑区域。3创建基于模板的新页面基于模板创建如下页面：scheme02.html、scheme03.html和scheme04.html。任务4 4 利用模板更新系列网页1修改模板和更新网页2将模板应用到已经存在的网页文件3管理模板网 页 设 计 与 制 作 实 用 教 程（第 3 版）16深圳职业技术学院计算机基础教研室STEPSTEP深圳职业技术学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）1

8、71修改模板和更新网页修改“scheme.dwt”模板的内容并更新基于该模板的系列网页文件。2将模板应用到已经存在的网页文件将“scheme.dwt”模板应用到“scheme01.html”网页中。3管理模板将“scheme04.html”网页与“scheme.dwt”模板分离开。项目总结利用模板与库设计与制作网页利用库项目创建网页创建库项目应用库项目利用库项目成批更新网页编辑库项目和更新网页管理库项目利用模板创建系列页面创建模板定义可编辑区域创建基于模板的新页面利用模板更新系列网页修改模板和更新网页将模板应用到网页文件管理模板网 页 设 计 与 制 作 实 用 教 程（第 3 版）18深圳职

9、业技术学院计算机基础教研室课后练习1.1.配套实训配套实训利用配套实训文件夹下提供的素材文件，根据所学的表模板与库，自主完善游戏人物介绍网站，要求如下：利用模板制作系列网页，分别用于介绍人物Sweet、Cesar、Big Smoke和Tenpenny。通过修改“temp.dwt”模板文件的页面底部链接（为“首页|12345|尾页”分别设置链接，链接到相应的网页），自动并更新基于模板制作的系列网页。尽量将系列网页的共同页面元素创建为库项目，并通过修改库项目，自动更新应用库项目的网页。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室课后练习2.2.同步同步测试测试通过教材第10章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室