5_网站创建与网页制作

课题序号6教学班级1016教学课时4教学形式新授课题名称任务四图像的操作使用教具PPT课件学案教学目的1.能够根据页面显示效果在适当位置插入图像元素。2.能够对图像进行必要的修饰来美化页面的显示效果。3.熟练运用Dreamweaver设置网页标题和网页背景4.掌握图像超链接设置教学重点1.掌握图像的插入方法。2.掌握图像的设置与修饰方法。3.掌握图像对象的插入与设置。4.掌握图像与文本混合编排的方法。5.掌握与图像相关联的各种链接状态。6.掌握制作图像导航条方法。7.了解网页中与图像技术相关的特效处理技术。教学难点1.掌握图像的设置与修饰方法。2.掌握图像对象的插入与设置。3.掌握图像与文本混合编排的方法。4.掌握与图像相关联的各种链接状态5.掌握制作图像导航条方法。更新补充课前准备教案、学案、课件课外作业完成任务2.2.1图像的插入与设置板书设计任务四图像的操作1.掌握图像的插入方法。2.掌握图像的设置与修饰方法。3.掌握图像对象的插入与设置。4.掌握图像与文本混合编排的方法。5.掌握与图像相关联的各种链接状态。6.掌握制作图像导航条方法。7.了解网页中与图像技术相关的特效处理技术。教学感想课堂教学安排教学环节主要教学内容教学手段与方式复习导入新授I、复习导入展示上节课学生的作业，复习知识点II、新授一、图像的插入与设置1.出示本节课任务：《国兰文化》页面制作主要步骤：（1）打开站点“兰苑”。（2）在本地站点中打开网页文件lan.html,把文件另存为lantu.html.(3)在“属性”面板上选择“页面属性”，选择“外观”选项，单击“背景图像”后的“浏览”按钮。选择背景图像image/bg.jpg.(4)将光标置于页面正文起始处，选择“插入记录-图像对象-导航条”命令，在首行插入导航条。（5）表格外框选中该表格，在下方的表格“属性”面板将其对齐方式设置为“居中对齐”，填充为2.（6）将光标置于水平线下方起始处，选择“插入记录-图像对象-鼠标经过图像”对话框，设置相关信息。（7）单击“确定”按钮后，图片lan02.jpg插入到页面指定位置，而图片lan01.jpg则需预览网页时鼠标经过的第一张图片时才能显示出来。（8）单击图片lan02.jpg,在“属性”面板将其对齐方式设置为左对齐，大小为140px*200px，垂直边距为5，水平边距为12.（9）从右侧的“文件”面板中的\image子目录中找到图片文件lan01.jpg,选中图片并将其拖到文档窗口中正文项目列表“闻香”展示出示任务，初步感知网页中图像的编辑。教师演示操作分组讨论自主学习学生操作教学环节主要教学内容教学手段与方式下方的起始处，设置图片：宽为120px*160px，替换文本“盆兰-朵香素心春兰”。边框为3，右对齐。水平边距为5.（10）将光标置于页面最底部的链接“回到顶部”前，插入图片flag.gif,在属性面板中设置其大小为400*60px，替换文本“兰香四溢”，边框为5，绝对居中，水平边距为250.选择图片“属性”面板上的“矩形热点工具”，在图片flag.gif上划出矩形区域，在下方的“链接”文本框内输入“lan.html#lan2”.(11)按F12键预览效果。二、.问题探究-----认识图像1.认识图像GIF图像JPEG图像PNG图像2.插入图像使用“插入“菜单；使用“插入”快捷栏；使用面板组“资源”面板。注意：文件名要用英文名或用拼音文字命名，不能用中文，否则预览页面时特别是背景图片根本无法显示。3.图像属性给图像命名改变图像大小改换图像图像超链接给图像加上替代文本为图像定义样式调用Fireworks编辑图像讲授小组讨论教学环节主要教学内容教学手段与方式设置图像边距设置图像超链接的目标窗口设置低分辨率图像增加图像边框对齐图像4.其他图像元素a.图像占位符b.鼠标经过图像命令c.鼠标经过图像行为d.导航条完成任务：思考：制作导航条的前提条件是什么？三、知识拓展---图像超链接1.建立图像超链接方法：插入图像后在图像属性栏找到链接，输入链接文件的地址或点击指向文件。任务：2.制作图像映射方法：在图片上选择热点选框工具选择映射的区域，在热点区域属性面板中设置链接的指向文件。任务：将光标置于页面最底部的链接“回到顶部”前，插入图片flag.gif,在属性面板中设置其大小为400*60px，替换文本“兰香四溢”，边框学生操作教师巡视辅导学生小组讨论自主练习，总结探讨。教学环节主要教学内容教学手段与方式为5，绝对居中，水平边距为250.选择图片“属性”面板上的“矩形热点工具”，在图片flag.gif上划出矩形区域，在下方的“链接”文本框内输入“lan.html#lan2”.思考：图像映射与图像超链接的区别。III课堂总结文本和图像时网页元素中作重要的两个元素，美观的网页是图文并茂的。文本的效果对网页的整体效果影响较大，配合图片的恰当运用，使简单平白的页面氛围IV课后作业P582.4上机练习操作（1）（2）