当前位置 :项目首页 > 研修作业 > 正文

《网页制作——图片设置》教学设计与反思

洪都中学 温志萍

一、设计思想：通过在网页中实践图片的妙用达到美化网页的目的，在制作文明上网的这个网站时也可培养同学们文明上网的好品德并具有一定的网络安全意识。

二、教材及学情分析

本节课是在学生已掌握 Word 字处理软件、上网查询和用 FrontPage 制作基本网页的基础上，针对学生对网页中的基本对象有所了解的情况下安排的，主要是为了让学生运用以前在 Word 中学习过的相关技能，来完成新知的意义建构，即把文字、图片等对象合理地运用到网页制作当中，达到美化网页的目的。

三、教学目标

知识和技能目标：

1、掌握网页图片使用的原则和技巧；

2、掌握网页中图片属性的设置；

3、会使用图片工具栏对图片进行设置；

4、了解文明上网和网络安全的相关知识。

过程和方法目标：

1、培养学生自学、合作学习和动手能力。

2、学生通过亲身经历，提高分析和解决实际问题的能力。

情感和态度目标：

1、激发学生勇于实践，敢于创新的思想，培养学生欣赏美创造美的能力 。

2、形成和保持对信息技术的求知欲，感受探索与创造的乐趣。

3、培养学生的文明上网和网络安全的意识。

四、教学重点、难点

1、教学重点：网页中图片设置；

2、教学难点：图片应用的原则和技巧

五、教学方法设计

为了避免枯燥的技能训练，利于学生循序渐进地学习信息技术的知识和技能，让学生在学习任务中自学、尝试操作、主动探究。教师在整个过程中起到组织、引导、协调、控制、咨询的作用。

六、学法指导

《基础教育课程改革指导纲要》把“以学生发展为本”作为新课程的基本理念，提出“改变过于强调接受学习、死记硬背、机械训练的现状，倡导学生主动参与、乐于研究、勤于动手”。基于这一理念，将学生的学法设计为自主与合作学习。学生在学会基础知识的基础上，能够进行知识迁移，而不是只会老师布置的具体任务。另外，针对不同层次的学生，运用分层教学，让不同层次的学生在本课中都最大所收获。

七、课前准备

1、素材准备:将实习素材按要求分类的存放在指定的文件夹中，让学生自己下载或发放给学生。

2、服务器上开辟一个目录空间供学生下载素材及上传网页。

3、将学案和帮助文件提供给学生，让不同层次的学生自主使用。

八、教学过程

【新课教学】

〖导学一〗案例分析，问题导学

问题：浏览两个网页，试分析两个网页有何不同，你更喜欢哪一个，为什么？

学生回答，老师小结。

此时同学们已经跃跃欲试了，现在就让同学们用五分钟左右的时间，尝试着插入一些图片，美化自己的网页。利用同学们尝试着学习出现的问题，引起同学们的学习兴趣。

实践园地——【牛刀小试】

教师-介绍此次网页制作的四个部分：青少年网络文明公约、网络道德、网络素养、网络安全（德育渗透-网络文明和网络安全），学生以小组为单位，四人一组可从中任选一个内容完成网页制作，学生们可上网查找这些方面的相关资料，也可查阅老师所给的学案中的内容。

学生-用Frontpage2003打开“桌面\students”网站（从“青少年网络文明公约、网络道德、网络素养、网络安全”四个方面任选一个为主题），对其进行编辑：在网页中适当位置分别插入文字和图片，并对图片进行设置，以达到美化网页的作用。（到这学生只是将文字和图片插入了网页中，但字体和图片还有点乱）

现在，我们一起来分析部分同学图片设置中出现的问题，以及学习解决这些问题的方法。

〖导学二〗网页图片处理基本操作

1、调整图片的大小

图片缩放：移动光标到图片上单击鼠标左键选取，使图片四周出现8个小控制点，将光标移到一个控制点上，依照箭头方向按住鼠标左键并拖曳鼠标，调整图片的大小，此方式属于粗调。

细调做法：在图片上单击鼠标右键弹出快捷菜单，选择“图片属性”选项，弹出“图片属性”对话框，切换到“外观”标签页，直接在“大小”框架中按“宽度”和“高度”的上下按钮调整图形大小。图：略

2、 文字与图片对齐

     有时在文件中插入图片后，发现文字和图片在排列上显得不够“和谐”，如图所示，这时可以通过FrontPage的“对齐方式”，将文字和图片的搭配调到最适当。如图：略

3、设置透明颜色

在图库中载入一个图片，插入网页中，但若图片的底色和网页的背景色不一样，这时可以使用“图片”工具栏上的 设置透明色按钮，把图片的背景色去除变成透明。

（1）要将图所示图片的灰底色去掉，先用光标选取待处理的图片。

（2）点取 按钮，然后在图片的背景图上点一下，图片的背景色就会消失。如图：略

4、建立缩略图－－降低网页下载时间

（1）选取要制作自动缩略图的图片。

（2）按下 自动缩略图按钮，所选取的图片自动缩小，还可以点击图片的小控制点拖曳鼠标改变图片的大小。

（3）浏览时，在缩小图上单击会出现原图：如图：略

实践园地—— 【开天辟地】

1、对图片：设置左对齐，大小为：宽度200像素，高度130像素或自己缩放到合适大小。

2、对图片：设置右对齐，缩放到合适大小后，将图片中白色部分设置为透明效果。

3、对图片设置成缩略图的效果。

〖导学三〗网页图片处理综合实践与提高 

1、裁剪图片－－将图片不要的部分剪掉

按下剪裁图片 按钮，图片内出现剪裁框，控制剪裁框以调整剪裁区域的大小。如：将下图中“淮安新闻网｜新闻中心”内容裁剪掉。图略

2、在图片上面加文字

    （1）选取图片，此时供选取的图片四周出现8个小控制点。

（2）单击“图片”工具栏的文本按钮 ，在图片处会出现一个文本框，将文字键入文本框中再将鼠标移到文本框处单击即完成。如图：略

3、替换图片或文字

当图片太大，下载速度很慢，可使用一个分辨率较低的图片代替；而当图片不能被浏览器正常显示时，可以使用一些说明性文字。

师：示范操作方法。

实践园地——【九天揽月】

刚才我们一起学习关于图片设置的十八般武艺，并且也进行过部分的单打独斗，现在将综合运用图片设置的方法，将提供给同学们的素材合理选择运用到网页中，并将同组的四个同学的网页汇聚到一起用超级链接把它们链接起来形成一个完整的网站，并请相邻组的同学来欣赏，看看有什么不足需要改进。

学习资料使用方法：

同学们在学习图片设置中，有基础的同学，可以利用《学案》第一部分“实践园地”的要求进行操作，用图像美化网页，看谁的网页处理得最好，最有个性。

对于没有基础的同学，要结合《学案》第二部分“帮助中心”，对网页进行美化，逐步积累经验，以达到运用自如程度。

【课堂小结】

1、本课主要学习了网页图片设置的两大方面，一个是图片属性的常规和外观设置，另一个方面是图片工具栏的应用。

2、网页中的图像使用原则

在网页中，文字与图片的比例要适当，文字太多，会使网站的吸引力减小；图片太多，又会使页面的浏览速度下降。另外，要用较小的图片文件。

3、我们今天学习的是用Frontpage2003来处理图片的，这个功能其实不够强大，要想把网页做得更加精美，还得用Photoshop, Fireworks等图像处理软件。

4、我们了解了许多有关网络文明和网络安全等方面的知识。

【交流评价】——学生自我评价表

【交流成果，提交作业】

    学生之间交流作品，并适当改进；

通过极域电子教室提交作业和自我评价表。