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

第10章利用模板与库制作系列网页

——制作“方案”栏目系列页面深圳职业技术学院计算机基础教学部第10章利用模板与库制作系列网页

——制作“方案”栏目系列学习目标了解库及其在网页制作中的作用掌握创建和应用库项目的方法掌握利用库项目成批更新网页的方法了解模板及其在网页制作中的作用掌握创建和应用模板的方法掌握利用模板创建系列页面的方法深刻体会库和模板对网页制作效率的影响网页设计与制作实用教程（第3版）2深圳职业技术学院计算机基础教研室学习目标了解库及其在网页制作中的作用网页设计与制作实用教程（实训项目深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系列子页面，内容是各类网站建设和网络营销的解决方案。网页设计与制作实用教程（第3版）3深圳职业技术学院计算机基础教研室实训项目深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系项目分析设计思路：（1）页面元素：深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系列子页面，内容是各类网站建设和网络营销的解决方案。（2）版面布局：对于“方案”栏目系列页面来说，为保持整体风格的一致性，均采取常用的“匡”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载主要栏目列表；占据页面最大空间的右侧区域，用于装载主体内容（方案），底部区域装载页脚信息。（3）配色方案：色彩搭配和公司网站主页保持一致，采用蓝色主题。网页设计与制作实用教程（第3版）4深圳职业技术学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）4深圳职业设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计预备知识1．库和库项目及其作用库就是用来存放和管理公共元素的一种技术。被添加到库中的网页元素称为库项目，库项目由单个网页元素或多个网页元素组成。2．模板及其作用模板（Template）相当于模子，利用模子制作出来的网页，在外观、风格上是一致的。网页设计与制作实用教程（第3版）6深圳职业技术学院计算机基础教研室预备知识1．库和库项目及其作用网页设计与制作实用教程（第3版制作流程任务1：利用库项目创建网页任务3：利用模板创建系列页面任务4：利用模板更新系列网页任务2：利用库项目成批更新网页网页设计与制作实用教程（第3版）7深圳职业技术学院计算机基础教研室制作流程任务1：利用库项目创建网页任务3：利用模板创建系列页任务1——利用库项目创建网页1．创建库项目 2．应用库项目网页设计与制作实用教程（第3版）8深圳职业技术学院计算机基础教研室任务1——利用库项目创建网页1．创建库项目 2．应用库项目STEP1：创建库项目深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）9

将主页中的banner创建为“banner.lbi”库项目。

将主页中的导航条创建为“nav.lib”库项目。

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

修改“nav.lbi”库项目中的版权信息。STEP1：编辑库项目和更新网页网页设计与制作实用教程（第3STEP2：管理库项目网页设计与制作实用教程（第3版）13深圳职业技术学院计算机基础教研室

对库项目重新命名。

删除库项目。

重新创建库项目。

解除库项目内容与原始库项目之间的关联。STEP2：管理库项目网页设计与制作实用教程（第3版）13深任务3——利用模板创建系列页面1．创建模板 2．定义可编辑区域3．创建基于模板的新页面网页设计与制作实用教程（第3版）14深圳职业技术学院计算机基础教研室任务3——利用模板创建系列页面1．创建模板 2．定义可编辑STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）151．创建模板将设计好的“scheme01.html”网页另存为“scheme.dwt”模板。2．定义可编辑区域将“scheme.dwt”方案模板中的页面右侧的内容区域定义为可编辑区域。3．创建基于模板的新页面基于模板创建如下页面：

scheme02.html、scheme03.html和scheme04.html。STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教任务4——利用模板更新系列网页1．修改模板和更新网页2．将模板应用到已经存在的网页文件 3．管理模板网页设计与制作实用教程（第3版）16深圳职业技术学院计算机基础教研室任务4——利用模板更新系列网页1．修改模板和更新网页2．将STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）171．修改模板和更新网页修改“scheme.dwt”模板的内容并更新基于该模板的系列网页文件。2．将模板应用到已经存在的网页文件将“scheme.dwt”模板应用到“scheme01.html”网页中。3．管理模板将“scheme04.html”网页与“scheme.dwt”模板分离开。STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教项目总结利用模板与库设计与制作网页利用库项目创建网页创建库项目应用库项目利用库项目成批更新网页编辑库项目和更新网页管理库项目利用模板创建系列页面创建模板定义可编辑区域创建基于模板的新页面利用模板更新系列网页修改模板和更新网页将模板应用到网页文件管理模板网页设计与制作实用教程（第3版）18深圳职业技术学院计算机基础教研室项目总结利用模板与库设计与制作网页利用库项目创建网页创建库项课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所学的表模板与库，自主完善游戏人物介绍网站，要求如下：利用模板制作系列网页，分别用于介绍人物Sweet、Cesar、BigSmoke和Tenpenny。通过修改“temp.dwt”模板文件的页面底部链接（为“首页|[1][2][3][4][5]|尾页”分别设置链接，链接到相应的网页），自动并更新基于模板制作的系列网页。尽量将系列网页的共同页面元素创建为库项目，并通过修改库项目，自动更新应用库项目的网页。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室课后练习配套实训

利用配套实训文件夹下提供的素材文件，根据所课后练习同步测试

通过教材第10章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网页设计与制作实用教程（第3版）计算机工程学院计算机基础教研室课后练习同步测试

通过教材第10章“同步测试”检验自己是否掌第10章利用模板与库制作系列网页

——制作“方案”栏目系列页面深圳职业技术学院计算机基础教学部第10章利用模板与库制作系列网页

——制作“方案”栏目系列学习目标了解库及其在网页制作中的作用掌握创建和应用库项目的方法掌握利用库项目成批更新网页的方法了解模板及其在网页制作中的作用掌握创建和应用模板的方法掌握利用模板创建系列页面的方法深刻体会库和模板对网页制作效率的影响网页设计与制作实用教程（第3版）22深圳职业技术学院计算机基础教研室学习目标了解库及其在网页制作中的作用网页设计与制作实用教程（实训项目深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系列子页面，内容是各类网站建设和网络营销的解决方案。网页设计与制作实用教程（第3版）23深圳职业技术学院计算机基础教研室实训项目深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系项目分析设计思路：（1）页面元素：深圳慧衡科技有限公司需要为二级页面“方案”栏目制作系列子页面，内容是各类网站建设和网络营销的解决方案。（2）版面布局：对于“方案”栏目系列页面来说，为保持整体风格的一致性，均采取常用的“匡”字形结构，顶部区域用于装载网站的banner和导航条；左侧区域用于装载主要栏目列表；占据页面最大空间的右侧区域，用于装载主体内容（方案），底部区域装载页脚信息。（3）配色方案：色彩搭配和公司网站主页保持一致，采用蓝色主题。网页设计与制作实用教程（第3版）24深圳职业技术学院计算机基础教研室项目分析设计思路：网页设计与制作实用教程（第3版）4深圳职业设计目标网页设计与制作实用教程（第3版）25深圳职业技术学院计算机基础教研室设计目标网页设计与制作实用教程（第3版）5深圳职业技术学院计预备知识1．库和库项目及其作用库就是用来存放和管理公共元素的一种技术。被添加到库中的网页元素称为库项目，库项目由单个网页元素或多个网页元素组成。2．模板及其作用模板（Template）相当于模子，利用模子制作出来的网页，在外观、风格上是一致的。网页设计与制作实用教程（第3版）26深圳职业技术学院计算机基础教研室预备知识1．库和库项目及其作用网页设计与制作实用教程（第3版制作流程任务1：利用库项目创建网页任务3：利用模板创建系列页面任务4：利用模板更新系列网页任务2：利用库项目成批更新网页网页设计与制作实用教程（第3版）27深圳职业技术学院计算机基础教研室制作流程任务1：利用库项目创建网页任务3：利用模板创建系列页任务1——利用库项目创建网页1．创建库项目 2．应用库项目网页设计与制作实用教程（第3版）28深圳职业技术学院计算机基础教研室任务1——利用库项目创建网页1．创建库项目 2．应用库项目STEP1：创建库项目深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）29

将主页中的banner创建为“banner.lbi”库项目。

将主页中的导航条创建为“nav.lib”库项目。

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

修改“nav.lbi”库项目中的版权信息。STEP1：编辑库项目和更新网页网页设计与制作实用教程（第3STEP2：管理库项目网页设计与制作实用教程（第3版）33深圳职业技术学院计算机基础教研室

对库项目重新命名。

删除库项目。

重新创建库项目。

解除库项目内容与原始库项目之间的关联。STEP2：管理库项目网页设计与制作实用教程（第3版）13深任务3——利用模板创建系列页面1．创建模板 2．定义可编辑区域3．创建基于模板的新页面网页设计与制作实用教程（第3版）34深圳职业技术学院计算机基础教研室任务3——利用模板创建系列页面1．创建模板 2．定义可编辑STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）351．创建模板将设计好的“scheme01.html”网页另存为“scheme.dwt”模板。2．定义可编辑区域将“scheme.dwt”方案模板中的页面右侧的内容区域定义为可编辑区域。3．创建基于模板的新页面基于模板创建如下页面：

scheme02.html、scheme03.html和scheme04.html。STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教任务4——利用模板更新系列网页1．修改模板和更新网页2．将模板应用到已经存在的网页文件 3．管理模板网页设计与制作实用教程（第3版）36深圳职业技术学院计算机基础教研室任务4——利用模板更新系列网页1．修改模板和更新网页2．将STEP深圳职业技术学院计算机基础教研室网页设计与制作实用教程（第3版）371．修改模板和更新网页修改“scheme.dwt”模板的内容并更新基于该模板的系列网页文件。2．将模板应用到已经存在的网页文件将“scheme.dwt”模板应用到“scheme01.html”网页中。3．管理模板将“scheme04.html”网页与“scheme.dwt”模板分离开