第一篇：实验15 利用表格和框架技术进行网页布局设计

实验15 利用表格和框架技术进行网页布局设计

1.1 15.1 实验目的

1．掌握利用Adobe Dreamweaver CS6的表格进行网页布局设计的方法。2．掌握利用Adobe Dreamweaver CS6的框架技术进行网页布局设计的方法。1.2 15.2 实验内容

1．利用框架对个人站点网站重新进行设计。2．利用表格对个人站点网站重新进行设计。1.3 15.3 实验操作步骤

15.3.1 利用框架设计网页布局

利用框架设计网页布局就是利用框架技术重新设计实验14中的“我的小站”，将主页拆分为上中下部分，分别为top.html、middle.html和bottom.html。使得浏览“个人简介”和“我的学校”等页面时都能看到导航栏和底部版权联系信息。具体操作步骤如下：

1.新建站点：启动Adobe Dreamweaver CS6，单击“站点”菜单中的“新建站点”命令，则弹出“站点设置对象”对话框，如图15-1所示。在站点名称右边的文本框中填入站点名称“框架网页布局，在本地站点文件夹中填入D:websmyFrameSite（也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。

图15-1“站点设置对象”对话框

图15-2添加网页top.html、middle.html、bottom.html后效果

2.设计网页top.html、middle.html、bottom.html：在站点中添加网页文件并打开。如图15-2所示。参照实验14中的设计主页index.html步骤设计top.html、middle.html、bottom.html。各个页面的设计效果分别如图15-3~图15-5所示。

图15-3 网页top.html设计效果图

图15-4 网页middle.html设计效果图

图15-5 网页bottom.html设计效果图

3.添加其他网页：参照实验14，在网站中添加网页个人简介introduction.html，添加网页“我的学校”MySchool.html，添加网页“我的相册”MyAbums.html,添加网页“我的链接”MyLinks.html。自己设计各个页面并保存（也可以直接将实验14中的相应页面复制过来）。4.创建框架主页：选中“窗口”中的“框架”命令，显示框架面板。打开主页top.html页，单击“修改”菜单的“框架集”子菜单的“拆分上框架”命令，出现如图15-6的效果。将光标定位到下框架中，单击“修改”菜单的“框架集”子菜单的“拆分上框架”命令，出现如图15-7的效果，是典型的上中下网页布局形式。

5.设置框架属性：在框架面板中选中框架，在属性面板中修改框架属性，如图15-8所示。

分别将上中下框架名称修改为mytop、myMiddle、mybottom。源文件分别设为：top.html、middle.html、bottom.html。

6.保存框架集：单击保存按钮将框架集保存为indexFrame.html。

7.修改top.html中导航链接的目标框架，默认在myMiddle中打开。操作步骤是：选中超级链接，选中“修改”菜单中“链接目标”子菜单中的“myMiddle”项，如图15-9所示。

图15-6 拆分框架效果图-1

图15-7 拆分框架效果图-2

图15-8 框架属性设置

图15-9 修改导航链接的目标框架

8.在浏览器中或是发布后查看网站，效果如图15-10所示。网页上中下分别是三个独立的网页，有各自的滚动条。

图15-10 框架网页浏览效果

15.3.2 利用表格设计网页布局

利用表格设计网页布局就是利用表格设计网页布局，以对实验14中的“我的小站”进行修改设计为例进行学习，具体操作步骤如下：

1.新建站点：启动Adobe Dreamweaver CS6，单击“站点”菜单中的“新建站点”命令，则弹出“站点设置对象”对话框，如图15-1所示。在站点名称右边的文本框中填入站点名称“表格网页布局，在本地站点文件夹中填入D:websmyTableSite（也可以指定其他位置）后，单击“保持”按钮，就创建了一个新的站点。

2.在站点中添加主页文件index.html并打开，单击“插入”菜单中的“表格”命令，弹出“表格”对话框，如图15-11所示。将行设为3，列设为1，表格宽度为100%，边框为0，单击“确定”按钮，则添加了一个三行一列的表格。

3.调整单元格高度，将15.3.1中的top.html、middle.html、bottom.html依次负责到表格的三行中，这样就完成了主页的设计，效果如图15-12所示。

图15-11

“表格”对话框

4.5.6.7.8.图15-12

表格网页布局首页设计图

将主页的内容区替换为“个人简介”页面内容，并将网页另存为introduction.html。将主页的内容区替换为“我的学校”页面内容，并将网页另存为MySchool。

将主页的内容区替换为“我的相册”页面内容，并将网页另存为MyAbums.html。将主页的内容区替换为“我的链接”页面内容，并将网页另存为MyLinks.html。利用表格布局的网站完成，可发布或浏览效果。

15.3.3 操作与练习

1．在实验14.3.4中设计的个人求职站点添加一个导航页top.html和一个版权声明页bottom.html，并利用框架对站点重新布局，发布和测试站点。

2．将实验14.3.4中设计的个人求职站点按表格的形式重新设计，并发布和测试站点。

图15-13 操作与练习3要求效果图

3．按照图15-13所示设计一个表格，并填入内容，然后完成下列操作。

利用搜索引擎搜索到《三国演义》在线阅读的网站，在文字“三国演义”上建立超级链接，并链接搜索到的网站。

(1)将文字“中国四大名著”格式设为：隶书，24磅，红色加粗并居中。(2)将表格的单元格间距设为0，边框粗细设为2，边框颜色设为蓝色。(3)将文字“中国四大名著”所在单元格的背景色设为黄色。(4)将网页的上边距设为30像素，左边距设为20像素(5)将页面的标题改为“中国四大名著简介”。(6)保存网页，在浏览器中查看网页效果。

操作与练习

1、操作与练习

2、操作与练习3操作步骤（略）

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

利用表格布局网页

教学设计

授课教师：刘春霞

授课班级：计算机应用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、课堂小结，宣布下课

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

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

第三篇：表格基础和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

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

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

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

知识与技能目标：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

六、作业布置：同学思考以下问题（1）今天这节课我学会了什么？并写下本节课的收获。（2）课后再思考并绘制个人主页的页面布局。通过学生自己归类总结，既能提高学生的语言组织能力和写作能力、辨别力，又能提高学生的信息素养，这正是我们信息技术课所致力要求的目标。在整个教学设计中，我感觉本节课学生的学习任务和目标很明确，要让学生主动思考、获取。体现了学生的自主探究学习。

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

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

一、教学目标

知识与技能：

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

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

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

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

情感、态度与价值观：

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

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

二、教学重点与难点

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

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

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

三、教学方法

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

四、教学设计说明

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

五、教学过程

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

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

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

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

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

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

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

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

（二）新课学习

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

生：5列

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

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

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

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

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

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

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

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

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

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

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

学生思考

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

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

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

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

生：想。（跃跃欲试）

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

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

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

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

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

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

环节五：探究实践

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

生：没有

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

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

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

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

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

师总结。

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

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

教学反思

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

一、选取课题，自主探究

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

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

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

三、表格嵌套的讲解

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

四、学生情况分析

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

五、同行听课的借鉴

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

六、反思再教设想

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