陕西 信息技术 五下 教学设计 第九课 制作图片网页.docxVIP

教学设计

学科信息技术年级五年级执教

课题

第九课制作图片网页

课型

新授课

课时

1课时

初备

2023年4月16日

复备

年月日

教学

目标

知识与技能：用表格制作图片网页，并能为图片设置自动缩略图。

过程与方法：掌握为图片设置自动缩略图的方法。

情感态度与价值观：培养学生欣赏并制作图片网站的能力。

重点

利用表格制作具有自动缩略图功能的图片网页。

难点

为什么要给图片设罟自动缩略图。让学生清楚制作自动缩略图不但可以让图片网页上内容不会太拥挤，更重要的是能加快打开网页的速度，让浏览时更方便。

教法

讲授法演示法任务驱动法

学法

合作探索

教学

资源

课件

教学过程

设计意图

一、创设情境

图片网站是互联网上常见的一种专题网站。它具有图片集中、视觉感染力强、分类详细、查找方便、色彩丰富等特点，所以很受大家喜爱。这类网页为了便于查找与浏览，排列一般比较整齐，很适合用表格网页的形式来呈现。

但有很多图片的网页会打开很慢，看的人可能没等到网页打开就放弃了这次浏览,有没有什么好办法能让大家快速看到网页内容呢?当然有，那就是给图片网页设置自动缩略图，有了它，图片网页的打开速度会大大提高。

下面我们就一起来制作具有自动缩略图功能的动画网页。

二、探究体验

1.插入水平线。

在标题下加入一条水平线与图片网页分开，方便浏览。

操作步骤：新建空白网页，给该页面加上标题，再选择[插入/水平线]。

双击水平线，在水平线属性对话框中设置宽度、高度、颜色。

缩略图可以使图片网页的打开速度大大提高

教学过程

设计意图

2.绘制表格页面，添加图片和文字。

（1）将光标放在下一行的起始位置，在网页中插入一个7行4列的表格布局页面（表格—插入—表格）。

（2）添加图片和文字（插入—图片—来自文件—选择合适的图片—调整图片大小）。

注意：制作图片网页时，如果在图片后面直接按“Enter”键转入下一行，FrontPage会自动插入一个段落，致使图和文字的距离很大，影响美观。

正确的方法应该是在图的最后按“Shift+Enter”组合键,这样会自动插入一行，图和文字之间的距离可以比较小。同样的，在输入多行文字时，如果希望排列得紧密些，也可以采用这种换行方法。

3.给图片设置自动缩略图。

浏览网页时，如果图片太大，会影响打开的速度，也浪费网页版面，我们可以将这些图片设置为缩略图。想看清图片时，只要单击小图，图片就会以原来的实际大小展示。

下面就为我们上面的图片网页设置自动缩略图。

教学过程

设计意图

操作步骤：首先选中要设置自动缩略图的图片，然后单击鼠标右键，在弹出的菜单上选择“自动缩略图”选项，图片会自动缩小，成为缩略图格式。

4.查看效果。

将页面保存后，在浏览器中浏览其效果，或单击FrontPage的“预览”查看。浏览图片时，当鼠标指针移动到缩略图上，指针会变为“手”的形状，单击鼠标就可以看到，打开的图片以原来的尺寸大小显示。

分

层

作

业

设

计

基础作业:制作缩略图网页，在浏览器中浏览缩略图的原图。

拓展作业：

制作图片网页时，如果在图片后面直接按“Enter”键转入下一行，FrontPage会自动插入一个段落，致使图和文字的距离很大，影响美观。

正确的方法应该是在图的最后按“Shift+Enter”组合键,这样会自动插入一行，图和文字之间的距离可以比较小。同样的，在输入多行文字时，如果希望排列得紧密些，也可以采用这种换行方法。

板

书

设

计

第九课制作图片网页

1.插入水平线，设置水平线宽度、高度、颜色。

2.绘制表格页面，添加图片和文字。

3.给图片设置自动缩略图。

4.查看效果。