02-第20课《网站组版1网页模板的应用》学历案.docVIP

2016课改-学历案 齐齐哈尔市建华区春江路4号 电话:2747111 《网站组版1》学历案 章节 第二十章： 网页模板的应用 德育主题 文明礼貌是中华民族的传统美德。 课次 20/44 任务名称 任务1：创建基于模板的网页 1环 发微课 微指导 下发微课ZB-A-10.mp4 2-3天 2环 服从 训练 常态视频0-1.avi,教师严肃静立，目视全班，学生绝对静止 1 情景 导入 (视频zb-11.avi) 3 任务 描述 使用网页模板，可以使大量繁琐的网页设计工作变得相对简单。本例就是通过创建基于模板的网页做为引例，使学生了解网页模板的相关知识，熟悉模板的功能，掌握创建和编辑网页模板的操作方法，学会了创建基于模板的网页。 2 任务 分析 那么如何创建基于模板的网页呢？有以下几个步骤： 1.启动DW环境； 2. 网页文档中选择【修改】-【模板】-【跟新当前页】命令； 3.完成基于模板的网页制作。 2 任务 实现 一、 创建流程： 步骤01：准备添加可编辑区域 打开“index.html”网页，将插入点定位到右侧的div标签中。 选择【模板对象】-【可编辑区域】命令。 在弹出的提示信息中单击“确定”按钮。 步骤02：命名可编辑区域 在打开对话框的“名称”文本框中输入可编辑区域的名称“content-eidt”。 单击“确定”按钮，完成可编辑区域命令的操作。 步骤03：另存为模板 选择【文件】-【另存模板】命令，打开“另存模板”对话框，在“另存为”文本框中输入模板名称“left-mb”。 单击“确定”按钮，在弹出的提示对话框中单击“是”按钮，完成另存为模板的操作。 步骤04：新建基于网页的模板 按ctrl+N组合键，打开“新建文档”对话框，选择“模板中的网页”选项卡。 在“站点的模板”列表框中选择刚创建的网页模板“left-mb”选项。 单击“确定”按钮，完成新建基于网页的模板操作。 步骤05：添加文本 在网页编辑区中选择“content-eidt”文本，将其删除，将提供的content.txt文本文件中的文字复制到网页编辑区中的可编辑区域中。 步骤06：保存网页 按ctrl+S组合键，在打开的对话框的“文件名”下拉列表框中输入“page.html”。 单击“确定”按钮，完成保存网页操作。 步骤07：分离模板 选择【修改】-【模板】-【从模板中分离】命令，将网页从模板中分离出来，按ctrl+S组合键保存，完成整个例子的制作。 步骤08：预览效果 按F12键，在浏览器中预览其效果。 15 嵌入 德育 文明礼貌的表现视频X-09.avi 3 相关 知识 模板的作用？ “模板”对包含大量具有相同布局的页面的站点来说，无疑是最高效的设计工具。“模板”文件与常规网页文档有很大区别，它使用专门的“.dwt”格式，而非传统的“.html”格式，并且对于含有多个网页文档的站点，其网站logo、页面、导航栏及页脚信息部分通常都是相同的，因此，可制作一个通用页面，在页面中把这些固定不变的部分锁定，而只将其他不固定的区域（如正文部分）定义为可编辑部分。这样就可以在这个通用页面的基础上进行修改，从而制作出各个具有不同正文内容的子页面，这样不仅统一了整个网站的风格，同时也大大提高了工作效率。 什么是可编辑区域？ Dreamweaver cs6 为模板中的区域定义了4 种主要的区域，而“可编辑区域”只是其中之一，下面将分别对4种区域的定义进行介绍。 可编辑区域：该区域是基于 “模板”文档中未锁定的区域，它是“模板”用户可以编辑的部分。要使“模扳”生效，至少应包含一个 “可编辑区域” 。 重复区域： 该区域是文档中设置为重复的布局部分，如可设置重复一个表格行。重复部分通常是可编辑的。“重复区域” 分为两类：重复区域和重复表格。 可选区域： 该区域是 “模板” 中可选的部分，用于保存可能在綦于“模板” 的文档中出现的内容，可设置判断条件来使可选区域申的内容根握条件显示或隐藏。 可编辑的可选属性： 该区域是可编辑区域与可选区域相结合的产物。 8 励志 做一题会一题，一题决定命运！ 1 补充实例 【操作实例1-1】 无 5 课程 小结 本课程通过对网页模板相关知识的学习，掌握了创建和编辑网页模板的操作方法。可以制作基于模板的网页。 2 布置