网页制作图片处理PPT课件

1、江苏省淮州中学信息技术备课组【情景导入情景导入】在在“五五一一”节小长假期间，有不少同学出去旅游了吧，旅游虽然辛苦，但是却能节小长假期间，有不少同学出去旅游了吧，旅游虽然辛苦，但是却能给人带来不少好处。这是旅游的魅力所在，并令人向往。给人带来不少好处。这是旅游的魅力所在，并令人向往。 对于在对于在“五五一一”期间没有能够出去游玩的同学来说不免觉得有些遗憾了，不过没期间没有能够出去游玩的同学来说不免觉得有些遗憾了，不过没有关系，我带大家到我们淮安当地的一个景点看看，同学们会发现我们的家乡原有关系，我带大家到我们淮安当地的一个景点看看，同学们会发现我们的家乡原来是这样的美！来是这样的美！ 思考：同

2、学们对比一下，哪一个网页能引人入胜，让你更好地向往这个地方，为思考：同学们对比一下，哪一个网页能引人入胜，让你更好地向往这个地方，为什么？什么？ （附：（附：第一个网页第一个网页 第二个网页第二个网页）在网页中，若能适时地插入一些景点图片或是将某些文字叙述改为图片来表示，在网页中，若能适时地插入一些景点图片或是将某些文字叙述改为图片来表示，不但使得该网页一目了然，而且生动活泼。这一节课，我们就来学习在网页中不但使得该网页一目了然，而且生动活泼。这一节课，我们就来学习在网页中如何使用和设置图片对象。如何使用和设置图片对象。第1页/共15页江苏省淮州中学信息技术备课组导学一导学一案例分析，问题导学

3、案例分析，问题导学 刚才同学们已经浏览了两个网页，知道了图片在网页制作中所起的美化作刚才同学们已经浏览了两个网页，知道了图片在网页制作中所起的美化作用，不少同学跃跃欲试了吧，现在就让同学们用五分钟左右的时间，尝试着插用，不少同学跃跃欲试了吧，现在就让同学们用五分钟左右的时间，尝试着插入一些图片，美化自己的网页。入一些图片，美化自己的网页。 现在，我们一起来分析部分同学图片设置中出现的问题，以及学习解决这现在，我们一起来分析部分同学图片设置中出现的问题，以及学习解决这些问题的方法。些问题的方法。实践园地实践园地【牛刀小试牛刀小试】用用Frontpage2000打开打开“students/inde

4、x.htm”文件，对其进行编辑：文件，对其进行编辑： 在网页中适当位置分别插入图片在网页中适当位置分别插入图片sucai/liushuwan.jpg ，sucai/liushu2.jpg , sucai/fuqiao1.jpg, sucai/fuqiao2.jpg，并对图片进行设置，以达到美化网，并对图片进行设置，以达到美化网页的作用。页的作用。第2页/共15页江苏省淮州中学信息技术备课组1. 调整图片的大小调整图片的大小图片缩放图片缩放：移动光标到图片上单击鼠标左键选取，使图片四周出现：移动光标到图片上单击鼠标左键选取，使图片四周出现8个小控制个小控制点，将光标移到一个控制点上，依照箭头方向

5、按住鼠标左键并拖曳鼠标，调点，将光标移到一个控制点上，依照箭头方向按住鼠标左键并拖曳鼠标，调整图片的大小，此方式属于粗调。整图片的大小，此方式属于粗调。细调做法细调做法：在图片上单击鼠标右键弹出快捷菜单，选择：在图片上单击鼠标右键弹出快捷菜单，选择“图片属性图片属性”选项，选项，弹出弹出“图片属性图片属性”对话框，切换到对话框，切换到“外观外观”标签页，直接在标签页，直接在“大小大小”框架中框架中按按“宽度宽度”和和“高度高度”的上下按钮调整图形大小。的上下按钮调整图形大小。导学二导学二网页图片处理基本操作网页图片处理基本操作第3页/共15页江苏省淮州中学信息技术备课组导学二导学二网页图片处理

6、基本操作网页图片处理基本操作 2. 文字与图片对齐文字与图片对齐 有时在文件中插入图片后，发现文字和图片在排列上显得不够有时在文件中插入图片后，发现文字和图片在排列上显得不够“和谐和谐”，如图，如图所示，这时可以通过所示，这时可以通过FrontPage的的“对齐方式对齐方式”，将文字和图片的搭配调到最适当。，将文字和图片的搭配调到最适当。第4页/共15页江苏省淮州中学信息技术备课组导学二导学二网页图片处理基本操作网页图片处理基本操作3. 设置透明颜色在图库中载入一个图片，插入网页中，但若图片的底色和网页的背景色不一样，这时可以使用“图片”工具栏上的 设置透明色按钮，把图片的背景色去除变成透明。

7、（1）要将图所示图片的灰底色去掉，先用光标选取待处理的图片。（2）点取 按钮，然后在图片的背景图上点一下，图片的背景色就会消失。第5页/共15页江苏省淮州中学信息技术备课组导学二导学二网页图片处理基本操作网页图片处理基本操作4. 建立缩略图降低网页下载时间（1）选取要制作自动缩略图的图片。（2）按下 自动缩略图按钮，所选取的图片自动缩小，还可以点击图片的小控制点拖曳鼠标改变图片的大小。（3）浏览时，在缩小图上单击会出现原图第6页/共15页江苏省淮州中学信息技术备课组实践园地实践园地 【开天辟地开天辟地】1.对图片：sucai/liushuwan.jpg设置左对齐，大小为：宽度200像素，高度1

8、30像素；或自己缩放到合适大小。2.对图片：sucai/liushu2.jpg设置右对齐，缩放到合适大小后，将图片中白色部分设置为透明效果。3.对图片sucai/fuqiao1.jpg, sucai/fuqiao2.jpg设置成缩略图的效果。第7页/共15页江苏省淮州中学信息技术备课组导学三导学三网页图片处理综合实践与提高网页图片处理综合实践与提高1. 裁剪图片将图片不要的部分剪掉按下 剪裁图片按钮，图片内出现剪裁框，控制剪裁框以调整剪裁区域的大小。如：将下图中“淮安新闻网新闻中心”内容裁剪掉。第8页/共15页江苏省淮州中学信息技术备课组导学三导学三网页图片处理综合实践与提高网页图片处理综合实

9、践与提高2. 2. 图片绝对定位、图片冲蚀效果设置和层的操作图片绝对定位、图片冲蚀效果设置和层的操作 绝对绝对定位定位冲蚀效果冲蚀效果层层第9页/共15页江苏省淮州中学信息技术备课组导学三导学三网页图片处理综合实践与提高网页图片处理综合实践与提高3. 在图片上面加文字（1）选取图片，此时供选取的图片四周出现8个小控制点。（2）单击“图片”工具栏的文本按钮 ，在图片处会出现一个文本框，将文字键入文本框中再将鼠标移到文本框处单击即完成。4. 替换图片或文字 当图片太大，下载速度很慢，可使用一个分辨率较低的图片代替；而当图片不能被浏览器正常显示时，可以使用一些说明性文字。第10页/共15页江苏省淮州

10、中学信息技术备课组实践园地实践园地【九天揽月九天揽月】 刚才我们一起学习关于图片设置的十八般武艺，并且也进行过部分的单打独刚才我们一起学习关于图片设置的十八般武艺，并且也进行过部分的单打独斗，现在将综合运用图片设置的方法，将提供给同学们的素材合理选择运用到网斗，现在将综合运用图片设置的方法，将提供给同学们的素材合理选择运用到网页中，请相邻的同学来欣赏，看看不什么不足需要改进。页中，请相邻的同学来欣赏，看看不什么不足需要改进。学习资料使用方法：学习资料使用方法： 同学们在学习图片设置中，有基础的同学，可以利用同学们在学习图片设置中，有基础的同学，可以利用学案学案第一部分第一部分“实实践园地践园地

11、”的要求进行操作，用图像美化网页，看谁的网页处理得最好，最有个性。的要求进行操作，用图像美化网页，看谁的网页处理得最好，最有个性。 对于没有基础的同学，要结合对于没有基础的同学，要结合学案学案第二部分第二部分“帮助中心帮助中心”，对网页进行，对网页进行美化，逐步积累经验，以达到运用自如程度。美化，逐步积累经验，以达到运用自如程度。1.利用裁剪功能，对图片进行适当裁剪，去掉不需要的部分。（如：插入利用裁剪功能，对图片进行适当裁剪，去掉不需要的部分。（如：插入“淮安淮安网网”图片，进行适当裁剪操作。）图片，进行适当裁剪操作。）2.利用图片绝对定位、图片冲蚀效果设置和层的操作，设置部分段落的背景效果

12、。利用图片绝对定位、图片冲蚀效果设置和层的操作，设置部分段落的背景效果。3.利用图片工具栏中的文本按钮，将图片上添加文字介绍；利用图片属性中替代利用图片工具栏中的文本按钮，将图片上添加文字介绍；利用图片属性中替代表示，将图片设置为鼠标在图片上悬停时会显示文字效果。表示，将图片设置为鼠标在图片上悬停时会显示文字效果。 4.自主探究与学习，以达到利用图片美化网页的效果。自主探究与学习，以达到利用图片美化网页的效果。第11页/共15页江苏省淮州中学信息技术备课组【课堂小结课堂小结】1. 本课主要学习了网页图片设置的两大方面，一个是图片属性的常规和外观设置，本课主要学习了网页图片设置的两大方面，一个是图片属性的常规和外观设置，另一个方面是图片工具栏的应用。另一个方面是图片工具栏的应用。我们再来看一下：我们再来看一下：2. 网页中的图像使用原则网页中的图像使用原则 在网页中，文字与图片的比例要适当，文字太多，会使网站的吸引力减小；在网页中，文字与图片的比例要适当，文字太多，会使网站的吸引力减小；图片太多，又会使页面的浏览速度下降。另外，要用较小的图片文件。图片太多，又会使页面的浏览速度下降。另外，要用较小的图片文件。3.我们今天学习的是用我们今天学习的是用Frontpage2000来处理图片的，这个功能其实不够强大，来处理图片的，这个功能其实不够强大，要想把网页做得更加精