项目四DreamweaverCS5基本应用.docVIP

项目四 Dreamweaver CS5基本应用 课题名称：4.7 设置网页头部信息 课时：1课时 一、教学目标 1．知识与技能目标 掌握设置页面标题、网页关键词、网页字符编码和页面转场效果。 2．操作技能目标 根据页面需求，能灵活实现相关设置 二、教学分析与准备 1．教学重点 设置页面标题、网页关键词、网页字符编码和页面转场效果 2．教学难点 设置效果的合理性。 3．教学策略 自学为主 4．教学环境 多媒体网络机房 三、学习过程 教学组织 教学内容 备注 课前准备 范例欣赏与评述 （建议教学2分钟） 要点分析（建议教学3分钟） 制作示范（建议教学20分钟） 自学、练习（建议教学20分钟） 将本项目素材资源文件夹“项目四\example4”设置为站点。 欣赏范例：“项目四\范例结果\example4-7\ index.html 反复点击咖啡图标和礼品图表，观察页面在index.html和fancy.html之间反复切换过程中出现的转场效果。 在Dreamweaver中以打开文件“范例结果\example4-7\index.html”，在“设计”视图下，选择菜单栏中“查看”——“文件头内容”，窗口中出现一排按钮。其中第一个按钮表示设置标题，其余均表示插入元数据。可以逐个单击选中，在其相应的属性面板中学习相关的制作方法。正是这些增强和完善着页面功能，使页面更显无穷魅力。 完成范例，注意讲述要点： 使用“插入”——“HTML”——“文件头标签”——“Meta”或工具栏按钮设置网页头部信息。 2、掌握设置页面标题、网页关键词、网页字符编码和页面转场效果的方法。 主要讲述点： 1、在Dreamweaver文件管理面板中双击打开 “temp”站点中的“index.html”文件,进入设计视图开始编辑，分别设置页面标题、网页关键词、网页字符编码和页面转场效果。 2、首先设置页面标题。选择Dreamweaver菜单栏中“查看”——“文件头内容”，窗口中出现两个按钮，其中红色框标识的按钮表示设置标题。单击该按钮，在“标题”文本框中输入“DESIGN GOODS”，保存浏览，在IE浏览器标题栏中将显示页面标题：“DESIGN GOODS”。 3、其次设置网页关键词。关键词是为搜索引擎设置的，目的为了提高在搜索引擎中被搜索到的概率，因此可以设置多个与网页主题相关的关键词以便搜索。关键词在浏览器中不会显示，输入时各个关键词之间需用逗号隔开。选择Dreamweaver菜单栏中“插入”——“HTML”——“文件头标签”——“Meta”。在“Meta”对话框的“值”文本框中输入：“keywords”，在“内容”文本框中输入：“商品,厨房用品,礼品,手机,电脑”。或者选择Dreamweaver菜单栏中“插入”——“HTML”——“文件头标签”——“关键字”，在“关键字”文本框中输入：“商品,厨房用品,礼品,手机,电脑”。以上均可完成网页关键词的设置。 4、设置网页字符编码。对于不同的字符编码，如果用户的浏览器不能显示该字符，则会显示乱码。这也是页面制作常见的问题，因此需要首先定义页面的字符编码，以便浏览器用相应的字符编码显示页面。选择Dreamweaver菜单栏中“插入记录”——“HTML”——“文件头标签”——“Meta”，在“Meta”对话框的“属性”下拉列表中选择“HTTP-equivalent”，在“值”文本框中输入： “Content-Type”，在“内容”文本框中输入：“text/html; charset=gb2312”。 说明：Gb2312:简体中文；BIG5：繁体中文；ISO8859-1：英文；UTF-8：国际通用字符编码 5、页面转场效果。选择Dreamweaver菜单栏中“插入”——“HTML”——“文件头标签”——“Meta”，在“Meta”对话框的“属性”下拉列表中选择“HTTP-equivalent”，在“值”文本框中输入： “Enter”，在“内容”文本框中输入：“RevealTrans(Duration=1.000,Transition=23)”。 再次选择Dreamweaver菜单栏中“插入”——“HTML”——“文件头标签”——“Meta”，在“Meta”对话框的“属性”下拉列表中选择“HTTP-equivalent”，在“值”文本框中输入： “Exit”，在“内容”文本框中输入： “RevealTrans(Duration=1.000,Transition=23)”。 保存后按F12键启动浏览器预览即可。 说明：“值”文本框中输入的“Enter”、“Exit”分别表示打开网页和关闭网页。Duration表示设置转场时间,Transition表示转场效果，共24种过渡方式，如表3-6-1所示： 转场特效编号