粤教版信息技术九年级上第四节制作栏目网页教学设计
课题
第四节 制作栏目网页
单元
第二单元
学科
信息技术
年级
九年级
学习
目标
知识目标：了解制作缩略图的制作方法，以及如何设置书签。
技能目标：熟练掌握用表格进行版面布局；理解掌握提供文件下载和网站链接。
情感目标：通过学习，激发互联网乐趣，更好为网络服务。
重点
熟练掌握用表格进行版面布局；
难点
理解掌握提供文件下载和网站链接。
教学过程
教学环节
教师活动
学生活动
设计意图
导入新课
完成首页的制作后，大家对一般的页面布局和元素添加已经不再陌生，对接下来的制作充满信心，并按照分エ各自忙开了。王纯为了使网站有统一的外观，各栏目页面与首页的版面设计有一些共同的部分，很想找一个快速的方法生成栏目页面，避免重复制作;张琳在制作“班级相册”时发现收集来的相片尺寸大小不ー，不容易摆放整齐，而且因为相片很多，使得页面很长，想返回导航栏又不方便…他们又有了需要探究的新问题了。今天我们来解决这个问题。
思考
激发学生学习兴趣并快速进入学习状态
讲授新课
问题：
1)如何快速生成版式相似的栏目网页?
(2)何把入的图片制作成统一的略图，并可点击查看原图?
(3)如何在浏长网页时轻松返回页面顶部?
(4)如何在网页中提供文件下载和跳转到其他网站的链接?
任务
观摩班级网站的“班级相册”“才艺展示”“快乐学习”等栏目网页，学习其制作方法，并制作自己网站的栏目网页。
一、用表格进行版面布局
交流：
观察班级网站各栏目的版面特点，说说制作时可以怎样划分版交流面，怎样才能更快捷地制作出各栏目网页。
为了使网站有一致的风格，即其他网页通常与首页在外观上有共同的部分，比如网站标题、导航条、版权信息等，把它们提取出来作为模板单独保存，制作其他网页时应用该模板就快捷多了。
方法如下：
(1)制作模板时，可以打开制作好的首页，把其中多余的网页元素去掉，然后另存为一个网页文件或模板类型的文件，如图所示。
(2)使用模板时，如果模板是以网页文件保存的，只要打开它，全选并复制网页内容到当前编辑的文件即可;如果是模板文件，则在新建网页模板样式清单中显示出来并供选择，如图所示。
交流：
在“班级相册”网页中(如图所示)。同学们的活动相片、以规格一致的缩略图分类摆放，点击还能放大，显得整齐美观，还可以随时返回页首位置。这些是怎么实现的呢?
二、制作缩略图
制作“班级相册”时，收集来的相片可能大小不ー，如果直接插入到网页中，会显得很凌乱。我们可首先通过表格把页面位置规划好，然后把所有相片处理成统一规格的缩略图插入单元格中。现在很多的网页工具都能帮你自动生成缩略图一一既能清楚地看到相片原貌，又能在单击缩略图时显示相应的原始相片，非常方便。
制作缩略图方法如图所示
交流：
李鸣在用表格规划网页时，把表格的宽度设为浏览器窗口的98％，在家里的电脑上浏览时页面非常整，但在学校的电脑里浏览时却发现文字和图片都乱了;回家再仔细观察，发现当把浏览器的窗口変小或改变显示器的分辨率设置时，页面也会变乱。他百思不得其解:在家时页面好好的，为什么到了学校就乱了呢?请你帮他找出问题所在。
设定表格的宽度有两种方式：一种是采用百分比，这种是表格占用整个屏幕的比例，屏幕大小改变，表格随着改变，所以屏幕不同，表格显示的也不同；另一种是采用像素，多少像素定了，无论屏幕的大小或者分辨率的大小怎样改变，表格的大小不变。如果按照像素固定表格的大小，就不会发生错乱了。
三、设置书签
“班级相册”内容多，页面较长，浏览时总是要拖动滚动条来前后查看内容，很麻烦。有没有一种方法可以实现在同一页面内不同位置的定位跳转呢?答案是肯定的，我们可以借助超链接中的“书签”功能来实现。
方法如图所示
交流：
在“快乐学习”栏目里的“休闲区”(如图所示)，它提供的软件下載链接很受同学们的欢迎，“收藏夹”中还能链接到其他网站，你知道是怎么出来的吗?
四、提供文件下载和网站链接
1.提供文件下载
一些网站提供软件下载超链接，点击它时会出现询问“保存文件”还是“打开文件”。这种文件下载服务可以通过设置超链接来实现，只是此时链接的目标对象不是网页文件而是下载的文件。
设置方法:鼠标选定超链接的文字，单击右键从快捷菜单中打开超链接设置窗口，找到文件所在文件夹，选定要链接的文件，如图所示
２.链接到其他网站
我们把超链接的目标网页默认在同一窗口打开，但有时候我们希望打开个新窗口来展示网页。“快乐学习”网页的“收藏夹”栏目中，提供到其他学习网站的链接时，就是以这种方式打开的。
设置方法:新建超链接，并在创建超链接窗口中，单击“目标框架”按钮，选择“新建窗口”，如图所示。
探究：
在链接其他网站时，输入带有http协议的完整地址称为绝对地址;而在链接本网其他网页时，只输入文件名和部分路径名的地址称为相对地址。两者在应用上有何不同?
绝对地址：互联网上的独立地址，在任何网站通过这个地址可以直接到达目标网页。包含主域名和目录地址。相对地址：相对于网站的地址，当域名改变时，相对地址的“绝对地址”也发生变化。
交流：
如果从链接目标来说，网站中常见的超链接如表所示。我们在创建班级网站的过程中，应用了多种的链接标，请找出相应的实例，并完成表格。
课堂练习：
1.制作模板时，可以打开制作好的首页，把其中多余的网页元素去掉，然后另存为一个( )文件或( )的文件。
2.我们可首先通过表格把页面位置规划好，然后把所有相片处理成统一规格的( )插入单元格中。
3.在同一页面内不同位置的定位跳转, 我们可以借助超链接中的( )功能来实现。
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生动手实践操作，学生小组间讨论，共同完成任务。
通过老师演示学生动手操作，提高动手能力。小组交流、分享
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生小组间讨论，共同完成任务，并分组汇报。
学生小组间讨论，共同完成任务，并分组汇报。
通过小组合作，加强学生组内团结、共同完成任务，
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
加强学生组内团结、共同完成任务，
培养学生组间合作能力，并且炼动手能力
、
培养学生独立完成练习的能力。
培养学生组间合作能力，并且炼动手能力
课堂小结
分小组总结归纳，教师补充。
各组汇报总结，其他小组成员做补充。
锻炼学生的总结能力，逻辑思维、语言表达能力。
布置作业
（1)如何快速生成版式相似的栏目网页?
(2)何把入的图片制作成统一的略图，并可点击查看原图?
(3)如何在浏长网页时轻松返回页面顶部?
(4)如何在网页中提供文件下载和跳转到其他网站的链接?
板书
一、用表格进行版面布局
二、制作缩略图
三、设置书签
四、提供文件下载和网站链接
1.提供文件下载
２.链接到其他网站
?
课件25张PPT。信息技术粤教版 九年级上第四节 制作栏目网页新知导入 完成首页的制作后，大家对一般的页面布局和元素添加已经不再陌生，对接下来的制作充满信心，并按照分エ各自忙开了。王纯为了使网站有统一的外观，各栏目页面与首页的版面设计有一些共同的部分，很想找一个快速的方法生成栏目页面，避免重复制作;张琳在制作“班级相册”时发现收集来的相片尺寸大小不ー，不容易摆放整齐，而且因为相片很多，使得页面很长，想返回导航栏又不方便…他们又有了需要探究的新问题了。今天我们来解决这个问题。新知讲解新知讲解新知讲解 观察班级网站各栏目的版面特点，说说制作时可以怎样划分版交流面，怎样才能更快捷地制作出各栏目网页。一、用表格进行版面布局新知讲解新知讲解(1)制作模板时，可以打开制作好的首页，把其中多余的网页元素去掉，然后另存为一个网页文件或模板类型的文件，如图所示。新知讲解(2)使用模板时，如果模板是以网页文件保存的，只要打开它，全选并复制网页内容到当前编辑的文件即可;如果是模板文件，则在新建网页模板样式清单中显示出来并供选择，如图所示。新知讲解 在“班级相册”网页中(如图所示)。 同学们的活动相片、以规格一致的缩略图分类摆放，点击还能放大，显得整齐美观，还可以随时返回页首位置。这些是怎么实现的呢?新知导入二、制作缩略图新知讲解新知讲解 李鸣在用表格规划网页时，把表格的宽度设为浏览器窗口的98％，在家里的电脑上浏览时页面非常整，但在学校的电脑里浏览时却发现文字和图片都乱了;回家再仔细观察，发现当把浏览器的窗口変小或改变显示器的分辨率设置时，页面也会变乱。他百思不得其解:在家时页面好好的，为什么到了学校就乱了呢?请你帮他找出问题所在。 设定表格的宽度有两种方式：一种是采用百分比，这种是表格占用整个屏幕的比例，屏幕大小改变，表格随着改变，所以屏幕不同，表格显示的也不同；另一种是采用像素，多少像素定了，无论屏幕的大小或者分辨率的大小怎样改变，表格的大小不变。如果按照像素固定表格的大小，就不会发生错乱了。新知导入三、设置书签新知讲解方法如图所示新知讲解在“快乐学习”栏目里的“休闲区”(如图所示)，它提供的软件下載链接很受同学们的欢迎，“收藏夹”中还能链接到其他网站，你知道是怎么出来的吗?新知讲解 四、提供文件下载和网站链接1.提供文件下载 一些网站提供软件下载超链接，点击它时会出现询问“保存文件”还是“打开文件”。这种文件下载服务可以通过设置超链接来实现，只是此时链接的目标对象不是网页文件而是下载的文件。 设置方法:鼠标选定超链接的文字，单击右键从快捷菜单中打开超链接设置窗口，找到文件所在文件夹，选定要链接的文件，如图所示。新知讲解２.链接到其他网站 我们把超链接的目标网页默认在同一窗口打开，但有时候我们希望打开个新窗口来展示网页。“快乐学习”网页的“收藏夹”栏目中，提供到其他学习网站的链接时，就是以这种方式打开的。 设置方法:新建超链接，并在创建超链接窗口中，单击“目标框架”按钮，选择“新建窗口”，如图所示。新知讲解 在链接其他网站时，输入带有http协议的完整地址称为绝对地址;而在链接本网其他网页时，只输入文件名和部分路径名的地址称为相对地址。两者在应用上有何不同? 绝对地址：互联网上的独立地址，在任何网站通过这个地址可以直接到达目标网页。包含主域名和目录地址。相对地址：相对于网站的地址，当域名改变时，相对地址的“绝对地址”也发生变化。新知讲解 如果从链接目标来说，网站中常见的超链接如表所示。我们在创建班级网站的过程中，应用了多种的链接标，请找出相应的实例，并完成表格。“首页” →“班级相册”“设计” →“休闲区”Ｋｌｘｘ＠１６３.ｃｏｍＨｔｔｐ：／／ｗｗｗ．９９９１.ｃｏｍＡｂｃ．Ｚｉｐ课堂练习1.制作模板时，可以打开制作好的首页，把其中多余的网页元素去掉，然后另存为一个( )文件或( )的文件。
2.我们可首先通过表格把页面位置规划好，然后把所有相片处理成统一规格的( )插入单元格中。
3.在同一页面内不同位置的定位跳转, 我们可以借助超链接中的( )功能来实现。
缩略图网页“书签”模板类型课堂小结总结本节课所学内容板书设计一、用表格进行版面布局
二、制作缩略图
三、设置书签
四、提供文件下载和网站链接
1.提供文件下载
２.链接到其他网站
?
(1)如何快速生成版式相似的栏目网页?
(2)何把入的图片制作成统一的略图，并可点击查看原图?
(3)如何在浏长网页时轻松返回页面顶部?
(4)如何在网页中提供文件下载和跳转到其他网站的链接?作业布置谢谢21世纪教育网（www.21cnjy.com) 中小学教育资源网站 有大把高质量资料？一线教师？一线教研员？
欢迎加入21世纪教育网教师合作团队！！月薪过万不是梦！！
详情请看：
https://www.21cnjy.com/help/help_extract.php
