八年级下册信息技术教案清华版

1、2011-2012 学年第二学期八年级信息技术教学进度表周次时间教学内容备注第一周2 月 20日 2 月 24 日入学准备第二周2 月 27 日 3 月 2 日新手入门第三周3 月 6日 3 月 9 日轻松上路第四周3 月 12日 3 月 16 日开篇之作第五周3 月 19日 3 月 23 日星光闪烁第六周3 月 26日 3 月 30 日统一风格第七周4 月 2日 4 月 6 日事半功倍第八周4 月 9 日 4 月 13 日驾轻就熟第九周4 月 16日 4 月 20 日按图索伊第十周4 月 23日 4 月 27 日图形整合第十一周4 月 30 日 5 月 4 日自由穿梭第十二周5 月 7 日

2、5 月 11 日一触即发第十三周5 月 14日 5 月 18 日影音视听第十四周5 月 21日 5 月 25 日分享成果第十五周5 月 28 日 6 月 1 日第十六周6 月 4日 6 月 8 日第十七周6 月 11日 6 月 15 日第十八周6 月 18日 6 月 22 日1课题： 第 1 课新手入门课题新手入门授课时间课型新授课课时安排一课时教知识与技能：学 1掌握互联网、网页与首页、网站等网页设计与网站制作的基本目知识。标2学会使用记事本作为网页编辑工具来编辑HTML 代码并生成网页。3掌握浏览网页的方法并理解网页编辑工具与浏览工具之间的关系过程与方法：情感态度与价值观：教学重点了解网站

3、制作的基本知识，并制作一个简单的网页教学难点学会使用记事本作为网页编辑工具来编辑HTML 代码并生成网教具学具准备页。多媒体网络教室 。教学方法讲解、学生练习教学过程一、导入新课：复2在当前的社会生活中，网络正在发挥着越来越重要的作用，大备量制作精美、功能强大的网站出现在互联网上。对于学生来说，制作个人网站也正在成为一种流行时尚。通过本教材的学习可以轻松帮助学生入门，并逐步亲手打造属于自己的个性十足的网站。二、教学新课：1、首先打开 IE 浏览器，在地址栏中输入网址，打开一个范例网站的首页，单击首页中的动画、超文本、图片等网页元素，可以分别链接到网站中的其他页面中。在操作过程中教师提出问题，引

4、导学生思考互联网、网站、网页、首页等术语的含义，以及它们之间的关系，尝试让学生体会浏览器和网页的关系，从而将网站设计与网页制作的基本知识进行概括总结并明确落实到每个学生身上。在进行教学的时候，一定要让学生认识到已有知识的重要性，充分利用已经具备的技能去尝试解决新问题，从而变被动学习为主动探究。教师可引导学生充分利用教材中的“视野拓展”和“创作天地”板块进行自学，这实际上是在实施分层教学，以巩固本课的知识技能为主，适当地进行补充，让部分基础较好的同学在完成基本任务之后也能有事可做，给学生创造出提高的空间。作为网站制作的起始课，教师要切实地关注每个学生，尤其是在以前的学习过程中表现出学习能力较弱的

5、学生，要确保每个学生都有一个好的开始，都能将第一个网页作品保存到教师指定的位置（本地磁盘或网络中的指定目录） 。3教师应对所有完成保存网页任务的学生进行及时地评价与鼓励，保护学生的学习积极性。另外，对完成基本任务并有所创新的同学重点表扬，鼓励学生主动学习，有计划地营造良性竞争的氛围。2、网页设计与网站制作在本课中通过欣赏站点，使学生了解和掌握互联网、网页与首页、网站、 IE 浏览器的基本含义，并且能够明确它们相互之间的关系。学生在学习网站制作之前已经接触过网站，浏览过各式各样的网页，因此教师在完成此教学任务的时候，可以充分利用学生已有基础，不必完全进行讲授式教学，可以结合启发、设问等方法，使学

6、生尽可能地自己总结出相关知识。3、使用记事本作为网页编辑工具来编辑HTML代码并生成网页在进行此部分教学的时候，可以先借助学生已有技能，启动记事本，复制并粘贴素材文件中提供的 HTML 代码，命名并保存文件，然后在浏览器中进行预览。对于 HTML 代码部分，教师可以尝试通过修改属性值的方法， 引导学生探索标签的含义及其与属性值的对应关系，这也同时是对“创作天地”板块中的练习进行提示的过程，然后通过分析此HTML 实例，讲解HTML语言的基本结构，对基本的 、标签进行初步介绍，鼓励有余力的同学通过“视野拓展”板块进行自学，并独立完成“创作天地”中的练习。通过教师演示引导学生思考扩展名对文件的影响

7、，既包括其对4文件图标的影响，也包括调用应用程序的影响，从而引出程序关联的知识进行补充讲解，见图1.1 和图 1.2。3) 保存文件三、课堂练习：使用记事本作为网页编辑工具来编辑 HTML 代码并生成网页四、课堂小结：五、布置作业：六、板书设计：七、教学后记5课题：第二课： 轻松上路规划网站及创建站点课题轻松上路授课时间课型新授课课时安排1 节课教知识与技能：1. 了解网站开发流程。学 2. 学会利用 Dreamweaver8创建站点。目过程与方法：标情感态度与价值观：教学重点了解网站制作的基本知识，并制作一个简单的网页。教学难点多媒体网络教室。教具学具讲解、学生练习。准备教学方法教学过程一、

8、导入新课：复 备开发一个网站是一个相当来说比较繁杂的过程，对于一个网站而言，要有一个总的战略规划和目标。在做一个网站前，要有一个全盘的考虑。我们知道一个房子一旦地基没有打好，是要拔了重新盖，我们做网站也是一样，如果你前期规划做的不好，后面的工作就意味着白辛苦。这节课我们以“安全自护我能行”为6主题来进行网站规划和创建站点二、教学新课：1. 了解网站开发流程（1）网站需求分析一个网站在设计前，就应该考虑网站规模多大，就是多少个页面，每个页面的大体内容是什么，要用到那些素材，有那些导航，做较大一点的网站尤为如此。还要考虑以后会有什么改动，还要增加那些网页，尽量让以后的改动尽可能的小。网站的需求分析

9、所用的时间应该占到总开发时间的一半以上。确定网站主题写作文要围绕中心思想去写，做网站要围绕主题去做。个人主页、休闲、体育、教育、新闻、娱乐、购物、健康等等，不管那类网站，都不能脱离自己的主题，必须表现个性，表现出特色才能给人留下深刻印象，让人流连忘返。收集素材我们在这所说的素材就是你的网页上要用的各种素材，主要包括：文字、图片、动画、音频、视频等。在网站主题明确后，就应该把素材准备好，当然是越充分越好。不要等到用的时候到处去找，那就影响效率了。规划站点站点规划是需求分析中最重要的一个环节，包含很多方面的内容。我们上节课看了一些别人做的网站，相信大家都多多少少了解一些：栏目设置、颜色搭配、图文的

10、应用等等。只有把这些内容都考虑全面了，制作的时候你的速度就快。否则就等着不停的返工吧。（2）设计制作网站页面页面制作要先大后小，先粗后精。就是先要把每个页面要放什么内容，按什么结构先做一个大概， 所有页面的大概都做完后，再去完善和细化。（3）网站的发布需要域名和网页文件的存放空间。2. 利用 Dreamweaver8创建站点（1）启动 Dreamweaver8简单的进行界面介绍（2）创建站点步骤参见书上第 12 页73. 做一个简单的网页要求图文并茂三、课堂练习：学生小组合作完成任务，并将任务上交到教师机。四、课堂小结：1、建设网站需要先进行规划，规划的好坏直接决定着网站设计的成功与否。2、D

11、reamweaver8是 Macromedia 公司开发的最新版本的网页编辑器，利用 Dreamweaver8可以快速的创建站点。五、布置作业： 快乐的中学生活，一定给你留下很多美好的回忆吧！请你为“快乐时光有你相伴”为名的表达友情的主题网站进行站点规划设计。要求：（1）使用组织结构图来表现层次关系。（2）层次清晰，链接关系清楚，每个网页的内容要安排得当。六、板书设计：七、教学后记8课题：第三课： 开篇之作基于表格的页面布局课题开篇之作授课时间课型新授课课时安排一课时教知识与技能：1.创建站点和网站首页。学 2.掌握对表格属性的相关设置 。目过程与方法：标情感态度与价值观：教学重点能够对表格属

12、性进行熟练的设置教学难点能够对表格属性进行熟练的设置教具学具多媒体网络教室准备教学方法讲解、学生练习教学过程一、导入新课：复 备一个网站的规划设计完毕了，接下来的工作就是网页设计。我们知道一个网站的首页就像一本书的目录一样，我们做网站也一样，要先把首页确定下来。我看了我们上一周做的网页，有些同学想发挥点创意，但发现页面布局很乱，图片文字乱七八糟堆放在一起。这节课我们就来学学怎样对页面布局进行控制。在这之前我们先来看看别人的首页是怎么做的。 （查看事先准备好的9示例网页，分析表格在该页的作用）二、教学新课：（一）复习创建站点的步骤。1.在 D 盘新建一个文件夹，作为站点文件夹。2.打开 Drea

13、mweaver8,单击“站点”菜单下的“新建站点”命令。3.新建站点（步骤略，参加课本p12）。（二）创建网站首页1整理素材（1）右击“文件”面板中站点名 “站点 -安全自护我能行D:safe”，在弹出的快捷菜单中执行“新建文件夹”命令，然后将文件夹命名为 images。（2）将首页素材图片index.gif ，复制粘贴到 images 文件夹中。（3）在 safe 文件夹下新建一文件夹other，将 flash 动画素材整理到 other 文件夹中。2.创建并保存首页（1）单击 “文件” -“新建”命令，选择“常规”，在“基本页”列表框中选择 HTML 选项，单击“创建”按钮，即建立了一个空

14、白页。（2）执行“文件” - “保存”命令，保存名index.html,默认保存路径是站点的跟目录。注意保存类型选择“html 文档”。（三）对首页进行初步布局1.为页面添加背景颜色（1）单击文档窗口，使插入点在编辑区内闪烁，然后单击“属10性”栏的“页面属性”按钮。（2）找到 “背景颜色”选项，输入浅黄色的颜色数值#FFFF94，单击“确定”按钮，背景色设置完成。2.设置网页标题并预览网页效果。3.使用表格初步布局网页。（1）在文档窗口中单击，在页面左上角放置插入点。（2）执行“插入” -“表格”命令。（3）在弹出的“表格”对话框中设置一个2 行 1 列的表格，宽度 600 像素。（4）单击

15、“标签选择器”中的标签，选中此表格，在属性栏中完成表格的相关设置。具体参数如下：行数：2，列数：1，高度： 600 像素，宽度 600 像素，对齐：居中对齐，背景图片：index.gif。4.测试网页。三、学生练习鼓励学生大胆尝试和创新，利用所学的内容，进行创意性发挥。学生小组合作完成制作一个首页的任务，并将任务上交到教师机。2.文档工具栏的使用。3.使用表格设计网页布局，可以使网页看上去更加整齐。三、课堂练习：鼓励学生大胆尝试和创新，利用所学的内容，进行创意性发挥。11学生小组合作完成制作一个首页的任务，并将任务上交到教师机。四、课堂小结：1.站点目录结构要清晰，方便管理，素材要按类型分别存

16、放。五、布置作业：六、板书设计：七、教学后记12课题： 第四课： 星光闪烁用 Flash 动画完善首页课题用 Flash动画完善首页授课时间课型新授课课时安排一课时教知识与技能：1. 学会表格的调整。学 2. 能在网页中插入 Flash ，并对相关属性进行设置。3. 能在网页中插入文本，并对文字格式进行设置。目过程与方法： 学生动手、自主探究标情感态度与价值观：提高学生的动手能力、及学生们对网页的认识。教学重点在网页中插入 Flash ，并设置相关属性教学难点在网页中插入 Flash ，并设置相关属性教具学具学生电脑准备教学方法演示法、讲授法教学过程一、导入新课：复 备对于一个网页，信息的表达

17、是多种多样的，我们可以使用文字、图片等，我们也可以为网页添加动画、音频、视频等，为了让我们的网站看起来有动感，吸引别人的眼球，我们应该学会在网页中使用 Flash。这节课我们就来一块学学怎么在网页中使用Flash。二、教学新课1. 新建站点13（1）将“安全自护我能行”站点文件夹传到学生机。（2）新建站点。2. 调整表格 1) 选择对象表格、行、列、单元格属性的设置是以选择这些对象为前提的。a) 选择表格：“标签选择器”中单击 标签；“表格”菜单下的“选择表格”命令。b) 选择某一单元格：按住 Ctrl 键，同时单击选中的单元格；“标签选择器”中单击 标签。c) 选择某一行或某一列：将光标移动

18、到行左侧或列上方，当鼠标指针变为向右或向下的箭头图标时，单击即可。2) 设置第一行的属性选中表格的第一行，将高度设为420。和 flash的高度一致。3. 插入 flash动画1) 将光标定位在表格第一行中，执行“插入” “媒体” Flash 命令。2) 在弹出的对话框中选择 other 文件夹下的 index.swf ，单击确定。3) 观察插入 flash 的状态，在编辑视图下， flash 不可见。4) 单击选中 flash 文档，在属性面板设置相关属性：循环、自动播放。预览观察效果。5) 设置 Flash 参数，如 P23 页，图 4.6 所示。4. 在网页中插入文本1) 插入普通文本：

19、光标定位在单元格内，直接输入文字。2) 插入特殊字符：“插入”“HTML”“特殊网页”。3) 设置文本属性：根据情况选择合适的格式或文字大小、颜色、对齐方式等。三、课堂练习：学生小组合作完成任务，并将任务上交到教师机。四、课堂小结：五、布置作业：六、板书设计：七、教学后记14课题：第五课： 统一风格制作框架网页课题制作框架网页授课时间课型新授课课时安排教知识与技能：1. 掌握表格的拆分与合并。学 2. 学会创建框架、制作框架网页和保存框架网页。目 3. 能制作鼠标经过图像的动态效果。标过程与方法： 学生动手、自主探究情感态度与价值观： 使学生对框架结构有一个初步的认识教学重点创建框架和制作框架

20、网页教学难点掌握目标设置在网页制作过程中的作用和方法教具学具学生电脑准备教学方法演示法、讲授法教学过程一、导入新课：复 备一个网站常常划分成多个区域，对于每个区域来说，其色彩搭配、网站风格、网站标题、网站导航都是统一的。为了能做到这种统一，我们每个网页中相同的内容固定在一个区域。我们通过创建框架制作框架网页，可以轻松实现网页结构划分和布局。使大家对框架有一个初步的了解和感性认识。15二、教学新课1. 新建站点（1）将“安全自护我能行”站点文件夹safe 传到学生机。（2）新建站点。2. 创建框架和框架集制作框架网页的前提是创建框架，并根据网页布局设计框架的样式，然后再具体设计制作网页的内容。（

21、1）规划“框架”文件夹。（2）新建框架集步骤 1：执行“文件”“新建”命令，打开“新建文档”对话框，在 “类别”中选择 “框架集”。步骤 2：单击“创建”按钮，在弹出对话框中单击“确定” ，框架创建完成。（3）保存框架集步骤 1：执行“文件”“保存全部”命令，保存到 frame文件夹中。步骤 2：重命名框架集文件和每个框架文件。（4）设置框架和框架属性框架的属性包括框架名称、源文件、边距、尺寸、滚动条等；框架集的属性包括框架面积、框架边界颜色、距离等。步骤 1：执行“窗口” “框架”命令，打开框架面板。步骤 2：单击“框架”面板中的框架边缘部分，选中框架集，在 “属性”面板中设置框架集的属性。

22、步骤 3：单击“框架”面板中的 topFrame 框架和 mainFrame框架，在“属性”面板中设置所选框架的属性。（5）制作框架网页制作上框架网页步骤 1：打开网页 top.html ，设置背景颜色 #EAFF8A，上边距为 0 像素。步骤 2：插入一个 2 行 5 列的表格并调整行列的高宽。 。步骤 3：在导航表格中，设置鼠标经过图像。步骤 4：为图片添加超链接，设置打开方式（目标）。制作下框架网页步骤 1：打开网页 main.html ，设置背景颜色 #EAFF8A，上边距为 0 像素。步骤 2：插入一个 5 行 9 列的表格并调整行列的高宽。 。步骤 3：合并相关单元格。16步骤 4

23、：插入图片，并为图片添加超链接。步骤 5：添加邮件链接。三、课堂练习：学生小组合作完成书上的练习任务，并将任务上交到教师机四、课堂小结：1.创建框架，实现网页风格的统一，保存框架时，需要保存框架集文件和含有框架的所有文件。2.利用鼠标经过图像，可以制作网页导航动态按钮。3.超级链接是实现网页互联的关键，设置网页的打开方式， 可以调整链接网页的显示位置。五、布置作业：六、板书设计：七、教学后记17课题： 第六课： 事半功倍制作网页模板课题制作网页模板授课时间课型新授课课时安排一课时教知识与技能：学 1、掌握模板的概念，特别是可编辑区域和不可编辑区域。目2、学会创建模板。标3、能用模板快速的制作网

24、页过程与方法： 学生动手、自主探究情感态度与价值观： 提高学生的自学能力，对网页的认识和对网页模板的了解教学重点理解模板中的可编辑区域和不可编辑区域教学难点掌握模板的概念，特别是可编辑区域和不可编辑区域教具学具学生电脑准备教学方法演示法、讲授法教学过程一、导入新课：复 备我们在进行大量的页面制作的时候，很多页面会用到相同的布局，图片和文字等元素。 这样我们需要做一次次的重复性劳动，那么有没有更好的方法让我们来快速的实现呢！有，通过制作网18 模板快速 建网 。 就是我 学 的内容。二、教学新 一、模板的概念： 模板可以被理解成一种网 模型，利用 个模型能 方便的制作出很多 面，使用模板可以避免

25、重复的在每个 面 入或修改相同的部分，待网站改版的的 候，只要改 模板的 ，系 就能自 更改所有基于 个模板 建的网 。二、模板的 点：1. 格一致，看起来比 系 ，也省去了制作同一面 的麻 。2. 如果要修改共同的 面不必一个一个修改，只要更改 用于它 之上的模板就可以了。3. 免除了以前没有此功能 要常常“另存 ”，一不小心就会覆盖重要档案的困 。4. 模板的 点 有它也不是一成不 的，即使是在已 使用一个模板 建文档之后，也 可以 模板 行修改。当更新模板 ，文档中的 定区都会被更新，与模板的修改相匹配。在我 知道了模板的概念和 点之后， 我 通 例来具体的理解吧！ 在 大家 3 分 ，

26、然后 看 思考两个 ：1、 大家找出例子中网 的相同地方和不同地方。 2、例子中 格接近的网 可以有几种方法制作？ ( 框架？用另存 ？ )再考 ：如果用以上两种方法做的 ，万一网 的共同部分要改 的 ，是否每 都要改 ？ 能不能一次修改，所有网 就会自 更新呢 ( 方法就是使用模板！ ) 在我 来看看如何 建模板（教 演示 解 ）三、如何 建模板步 1：打开“安全自 我能行” 站点， 行：“窗口”“ 源”命令，打开“ 源”面板， 模板按 ，切 到模板子面板步 2： “新建模板按 ”， 将“ 源”面板的模板列表中名称 Untitled 修改 module, 回 ， Dreamweaver在“

27、源”面板和 Templates 文件 中 建一个新19的空模板。步骤 3：打开“文件”面板，在 Templates 中新建 images 和 other 两个文件夹，拷贝素材四、利用表格规划模板网页我们创建好了模板后，可以利用表格规划模板了，这是我们学习过得内容，大家根据书 38 页具体步骤自己动手规划吧！三、课堂练习：大家根据书 38 页具体步骤自己动手规划四、课堂小结：五、布置作业：六、板书设计：七、教学后记20课题：第七课统一风格制作框架网页课题制作框架网页授课时间课型新授课课时安排一课时教知识与技能：1掌握利用模板创建网页的方法。学 2学会运用 Flash按钮制作导航栏进行站内导航。目

28、3了解链接对象的目标框架的含义标过程与方法：情感态度与价值观：教学重点掌握利用模板创建网页的方法。教学难点学会运用 Flash按钮制作导航栏进行站内导航教具学具学生电脑准备教学方法讲解、学生练习。教学过程一、导入新课：复 备创建模板是为了形成网站的统一风格，加快网站的建设。就像工厂生产机器零部件一样。模板创建完成后，面临的工作就是利用模板创建网页了。二、教学新课：211.新建站点（1）将“安全自护我能行”站点文件夹safe 传到学生机。（2）新建站点。2.应用模板创建网页（1）规划“日常生活”文件夹（2）应用模板用模板直接创建网页步骤 1：执行“文件”“新建”命令，打开“模板”标签，选择模板文

29、件module，单击“创建”按钮，即可基于module 模板创建一个网页。步骤 2：执行 ”文件 ” “保存”命令，将网页命名为 rcsh.html,并保存到 rcsh 文件夹中。创建空白网页后再应用模板。步骤 1：创建空白普通网页。步骤 2：打开“资源”面板，单击“模板”按钮，则模板资源显示在模板中。步骤 3：选择合适的模板，单击“应用”按钮。3. 将日常生活网页链接到框架网页（1）打开 all.html 网页，选择 rcsh 图片。（2）在属性面板中单击链接文本框后的“浏览文件”按钮。选择网页 rcsh.html.（3）设置目标框架为mainFrame，表示单击图片后， 网页“日常生活”在

30、框架网页的下框架mainFrame中打开。224. 利用 Flash 按钮制作导航栏。5. 填充日常生活网页中的内容。6. 创建模板的其他方法。三、课堂练习：学生小组合作完成任务，并将任务上交到教师机。四、课堂小结：1.利用模板创建网页。2.在框架中打开网页的方法。 。3 制作 Flash 按钮链接。五、布置作业：六、板书设计：七、教学后记：23课题：第 8课按图索骥课题课型教学目标第8 课按图索骥授课时间新授课课时安排一课时知识与技能： 1灵活地使用水平线分隔网页元素。2学会插入命名锚记以创建锚点链接。3. 学习使用 Flash 文本作为链接对象。过程与方法： 讲解、学生练习。情感态度与价值

31、观：教学重点局部连接的插入教学难点局部连接的设置于运用教具 学 具学生电脑准备教学方法讲授法、演示法教学过程一、导入新课：复当初步制作“交通出行”网页后，可以看出本页包含的内容很多，不同主题的文字和图片罗列在一起，难以区分，因此我们考虑使用水平线分隔元素，并为页面添加锚点链接，实现网页的局部跳转，快速地将访问者带到特定主题或者网页顶部。备二、教学新课（1）插入水平线水平线对于组织信息很有用。 插入水平线， 操作比较简单， 执行菜单 “插入” HTML“水平线”命令就可以插入默认属性的水平线，其宽度为100%，高为 2 个像素，带有阴影。另外，还可以打开“插入”工具栏中的HTML工具栏，单击“水

32、平线”按钮插入水平线，在水平线的“属性检查器”面板中，可以设置水平线的宽度、高度、对齐方式、是24否带有阴影，应用的CSS样等，如要设置水平线的颜色可使用“快速标签编辑器”按钮或在“拆分”视图中通过添加代码操作。宽和高：以像素为单位或以页面尺寸百分比的形式指定水平线的宽度和高度。对齐：指定水平线的对齐方式（ “默认”、“左对齐”、“居中对齐”或“右对齐” ）。仅当水平线的宽度小于浏览器窗口的宽度时，该设置才适用。阴影：指定绘制水平线时是否带阴影。取消选择此选项系统将使用纯色绘制水平线。需要注意的是，水平线的有些设置在编辑窗口无法直接看到效果，需要在IE 浏览器中预览，例如图8.2 所示的为 2

33、 条不同属性设置的水平线在编辑窗口中的状态和 IE 浏览器中预览效果的对比。（2）创建锚点链接在教材中我们将创建锚点链接分为两个步骤：命名锚记和链接锚记。在进行链接锚记的时候，我们采用是在“属性检查器”的“链接”文本框中输入锚记名称的方法，这就要求我们记住各个锚记对应的主题内容才能操作，否则还需要单击相应的锚记名称，通过该锚记的“属性检查器”找到锚记名。其实，在进行链接设置的时候，锚记也可以像文件一样，直接被鼠标选择作为链接目标，其步骤如下： 选择要添加链接的主题文本，如“非机动车交通安全”。 单击“属性检查器”中“链接”文本框后的“指向文件”按钮 ，直接拖动按钮到页面上，此时将会出现黑色的箭头，我们将此箭头拖动到需要链接的锚记即可，如图 8.3 所示。25图8.3用?指向文件 ?链接锚记（3）插入 Flash 文本Flash 文本与 Flash 按钮十分相似，都是在 Dreamwe