06第6章使用模板和库制作网页 网页制作案例教程电子教案.doc

06第6章使用模板和库制作网页 网页制作案例教程电子教案.doc

  1. 1、本文档共14页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第6章 使用模板和库制作网页 。为了避免重复劳动,可以使用Dreamweaver CS3提供的模板和库功能,将具有相同版面结构的页面制作成模板,再通过模板来创建其他页面。也可以将相同的页面元素制作成库项目,并存储在库文件中以便随时调用。 【教学导航】 教学目标 (1)学会制作用来生成模板的网页,并将现有的网页生成模板 (2)能正确编辑模板,掌握设置可编辑区域的方法 (3)熟悉用模板生成新网页的操作方法,并能对新网页进行编辑加工 (4)能熟练地修改网页模板,并同步更新该模板生成的网页 (5)学会创建库项目,并且能修改库项目,更新包含库项目的网页 (6)掌握插入图像占位符的方法 (7)熟练使用多层嵌套表格布局网页 (8)理解模板和库的作用 (9)了解CSS样式的简单应用 本章重点 (1)制作用来生成模板的网页,并将现有的网页生成模板 (2)用模板生成新网页,并对新网页进行编辑加工 (3)修改网页模板并同步更新该模板生成的网页 (4)创建库项目,并且修改库项目,更新包含库项目的网页 本章难点 (1)用模板生成新网页,并对新网页进行编辑加工 (2)修改网页模板并同步更新该模板生成的网页 教学方法 任务驱动法、分组讨论法、四步训练法 课时建议 6课时(含课堂同步训练) 6.1 课前准备 6.1.1 新建一个站点 (1)在本地硬盘创建文件夹 (2)启动Dreamweaver CS3 (3)创建名称为“名城游”的本地站点 6.1.2 制作用来生成网页模板的网页 1、新建一个网页 (1)新建一个网页文档 (2)设置网页标题 (3)切换到网页的【代码视图】窗口,在标签<body>内,输入以下HTML代码: leftmargin="0" topmargin="0",即设置网页的左边距为0,上边距为0。 在<head>与</head>标签内,输入表6-所示的样式代码,设置超级链接的样式。 2、在网页中插入表格1 (1)插入表格1并设置其属性 (2)插入嵌套表格1-1 (3)插入嵌套表格1-2 3、在网页中插入表格2 在网页index0601.html中表格1的下方插入一个1行1列的表格2,该表格的“宽”设置为“780像素”,“边框”、“间距”和“填充”都设置为“0”,“对齐”方式设置为“居中对齐”,在“表格 ID”列表框中输入“表格2”。 将表格2单元格的“高”设置为“24像素”,“背景颜色”设置为“#639629”。 在表格2单元格中输入文字“首页 -> 城市导航 -> 北京” 保存网页,预览其效果,如图6-3所示。 4、在网页中插入表格3 (1)插入1行4列的表格3 (2)插入3行1列的表3-1 保存该网页且预览其效果。 (3)插入1行1列的表格3-2 (4)插入2行1列的表格3-3 (5)插入10行1列的表格3-4 (6)插入2行1列的表格3-5 (7)插入四个1行2列的表格 5、在表格3-5中插入图像占位符 保存网页,预览其效果。 6.2 课堂引导训练及评价 【课堂引导训练任务描述】 1、网页制作任务卡 网页制作任务卡如表6-4所示。 表6-4 网页制作任务卡 任务编号 06-1 任务名称 使用模板和库制作网页 网页主题 名城游 计划工时 min 网页制作任务描述 (1)创建库项目,并在网页中插入库项目 (2)由现有的网页文档生成网页模板,在网页模板中定义和修改可编辑区域、可选区域 (3)创建基于网页模板的网页,修改和更新网页模板属性 (4)修改网页模板和库项目,并更新基于网页模板的网页 网页布局结构分析 (1)表格布局结构,如图6-7所示 (2)文字型导航栏(位于网页顶部和网页底部两个位置) 网页色彩搭配分析 网页中文字的颜色:#000000、#203F78,背景颜色:#639629 网页组成元素分析 主要包括表格、文本、图像和超级链接等网页元素 任务实现流程分析 制作用来生成网页模板的网页→创建库项目→在网页中插入库项目→创建网页模板→定义与修改可编辑区域和可选区域→创建基于网页模板的网页→修改网页模板并更新网页→修改库项目并更新网页→保存网页并预览其效果 配盘素材导引 原始文件位置:start\06第6章使用模板和库制作网页\task06-1 最终文件位置:result\06第6章使用模板和库制作网页\task06-1 图6-7 模板index0601.dwt的布局结构 2、网页制作任务跟踪卡 网页制作任务跟踪卡如表6-5所示。 表6-5 网页制作任务跟踪卡 任务编号 开始时间 完成时间 计划工时 实际工时 当前状态 【网页效果展示】 网页index0602.html的预览效果如图6-8所示。 图6-8 网页index0602.html的预览效果 【任务完成过程】 6.2.1 创建库项目

文档评论(0)

autohhh + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档