《2022年《网页制作》教学案 .pdf》由会员分享，可在线阅读，更多相关《2022年《网页制作》教学案 .pdf（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、4.3.2 网页制作图片设置教学案江苏省淮州中学电教中心陈建勇一、教学目标知识和技能目标：1、掌握网页图片使用的原则和技巧；2、掌握网页中图片属性的设置；3、会使用图片工具栏对图片进行设置。过程和方法目标：1培养学生自学、合作学习和动手能力。2学生通过亲身经历，提高分析和解决实际问题的能力。情感和态度目标：1激发学生勇于实践，敢于创新的思想，培养学生欣赏美创造美的能力。2形成和保持对信息技术的求知欲，感受探索与创造的乐趣。二、教材内容分析Frontpage2000网页制作在网络技术选修教材中只有一章涉及，但会考时，这部分内容作为操作题，比重较大。由于课本对这些内容讲解比较少，因此，我们将对这部
2、分内容作详细介绍。计划用 4 课时学习，本节是第二课时，这节课的主要任务是使学生掌握用 FrontPage2000对网页图片进行合理、灵活地应用，美化自己的网页。三、教学重点、难点1教学重点：网页中图片设置；2.教学难点：图片应用的原则和技巧四、教学方法设计为了避免枯燥的技能训练，利于学生循序渐进地学习信息技术的知识和技能，让学生在学习任务中，自学、尝试操作、主动探究。教师在整个过程中起到组织、引导、协调、控制、咨询的作用。五、学法指导基础教育课程改革指导纲要把“以学生发展为本”作为新课程的基本理念，提出“改变过于强调接受学习、死记硬背、机械训练的现状，倡导学生主动参与、乐于研究、勤于动手”。
3、基于这一理念，将学生的学法设计为自主与合作学习。学生在学会基础知识的基础上，能够进行知识迁移，而不是只会老师布置的具体任务。另外，针对不同层次的学生，运用分层教学，让不同层次的学生在本课中都最大所收获。六、课前准备1素材准备将实习素材按要求分类的存放在指定的文件夹中，让学生自己下载或发放给学生。2开辟 FTP空间供学生下载素材及上传网页。3将学案和帮助文件提供给学生，让不同层次的学生自主使用。七、教学过程【情景导入】在“五一”节小长假期间，有不少同学出去旅游了吧，旅游虽然辛苦，但是却能给人带来不少好处。这是旅游的魅力所在，并令人向往。第一个好处是：缓解工作、学习的压力，使精神得到彻底放松！第二
4、个好处是：给人带来无穷的快乐和幸福！第三个好处是：开阔眼界，增长知识和见名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 6 页 -闻！第四个好处是：广交朋友！最后，大家会增强对美好生活的憧憬与向往：世界无限美好！不要辜负生活！对于在“五一”期间在家刻苦学习而没有能够出去游玩的同学来说不免觉得有些遗憾了，不过没有关系，我带大家到我们淮安当地的一个景点看看，同学们会发现我们的家乡原来是这样的美，我们以后要更好地关注家乡的变化，为家乡的建设作出自己应有的贡献！（老师展示两个网页）老师提问：同学们对比一下，哪一个网页能引人入胜，让你更好地向往这个地方，为什么？学生回答：当然是图文并茂的网
5、页了。老师讲解：同学们回答非常正确。在网页中，若能适时地插入一些景点图片或是将某些文字叙述改为图片来表示，不但使得该网页一目了然，而且生动活泼。这一节课，我们就来学习在网页中如何使用和设置图片对象。【新课教学】导学一案例分析，问题导学问题：浏览两个网页，试分析两个网页有何不同，你更喜欢哪一个，为什么？学生回答，老师小结。此时同学们已经跃跃欲试了，现在就让同学们用五分钟左右的时间，尝试着插入一些图片，美化自己的网页。利用同学们尝试着学习出现的问题，引起同学们的学习兴趣。实践园地【牛刀小试】用 Frontpage2000打开“students/index.htm”文件，对其进行编辑：在 网 页 中
6、 适 当 位 置 分 别 插 入 图 片sucai/liushuwan.jpg，sucai/liushu2.jpg,sucai/fuqiao1.jpg,sucai/fuqiao2.jpg，并对图片进行设置，以达到美化网页的作用。现在，我们一起来分析部分同学图片设置中出现的问题，以及学习解决这些问题的方法。导学二网页图片处理基本操作1.调整图片的大小图片缩放：移动光标到图片上单击鼠标左键选取，使图片四周出现8 个小控制点，将光标移到一个控制点上，依照箭头方向按住鼠标左键并拖曳鼠标，调整图片的大小，此方式属于粗调。细调做法：在图片上单击鼠标右键弹出快捷菜单，选择“图片属性”选项，弹出“图片属性”对
7、话框，切换到“外观”标签页，直接在“大小”框架中按“宽度”和“高度”的上下按钮调整图形大小。2.文字与图片对齐名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 6 页 -有时在文件中插入图片后，发现文字和图片在排列上显得不够“和谐”，如图所示，这时可以通过 FrontPage 的“对齐方式”，将文字和图片的搭配调到最适当。3.设置透明颜色在图库中载入一个图片，插入网页中，但若图片的底色和网页的背景色不一样，这时可以使用“图片”工具栏上的设置透明色按钮，把图片的背景色去除变成透明。（1）要将图所示图片的灰底色去掉，先用光标选取待处理的图片。（2）点取按钮，然后在图片的背景图上点一下，
8、图片的背景色就会消失。4.建立缩略图降低网页下载时间（1）选取要制作自动缩略图的图片。（2）按下自动缩略图按钮，所选取的图片自动缩小，还可以点击图片的小控制点拖曳鼠标改变图片的大小。（3）浏览时，在缩小图上单击会出现原图名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 6 页 -实践园地【开天辟地】1.对图片：sucai/liushuwan.jpg设置左对齐，大小为：宽度200 像素，高度130 像素；或自己缩放到合适大小。2.对图片：sucai/liushu2.jpg设置右对齐，缩放到合适大小后，将图片中白色部分设置为透明效果。3.对图片 sucai/fuqiao1.jpg,su
9、cai/fuqiao2.jpg设置成缩略图的效果。导学三网页图片处理综合实践与提高1.裁剪图片将图片不要的部分剪掉按下剪裁图片按钮，图片内出现剪裁框，控制剪裁框以调整剪裁区域的大小。如：将下图中“淮安新闻网新闻中心”内容裁剪掉。2.图片绝对定位、图片冲蚀效果设置和层的操作3.在图片上面加文字（1）选取图片，此时供选取的图片四周出现8 个小控制点。绝对冲蚀效果层名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 6 页 -（2）单击“图片”工具栏的文本按钮，在图片处会出现一个文本框，将文字键入文本框中再将鼠标移到文本框处单击即完成。4.替换图片或文字当图片太大，下载速度很慢，可使用一个
10、分辨率较低的图片代替；而当图片不能被浏览器正常显示时，可以使用一些说明性文字。师：示范操作方法。实践园地【九天揽月】刚才我们一起学习关于图片设置的十八般武艺，并且也进行过部分的单打独斗，现在将综合运用图片设置的方法，将提供给同学们的素材合理选择运用到网页中，请相邻的同学来欣赏，看看不什么不足需要改进。学习资料使用方法：1.利用裁剪功能，对图片进行适当裁剪，去掉不需要的部分。（如：插入“淮安网”图片，进行适当裁剪操作。）2.利用图片绝对定位、图片冲蚀效果设置和层的操作，设置部分段落的背景效果。3.利用图片工具栏中的文本按钮，将图片上添加文字介绍；利用图片属性中替代表示，将图片设置为鼠标在图片上悬
11、停时会显示文字效果。4.自主探究与学习，以达到利用图片美化网页的效果。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 6 页 -同学们在学习图片设置中，有基础的同学，可以利用学案第一部分“实践园地”的要求进行操作，用图像美化网页，看谁的网页处理得最好，最有个性。对于没有基础的同学，要结合学案第二部分“帮助中心”，对网页进行美化，逐步积累经验，以达到运用自如程度。【课堂小结】1.本课主要学习了网页图片设置的两大方面，一个是图片属性的常规和外观设置，另一个方面是图片工具栏的应用。我们再来看一下：2.网页中的图像使用原则在网页中，文字与图片的比例要适当，文字太多，会使网站的吸引力减小；图片太多，又会使页面的浏览速度下降。另外，要用较小的图片文件。3.我们今天学习的是用Frontpage2000来处理图片的，这个功能其实不够强大，要想把网页做得更加精美，还得用Photoshop,Fireworks等图像处理软件。【交流成果，提交作业】1.学生之间交流作品，并作适当改进；2.通过 FTP提交作业。名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 6 页 -