网页中表格教案

第一篇：网页中表格教案

第三课 在网页中插入表格

一、教材分析

网页制作中用表格来规划整个网页的布局，是我们设计制作网页常用的手法。所以学会在网页中插入表格是网页制作中的一个重要的部分。本课的主要内容包括在网页中插入表格，表格的编辑和修饰，在表格中插入文字、图片等。通过对本课的学习，让学生了解用表格来规划网页会使网页结构显得清晰明快。在网页制作中，引导学生用表格来规划网页，为以后网页的开发设计打下一个良好的基础。

重点：学会使用多种方法在FrontPage中插入表格。难点： FrontPage表格的美化。

二、教学目标

知识与技能：学会在FrontPage中插入表格及美化表格的方法，培养学生运用表格设计来美化网页的能力。

过程与方法：采用研究体验式和协作式学习方法，培养学生对计算机知识的迁移能力和综合运用知识的能力。

情感态度、价值观：通过网页制作，培养学生良好的审美情趣。使学生逐步形成用表格来规划网页布局的网页制作习惯，为今后网页的开发设计打下一个良好的基础。

三、教学准备：

硬件环境：使用多媒体网络教室，配备宽带网络。软件环境：WinXP操作系统、FrontPage2000以上版本。素材资源：

1、在教师机或学生机上为学生建立相关的素材资源文件夹。

2、教师为学生准备上课演示用的教师制作的网页1。

我打算出示一组关于学生作文的中学生作文网。

3、为学生准备上课演示用的教师制作的网页2-----情感小屋网页，通过在情感小屋的首页内插入表格，通过进一步用表格规划情感小屋首页的网页布局来学习网页中表格的设计与制作。

五、教学流程

出示课前准备的含有表格的网页1中学生作文网，（一）创设情境，确定问题，布置任务

师：当你漫步在环境优雅的校园时，是否考虑过校园里的林荫道和绿化带的作用？ 生：起着绿化与方便交通的作用

师：其实还有着非常重要的作用，将行政区、办公区、生活区、活动区分成各自独立的区域，使整个校园错落有致，美丽如画，同样，如何将网页布置的美观整齐，结构清晰呢我们运用表格来布局与美化网页？

任务一：在FrontPage中有几种创建表格的方法？它们各有什么优点？

方法一：“常用”工具栏“插入表格”命令。

优点：操作速度快

方法二：“表格”菜单“插入”→“表格”命令。优点：能对表格预先进行设置。

方法三：“表格”菜单的“绘制表格”命令，手工绘制表格。优点：能做出特殊的表格，可以对表格进行修改。

任务二：

如何隐藏表格边框？-----推出表格属性的用法 任务三：

请同学们尝试着在FrontPage中制作如下表格：

（二）学生自主探究学习我 就 是 我姓名 年龄 学校 家庭住址 特长

姓别 QQ1、在FrontPage插入简单表格这一教学环节，考虑到学生已有Word知识的基础，故在此可放手让学生自主学习。通过让同学演示示范，得出插入表格的几种基本方法。并利用同Word相类似的编辑方法来体会FrontPage中表格的简单编辑。完成表格的简单制作。

2、为完成“表格的调整”这一教学任务，教师可提前演示制作好的表格，带着如下问题以小组为单位，研究和尝试对表格进一步美化：

（1）怎样进行行高与列宽的调整（2）怎样进行单元格的合并和拆分（3）怎样进行插入或删除表格中的行或列，（4）怎样进行平均分布行和列等基本操作（5）怎样进入表格属性对话框？

（6）表格属性对话框中相应选项的改变会给网页的效果带来哪些变化，起到什么修饰作用？

在此过程中，教师也可深入到各小组的研究讨论中去，和同学们共同寻找答案。然后，请完成表格美化的同学演示示范，以此突破本课利用表格属性来美化表格这一教学难点。

（四）创设任务，小组协作，巩固新知

在学生已基本学会插入表格和美化表格的基础上，再次创设学习任务，以小组为单位，打开站点“情感小屋”，并打开首页文件index.htm,分别插入四个表格，依次为：2╳3、2╳2、1╳4、2╳

1、宽度为780像素，水平居中。

最后展示各小组学生的作品，展开自评与互评。

六、评价建议：

本课的评价环节贯穿在学生学习活动的全过程，在学生每完成一个学习任务之后教师都要予以充分肯定，尤其在小组的作品展示阶段，教师要注意引导学生从多方面、多角度评

价每个小组的作品，如对各小组的网页作品，可在网页内容、网页规划及网页美化等方面进行自评和互评。注意培养学生良好的审美情趣。

第二篇：《网页设计中的表格排版》教案

《网页设计中的表格排版》教案

授课老师：陈清锋

总1课时

本周第5课时

备课时间:2010年11月30日

授课班级:高一（2）班

授课时间:2010年12月9日

教学目标

知识与技能

1、掌握网页设计中的格式化操作

2、掌握网页设计中表格底纹设置

3、掌握表格的属性设置

4、掌握网页设计中表格的排版 过程与方法

1、培养学习、比较、归纳等思想方法和自觉学习的方法。

2、培养学生动手操作的动手能力，形成比学赶帮的学习气氛。

3、培养学生基本的网页制作流程，培养学生任务驱动方法。情感态度与价值观

1、在操作过程中体会网页编辑的整体美感，培养学生基本审美的观点。

2、引导学生形成自主学习与合作学习等良好的学习方式。

3、培养学生正确的人生观和道德情感。教学重点

1、表格中单元格的美感排版

2、掌握表格中的底纹操作 教学难点

1、网页设计中的表格美感排版

2、网页设计中表格嵌套操作 教学用时 1课时 教学地点 三楼机房 教学过程

一、课堂准备及引入（2分钟）

师生问好。清点人数。安全教育：大家刚才来到机房是怎么来的？蹦过来的？！不要急冲冲地来，要做一个文明学生，有一个大将风范，从容地走进机房，如果你是跑来，容易撞到别人，自己也容易摔倒。

大家都知道，现在每个公司，每个学校，每个企业都有了自己的网站，他们的网站都是很漂亮，而且都是非常容易吸引人的，其实，你们也是有能力达到那种水平的，关键是看你要不要学的问题，如果你要学，你们完全有可能超越他们。那么，在制作网页之前我们应该做一个什么重要的步骤呢？建立网站站点，下面，让一个同学来建立一个网站。由学生上台操作完成。网站建好以后，我们就可以制作网页了。今天我们的主要内容是如何利用网页设计中的表格对网页进行排版。（展示课题和重难点）

接着，展示本次训练的网页效果。要求学生按要求完成本次作业效果。（发素材到学生机）

二、提出自学训练题目（5分钟）

学生自己建立一个以自己名字命名的站点，新建一个主页页面，同时再建3个页面作子页面。

1、建立主页，同时建立三个子页面，制作主页网页背景，字体大小和网页标题。

2、制作LOGO栏（一行3列）。

3、制作导航条（首页、湄州之旅、三字公约等8个导航）

4、制作主页面的排版。（注意各排版的关系和位置）。

5、制作页面底部的版权和与子页面的链接部分。

三、学生操作，教师巡视（5分钟）

四、学生演示操作结果，检查学生的自学效果（5分钟）学生操作结果。（分别由学生来完成题目）

五、教师讲解，指出学生的不足（板书）（8分钟）

1、建立主页，“文件”→“新建”→“基本页”→“HTML” →“确定”。保存存“index.html”，用同样的方法建立三个子页面，分别保存。a“属性”→“页面属性”→点击“背景图像”右边的“浏览”按钮，选择“pic/bggreen.gif”这个图像文件，作为网页的背景。

b在标题右边输入：欢迎进入充满朝气蓬勃的高一（2）班级网站。

2、制作LOGO：制作一行三列的表格，分别插入各自的图像和文件。

3、制作导航：a新建一个页面文件，然后在编辑区域中插入一个 2 × 1 的表格，并设置表格的基本属性参数。b将光标置于第一行的单元格中，再将单元格的背景颜色设置为 # 69A 538，并应用同样的方法将第二行单元格的背景颜色设置为 #8FCB 5A。设置完成后将光标至于第一行的单元格中，然后在此单元格中插入一个 1 × 8 的表格，并设置表格的基本属性参数.。c录入文字并设置单元格。在新插入的表格的所有单元格中输入文字，然后选中所有单元格，设置单元格的相关属性。d改变其中一个单元格的文字颜色和背景颜色，使其突出显示。e此时即可得到带有层次感的表格效果。

4、主页面的排版：（重点讲解，让学生明白为什么要这样操作）

a插入一个一行三列的表格（重点说明：大的外表格起到排版布局作用）b左边的一列：插入三行一列的表格，并输入必要的图像和文字。c中间的一列：插入三行一列的表格，并输入必要的图像和文字。d右边的一列：插入三行一列的表格，并输入必要的图像和文字。（查看结果与教师的效果有何不一样）

e左边的一列：插入三行三列的表格，并输入必要的图像和文字。f中间的一列：插入三行一列的表格，并输入必要的图像和文字。g右边的一列：插入三行三列的表格，并输入必要的图像和文字。

（整调排版使用网页整洁美观，关键利用网页设计中的空表格作用进行排版）

5、制作版权和子页面：一行一列表格，输入版权。制作部分超链接。

六、学生当堂训练（8分钟）

学生继续完善网页主页和子页面的设计及超链接制作。

七、学生提交作业（2分钟）

让学生把作业提交上来，检查学生的作业。

八、作业讲评，比较，推优（1分钟）

把学生作业进行讲评，学生之间对比在学习中形成一个比学赶帮的气氛。（做好学生作业情况记录）

九、小结（1分钟）

1、网页中的表格排版一定少用空格。

2、页面要整齐美观。

3、网页中排版要注意空隙的使用。

4、使用扩展布局。

5、只设宽度，不设高度。

十、作业（10秒）

制作一个关于个人的网站。

十一、思考题，指导下一节讲课内容（30秒）

1、网页设计中有否其他的页面排版？

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

第四篇：在网页中使用表格、文字和图片实训教案

在网页中使用表格、文本和图片

本节课案例效果图：

一、新建站点

在Dreamweaver中新建站点，站点名自定，在站点文件夹中新建文件夹images，用来存放网页需要的图片素材，新建文件index.html作为网站的首页，并开始编辑网页。（该步骤不熟悉这参考第一周实训教案）

二、index.html网页的编辑

1、添加网页的背景图片

单击【属性检查器】中的【页面属性】

在打开的窗口中，通过【浏览】设置网页的背景图像为images文件夹中的background.gif图片。如下图所示：

2、使用表格对网页进行布局 1）插入4行1列的表格

（1）在菜单【插入】中选择【表格】按钮，如下图所示：

（2）在下边的窗口上进行相应的设置，如下图：

注意：该表格是用来布局页面的，是控制页面中的内容在适当的位置显示的，不是我们用来填数据的表格，所以这里表格的边框粗细设置为0，这样的话表格看上去是隐藏的，不会影响页面的美观性。在这里我们为了编辑的方便可以先设置为1像素的边，最后完成网页后再修改为0。

运行浏览效果为：

我们会发现表格式默认居左的，接下来我们设置表格在整个网页中居中，将光标放在表格的边上单击一下选中整个表格，然后在【属性检查器】中将【对齐】方式设置为【居中对齐】方式。如下图所示：

接下来我们运行查看结果如下图：

2）增加单元格列的划分

（3）在第一行单元格中，再插入一个表格为1行2列，将光标定位在第一个单元格中，点击【插入】菜单，选择【表格】，并进行行列的设置，如下图：

运行效果如下图：

（4）使用同样的方法，在第3行的单元格中插入一个表格为1行3列，设置如下图所示：

运行效果如下：

接下来我们为了编辑过程中视觉比较清晰，我们通过拖拽的方式来拉高行高，如果是嵌套了表格的单元格，可以直接拖拉内部表格来进行高度的调整，结果如下图：

3、第1行内容的插入（1）在第1行内表格的单元格中分别输入Fashion时尚生活和服饰搭配和礼仪，结果如下图：

（2）文字内容的美化

首先，选中Fashion，如下图：

然后，在属性检查器中选中CSS，如下图：

接下来我们单击颜色选择器右下角的黑色小三角，在展开的颜色面板上选择一种橙色，选择是只要单击一下即可，如下图：

在单击的同时弹出CSS设置窗口，如下图：

在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fashion，注意前边必须有点，名称开始的符号必须为字母。然后确定即可。

接下来，还是保持选中该部分文字，在【属性检查器】中修改文字的大小为36，字体为Tahoma，并且加粗，这时就不会弹出CSS的命名窗口，因为该修改仍然是在.fashion类上进行的，如下图：

在此，如果想给dreamweaver添加新的字体，可以单击【编辑字体列表】进行添加，如下图：

譬如，将黑体添加进来，就可以在右边的【可用字体】中选择黑色，然后单击中间的箭头，则字体就添加到【选择的字体】部分，然后确定即可。

用同样的方法，将时尚生活设置为红色、大小16号、默认字体、加粗。（3）将“服饰搭配与礼仪”在单元格中居右

首先选中“服饰搭配与礼仪”，然后选择【属性检查器】的对齐方式为右对齐，如下图：

单击之后弹出如下窗口：

在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fsdp，注意前边必须有点，名称开始的符号必须为字母。然后单击确定即可。

运行结果如下：

4、第2行水平线的插入

将光标定位在外层表格的第2行，然后单击菜单【插入】，选择【HTML】-【水平线】，即可插入水平线。运行效果如下：

接下来将水平线的颜色修改为红色，单击选中水平线，将会在【属性检查器】中显示水平线的属性： 我们前边在修改“时尚生活”的颜色为红色的时候，曾经创建过一个.ssh的CSS类，现在我们只需要将该CSS类应用到水平线上就可以了，我们在属性“类”中单击下拉列表选择ssh即可将水平线设置为红色。如下图所示：

运行结果如下：

5、第3行第1个单元格内容插入

将光标定位在该单元格内，拷贝文字素材.doc文件中的第一段，粘贴过来即可。单击右键-粘贴。适当的调整该单元格中表格的列宽，运行结果如下：

接下来，在文字底部插入图片，注意这是需要另起一段或者换行，注意直接按Enter回车键是另起一段，按shift+Enter是另起一段，这两种方式都可以，只不过使用分段的方式图片和文字距离远一些，这里我们直接回车，然后在【插入】面板中选择【图像】进行插入。

在弹出的图片选择对话框中单击图片排列方式按钮，如下图所示，选择缩略图，就可以很直观的看到你要选择的图片了。

单击选择图片后确认即可。通过拖拉方式修改图片的大小和单元格的宽度进行适当调整后，运行效果如下：

接下来我们通过创建CSS的方式来美化该单元格中的文字，在CSS面板中，单击新建CSS规则按钮，打开新建CSS窗口，如下图：

在弹出的窗口中，输入CSS的类名，然后单击【确定】，如下图：

确定后，在弹出的窗口中，【分类】中选择【类型】，字体设置为“Tahoma”，字号设置为“14”。如下图：

然后在【分类】中选择【区块】，将首行缩进test-indent设置为25pixels像素，如下图：

最后按【确定】，我们可以在CSS面板中看到刚刚创建的CSS.zgwz。如下图：

但是这个时候，该CSS并没有起作用，我们必须把它应用到文字段落上才可以，现在我们选中整个文字，然后切换到代码视图，我们会看到如下图片：

我们看以看出来整段文字被嵌套在标签中，那么该标签就是表示一个段落的标签，我们只要将刚刚创建的CSS应用到该标签就可以对文字起作用，接下来我们将光标定位到

中的p后边，然后敲空格键，在弹出的下拉菜单中双击选择“class”即可，如下图：

双击选择class后，又弹出一个下拉列表，让你选择你使用哪个类来美化该段落，我们当然要选择我们刚刚创建的.zgwz这个类，只要双击该处即可。如下图：

这时，我们去运行网页，则效果如下：

其实，我们发现好像缩进的不够两个字符，那么我们可以继续在CSS面板中，双击.zgwz这个类，打开CSS设置窗口，在【区块】中去调整text-indent的的像素的多少，直到合适为止。

6、第3行第2个单元格中插入鼠标经过时图像

该效果是当我们的鼠标指针放到这个图片上的时候，这个图片就会变成另一幅图片，从而实现一种美轮美奂的效果。

首先把光标定位在第3行的第2个单元格中，然后单击【插入】面板的【图像】处的黑三角，选择弹出的列表中的【鼠标经过图像】，如下图：

在弹出的窗口中，选择【原始图像】为shishang_r3_c4.jpg，【鼠标经过图像】为shishang_r3_cquse.jpg，然后确定即可，如下图：

调整单元格和图片大小到适合程度后，运行网页后，将鼠标放在图片上，可以观察到图片的切换效果。

7、第3行第3个单元格中插入列表文字和图片

单击【插入】面板【常用】旁边的黑色箭头，展开列表后，选择【文本】，如图所示：

在【文本】面板中，选择编号列表，则插入点处就自动插入1.，如下图：

在插入点出插入文字素材中的“文明大方”后回车，则编号2会自动出现，依次按照文字素材将三个标题拷贝上去，如下图：

接下来我们，将光标定位在“文明大方”后边，敲击回车，如下图：

将光标定位在2.后边，选择【属性检查器】中的【HTML】，如下图：

单击上图红框处的向右缩进按钮，则2.变成1.的下一级列表，如下图：

然后我们再单击【属性检查器】中的项目符号按钮，则数字列表又可以转换成项目列表，如下图：

然后我们将文字素材中的文明大方的内容拷贝到该项目符号处，如下图：

用同样的方法，添加搭配得体和个性特征的内容，结果如下：

接下来，我们来进行列表项的美化，用图片来修饰，首先单击CSS面板的新建CSS规则的按钮，新建CSS规则.liebiao，如下图：

确定后，在弹出的窗口中【分类】中选列表，然后再list-style-image中选择图片point01.gif为列表用图片，单击【确定】。

然后切换到代码视图，如下：

在标签

ol的后边敲空格，选择class，然后选择我们刚才创建的.liebiaoCSS类，这样我们就把.liebiao样式应用到了列表中，结果如下：

在文字的下方插入两幅图片，并适当调整大小，如下图：

8、在最后一行输入内容“Copyright © 2008 by Choice.Lee All Rights Reserved” 我们会发现© 在键盘上是无法直接输入的，需要打开【插入】面板的【文本】，选择特殊的版权字符©即可插入。如下图：

然后我们选中文字内容，并且在【属性检查器】的CSS中选择【居中】按钮，如下图：

在弹出的窗口中，输入类名.footer后确定，如下图：

预览效果如下：

9.去掉布局表格的边框

单击布局用的表格，在【属性检查器】中将【边框】设置为0，敲回车或tab键确认即可。如下图：

注意布局时用了三个表格，全部修改过来，网页会更美观。最终效果如下：

第五篇：表格网页制作及反思

表格网页的制作

三明市实验小学 黄跃

一、教学目标：

⒈了解用表格进行网页版面布局草图的设计方法； ⒉学会运用表格制作网页；

⒊激发学生学习兴趣，创作欲、创新意念及实践能力 ⒋培养学生学习他人并与他人合作精神。

二、教学重点、难点：

重点：表格网页的制作 难点：合理布局、设计网页

三、教学准备：

⒈学生学习、生活素材 ⒉简单相关教学课件范例

四、教学过程：

㈠检查分组及集收素材的情况。（3’）

⒈请班级网站管理员上台介绍分工情况，及班级网站名称和主要网页标题 师：同学们，我们学校更名为三明市实验小学后，学校的网站也以新的面貌发布在网络上，学校网站为每个班级开辟了网页空间。上节课，老师布置大家共同为制作班级网页收集平时学习、生活中的素材，同学们都准备好了吗？（生答：准备好了！）很好！上节课，同学们还选出了二位同学担任班上的网页管理员，据老师了解，他们还把同学讨论的结果做了一个小小的演讲稿，下面请他们上台汇报一下。（请管理员站起来，并请其中一位上台汇报）

⒉个别小组展示素材：

下面，老师想请一些小组展示的你们收集的素材。（请书法组、班级之星组）㈡导入课题：（3’）

谈话导入：看来，同学们收集的素材很丰富！随着学习的深入，网页的内容 也越来越丰富了。怎样把这些内容合理地布局，使它们显得紧凑而不凌乱呢？这就需要用到表格！今天我们就共同学习表格网页的制作。（出示：课题）㈢展示表格网页作品，激发学生学习兴趣和创作欲

网络广播：网页作品一、二个。㈣学习表格网页的制作步骤：

⒈提问：刚才同学看到网页的布局都是错落有致、美观大方，其实它们都是通过利用表格来实现网页的布局。那么，怎样进行表格网页的制作呢？首先请同学回顾一下制作普通网页的步骤做什么？

⒉学生回顾普通网页的制作步骤：（师板书：步骤）建文件夹→选定、复制素材→设计表格→输入素材 ㈤引导学生学习表格的编辑：（5’）

⒈展示作品和草图学生观察对比设计。

小结：网页的内容相同，但表格设计的样式不同，网页的效果也不一样。接下来我们就学习表格的编辑。

师：提到表格制作同学并不陌生，因为我们在WORD中学习过表格的制作。⒉通过网络广播：表１这是一个编辑后的表格。⒊师画一个规则表，让学生上台演操作： 操作：选定→插入→拆分→合并

⒋引导学生运用在WORD中学习的知识，自主探索表格按钮、表格菜单的使用，并试着做出表1一样的表格。

⒊提示：编辑表格时，关键的一步是：选中（即操作难点的突破）。⒋学生动手编辑表格。

⒌对有困难的学生小组帮助，再则老师帮助。㈥学生动手设计表格网页：（16—18’）

⒈布置设计：同桌相互讨论，并设计出本小组的网页。需要画版面草图的请用准备好的纸张。

⒉操作提示：

文件夹、文件名应用小写字母；文件名和图片应存放在同一个文件夹中。⒊学生动手制作网页。㈦展示交流：（5’）

学生以小组为单位代表展示作品，学生欣赏互评。㈧课堂小结：（2’）

同学们，今天我们发挥集体的智慧为班级设计了丰富多彩的网页，其实制作一个优秀的网页光靠一节课是不够的，所以今天在课堂上没完成的同学课后可继续完成。

教学反思：

表格网页的制作这节课，是在学生学会了普通网页制作的基础上进行教学，因为FrontPage2000中的表格应用与旧知识的Word2000中的表格应用操作相似。因此，课的特点是操作性强，要考虑到：既要传授新的知识上，即表格网页的设计步骤、表格的设计，又要留给学生大量的时间操作，所以我选择了主要以学生自主学习，探索操作的教学方法，难点的之处给以详细讲解，实践证明，大部分学生能够接受这样的教学方式，让学生联想已学的知识，用已掌握的知识方法来探索新知，达到新旧知识融会贯通之目的，收到良好的效果。

在课程的设计中，我以我们学校更名为三明市实验小学后，学校的网站也以新的面貌发布在网络上，学校网站为每个班级开辟了网页空间。让学生共同为班级设计制作网页引课导入，让学生收集平时学习、生活中的素材，并上网搜集相关资料，激发了学生学习兴趣，拓展了学生视野，扩大了知识面。在实际的操作中，学生收集、处理、应用信息的能力及自主探索、操作实践的能力得到了很好的培养，在激发学生学习兴趣，创作欲、创新意念的同时，也培养了学生学习他人并与他人合作精神。