第四节制作栏目网页 ppt课件+教案-2023新粤教B版八年级上册《信息技术》.rar

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