网页设计与制作任务驱式实用教程06单元6使用模板和库制作网页1.docVIP

单元6　使用模板和库制作网页 【教学导航】 教学目标 （1）学会将现有的网页生成网页模板 （2）能正确编辑模板，掌握设置可编辑区域和可选区域的方法 （3）熟悉用模板生成新网页的操作方法，并能对新网页进行编辑加工 （4）能熟练地修改网页模板，并同步更新该模板生成的网页 （5）学会创建库项目，并且能修改库项目，更新包含库项目的网页 （6）掌握插入图像占位符的方法 （7）理解模板和库的作用 （8）了解CSS样式的简单应用 本单元重点 （1）将现有的网页生成网页模板 （2）用模板生成新网页，并对新网页进行编辑加工 （3）修改网页模板并同步更新该模板生成的网页 （4）创建库项目，并且修改库项目，更新包含库项目的网页 本单元难点 （1）用模板生成新网页，并对新网页进行编辑加工 （2）修改网页模板并同步更新该模板生成的网页 教学方法 任务驱动法、分组讨论法、分析探究法、四步训练法 课时建议 6课时（含考核评价） 【操作准备】 1．新建1个本地站点 （1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6 （3）创建本地站点 2．制作用来生成网页模板的网页 （1）新建1个网页 （2）在网页中插入表格1 （3）在网页中插入表格2 （4）在网页中插入表格3 保存网页，预览其效果。 【引导训练】 【任务6-1】使用模板和库制作上海游的网页 本单元“引导训练”的任务卡如表6-4所示。 表6-4　单元6“引导训练”任务卡 任务编号 6-1 任务名称 使用模板和库制作上海游的网页 网页主题 名城游 计划工时 180min 网页制作任务描述 （1）创建库项目，并在网页中插入库项目 （2）由现有的网页文档生成网页模板，在网页模板中定义和修改可编辑区域、可选区域 （3）创建基于网页模板的网页，修改和更新网页模板属性 （4）修改网页模板和库项目，并更新基于网页模板的网页 网页布局结构分析 （1）网页模板采用表格布局结构，其示意图如图6-6所示 （2）文字型导航栏（位于网页顶部和网页底部两个位置） 网页色彩搭配分析 网页中文字的颜色：#000000、#203F78，背景颜色：#639629 网页组成元素分析 主要包括表格、文本、图像和超级链接等网页元素 任务实现流程分析 制作用来生成网页模板的网页→创建库项目→在网页中插入库项目→创建网页模板→定义与修改可编辑区域和可选区域→创建基于网页模板的网页→修改网页模板并更新网页→修改库项目并更新网页→保存网页并预览其效果 配盘素材导引 原始文件位置：start\Unit06\task06-1 最终文件位置：result\Unit06\task06-1 本单元“引导训练”的任务跟踪卡如表6-5所示。 表6-5　单元6“引导训练”任务跟踪卡 任务编号 开始时间 完成时间 计划工时 实际工时 当前状态 本单元“引导训练”网页0602.html的预览效果如图6-7所示。 【任务6-1-1】创建库项目 【任务描述】 （1）将网页中的版权信息区域定义为库项目。 （2）将现有网页nav_left0601.html中的景点导航表格转换为库项目。 【任务实施】 1．使用【新建文档】对话框创建库 （1）在Dreamweaver CS6主界面中，选择命令【文件】→【新建】，在弹出的【新建文档】对话框中选择“空白页”→“库项目”。然后单击【创建】按钮，创建1个空白网页， （2）保存库项目文件 单击【标准】工具栏中的【保存】按钮，在弹出的【另存为】对话框中的“保存在”列表框中选择“webpage”，“保存类型”下拉列表框中选择“库文件(*.lbi)”，“文件名”文本框中输入“nav_bottom0601.lbi”，然后单击【保存】按钮，保存库项目文件。 （3）设置页面的边距 （4）在网页中插入表格 （5）在表格中输入文字 在表格的第2行单元格中输入以下文字“返回首页 | 旅游服务 | 联系方式 | 旅游调 （6）保存库文件，浏览其效果 2．利用现有网页内容转换为库项目 （1）打开文件夹“webpage”中网页文档“nav_left0601.html”。 （2）选中该网页文档中的24行1列的景点导航表格。 （3）在Dreamweaver CS6主界面中，选择命令【修改】→【库】→【增加对象到库】，将选中的表格转化为库文件。此时会出现“提示信息”对话框，在该对话框中单击【确定】按钮，库项目的内容随即会出现在【资源】面板中，等待输入新的库文件名称。 在名称框中输入新的库文件名称“nav_left0601.lbi”，“.lbi”为库文件的扩展名。然后按【Enter】键即可。 （4）Dreamweaver CS6会把库项目文件保存在本地站点根文件夹下的“Library”子文件夹中，如果本地站