题应用表格布局网页(第11章
《应用表格布局网页》教学设计.doc
《应用表格布局网页》教案南京市六十六中学姜丽华20010 年 4 月课应用表格布局网页结构课型新授课题知识与技能：、1、认识表格网页中的作用；2、掌握网页中表格的制作方法；表格属性的属性设置方法；3、能根据网页内容设计应用表格布局网页的页面；教 4、尝试根据内容需要设计表格布局网页页面；学过程与方法：目1、利用对比，加深学生对表格布局网页的认识；标2、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法；3、通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
情感态度与价值观：1、通过实践创作的过程，形成主动学习和利用信息技术、参与信息作品创作的态度；2、培养学生注重吸取成功的经验，提高本身的信息素养；教学表格的制作及设置方法；重根据实际情况设计并应用表格布局网页；点教学 1、应用表格布局网页页面的意识；难2、合理制作表格，实现页面布局点教学教师讲解、演示、与学生任务驱动相结合；方法教学多媒体网络辅助教学；手段将“本课内容”文件夹发送到学生机桌面文件夹中；打开并预习本课内教容。
学课前过准备程目标教1、明确表格在网页制作时的作用：页面规划学（ 1）、展示两个页面并进行比较：一、对总结：这些线就是表格线，在做网页时，可以利用表格布比，引入新课局网页结构。
⑵、引出本课内容：探索用表格来布局网页的页面。
⑶明确本课的第一个任务：使用表格制作同样的网页。
体会用表格布2、模仿用表格布局网页页面结构局网页⑴引导学生回忆 Word 中学过的表格内容，提示学生表格操作跟 Word 中具有很大的相通之处；⑵展示效果页，引导学生分析页面的结构，探索需要制作教表格的结构；学过⑶讲解演示表格的制作及调整；程⑷布置学生完成任务一：⑸展示成功学生的作品，引出表格属性的设置；3、独立制作表格布局网页⑴刚才我们一起体会用表格布局网页的网面结构：先分析确定所需表格的结构，然后根据实际制作设置表格布局网尝试用页页面结构。
Web应用程序设计案例教程第11章
段时间来监测网站的运行情况，发现问题及时予以解决。 ☺当确认网站能够满足客户的正常商务活动后，可以通过外 界媒体和网站自身，加大宣传力度，提高网站的知名度，扩 大业务量，达到盈利的目的。
3. 系统维护和改进 ☺网站的维护是保障网站正常运行的必要条件，数据的清理
和备份是经常要做的工作。 ☺防范外界对网站干扰和攻击不可以掉以轻心，硬件的保养 也是网站维护的日常工作。
第11章 网上书店各模块的整合
(1) 了解电子商务网站的开发过程 (2) 掌握网上书店系统主页的设计 (3) 掌握网上书店系统各模块的整合与完善 (4) 掌握网上书店系统的测试
教 学 导 航
章 章
(1) 学会设计网上书店系统的主页 (2) 学会将各模块整合为一个完整的系统 (1) 培养学生的自主学习能力和知识应用能力 (2) 培养学生勤于思考、认真做事的良好作风 (3) 培养学生理论联系实际的工作作风、独立工作的能力，树立自信心 网上书店系统主页的设计和各个模块的整合 网上书店系统主页的设计 理论实践一体化，教、学、做合一 6课时(含课堂实践) 项目：网上书店各模块的整合与调试 任务1：设计网上书店的主页面 任务2：整合且完善网上书店的各个模块 任务3：网上书店的调试与测试 创建项目ch11→添加模块文件→设计网上书店的主页→添加前面各章已创建的窗体文件→完 善网上书店系统的各个页面→网上书店系统的调试与测试 章 的 (1) Page对象、Response对象、Request对象、Session对象、Application对象等 (2) 的主要对象：SqlConnection、SqlCommand、SqlDataAdapter、DataSet等 (1) Web控件：DataList控件、DataGrid控件、Label控件、TextBox控件、Button控件、 HyperLink控件、Image控件和表格等 (2) 自定义控件
《应用表格布局网页结构》教学设计
《应用表格布局网页结构》教学设计一、教学目标知识与技能：1、了解表格在网页设计中的作用。
2、能够根据网页的内容,正确布局表格的结构。
3、掌握网页中表格的制作方法，能够在单元格中正确插入文字和图片，掌握表格属性的设置方法以及单元格的修饰与编辑方法.过程与方法：通过观看优秀网站表格布局，动手设计表格等环节，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的发散思维能力;通过学生自主地编辑和修饰表格等环节，培养学生自主探究学习的能力。
情感、态度与价值观：1、提高学生自学和探究的能力，培养学生应用表格布局网页结构的兴趣。
2、提高学生语言表达能力，学会客观的评价作品.二、教学重点与难点重点:了解表格在网页设计中的重要作用掌握插入、编辑表格以及表格，单元格的属性设置方法。
难点：表格的嵌套表格,单元格，网页属性的设置三、教学方法讲解演示教学法，小组合作学习法，自主探究学习法四、教学设计说明本节课是初中信息技术（下册）2007年7月第一版第11单元《设计主题网站》第二节的内容，教学面向的是初二年级的学生,该年龄段的学生已具备了一定的信息素养，掌握了基本的信息技术知识和技能。
初中的学生喜欢新、奇、特的事物，接受能力和理解能力比较快。
而直观、醒目的网站示例图片则可以培养学生对于本课题的兴趣,但是学生对于如何应用表格布局网页结构的操作是比较模糊的。
因此本节课充分地发挥学生了的积极性,让学生随着学案所设置的环节，探究完成一个又一个的应用表格过程.而学案则是在尊重学生解决问题的思维过程方式的基础上设置的,注重学生的学习体验和情感的体验。
整节课以学生为主体、教师为主导的架构下,搭建以生为本的情景学习平台，帮助学生自学、交流讨论、深入探究，以不断的完成应用表格布局网页结构的过程为手段，一步步完成学习任务.五、教学过程课前将素材和网站站点发送到桌面，指导学生解压缩。
并带领学生熟悉本节课所要制作的网页的素材。
应用表格布局网页
应用表格布局网页响水县第一初级中学沈宇一、学习内容分析《应用表格布局网页》是苏教版初中8 年级信息技术第3章《主题网站设计与制作》第2 节《制作网站》中的内容。
目的是通过制作“多彩的生物”网页，了解表格在网页设计中的作用，掌握表格的制作方法和属性的设置方法。
本节以第1 节《创建网站，制作首页》为基础，第一节是网页设计中最基础的部分，侧重于网页设计中文字的编辑、修饰、图片的插入以及网页属性的设置、有了第一节的基础，同学们综合处理文字、图片等信息的能力会有很大的提高。
二、学者分析本节课的学习对象是八年级的学生，通过第一节的学习，学生已经掌握了站点的建立与删除，设计简单网页的基本方法，本节课主要是让学生在上一节的基础上，根据网页设计的内容，正确设计表达网格的结构，掌握修饰与编辑单元格的方法，创作属于自己个性化的网页。
从而培养学生运用信息技术，解决问题的能力，提高学生的学科素养。
三、学习目标1、了解网页设计中表格的作用。
2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。
3、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。
四、教学重点与难点教学重点：掌握插入、编辑表格的方法及表格的属性设置方法。
教学难点：表格的嵌套设计在网页设计中的应用五、教学策略1、问题激发策略：使用多媒体网络教室全屏演示系统全屏控制，提出操作环节中遇到的问题中，让同学们在自主实践环节，自己运用已有的知识去处理相关操作；2、示范-模仿教学策略：使用多媒体网络教室全屏演示系统窗口控制，让学生与教师同步跟学操作，增加实际操作效果；3、自主实践学习、同学间协作实践学习等策略，充分运用网络教室教师与学生电脑的互动特点，教学全屏演示、窗口演示、学生作品展示等过程，指导学生完成作品，并启发学生触类旁通，对网页中表格的基本操作有一定的发解六、教学过程（—）创设情景，引入新课通过前几课的学习，同学们对DW有了初步的了解，提问同学回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学生认真回顾，回答教师提问。
《利用表格布局网》课件
最佳实践和技巧
合并单元格 控制单元格大小 细分行列 避免嵌套
CSS框架
使用表格布局网的CSS框架（如 Bootstrap）减少工作量。
表格布局网的优势和局限性
表格布局网有很多优势，例如更加直观明了的布局、兼容性强、可以细分行列等。但是它也有一些局限性， 如不易维护、不适用于跨设备适应。
1
优势
更加直观明了的布局
2
优势
兼容性强，适用于各种浏览器
3
优势
可以细分行列，进行网页布局及页面元素设计
总结和要点
通过本教程，您已经了解了表格布局网的优劣势、实际应用、最佳实践和技巧。表格布局网虽然有一些 限制，但在特定场景下仍是一种优势
更加直观明了的布局 兼容性强，适用于各种浏览器 可以细分行列，进行网页布局及页面元素设计
表格布局网的局限性
不易维护，需要多次调整单元格的大小和位置 不适用于跨设备适应，容易导致布局错乱
利用表格布局网
我们将介绍表格布局网的优势和特点，学习如何使用表格布局网，分享实际 应用案例以及最佳实践和技巧。
什么是表格布局网？
表格布局网是一种基于HTML表格元素实现的网格布局。它可以让你更加简单快捷地实现网页布 局，而且兼容性良好。
特点
表格布局网可以细分行列，进行网页布局及页面元素设计。
优势
相比传统布局方式，表格布局可以节约代码，布局更直观明了。
如何优化表格布局网？
如果你想让表格布局网的效果更加出色，可以参考以下最佳实践和技巧。
1 合并单元格
使用合并单元格的技巧，可以让布局更加美 观简洁。
2 控制单元格大小
通过控制单元格大小，可以让布局更加灵活 多变。
3 细分行列
使用表格布局网页
:::::21世纪职业教育数字艺术规划教材:::::
3.3设置表格属性
除了可以设置整个表格的属性外，还可以单独设 置某行、某列或某些单元格的属性。首先选择要 设置属性的单元格的组合，就会显示出单元格的 【属性】面板，如下图所示。
:::::21世纪职业教育数字艺术规划教材:::::
3.3设置表格属性
:::::21世纪职业教育数字艺术规划教材:::::
3.1表格概述
（3）利用表格合成尺寸较大的图像。网页中经常用到图像，若图像太大， 会影响用户的浏览速度，网页中的单个图像应该控制在15KB以内，不要超过 20KB；对于不得不使用的大幅图像，可以使用Fireworks 8 等一些图像处理 软件将其分割成几个小图像，然后在Dreamweaver CS3中借助表格把这些小 图像合成一个大图像
:::::21世纪职业教育数字艺术规划教材:::::
3.1表格概述
3．选中表格和表格元素 要对表格进行编辑，必须首先选中被操作的对象。选中表格操作包括下列情况 ： （1）选择整个表格。 将光标移动到表格左边框之外，待其变成向右的箭头形式时，单击鼠标左键。 将光标移动到表格右边框之外（不在表格之内），向左拖动鼠标。 将光标置于某个单元格中，执行【修改】>【表格】>【选择表格】命令。 将光标置于某个单元格中，按两次【Ctrl+A】组合键。 将光标置于某个单元格中，单击状态栏中的【<table>】按钮。 按住【Shift】键的同时，在表格中任意位置单击鼠标左键。 将鼠标指针指向表格边框线，若出现红色外框线，则单击鼠标左键。 将鼠标指针置于表格的边框线上，当变成双向箭头时，单击鼠标左键。
:::::21世纪职业教育数字艺术规划教材:::::
用表格为网页布局
表格布局的优点
简单易用
01
表格布局简单直观，容易上手，适合初学者使用。
结构清晰
02
表格能够清晰地展示页面内容，使页面结构化，便于阅读和理
解。
兼容性好
03
表格布局在各种浏览器中都有较好的兼容性，不易出现排版问
用表格为网页布局
目录
CONTENTS
• 表格布局的基本概念 • 表格布局的常见应用场景 • 使用表格进行网页布局的技巧 • 表格布局的未来发展 • 表格布局的实例分析
01 表格布局的基本概念
CHAPTE种使用HTML表格元素 来创建网页布局的方法。它通过将页 面内容组织成表格形式，实现页面的 结构化和排版。
腾讯问卷表单制作
腾讯问卷表单制作使用表格来构建问卷的结构和问题选项。
表格布局使得问卷结构清晰，易于填写和提交，提高了问卷的完成率和准 确性。
腾讯问卷表单制作的表格布局还支持多种表单元素，如单选框、复选框、 文本框等，以满足不同问卷的需求。
谢谢
THANKS
数据展示
数据对比
表格是展示数据对比的理想方式，可以将不 同数据列进行比较，方便用户快速了解数据 之间的差异。
数据汇总
表格可以用于数据汇总，将大量数据按照一定规则 进行分类和整理，以表格形式呈现，方便用户查看 和分析。
数据可视化
通过使用颜色、字体、边框等样式属性，可 以将表格数据以可视化的方式呈现，提高数 据的可读性和易用性。
加载页面，提高用户体验。
淘宝网首页的表格布局还结合了CSS样式，实现了美观的页面效
03
果。
新浪微博数据展示页
利用表格布局网页教案
利用表格布局网页教案教案标题：利用表格布局网页教案教学目标：1. 了解表格布局的基本概念和原理。
2. 掌握使用HTML和CSS创建基本的表格布局。
3. 能够灵活运用表格布局设计网页。
教学准备：1. 计算机和互联网连接。
2. HTML和CSS编辑器软件。
3. 示例网页代码和相关图片素材。
4. 课堂展示设备。
教学过程：Step 1: 引入表格布局概念（5分钟）介绍表格布局的基本概念和原理，解释为什么表格布局在网页设计中非常有用。
Step 2: HTML表格结构（10分钟）解释HTML表格的基本结构，包括表格、行和单元格的标签及其属性。
演示如何创建一个简单的表格。
Step 3: CSS样式设置（15分钟）说明如何使用CSS样式设置表格的外观，包括表格边框、背景颜色、字体样式等。
演示如何应用样式到表格中。
Step 4: 表格布局设计（20分钟）展示一些常见的表格布局设计示例，如网站导航菜单、产品特性比较、课程时间表等。
解释如何将内容合理地安排在表格中。
Step 5: 实践操作（30分钟）让学生动手实践，在编辑器中创建自己的网页，并使用表格布局设计页面结构。
提供示例代码和图片素材供学生参考。
Step 6: 学生展示和讨论（15分钟）让学生展示他们设计的网页，并就设计选择、布局优化等方面进行讨论和反馈。
Step 7: 总结和拓展（5分钟）总结表格布局的优点和应用场景，并鼓励学生进一步探索其他网页布局方式。
教学评估：1. 学生在实践操作中的表现和成果。
2. 学生对表格布局的理解和应用能力。
3. 学生在展示和讨论环节的参与和表达能力。
教学延伸：1. 鼓励学生进一步研究和尝试其他网页布局方式，如Flexbox和Grid布局。
2. 引导学生学习响应式设计，掌握如何使用媒体查询和表格布局来适应不同屏幕尺寸。
教学反思：根据学生的实际情况和学习进度，灵活调整教学过程中的时间分配和内容讲解，确保学生能够理解和掌握表格布局的基本原理和应用技巧。
《使用表格布局网页》课件
本课程将介绍如何使用表格布局创建网页。掌握表格布局技术，让你的网页 布局更加灵活、美观。
表格布局介绍
什么是表格布局
表格布局是一种使用HTML表格元素进行网页布 局的技术。
表格布局的特点
表格布局具有结构清晰、适用性强等特点，可 用于多种网页布局需求。
表格布局语法
表格元素
总结
表格布局的总结
表格布局是一种强大的网页布局技术，适用于多种布局需求。
今后如何学习表格布局技术
深入学习HTML和CSS知识，结合实践项目不断提升表格布局的技能。
使用<table>标签定义一个表格。
行元素
使用<tr>标签定义表格中的行。
单元格元素
使用<td>标签定义表格中的单 元格。
创建表格布局网页1美化表格布局2
通过添加样式和背景色以及调整单元格 大小和行高等方式，让表格布局更美观。
创建表格元素
使用<table>标签创建一个基本的表格元 素。
优缺点分析
1 表格布局的优点
结构清晰、适用性强，可以实现复杂的网页布局需求。
2 表格布局的缺点
不适用于响应式设计，较难实现某些现代化布局效果。
应用场景
电子商务网站
表格布局适用于展示商品列表和 购物车等功能。
仪表盘界面
表格布局可用于显示数据统计和 信息概览等。
新闻网站布局
表格布局容易呈现多列文章列表 和分类导航等。
利用表格布局网页
第五讲 利用表格布局网页
芜湖职业技术学院 信息工程系
本讲要点：
• 表格的基本操作 插入表格、选择表格、设置表格、调整大小 • 利用表格进行布局的方法
插入表格
在网页制作中， 对页面进行布局是非 常重要的，表格就是 页面布局中常用的方 式。Dreamweaver 不仅支持在表格中有 序地排列数据，还可 用表格对网页中的文 本、图像及其他元素 进行定位。
* 尺寸选择：
目前一般800X600的分辨率为约定俗成的浏览模式。 所以为了照顾大多数访问者，你页面的尺寸以800X600的 分辨率为准。 * 造型的选择： 先在白纸上画出象征浏览器窗口的矩形，这个矩形就 是你布局的范围了。
2. 软件布局法 如果你不喜欢用纸来画出你的布局意图，那 么你还可以利用软件来完成这些工作。这个软件 就是Photoshop。Photoshop所具有的对图像的编 辑功能用到设计网页布局上更显得心应手。不像 用纸来设计布局，利用Photoshop可以方便的使用 颜色，使用图形，并且可以利用层的功能设计出 用纸张无法实现的布局意念。
在Dreamweaver 中提供了多个表格模板供用户选择使用， 还可以通过设置模板的参数来调整表格的外观。
表格嵌套
嵌套表格是表格布局中一个十分重要的环 节，它是指在一个表格的单元格中再插入一 个表格，嵌套表格的宽度受所在单元格的宽 度限制，其编辑方法与表格相同。
利用表格进行简单页面布局
表格的高级应用技巧
3. 框架布局 从布局上考虑，框架结构不失为一个好的布局方法。它如同表格 布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消 边框，所以一般来说不影响整体美观。
表格数据的导出
因为语言原因，导出的文件只能用写字板 打开才能正确显示其中的数据，在其他程 序中打开会乱码。
用表格布局网页教案
用表格布局网页教案第一章：表格布局网页概述1.1 教学目标了解表格布局网页的概念和作用掌握表格布局网页的基本方法1.2 教学内容表格布局网页的定义表格布局网页的优势表格布局网页的基本方法1.3 教学步骤引入表格布局网页的概念讲解表格布局网页的优势演示表格布局网页的基本方法1.4 课后作业学生自行设计一个简单的表格布局网页第二章：表格布局网页的基本操作2.1 教学目标掌握表格布局网页的基本操作2.2 教学内容插入表格调整表格大小合并单元格2.3 教学步骤插入表格并调整大小合并单元格和拆分单元格2.4 课后作业学生自行设计一个包含表格布局的网页第三章：表格布局网页的样式设置3.1 教学目标掌握表格布局网页的样式设置3.2 教学内容表格样式设置单元格样式设置3.3 教学步骤讲解表格样式设置的方法讲解单元格样式设置的方法3.4 课后作业学生自行设计一个包含表格布局和样式设置的网页第四章：表格布局网页的高级应用4.1 教学目标掌握表格布局网页的高级应用4.2 教学内容跨列单元格嵌套表格4.3 教学步骤讲解跨列单元格和跨行单元格的应用方法讲解嵌套表格的应用方法4.4 课后作业学生自行设计一个包含跨列单元格、跨行单元格和嵌套表格的网页第五章：表格布局网页的优化与调试5.1 教学目标掌握表格布局网页的优化与调试方法5.2 教学内容优化表格布局网页的性能调试表格布局网页的问题5.3 教学步骤讲解优化表格布局网页性能的方法讲解调试表格布局网页问题的方法5.4 课后作业学生自行设计一个包含优化与调试的表格布局网页第六章：响应式表格布局网页6.1 教学目标理解响应式网页设计的基本概念掌握使用表格进行响应式布局的方法6.2 教学内容响应式网页设计的基本原则使用CSS媒体查询调整表格布局实现表格的响应式布局6.3 教学步骤介绍响应式网页设计的基本原则演示如何使用CSS媒体查询调整表格布局示例实现一个表格的响应式布局6.4 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。
使用表格讲义布局网页
•在表格内部任意单元格中单击鼠标左键，然后在标签选择器 中单击对应的“<table>”标签 。
•将插入点置于表格的任意单元格中，表格上方或下方将显示 绿线标志，单击最上方或最下方标有表格宽度的绿线中的 ， 在弹出的下拉菜单中选择“选择表格”命令。
2．合并单元格
所谓合并单元格，就是将相邻的两个或多个单元 格合并成一个单元格。 拖动鼠标选中要合并的连续单元格（此处为第1行 中间的2个单元格），然后单击属性检查器上的 “合并所选单元格，使用跨度”按钮 ，则2个单 元格合并为1个单元格
4.2.2 插入、删除行和列
在使用表格组织大量信息时，往往需要在创建好的 表格中添加或删除行与列，以增加或减少记录。
此处表示未
明确设置单
元格宽度
列
行
此处显示了表格 的宽度。如果只 显示一个“▼”
单元格
符号，表示未明 确设置表格宽度
4.1.1 创建表格
Dreamweaver CS4拥有非常完善的表格编辑 功能，本节我们首先来看一下如何在网页文档中 创建表格。
4.1.2 选择表格和单元格
1．选择表格
•将鼠标光标移至单元格边框线上，当鼠标光标变为 或 形 状时单击鼠标左键。
精品jing
使用表格布局网页
4.1 表格基本操作
表格（Table）是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行（在HTML语言中 以<tr>标签开始，</tr>标签结束），垂直的多个 单元格称为列（以<td>标签开始，</td>标签结
束），行与列的交叉区域称为单元格，网页中的元 素就放置在这些单元格中 。
信息技术学业水平测试 上机 网页制作——利用表格布局网页
第四章第二节网页制作——利用表格布局网页一、启动网页制作软件FrontPage
单击开始菜单——程序——Microsoft FrontPage
二、新建网页
单击文件菜单——新建——网页
三、保存网页、另存网页
单击文件菜单——保存
单击文件菜单——另存为
选择保存位置，如果要求保存在某个文件夹下，而该文件夹不存在，则新建该文件夹
四、 利用表格布局网页
1、 插入表格
单击表格菜单——插入——表格
2、 设置表格的列数与行数
文件命名
3、设置表格的属性
在表格上单击鼠标右键——表格属性
修改边框的粗细、颜色、指定高度和宽度（注意像素和百分比的选择）、设置背景颜色和背景图片。
用表格和布局模式布局网页
项目九用表格和布局模式布局网页
一、目的
1、掌握用表格布局网页基本操作
2、掌握用布局模式布局网页基本操作
3、比较表格和布局模式的优劣
二、内容
1 ．在“插入”面板的“布局”工具组中, 按“布局” , 出现“布局”模式
进入布局模式对话框
2 、布局表格的操作
在“布局”工具中，单击“布局表格”按钮，鼠标指针变为加号。
3、在“布局”工具中，单击“绘制布局单元格”按钮。
鼠标指针变为加号。
指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建布局单元格。
4、更根据提供的素材（6 个图片和1 个文本文件）制作如下效果图的网页，用布局模式制作。
具体要求如下：布局表格宽=1054 ，高=590 ，背景=
#22aabb ，间距=20 ，填充=0 ；标题单元格宽=1054 ，高=40 ，背景= 无，其内文字颜色为红，字号=36 ； 6 张图片单元格，宽=100 ，高=130 ，背景= 无；6 张文字解说单元格，宽=216 ，高=130 ，背景及文字颜色可自由设置，以清晰、美观为度，垂直对齐方式= 居顶，单元格内文字字号=9pt 。
“热门读物”单元格宽=260 ，高=480 ，背景= #CCFFFF ，垂直对齐方式= 顶端，其内文字/ 标题居中对齐，其他属性可自由设置，以美观为度。
三、小结
用表格布局网页比较严谨，精确，而用布局模式布局网页比较直观、随意。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
课题：应用表格布局网页（第11章第2节第1课时）授课教师：盐城市田家炳中学瞿立真授课地点：盐城市田家炳中学科技楼二楼授课时间：2010年3月26日下午2：30教材分析：本节内容是江苏科学技术出版社《初中信息技术》（下册）第11单元设计主题网站的第2节应用表格布局网页结构。
文字、图片等对象的定位是网页设计中的难点，用表格布局网页结构是一种非常重要，也是最为常用的方法，是网页设计中最主要的内容之一，也是网页设计的重点。
学生通过用表格布局网页，将进一步理解表格的作用。
学情分析：FRONTPAGE中表格的制作方法与WORD有很多相似之处，所以学生应该都是有表格制作的基础的。
但考虑到时间间隔比较长，知识的遗忘率比较高，还需要老师帮助他们一起回顾，从而对比学习，进行知识的迁移。
表格的修饰部分主要是让学生区分表格属性和单元格属性，而具体参数的设置并不难，主要让学生自己感受设置具有个性化的参数。
教学目标：1、知识与技能：(1)了解表格在网页设计中的作用，区分表格和单元格的属性。
(2)掌握网页中表格的制作方法、表格属性及单元格属性的设置，能够在单元格中正确插入文字和图片。
(3)根据网页设计内容，正确布置表格的结构。
2、过程与方法：(1)通过对比学习与自主探究，了解并掌握frontpage软件学习的一般方法及规律。
(2)培养学生合理利用教材，通过自主学习，牢固掌握表格规划网页布局的具体操作方法。
(3)通过教学演示，进一步理解表格的作用，培养学生创作、规划网页布局能力。
3、情感态度与价值观：(1)通过应用表格布局网页的学习，让学生体验制作的乐趣，激发学生的学习兴趣，培养学生的审美、设计和组织能力、语言表达能力、小组合作能力、自主学习能力。
(2)通过“保护动物”网站的制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。
教学重点：(1)了解表格在网页设计中的重要作用。
(2)掌握表格属性、单元格属性的设置。
教学难点：(1)区分表格、单元格的属性设置方法。
根据网页设计内容，正确布置表格的结构。
(2)学生自主设计表格并合理、协调进行网页布局。
教学方法：对比引导、探究学习项目活动教学法教学过程：教学过程教师活动师生活动设计意图复习以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入。
学生认真回顾，回答教师提问。
为本节课教学做一定铺垫。
引入（1）呈现两个页面让学生进行观察比较，你更喜欢哪一个？a.使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；b.页面凌乱，图文混杂，摆放杂乱。
提出问题：如何实现页面工整？（揭题）师呈现第三个页面，将a中的表格边框显示出来。
一、分析表格结构展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到教材66页的例子（biaoge.htm），分析结构，得出表格的布局（如表格有几行几列，哪些行教师：表格之所以重要是因为表格可以实现网页的精确排版和定位，还可以利用表格来美化网页。
表格的定义就是将一定的内容按特定的行、列规则进行排列就构成了表格。
学生讨论，交流，回顾Word中学习过的表格，明白表格在FrontPage中的作用。
让学生明白是为了制作网页内容工整、美观，所以选择使用表格布局。
做了哪些处理）。
新授任务1 规划网页表格布局本任务在上节课以作业形式布置给学生，请他们把书中66页例子的表格布局画出来，通过在课堂上教师和学生共同的分析、对照，加深学生对表格布局知识的认识。
分层完成该任务，基础相对薄弱一些的同学仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的同学可以跳出课本，自行设计表格网页布局。
二、完成表格布局FrontPage中表格的插入和编辑与Word中的表格操作类似，教师无需讲解，引导学生进行知识迁移。
任务 2 新建一个页面，用表格布局该网页，并在该网页中放入相应内容。
1打开站点，新建网页，以“biaoge.htm”为文件名保存。
2按前面分析的要求插入学生可根据自己的实际情况选择任务难度，并动手分析与创意设计。
操作熟练的同学来演示规则表格的插入，联想Word中的表格操作来演示网页制作中表格的基本编辑：行列的插入、删除、单元格的合并、拆分、调整大小等，以达到调整表格结构的目的。
请学生对照书本67页图11.2-15“用表格规划网页结构”，参照书本所提示的实践学习，完成任务。
学生根据自己的实际布置课前任务，让学生自己合理利用教材进行分析，学习和制作。
通过分层教学，培养学生模仿以及创新能力。
并且联系学生已经完成的作业，进一步提高学生自己看书学习的探究能力。
软件学习的方法传授----类比法、知识迁移。
一个表格。
3调整表格结构（主要是行列的插入、删除，单元格的合并、拆分、调整大小等）。
老师可安排操作熟练的同学进行演示。
三、调整表格属性，美化页面预览制作的网页，修饰网页，让网页看起来更美观。
任务 3 表格属性以及单元格属性的设置1表格属性的设置，如去除网格线、设置表格背景色等。
2使用不同的颜色区分各板块，设置单元格属性。
强调：学会利用右击后弹出的快捷菜单中的命令。
四、充实网页页面内容任务 4 在表格中插入图片、输入文字注意图片的保存。
五、表格的嵌套（看时间定来定制任务，若时间不够，暂且不讲，布置问题，让学生思索嵌套表格和拆情况选择任何难度，可按教师具体要求修饰调整表格，也可根据自己的意图修饰调整表格（但表格边框的调整都需掌握）辅导：教师巡视各小组的实践操作练习，遇到学生有困难，先建议学生自己看书探究学习，然后再和学生讨论，对特殊学生给予较多的个别辅导机会。
认真操作，对照书本67页图11.2-12“多彩的生物”网页，在表格相应位置插入相应文字、图片等。
学生动手制作必须要求学生掌握书本66页的基本操作。
任务完成的同时，给学生一定的自主空间，鼓励他们去创新，而非一层不变的生硬模仿。
回归网页制作，而不仅仅是插入一个表格。
关注课堂学生使用书本，自主探究学习的能力以及操作达成率。
分单元格的不同作用）有时为了制作出更加美观的网页，我们可以使用表格的嵌套来实现。
任务5 加入横向目录导航条，尝试使用表格嵌套的方法解决问题。
制作动态字幕。
学生以小组为单位，进行“表格布局网页页面”的实践。
操作练习并进行交流展示。
总结与评价老师对学生操作过程中发现的问题加以强调，并总结利用表格布局网页页面的优点。
参与归纳“应用表格布局网页的优点”。
展示表格页面制作完成的优秀学生作品，对学生的评价进行总结性的归纳。
评价标准：以网页上各类素材间整体布局的合理性、协调性和美观程度为指标进行评价（见附表）。
表扬完成任务的同学，对未完成的同学给予激励，鼓励他们利用课余时间继续完成。
学生回答问题：（1）表格在FrontPage中起到了的作用：定位对象。
（2）表格编辑的基本操作。
培养学生重视书本，合理利用书本的讲解，自己进行学习、总结，通过实践操作制作表格网页，让他们从中获得成功的体验。
激发学生学习网页制作的兴趣。
作业课后要求学生在浏览网页时，多留意一下著名的网站网页，观察首页和子页的规划有何不同。
请同学们预先在草稿纸上设计好你所要制作主题网页的首页和子页布局，以便上机操作时更快捷的完成任务。
为下面的制作网页学习打好坚实基础。
注：附表于下页《应用表格布局网页》的评价表评价指标表现等第自评互评师评汇总素材的利用率（20’）高较高一般差页面布局的完整性好较好一般差（20’）页面布局的合理性好较好一般差（20’）页面布局的美观性好较好一般差（20’）页面布局的创新性好较好一般差（20’）表格样式（仅供参考）标志1 横幅图片2 FLASH导航栏3 4 5 6 7滚动字幕8动物图片9 文字介绍13动物图片10 文字介绍14动物图片11 文字介绍15动物图片12 文字介绍16。