网页图片处理教案20

课题网页图片处理

课标考点一、掌握网页中的图文布局；

二、掌握网页中图片定位和图层；

三、掌握网页中图片的透明处理和使用图片自动缩略。

教学重点

与难点

图文布局、图片定位

课型、方

法、手段

新授/任务驱动法/电教、教学软件

学法点拨演示、任务驱动、问题解决探究相关知识点

教学过程补充与调整导入

在网页设计中，大多追求图文并茂的效果，但有时因

为图片的大小与文字不一致，使网页看起来不协调，此时

可以改变图文的位置关系，使网页看起来更美观。

演示

一、图文的布局

将指针指向图片并右击，单击快捷菜单中的“图片属

性”命令，弹出“图片属性”对话框，单击“外观”标签，

即可改变图片和文字的布局，如图1所示。

图3-1

在“对齐方式”列表框中，列出了十种图文对齐方式，

可以根据需要，选择其中的一种。

任务一: 在“huanbao”网站中，建立一个新网页，

导入现成的文本文件questions.txt，在其中插入两幅图片，

设置图文并列的方式，其中图片questions.gif采用左对齐

方式，与各小标题并列起来；图片water.gif采用右对齐

方式，放置在“水污染”标题下，如图2所示，将网页保

存为questions.htm。

图2

操作步骤：

单击图片工具栏的“设置透明颜色”按钮，将指针指向该图片中白色背景处单击，即可产生背景透明的效果。

四、图片的自动缩略

设计网页时，为了加快网页的下载速度，可以使用自动缩略图功能，它的作用是将图片缩小，当访问者浏览网页时，看到的是小图，如果要进一步细看此图片，单击一下小图，就可以看到原图大小的图片了。

操作步骤：先选定图片，然后单击图片工具栏“自动缩略图”按钮即可。当然，还可以进一步定义缩略图的外观，方法是：单击“工具（T）”菜单中的“网页选项（A）”命令，打开如图3-3所示的“网页选项”对话框，单击“自动缩略图”标签，修改其中的参数，即可改变图片的外观。

图3-3

任务四：将questions.htm网页中water.gif图片制作成自动缩略图。

操作步骤：

①单击water.gif图片，单击图片工具栏“自动缩略图”按钮。

②单击“工具（T）”菜单中的“网页选项（A）”命令，打开“网页选项”对话框，单击“自动缩略图”标签，再选中“边缘凹凸效果（V）”命令，单击“确定”按钮即可。

作业设计：FTP://192.168.4.4/电教处/第二学期教学案

教学后记：