《用表格为网页布局》教学设计说课稿（精选5篇）

第一篇：《用表格为网页布局》教学设计说课稿

《用表格为网页布局》教学设计

《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页。通过本课的学习，是对表格知识的巩固和深入，更重要的是为后面的网页制作打下基础，所以本课是本单元的重点，起到承上启下的作用。前阶段学生已经学习了文本编辑、图片插入、网络基本知识、文件操作等内容，很多知识都可以迁移到本课来。八年级学生对电脑基本操作已经不再陌生，已经能够独立完成一定要求的学习任务，但是学生对于特定任务进行分析，整体规划能力相对还是比较欠缺的。本节课教学的作业设计中，我将注重培养学生这个方面的能力。根据课程标准和教材内容，我将本课的教学目标设计成三个方面：

知识与技能目标：

1、了解主页布局的常见布局图，并明确主页设计的基本要素；

2、理解用表格排版主页的作用；

3、掌握在网页中插入表格进行排版的技能；

4、学会设置表格属性，对表格进行编辑修改。过程与方法目标：

通过欣赏、借鉴他人的主页布局，取长补短，为自己的主页布局做铺垫。情感、态度与价值观目标：

1、通过作品欣赏，让学生意识到取长补短的可贵性，及在借鉴基础上的创新的重要性；

2、用表格排版网页解决网页版面杂乱问题，培养在遇到困难时灵活运用各种方法解决，强化建站信心。

为了实现这个教学目标，我将教学重点确定尾插入表格进行排版和更改表格属性。根据学生的思维障碍和学习情况的分析，我将难点定位于灵活掌握排列表格和设置表格属性。只有正确设置了表格的属性，才能美化和完善网页的布局。为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前截取了典型的旅游网页图片素材并设置成框架形式让学生一目了然地看到表格所起的作用，并设置了几个学生需要突破的任务。

信息技术课是培养学生对信息技术的兴趣和意识，使学生养成良好的信息素养为宗旨，强调学生的自主学习和研究学习。上新课前，我要求学生两两合作，通过传统手工绘制草图的学习方式，设计你需要建立网页的框架布局，同时学会和与他人合作。为了让学生主动的参与学习，我在设计教学流程时，准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。根据教学内容和学情的分析，本课我采用的教学方法有：讲解、练习、任务驱动、小组合作，学生可以通过小组合作、给定的任务等将本课学习用于实际操作。我将结合教学过程来具体分析。整个教学过程我分为以下四个部分来完成：

一、通过旅游网站的解析，直接引入新知，通过删除网页的背景、文字、图片后，呈现出一张网页的背后其实是表格起到重大的作用。所以学生心中就有个概念，原来做网页的前提是用表格固定框架。并结合书本p58页，了解网页常见的布局图。直觉、兴趣成为学生产生学习动力最直接的因素。

二、本节课的任务是让学生设计有关龙泉旅游的网页布局，我先让学生利用草图形式设计宣传龙泉旅游网页的框架，做这个的目的是为了学生能更顺畅、不会盲目的在电脑上操作，这为学生完成任务2提供基础。

三、巩固旧知，学习新知，解决问题。建立网页的前提是建站，学生对站点的认识已经不会陌生，根据教师提供的站点，再将网页布局呈现在主页上（学习新知）。通过例子的演示，学生将草图转移到网页上来。在操作过程中学生可能会遇到一些解决不了的问题，我会引导学生勇敢地提出问题，并告诉学生解决问题的方法：（1）自己思考（2）向同学和老师寻求帮助。（3）通过教材操作步骤P59，进行知识迁移。针对学生中普遍存在的问题，我将利用广播讲解演示，解决问题（学生应该会碰到在单元格内插入过大的图片后，影响相邻单元格位置变化，这里所要涉及的是表格的嵌套）；针对个别学生的问题，我将个别指导。设计意图：这个环节充分体现了学生的自主性，让学生不断尝试中发现问题，师生合作解决问题。体现了学生是学习的主体，学生把教材、同学、教师、电脑都作为 学习的帮助者。

四、作品展示及评价。根据课前设定好评价量化表，抽取部分学生作品展示给同学们，通过学生对自己作品的评价打分（自评），再让别的同学进行评价打分（他评）。但是课堂时间毕竟有限，让每位学生对自己设计的作品进行评价，然后同组之间进行互评，取长补短，学生可以从中找到自己的缺点和不足之处，也能学习到别人的长处。相互评价，也是获得最佳学习效果的重要途径之一。（问题补充：参考诸多网页，一般网页的边框是不显示的，如何将表格的边框线从页面中赶走，这里需要利用表格的属性进行隐藏边线，从而使网页页面更加美化。）

五、课堂小结。强调页面布局在网页设计中的重要性，肯定同学操作过程中好的方面，并及时鼓励学生。要求同学课后多浏览有关网页，设计出更好的作品。

六、作业布置：同学思考以下问题（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、了解表格在网页设计中的作用。

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

六、反思再教设想

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

第四篇：表格基础和DIV+CSS网页布局基础教案（模版）

 本部分任务

制作“宝贝分类”页面 制作“公告栏”页面

 为什么使用表格

 表格应用场合 具体内容见ppt  表格的基本结构

具体内容见ppt

 表格的基本语法

 Table标签  Tr标签  Td标签 具体内容见ppt 注：表格标签中没有列标签。

 如何创建表格

具体内容见ppt

 跨行跨列的表格

 什么是跨行跨列的表格  跨多行的表格

 跨多列的表格 具体内容见ppt

 表格的美化修饰

  什么是表格的美化修饰 如何设置表格的尺寸和边框 width用来设置表格的宽度 height用来设置表格的高度

border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 如何设置背景

background属性用来设置表格的背景图片

bgcolor属性用来设置表格、行、列的背景色。HTML中颜色的表示方式：“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝。

如何设置对其方式

align属性用来设置表格、行、列的对齐方式 为什么要使用填充属性 具体内容见ppt 什么是填充属性和间距属性 



  border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)如何使用填充、间距属性 border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)

 表格的布局

   什么是表格布局 使用表格进行布局

用表格对网页的内容进行整体控制

 DIV+CSS规划页面

    什么是CSS？

为什么要使用CSS？ 如何使用CSS？

DIV+CSS如何规划页面？

 什么是CSS？

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。

 为什么要使用CSS？

 CSS的特点

便于页面的修改。便于页面风格的统一。减少网页的体积。为什么要使用CSS？ 使用CSS布局的优点 表现和内容相分离 提高页面浏览速度 易于维护和改版

CSS样式表极大地提高了工作效率

样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。内联定义

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

 如何使用CSS？

 只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。 定义内部样式块对象

你可以在你的HTML文档的和标记之间插入一个块对象。定义方式请参阅样式表语法。

这样的样式表只能针对本页有效。不能作用于其它页面。 导入样式——Style导入

与链入外部样式的功能基本相同，只是语法和实现方式上有差别。

它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式链接全局样式，这样就使代码达到很好的重用性。 导入样式——Link标签导入

使用Link标签代替Style标签来导入CSS文件。

它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

除了内联定义是直接作用于标签本身以外，其他CSS使用方式都需要建立标签和样式之间的映射关系。主要的映射关系有： id映射 class映射 标签映射 混合映射  CSS样式和页面标签元素的对应方式

   

 几种样式的优先级

 id优先级高于class  后面的样式覆盖前面的  指定的高于继承  行内样式高于内部或外部样式

总结原则：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的。

 DIV+CSS如何规划页面？

请关注上机实验3

By---QQ69848627

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

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

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

一、教材分析

本课是江苏省科教版初中信息技术（下册）中第八单元《动画制作》中第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中的图层了。学生通过书本例子，“旋转的风车”共有三层：背景、杆子、叶片。教师演示了添加图层的方法。布置学生添加背景任务。

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

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

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

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

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

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