第四节 制作栏目网页 课件+教案

粤教版信息技术九年级上第四节制作栏目网页教学设计 课题 第四节 制作栏目网页 单元 第二单元 学科 信息技术 年级 九年级 学习 目标 知识目标：了解制作缩略图的制作方法，以及如何设置书签。 技能目标：熟练掌握用表格进行版面布局；理解掌握提供文件下载和网站链接。 情感目标：通过学习，激发互联网乐趣，更好为网络服务。 重点 熟练掌握用表格进行版面布局； 难点 理解掌握提供文件下载和网站链接。 教学过程 教学环节 教师活动 学生活动 设计意图 导入新课 完成首页的制作后，大家对一般的页面布局和元素添加已经不再陌生，对接下来的制作充满信心，并按照分エ各自忙开了。王纯为了使网站有统一的外观，各栏目页面与首页的版面设计有一些共同的部分，很想找一个快速的方法生成栏目页面，避免重复制作;张琳在制作“班级相册”时发现收集来的相片尺寸大小不ー，不容易摆放整齐，而且因为相片很多，使得页面很长，想返回导航栏又不方便…他们又有了需要探究的新问题了。今天我们来解决这个问题。 思考 激发学生学习兴趣并快速进入学习状态 讲授新课 问题： 1)如何快速生成版式相似的栏目网页? (2)何把入的图片制作成统一的略图，并可点击查看原图? (3)如何在浏长网页时轻松返回页面顶部? (4)如何在网页中提供文件下载和跳转到其他网站的链接? 任务 观摩班级网站的“班级相册”“才艺展示”“快乐学习”等栏目网页，学习其制作方法，并制作自己网站的栏目网页。 一、用表格进行版面布局 交流： 观察班级网站各栏目的版面特点，说说制作时可以怎样划分版交流面，怎样才能更快捷地制作出各栏目网页。 为了使网站有一致的风格，即其他网页通常与首页在外观上有共同的部分，比如网站标题、导航条、版权信息等，把它们提取出来作为模板单独保存，制作其他网页时应用该模板就快捷多了。 方法如下： (1)制作模板时，可以打开制作好的首页，把其中多余的网页元素去掉，然后另存为一个网页文件或模板类型的文件，如图所示。 (2)使用模板时，如果模板是以网页文件保存的，只要打开它，全选并复制网页内容到当前编辑的文件即可;如果是模板文件，则在新建网页模板样式清单中显示出来并供选择，如图所示。 交流： 在“班级相册”网页中(如图所示)。同学们的活动相片、以规格一致的缩略图分类摆放，点击还能放大，显得整齐美观，还可以随时返回页首位置。这些是怎么实现的呢? 二、制作缩略图 制作“班级相册”时，收集来的相片可能大小不ー，如果直接插入到网页中，会显得很凌乱。我们可首先通过表格把页面位置规划好，然后把所有相片处理成统一规格的缩略图插入单元格中。现在很多的网页工具都能帮你自动生成缩略图一一既能清楚地看到相片原貌，又能在单击缩略图时显示相应的原始相片，非常方便。 制作缩略图方法如图所示 交流： 李鸣在用表格规划网页时，把表格的宽度设为浏览器窗口的98％，在家里的电脑上浏览时页面非常整，但在学校的电脑里浏览时却发现文字和图片都乱了;回家再仔细观察，发现当把浏览器的窗口変小或改变显示器的分辨率设置时，页面也会变乱。他百思不得其解:在家时页面好好的，为什么到了学校就乱了呢?请你帮他找出问题所在。 设定表格的宽度有两种方式：一种是采用百分比，这种是表格占用整个屏幕的比例，屏幕大小改变，表格随着改变，所以屏幕不同，表格显示的也不同；另一种是采用像素，多少像素定了，无论屏幕的大小或者分辨率的大小怎样改变，表格的大小不变。如果按照像素固定表格的大小，就不会发生错乱了。 三、设置书签 “班级相册”内容多，页面较长，浏览时总是要拖动滚动条来前后查看内容，很麻烦。有没有一种方法可以实现在同一页面内不同位置的定位跳转呢?答案是肯定的，我们可以借助超链接中的“书签” ... ...