《应用表格布局网页结构》教学设计（精选多篇）

第一篇：《应用表格布局网页结构》教学设计

《应用表格布局网页结构》教学设计

一、教学目标

知识与技能：

1、了解表格在网页设计中的作用。

2、能够根据网页的内容，正确布局表格的结构。

3、掌握网页中表格的制作方法，能够在单元格中正确插入文字和图片，掌握表格属性的设置方法以及单元格的修饰与编辑方法。

过程与方法：通过观看优秀网站表格布局，动手设计表格等环节，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的发散思维能力；通过学生自主地编辑和修饰表格等环节，培养学生自主探究学习的能力。

情感、态度与价值观：

1、提高学生自学和探究的能力，培养学生应用表格布局网页结构的兴趣。

2、提高学生语言表达能力，学会客观的评价作品。

二、教学重点与难点

重点：了解表格在网页设计中的重要作用

掌握插入、编辑表格以及表格，单元格的属性设置方法。

难点：表格的嵌套 表格，单元格，网页属性的设置

三、教学方法

讲解演示教学法，小组合作学习法，自主探究学习法

四、教学设计说明

本节课是初中信息技术（下册）2007年7月第一版第11单元《设计主题网站》第二节的内容，教学面向的是初二年级的学生，该年龄段的学生已具备了一定的信息素养，掌握了基本的信息技术知识和技能。初中的学生喜欢新、奇、特的事物，接受能力和理解能力比较快。而直观、醒目的网站示例图片则可以培养学生对于本课题的兴趣，但是学生对于如何应用表格布局网页结构的操作是比较模糊的。因此本节课充分地发挥学生了的积极性，让学生随着学案所设置的环节，探究完成一个又一个的应用表格过程。而学案则是在尊重学生解决问题的思维过程方式的基础上设置的，注重学生的学习体验和情感的体验。整节课以学生为主体、教师为主导的架构下，搭建以生为本的情景学习的平台，帮助学生自学、交流讨论、深入探究，以不断的完成应用表格布局网页结构的过程为手段，一步步完成学习任务。

五、教学过程

课前将素材和网站站点发送到桌面，指导学生解压缩。并带领学生熟悉本节课所要制作的网页的素材。

（一）设置情境，引入课题

师：我们知道，地球是人类赖以生存的家园，然而，近几年来，地球的环境却越来越恶劣：全球性气候变暖、暴雨、雪灾等灾难性天气频繁出现，给我们的生活带来严重威胁。因此，我们每一位同学，都有责任去保护环境，那么我们应该如何去保护环境呢？我想首先是宣传环保、倡导环保。那上一节课呢我们已经建立了以环保为主题的站点，学习制作了网站的欢迎页。今天这节课，我们将一起学习制作网站的主页面来宣传环保，那如何来设计主页面呢？首先我们先来欣赏几个著名网站的主页。（播放课件）

师：你们能看出这些是哪些网站的主页吗？ 生：网易，新浪，搜狐

师：很好，它们分别是网易、新浪、搜狐的主页面。我们知道这些网站的主页面包含的内容都相当丰富，但给我们的视觉感受却是繁多而不杂乱，紧凑而不单调。这些页面设计是如何做到这一点的呢？

师：我们以搜狐主页面为例，（呈现搜狐主页面的图片），来探究一下如何设计网站的主页面。首先这一页面的左上角有一张的搜狐的LOGO图片，使我们一眼能认出这是搜狐页面。在图片的右边呢，是网站中的导航，通过导航链接到其它的页面。下面的主体部分，分成了几个区域，我把它标示出来，这样我们不难看出，中间部分，是一些小信息的链接。上面这一部分以广告信息为主，下半区域分成了四个部分，分别是新闻，娱乐，体育以及广告图片。通过标示，我们会发现这呈现出来的其实就是一张表格的摸样（可启发学生回答）。

师：因此，使用表格来布局网页结构，是使页面清晰紧凑，整洁大方的简便有效的方法。那今天这节课，我们就一起来学习应用表格布局网页结构，也做出这样一张页面出来。

设计意图：所选的网页学生都比较熟悉，师分析页面，呈现本节课的课题，激发学生的学习兴趣。

（二）新课学习

环节一：根据素材，小组合作设计表格。

师：课前同学们已经熟悉了素材。既然我们要应用表格布局网页结构，那就要先进行设计。

师：刚才同学们也欣赏了搜狐等网站的主页面的表格布局。

师：下面呢，请同学们拿起笔在老师提供的纸上来设计表格。以相邻的四个同学为一个小组，对照素材，讨论交流，在纸上画出你们将要制作的页面的表格布局，并对表格中将要添加的内容进行标示。

学生以小组为单位，设计表格。

师：很多小组已经完成了，下面我们挑选一些小组的同学到前面来展示一下你们的设计，并简要说明你们的页面布局。其他同学注意看，注意听，看看有没有值得借鉴的地方应用到自己小组设计的表格中去。

展示几个小组所设计的表格

设计意图：以小组为单位动手设计表格可以培养学生的合作探究能力。让学生通过交流讨论后设计表格，可以集结多人的智慧，让轻松的氛围中设计出表格。

环节二：动手实践，编辑表格

师：同学们都已经将表格设计好了，下面我们就来动手实践，将表格在网页中绘制出来。

师：首先，请同学们打开FrontPage，从文件菜单中打开站点“huanbao”，并新建一个页面。师：那如何来绘制表格呢？请同学们参照学案，先尝试看看如何插入表格？（学生探究）

生根据学案，自己先探究完成表格的插入

师：哦，这里提供了一个专门供表格使用的菜单。我们这边可以使用表格菜单，打开表格对话框，就涉及到添加的表格是几行几列的了。这里呢，老师有一个建议：暂且以最多行，最多列来计算表格的行列数。举个例子，请同学们注意看老师这里的一张表格样例。同学们数数看，这里的表格是几行几列。

生：9行5列（学生思考）

师：同学们可以很清楚地看出，9行，那列数呢？我们这里暂且以最多列计算。

生：5列

师：同学们的表格也是这样的。请同学们根据你所设计的表格的行列数插入表格。

师：表格插入好了以后，同学们，我们一起来看一下，这个插入的表格跟我们在图纸上设计的表格一样吗？

生：不一样 师：哪里不一样？

生：插入的表格是分成若干个等分的小单元格，而我们在图纸上设计的表格中有很多不等分的小格子。

师：那这里呢，就要对表格进行编辑了。因为刚刚我们是按照最多行，最多列来计算的，那这里只需要对多余的单元格进行合并。

师：那如何对单元格进行合并呢？同学们有没有学过在word里编辑表格（如果有，可实现知识的迁移；如果没有的话，老师送一把万能钥匙——右击法），请同学们编辑表格。（与学生互动，尝试让学生讲解操作）

师：每一个小组的同学要互相帮助，帮助没有完成的同学对表格进行编辑。师总结：我们刚刚通过表格菜单栏，打开表格对话框，插入表格。在对表格进行编辑时，是按照最多行，最多列计算的。还可以采用其他的计数方法，同学们可以根据个人情况灵活运用。设计意图：让学生根据本小组设计的表格布局，插入表格，再对表格进行编辑，注重了学生在课堂中主体性的体现。在编辑表格时，可以通过以前所学的WORD中表格的编辑方法，从而实现知识的迁移。

环节三：根据设计，填充表格内容

师：表格编辑好了以后，一张空表就完成了。下面就要开始填充表格内容（展示我的表格填充完成的效果）。我们这里的内容，跟据素材，主要是图片和文字。那上一节课呢，我们已经学会了在首页中添加文字和图片了，那这里的添加方法和前面是一样的，不同的是，这里需要将图片和文字添加到对应的单元格中，所以在插入之前，一定要先定好位。下面请同学们根据素材和自己的设计添加表格内容，可参考学案。学案中，也提供了文字和图片填充到表格中的方法。

学生动手填充表格内容，使网页更立体丰富。教师观察学生操作，讲解表格的嵌套

师：在老师刚刚巡视过程中，发现有些同学采用了这样的表格布局，将按钮图片放在LOGO图片的右边，这里的按钮图片有五张，我们怎么实现它们的放置呢？

学生思考

师：这里呢，老师教给大家一个方法，可以在这个单元格中再插入一个表格，5行1列，这样就可以将5按钮图片均匀地相对固定地放在这个单元格中。这就是表格的嵌套。感兴趣的同学可以根据需要尝试添加。

设计意图：学生配合学案填充表格内容，体会在表格在FrontPage中的作用：定位对象

环节四：最后修饰，美化表格和单元格

师：同学们已经学会应用自己的设计的表格布局网页结构，那同学们想不想你们的页面更漂亮呢？

生：想。（跃跃欲试）

师：哦，下面我们就来美化我们的网页。请同学们说说看，我们可以从哪些方面对页面进行美化呢？（抛出问题）

生：字体…… 生：单元格里的颜色等

师：那这里呢，老师提供一个操作，右击我们看到有三个属性，分别是网页属性、单元格属性以及表格属性。同学们可以选择不同的属性，打开相应的对话框，美化页面。

学生调整表格属性，美化页面

组中完成得较快的同学帮助本组其他同学完成表格的编辑。

设计意图：让学们动手美化页面，使学生掌握表格属性的设置方法以及单元格的修饰方法与编辑方法。

环节五：探究实践

师：下面请同学们预览你们的网页，有没有发现页面上有表格边框，那同学们刚才看我们搜狐等网站的主页面的时有没有边框啊？

生：没有

师：如何将边框去掉呢？请同学们探究看看。（可配合学案）师提示：可选择右击，打开表格属性对话框，对边框的粗细进行设置 师让探究出来的同学上前演示并讲解制作方法。

师：请同学们继续完成你们主页面的制作，并注意保存。学生进一步练习，师巡视指导。

设计意图：应用表格布局网页结构的基本操作已经掌握了，因此师让学生做进一步的探究，如如何去除表格的边框使页面更自然美观，培养学生的探究精神。对于表格的嵌套，可以让学生根据需要自主探究实现。

环节六：作品展示，进行评价

师：通过对表格进行设计，编辑，填充，修饰等操作，同学们都已经制作完成了一张用表格布局的保护环境的主页面。下面呢，我们一起来看看同学们的作品。请制作者呢，谈谈你的设计特点以及制作流程。其他同学们也可以提出自己的建议和意见。

师总结。

设计意图：展示部分同学的作品，首先自身先说说特点，其他同学做点评。可以培养学生客观的评价作品的能力。

（三）总结 本节课我们应用表格制作完成了保护环境的主页面。通过实践操作，我们发现布局网页结构其实并不难。正如“耳闻不如目见，目见不如足践”。正如保护环境其实离我们也不遥远。从不乱扔纸屑，保持机房整洁，节约每一滴水，每一度电这样的小事做起，我们就能为保护环境做出一份贡献，成为保护地球的小卫士。

教学反思

课堂教学展评活动结束了，我在响水中学开设的课题为初中信息技术下册第11章第二节《应用表格布局网页结构》，现将本课教育教学实践中的再认识和再思考反思如下：

一、选取课题，自主探究

接到课题时，考虑到最近环境问题造成的灾难频发，将网站的主题确定为环境保护。通过“环境保护”网站的制作，培养学生宣传环保，倡导环保的意识，并将这种意识在日常的行为中体现出来。在教学流程的设置上，从设计表格——制作表格（插入和编辑）——填充表格内容——修饰应用表格制作的网页着手，真正做到学生为主体，教师为主导的教学模式。同时，给学生提供了学案，方便学生更好地发挥小组合作能力和自主探究能力。在教学内容得选择上，因为本节内容需要2-3节课的课时。所以在教学内容的选择上将Flash等动态对象的制作放到下一节课讲解。本节课的重点侧重于让学生通过本节课的学习能够学会使用表格完成一张网页的制作。

二、表格示例的讲解（不足之处）

在本节课的讲解过程中，表格的设计部分花的时间比我想象的多。学生一开始不知道从何入手。我分析了两个原因：一是学生对于信息技术课可能更习惯于模仿学习，让他们动手自己设计有一定的难度。二是我在课前没有考虑到将一个表格示例放在屏幕上供学生参考，之前考虑到更多地是希望学生自己设计，有自己的创意想法。我在讲解时应该带着学生将示例分析一下，并在提供给学生的学案上添加一个设计的简单的表格示例。

三、表格嵌套的讲解

在讲解表格嵌套时，本想用自己设计的一个示例讲解。在课堂教学中，巡视过程中有一个同学就遇到了需要通过表格嵌套才能解决的问题。这样对于这部分的讲解，形成了发现问题，分析问题，解决问题的流程，对于学生来讲，这样的方式更有利于他们的理解和应用。

四、学生情况分析

对于本节课来说，学生是初学者。而且从本节课的课堂完成效果来说，学生基本的素养都具备，他们都能参与到课堂教学中，共同解决自主探究中发现的问题。但对于学生来讲，还是更习惯于教师讲解，学生模仿的模式。这也是最后课堂作品没能达到的理想化的其中一个原因。

五、同行听课的借鉴

由于客观原因，25日上午只听了盐都的一位老师上的最后一节与我同课题的课的教学。她在教学过程中，用了几个简单的主题，将学生分成三个小组，完成作品。对于我这节课，我可以将环境保护这样的主题网站进一步细分为几个部分，分小组完成其中的一个网页，这样组成一个网站，我相信效果会更好。

六、反思再教设想

如果我再教这一节课，我会更多地分析学生情况。在组织教学中，让小组合作贯彻其中。在让学生设计表格之前，对表格的分析这块讲得更细，解释得更清楚，并提供示例。在教学中，尝试让学生分小组应用表格制作网站中的不同页面，根据提供的内容完成不同的网页的制作。但这样的设置可能要考虑到因素会更多，会根据主题和素材的内容而定。

第二篇：【张海燕】《应用表格布局网页结构》教学设计及反思

“动画补间”动画的教学案例

南京武家嘴实验学校 邢建华

一、教材分析

本课是江苏省科教版初中信息技术（下册）中第八单元《动画制作》中第3节内容，学习的对象是初中二年级的学生。教材先给出了“动画补间”动画的定义，安排了两个实例：“移动的太阳”和“旋转的风车”。实例1中有对图层的基本操作、导入外部图片到舞台……主要做出了位置移动的效果；实例2用到基本的绘图功能绘制出漂亮的风车……主要做出了对象的旋转动画效果。这两个例子的核心都是“元件”、“动画补间”。教材最后小结了制作“动画补间”动画的主要步骤，这样的小结有利于知识的迁移。

二、学情分析

上节课学习主题为初识Flash，安排了“冉冉升起的小太阳”动画制作，分为亮丽登场和冉冉升起两个环节：第一环节中分组完成元件小太阳的制作(自己绘制和导入外部图片，其中导入的图片要转换为矢量图，做去除背景色的效果处理)；第二环节从逐帧制作的“增加制作负担而且最终输出的文件量也会比较大”谈到flash动画的巧妙表现：动画补间，“只要建立好开始帧和结束帧，中间部分软件会帮我们填补进去，非常方便好用”。让学生初步感受了“动画补间”动画。学生对进一步学习“动画补间”动画感兴趣，有较高的探究欲。

三、设计思想

“动画补间”动画是Flash中非常重要的表现手段之一。“让小动物在绿色家园尽情表演”的主题，既有童趣，又能较好的将“动画补间”动画的各种效果表现出来，“将技术的文化特性与个性表达融为一体”。在学生掌握了“将所有元素放进元件库中再调用”的思想的基础上，本节课给出源程序，在库面板里预备了元件，即学生喜爱的小动物；在学生初步掌握的最简单易理解的移动效果入手，循序渐进，探究学习旋转、速度变化等效果；跟着老师体验元件实例的变化，如透明度、大小、角度等的调整，巧妙运用到动画中来，力求技术的创新利用。

四、教学目标、重点难点 知识与技能：

1．进一步理解关键帧、过渡帧、元件、库等基本概念。

2．进一步认识“动画补间”动画：动画的对象是元件，两个关键帧，中间过渡帧的表现。3．认识“动画补间”动画的属性面板，学会设置“缓动”选项、“旋转”选项，做出各种动画效果。

4．进一步认识元件的好处：多次调用。对元件的实例进行“颜色”选项的设置、调整其大小、角度，应用于“动画补间”动画，做出各种动画效果。

5．给自己的小动画加上背景层，初步认识图层的作用。过程与方法：

实例制作，学会“动画补间”动画的制作方法。情感态度价值观： 1．“动画补间”动画是Flash中非常重要的表现手段之一。

2．运用“动画补间”动画，可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，做出各种动画效果，表达自己的想法。

行为与创新：

利用“动画补间”动画，让可爱的小动物在绿色家园里尽情表演。重点：“动画补间”动画的制作方法。

难点：理解“动画补间”动画制作的规律，领悟“动画补间”动画制作的实质，并能够举一反三，触类旁通。

五、教学过程(一)导入新课

上节课我们尝试制作了冉冉升起的小太阳动画，初步感受了“动画补间”动画的魅力。这个小动画的特色在于：

(1)动画的对象是图形元件。我们自己绘制了小太阳，这个是我们电影中的主角，它会经常在舞台亮相，为了方便多次调用，利用“修改”菜单下的“转换为元件”命令，将它转换为常用的图形元件。

(2)动画的关键帧有两个。这个动画体现的是位置的移动，起点和终点是两个关键状态。(3)中间的过渡帧自动生成，体现了位置的移动过程。这是利用帧属性面板中的动画补间来实现的。动画补间是flash常用的动画表现手法之一，是基本动画，每个同学都要把这个小动画好好的做一做，认真的想一想。

下面请大家动手再来试一试。有三个准备工作：

(1)下载今天的素材：缤纷的世界.fla，请打开库面板，可以看到，后台有很多可爱的演员，这是老师精心准备的，希望在同学们的努力下，每个小演员都有机会在喜爱的舞台上尽情表演。

(2)遇到问题可以小声的问旁边的同学，也可以举手问老师，老师还给大家提供了一个简单的帮助动画。

(3)大家可以先看看老师的样例，你观察到还有哪些效果？这些都可以在帧的属性面板里去设置。请大家试试看。

设计意图：从最简单的移动效果入手，为进一步学习动画补间动画打基础。将专用名词贯穿于“动画补间”动画的制作过程，细致地讲解，让学生加深理解，这对以后的学习大有好处。

(二)认识动画补间动画的属性面板

我们请一个同学在动画中选择第一帧，在“属性”面板的“缓动”文本框中分别输入“-100”和“100”，重新测试，观察运动有什么变化。

(屏幕广播

2、学生代表演示发言、教师补充)1．“缓动”选项

(1)在-1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。(2)在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。(3)默认情况下，补间帧之间的变化速率是不变的。2．“旋转”选项

选择“顺时针”或“逆时针”，在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。

解决典型问题：

“动画补间”动画建立后，时间帧面板的背景色为淡紫色，在起始帧和结束帧之间有一个长长的箭头。有时候，创建补间会失败，这时图层就变成虚线了。这是怎么回事呢，首先检查两个关键帧。按照老师的经验，先删除补间，再创建动画补间，也是一种检查的方法。

设计意图：学习常见动画效果的制作。(三)元件的实例

(屏幕广播3)我们曾经讲过：元件自动入库，即演员在后台，有一个好处，可以多次调用，我们来试试，在草地上种上朵朵小花。一花独放不是春，百花齐放春满园。下面老师来做些设置，让小花变变样。同学们注意观察，想想，对你做动画补间动画有没有启发。

选中场景中的朵朵花(实例：小花)(1)分别设置“颜色”选项：亮度、色调、透明度、高级。

(2)利用工具面板上的任意变形工具调整小花的大小，设置不同的旋转点，示范旋转。让我们做得更好：尝试给动画加上漂亮的背景层吧。

对于图层知识，我们以后还会专门学习到。简单一点的说，图层之间相互独立，一般一个元件的动画放一个层。背景层当然放在最底层喽。

设计意图：创意实践。让学生体会到“动画补间”动画的制作有较强的灵活性与创造性，同时又有一定的规律可循，学习动画制作不仅仅是学习，更是一种创造活动。

(四)作品展示、课堂小结

刚才我们欣赏了几个同学的作品，各具特色，巧妙地运用了动画补间动画的各种效果，来表达小动物们俏皮可爱、运动阳光的一面。我相信通过本节课的学习，每个同学都有一份收获感、一份喜悦感。现在静下心来看看课本11页，13页。我们把这几句话读一读，是不是今天的收获呢。

(1)“动画补间”动画是制作Flash动画最常用的一种动画类型。它是在两个关键帧上分别设置同一运动对象不同的属性，如位置、角度、大小等，从而创建这两个关键帧之间变化的动画效果。

(2)利用元件既能使动画的对象丰富多彩，又能大大提高动画制作的效率。

设计意图：学生代表介绍自己作品的亮点。交流、分享。带着学生看课本，体会、小结。

六、教学反思

总的来说，这节课有成功的地方，也有失败的地方。

成功的是，本节课学生们基本上都能完成课堂任务，总体上也达到了预期的效果。“温故而知新”环节，预设的是分析“冉冉升起的小太阳”源文件动画，讲解动画补间动画的对象，两个关键帧，补间的生成。再看样例，除了位置移动效果外，还有旋转效果，速度变化的效果。学生动手去做的过程中，多少多少出现了一些小问题。

大部分原因是，第一帧中出现好多的“小动物”和背景图等混乱的场面。如果单独把小动物移动的动画独立出来，等完成单个任务后，再去完成场景任务，这样出现的问题就少很多了。当然这不是解决问题的关键。学生“急于求成”的心理，想让小动物们一起“出来”在漂亮的绿色家园表演。由于多数学生基础不算好，所以很难一次性完成。

对元件理解的混乱：

这个环节没有处理好，影响了下面的操作。

教师通过电脑演示分析典型问题，多个小动物运动或者加上背景的话，就必须要用到FLASH中的图层了。学生通过书本例子，“旋转的风车”共有三层：背景、杆子、叶片。教师演示了添加图层的方法。布置学生添加背景任务。

本节课重点一应放在认识帧属性面板中的动画补间动画属性面板的“缓动”选项和“旋转”选项的运用，并非是图层。重点二是对元件实例的使用。对于元件的使用，我还是高估了整体学生的水平。大多数学生没有把元件运用到自己的小动画中，一，有些停留在修改元件状态。

二、学生不知道什么时候去用。现在想想，我干脆直接给他们看几个效果，不好吗。这一点没有“亮”起来。如果我打开一个源动画，强调一下，我们改变的是关键帧上的元件实例，其它的中间的状态自动生成。学生不就明白了吗。哎，不能太估高学生的想象力，主要还是他们没有扎扎实实的理解动画补间动画的实质。也就是说，我的引入太快了，应该慢慢讲的。

我还发现自己比较喜欢“讲”，很多老师在教动画制作时更关注学生的“做”吧？先不管什么“关键帧”，不管什么“形状”补间，做一个出来看看。这是一种教学策略吧。学生能马上体会到成功感，变得更有兴趣了。可是，我上课时，喜欢细讲，用“专业术语”讲动画制作。这样好不好呢？我也比较不出来哪种方法效果好，因为大部分学生就是做得慢，等着我一个一个的去辅导。我比较累，也比较茫然。难道我是白讲了？还是学生根本就听不懂？其实我讲的所谓专业术语跟书上的步骤描述是一样的，我还加上了形象化的解释。如果让学生看书学习，那他们岂不更糟糕了？费解！我这样讲的目的，我来想想，应该是想让学生学会基本动画制作的思想，而不仅仅是模仿，我希望这样。希望知识能够迁移，学生能真正理解动画制作。还有一个目的，不管是自己的教材还是外面的专业教程，哪怕是有乐趣的视频教程，不都是左一个“关键帧”又一个“形状补间”这样来描述来让人学习的吗？我这样“细讲”，应该更好的架起了书本与学生之间理解学习的桥梁了吧？！

我比较得意于自己的“分析”“思想”等，不知道好不好。因为效果难以比较，长远发展、眼前的成功率似乎是有点矛盾的。我也说不清楚。

我在预设一节课时似乎有点“固执”，因为上节课已经初步接触到动画补间动画的制作，这节课我安排了几个环节：温故而知新，实际上就是动画补间动画的制作；探究学习动画补间帧属性的“旋转”“缓动”选项的作用；介绍元件的实例在舞台上的种种表现，比如，大小的改变、角度的改变、透明度的改变，启发学生用于动画补间动画的制作，做出更奇妙的效果出来。因为我在给学生的源文件中的库面板里提供了很多素材，其中有背景图，所以学生自然想到做背景，这里就涉及到图层问题。我在预设教学时有“一带而过”的想法。我把重点还是定在动画补间的“效果”上。

总之，我觉得本节课还是应该建立在打好基础的前提下，再实施教学这样效果会更好。

第三篇：《应用表格布局网页结构》教案

《应用表格布局网页结构》教案

一、教学目标

1、知识与技能：

（1）了解表格网页的作用；

（2）掌握网页中表格的制作方法，表格属性的属性设置方法；（3）能根据网页设计内容，正确布局表格的结构；（4）尝试根据内容需要设计表格布局网页页面。

2、过程与方法：

（1）利用对比，加深学生对表格布局网页的认识；

（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法；（3）通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。

3、情感态度与价值观：

（1）通过实践创作的过程，形成主动学习和利用信息技术、参与信息作品创作的态度；（2）培养学生注重吸取成功的经验，提高本身的信息素养。

二、教学重点

1、表格的制作及设置方法；

2、根据实际情况设计并应用表格布局网页。

三、教学难点

1、应用表格布局网页页面的意识；

2、合理制作表格，实现页面布局。

四、教学方法

教师讲解、演示、与学生任务驱动、合作学习相结合。

五、教学过程 教学过程

教师活动

学生活动

课前准备

将“学习素材”文件夹发送到学生机桌面；

打开并预习本课内容。

一、对比，引入新课

1、明确表格在网页制作时的作用：页面规划

（1）展示两个页面（1.htm和2.htm）并进行比较： 提问：①这2个网页，你喜欢哪个？为什么？ ②网页中的文字、图像对象如何插入？

③在Frontpage中打开2张网页，观察有什么不一样。

总结：这些线就是表格线，在做网页时，可以利用表格布局网页结构。（2）引出本课内容：探索用表格来布局网页的页面。（3）明确本课的任务：使用表格制作网页。

学生小组交流、讨论，对比加深印象，感受表格布局网页的作用 发现表格可以布局页面 明确本课内容

二、小组合作，体会用表格布局网页

2、模仿用表格布局网页页面结构（1）引导学生回忆Word中学过的表格内容，提示学生表格操作跟Word中具有很大的相通之处；

提问：还记得哪些表格的编辑方法？

（2）展示效果页，引导学生分析页面的结构，探索需要制作表格的结构；（3）讲解演示表格的制作及调整；（4）布置学生完成任务一：“心憩空间”网页

（5）展示成功学生的作品，引出表格属性的设置；

如：行列的插入、删除、单元格的合并、拆分、调整大小等。

根据网页内容来规划所需表格结构，了解网页中表格制作及设置的方法。学生小组合作，完成网页“chushi.htm”

三、小组合作，尝试用表格布局网页

3、小组交流并独立制作表格布局网页

（1）刚才我们一起体会用表格布局网页的网面结构：先分析确定所需表格的结构，然后根据实际制作设置表格布局网页页面结构。接下来我们就来尝试用表格布局我们的网页了；引入用表格布局“多彩的生物”网页；

（2）引导学生分析确定网页的表格结构；

（3）布置学生完成任务二：制作“多彩的生物”网页；可以根据自己的设计对网页进行适当的调整；

掌握根据网页确定所需表格的结构 能根据网页规划表格

小组合作讨论，根据学案提供的参考表格确定“多彩的生物”网页的表格结构，再独立完成图片、文字的插入。

四、作品展示交流与课堂总结

1、展示成功学生的作品并点评；

2、总结本课内容：为了制作的网页内容工整、美观，所以我们选择使用表格布局。本课我们尝试并使用了表格来规划布局网页，尝试设计个人网站的首页，自主设计版面，灵活使用表格进行网页制作。

掌握表格布局网页的常见技巧，加强表格布局网页的意识。

第四篇：教学设计(利用表格布局网页)[推荐]

利用表格布局网页

教学设计

授课教师：刘春霞

授课班级：计算机应用1202班

一、课题名称：利用表格布局网页

二、授课课时：1个课时

三、教学内容分析

本节课以利用表格制作一个简单主页为例，要求学生掌握并灵活运用表格及单元格的一些基本属性设置，从而设计出一个“匡”字型的主页。本次课要求学生具有创建站点的知识，以及Dreamweaver CS3的一些基本操作。

四、学生特征分析

授课对象是职高高二学生，学生已具有熟练操作一些常用软件的能力，已掌握Dreamweaver CS3的一些基本操作。

五、教学目标（知识与技能、过程与方法、情感态度与价值观）

1、知识与技能目标

掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。

2、过程与方法目标

引导学生分析项目，自主独立思考及操作，指导与修正，掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。

3、情感态度与价值观目标

提高学生的观察能力及分析能力，调动学生自主能动性，培养学生较浓的学习兴趣，使学生建立正确的人生观与价值观。

六、教学重点难点

掌握插入表格的方法 掌握表格属性设置的基本方法 掌握单元格或行属性设置的基本方法 掌握使用表格进行页面布局的基本方法

七、教学方法

1、讲授法

2、演示法

3、任务驱动法

八、教学环境与资源

教师机，教学广播软件，学生机（60台）

九、教学过程

1、创设情境，导入新课

欣赏网页，分析网页结构，引入本次课学习的项目：利用表格制作一个简单的“匡”字型网页。

2、讲解知识，演示操作 讲解插入表格的方法，表格属性设置的基本方法及单元格属性设置的基本方法，（1）插入表格的方法

将光标置于页面中，然后在主菜单中选择【插入记录】／【表格】命令或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行参数设置，最后单击【确定】按钮插入表格。（2）表格属性设置

首先选中表格，然后通过表格【属性】面板设置表格的行数、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、背景图像、边框颜色等属性。

▲宽度中的百分比单位一般在制作表格嵌套的时候用。（3）设置单元格或行【属性】的方法

首先选择单元格或行，然后通过单元格或行【属性】面板可以设置单元格的宽度和高度、水平和垂直对齐方式、背景颜色和背景图像以及边框颜色等。

（4）展示网页的最终结果并引导学生分析其结构，提示并演示操作的关键步骤，让学生独立思考完成，培养学生知识的迁移能力，效果图如下：

主要操作步骤：

a、新建一个站点，站点根目录为自己的文件夹（含有素材），在站点里新建一个文件index,html。

b、在页面属性里设置字体为“12像素”，页边距为“0”

c、制作页眉部分，插入一个1行1列的表格，宽度为770像素，其它属性参考效果图设置，然后插入Logo图片，d、制作主体部分，I、插入一个1行2列，宽度为770像素的表格，左侧单元格为200像素，设置间距为2，其它属性参考效果图设置。II、III、在左侧单元格中插入一个5行1列，宽度为70%的表格，设置间距为5，其它属性参考效果图设置。（表格嵌套）

在右侧单元格中插入一个4行2列，宽度为96%的表格，设置间距为5，表格标题为“参考咨询”，第一列单元格宽度为160像素，其它属性参考效果图设置。（表格嵌套）

e、制作页脚部分，插入一个1行1列，宽度为770像素的表格，插入图像“foot,.jpg”。

3、学生练习，巡堂指导

（1）、学生参考最终效果图，根据教师提示的主要步骤，独立思考分析，完成主页。（2）、教师巡堂指导，留意学生在操作时出现的细节问题，做好作业点评。

4、上交作业，点评作业

（1）、要求学生把主页及素材（自己的文件夹）一起交到教师机“1202班”文件夹中。（2）、抽出两个学生的作业点评，修正错误，完善主页。

5、课堂小结，宣布下课

本次课主要学习插入表格、表格基本属性的设置、单元格或行的基本属性的设置，利用表格布局网页的方法。

十、教学反思（欢迎名位听课老师提出您宝贵的教学建议）

第五篇：应用表格布局网页教案设计与反思

应用表格布局网页教案设计与反思

一、教学目标：

1、知识与技能：

（1）、了解表格在网页设计中的作用。

（2）、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。

（3）、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。

2、过程与方法：

（1）、利用对比学习，培养学生知识迁移的能力。

（2）、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。

（3）、通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。

3、情感态度与价值观：

（1）、通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习的能力。

（2）、通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，体验创造的快乐。

（3）、通过“动物——人类的朋友”网站的设计与制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。

二、教学重点难点：

1、教学重点：

（1）、了解表格在网页设计中的重要作用。

（2）、掌握插入、编辑表格的方法及表格的属性设置。（3）、掌握单元格的修饰与属性的设置。

2、教学难点：

（1）、表格的嵌套在网页设计中的应用。

三、教学过程：

1、创设情境、导入新课

（1）、展示两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定的规律；另一个页面凌乱，图文混杂，摆放杂乱。

（2）、提问：你喜欢那个页面的布局？学生回答。

（3）、提出问题：有什么方法可以达到第一个页面的效果。观察第三个页面，内容与第一个页面相同，显现页面中表格的边框。

（4）、学生讨论、交流，回顾Word中学习过的表格，领悟表格在FrontPage中的作用。

设计意图：通过对比学习，培养学生知识迁移的能力。

2、任务驱动、自主学习

（1）、展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到分析教材中的例子，得出表格的布局。

（2）出示任务一：规划网页表格的布局。分层完成该任务，基础相对薄弱的学生仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的学生可以跳出教材，自行设计表格网页布局，并将自己的表格设计绘制在教材上。

设计意图：分层教学，学生可以根据自己的实际情况选择任务难度，并动手分析和进行创意设计，培养学生的模仿以及创新能力。

（3）、出示任务二：新建一个页面，用表格布局该网页，并在该网页中放入相应内容。FrontPage中表格的插入于编辑与Word中的表格操作类似，教师着重引导学生进行知识迁移。

（4）、学生操作，教师安排操作熟练的学生进行演示。设计意图：培养学生知识迁移的能力和动手能力。

（5）、出示任务三：在表格中插入图片、输入文字。任务四：表格属性以及单元格属性的设置。

（6）、学生根据自己的实际情况选择任务难度，可按教师的具体要求操作，也可根据自己的意图进行设计。设计意图：确保达到教学目标的同时，给学生一定的自主空间，鼓励他们去创新，而不应让学生一成不变地生硬模仿。

（7）、出示任务五（提高内容）：表格的嵌套。学生动手制作网页。设计意图：更好的发挥优秀学生创作思维动手能力。

3、课堂小结、后续活动

（1）、教师引导学生回忆本节课学习的内容：在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法等。

（2）、教师展示优秀作品，表扬完成任务的学习，对未完成任务的学生，应鼓励他们利用课余时间继续完成。

四、教学反思： 略