使用图片修饰网页.doc

《使用图片修饰网页.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第二十五课使用图片修饰网页一、教学目标知识方面：1．使学生掌握在网页中插入图片的方法。2．使学生掌握设置网页背景的方法。3．使学生初步了解网页图片文件。技能方面：1．培养学生处理图片的能力。2．培养学生的观察能力。情感方面：1．培养学生审美能力。2．培养学生合作学习的意识和能力。二、教学重点在网页中插入图片的方法。三、教学难点如何在网页上插入图片。四、教学方法1．演示法。2．实践法。3．自学法。五、教学手段与教学媒体多媒体网络教室。六、课时安排1课时。七、教学过程(见下表)一、导入课题教师展示学生制作的网页(上节课的作业)，提出怎样美化网页的问题。由此引入课题。二、新课

2、教师介绍：网页一般支持两种图片文件格式，即GIF格式和JPG格式。其中，JPG格式是一种应用较广泛的压缩格式，它的最大特点是文件较短小；GIF格式既可以是普通的图片，也可以是一些小动画、图标。由于网络速度等原因，在网页中插入的图片文件不宜过大。学生欣赏同学制作的网页，考虑教师提出的问题。学生听教师介绍。学生明确本课学习任务。学生了解网页中图片文件的基本格式和选择图片文件不要太大的原因。41．插入图片例1在index.html网页中添加动画图片。教师讲解和演示操作步骤：(1)打开index.html文件；(2)将插入光标移动到需要插入图片的位置；(3)单击工具栏中的插入图

3、片按钮，打开“图片”对话框；(4)单击对话框中的选择图片文件按钮，打开“选择文件”对话框；(5)选择需要插入的图片文件，单击“确定”按钮；(6)单击工具栏中的“保存”按钮，选择文件保存的位置；(7)单击“确定”按钮。教师提示：如果插入图片的大小和位置不合适，可以适当地进行调整。调整方法和Word中图片的调整方法相同。学生观察教师操作。学生听教师介绍。学生了解在网页中插入图片的基本方法。学生明确在网页中调整图片大小和位置的方法与Word相同。续表教师布置任务：在自己的网页中添加图片，并进行适当调整和修饰。2．设置网页背景例2将jieshao.htm网页的背景设置为自己喜欢

4、的颜色。教师讲解和演示操作步骤：(1)打开网页文件jieshao.htm；(2)在网页编辑区单击鼠标右键，打开快捷菜单；(3)单击快捷菜单中的“网页属性”命令，打开“网页属性”对话框；(4)单击对话框中的“背景”标签；(5)在“背景颜色”学生上机实践，在网页中插入图片。学生观察教师操作。学生可以完成在网页中添加图片的任务。学生了解在网页中插入背景颜色的方法。4下拉列表框中选择一种颜色；(6)单击“确定”按钮。教师布置任务：给jieshao.htm网页设置背景颜色。例3给index.html网页添加背景图片。教师布置任务：自学给网页添加背景图片的方法，完成例3。教师指定学

5、生讲解并演示操作方法：(1)在index.html网页编辑区单击鼠标右键，打开快捷菜单；学生上机实践，给网页设置背景颜色。学生上机实践，自学给网页添加背景图片的方法。学生演示给网页添加背景图片的方法。学生可以完成任务。学生学习了插入图片和设置网页背景颜色的知识，通过思考和实践，学生可以掌握给网页添加背景图片的方法并完成例3。通过学生演示，纠正学生操作中的错误，使全体学生进一步掌握给网页添加背景图片的方法。续表(2)单击快捷菜单中的“网页属性”命令，打开网页属性对话框；(3)单击对话框中的“背景”标签；(4)单击选择对话框中的“背景图片”选项；(5)单击“浏览”按钮，打开

6、“选择背景图片”对话框；(6)选择一张合适的背景图片；(7)单击“确定”按钮。三、课堂练习给自己的网页插入图片并设置背景图片。四、课堂小结师生共同小结所学知识，强调在网页中插入图片、背景的方法与Word大致相同。五、布置作业使用图片修饰自己的网页。学生进行课堂练习。学生参加小结。学生可以完成课堂练习。复习巩固所学知识，建立新旧知识的联系。培养学生的审美能力。八、板书第二十五课使用图片修饰网页一、插入图片4单击“插入图片”→选择图片→单击“确定”→单击“保存”→选择图片保存位置→单击“保存”。二、设置网页背景1．设置背景颜色使用快捷菜单→单击“网页属性”→单击“背景”→选

7、择颜色→单击“确定”。2．设置背景图片使用快捷菜单→单击“网页属性”→单击“背景”→单击“背景图片”→选择图片→单击“确定”。4