基于表格的页面布局教学设计
网页制作--利用表格进行页面布局教案oc
网页制作——利用表格进行页面布局
◆教学目标：
【知识与技能目标】
1．巩固前面所学的知识，熟悉表格的使用方式。
2．合理利用表格设计网页整体的框架。
【过程与方法】
1．展示两组素材相同而布局不同的网页，让学生进行比较。
2．通过对已有网页的分析，启发学生联想，通过讨论、总结，诱导学生创造出自己的网页结构。
【情感、态度与价值观目标】
1．通过启发式教学，激发学生的学习兴趣，培养学生对页面的整体规划能力、审美能力和创新能力。
2．在布局网页页面活动过程中让学生体验到成功的喜悦与成就感。
◆教学重点：学生自主的运用表格设计网页框架。
◆教学难点：运用表格的嵌套和谐布局网页。
◆教学过程：。
《用表格布局首页》教学设计
用表格布局网页重庆市开县中学周小容【课程内容标准】通过开发实践，学会制作简单网站的基本方法。
【学情分析】面向的教学对象是高二的学生，学习本节课之前，学习者在小学和初中已经掌握：会利用frontpage制作独立的静态网页，包括利用表格合理控制文字及图片的布局等技术。
高中生观察事物能很好的分辨细节，并能从中抽取本质，在教师有效调动和挖掘下，学生的创造力会发挥到极致。
在本章内容的前面两个章节，学生已经完成了自己网站的规划，以及结构设计、版面设计。
在4.2“网站的设计”中，学生通过浏览老师提供的一些全国中小学生电脑制作活动中获奖的主题网站，师生共同分析了网站首页元素及分布，共同总结出了网站首页布局的原则，根据这些原则，各组已经完成了网站的主体设计（如首页的结构图已经形成，大致风格也已确定）。
然后在4.3“网页的制作”的第一课时，学生已经根据自己网站的需要收集整理了所需的素材，有部分同学还运用到其他软件加工处理自己的素材，在这样的基础上学生动手制作自己的网页应该是很从容的，也是收获技术跟工具带给自己成就感的一节课，所以学生的兴趣度是极高的。
【教材分析】本节课是广东教育出版社的普通高中课程标准实验教科书《信息技术（选修3）网络技术应用》第四章第三节的内容。
本章内容是使用FrontPage进行网站的制作，教材上以“虎门销烟启思录”为例，讲解了素材准备、新建网站及网页、页面布局、编辑图文素材、保存文件、使用模板、插入超链接等，内容很完整，学生能以此为学习帮助，来开发自己的网站。
制作网页首先就应该从布局开始入手，然后才能让各元素各就各位，以实现想要的视觉和交互效果。
我将4.3分为四课时，第一课时学生根据前面章节中自己网站的规划设计为自己的网站准备好素材，然后用到辅助的一些软件（如photoshop）将素材做了必要的处理，分类整理到相应的文件夹中。
第二课时即本节课，教师引导学生根据首页基本的布局原则和自己的设计图，通过可视化方法和html方法完成表格布局首页，并进行评价。
教案：使用表格布局网页
教学内容：项目五表格的应用
任务3、使用表格布局网页课程：网页设计与制作
专业：计算机
授课课时：1课时
教师：
授课班级：
单位：
授课时间：
教学设计说明：对于使用表格布局“个人写真”首页的任务，我在坚持以教师为主导，学生为主体的教学原则下，通过复习提问一一巩固旧知；创设情景一—导入新课，明确任务；提出问题一一分析任务，引发思考、课堂讨论、获取知识；讲授点拨一一任务实施，引出重点；师生互动，归纳提高一一攻破难点五个环节进行教学。
在任务实施中采取小组合作完成的方法，以小组为整体回答问题及完成操作性任务，小组评比采用星级制，小组得星数量从多到少评为优、良、合格、
提出本次课的任务。
学生明确本课的学习任务。
任务分析
请同学们观察首页的布局，分析首页的版面结构，得出首页表格布局图。
任务实施
向学生展示首页表格尺寸图首页效果图
三、进入新课
1、任务分析
2、任务实施
（一）、插入布局页面的表格并在表格、单
元格属性面板中设置表格
了门jra卜.
7
1-banner^
2
-
―enu--
1
Jftp
JI-1
4
<
5
UMLiy
■
9
:<■
•和「J.-fnrd
:<■
【操作步骤】
步骤1:单击菜单栏［插入记录］/［表格］,
设
【学生讨论】学
生在教师的引导
下，分析、归纳该
页面布局规律。
表格布局网页课程设计
表格布局网页课程设计一、课程目标知识目标：1. 让学生掌握网页设计中的表格布局基础知识，理解表格布局的原理和用途；2. 学会运用HTML标签创建表格，设置表格的行、列和单元格属性；3. 掌握CSS样式表中与表格布局相关的属性，如边框、间距、填充等。
技能目标：1. 培养学生运用表格布局设计网页的能力，能独立完成简单的网页布局；2. 提高学生在网页设计中的问题解决能力，能够调整表格布局以适应不同设备和屏幕尺寸；3. 培养学生团队协作和沟通能力，能在小组合作中共同完成网页设计任务。
情感态度价值观目标：1. 培养学生对网页设计的兴趣和热情，激发学生的创造力和创新精神；2. 培养学生关注用户体验，注重网页布局的美观性和易用性；3. 增强学生的信息素养，使学生认识到网络技术在信息传播中的重要作用。
课程性质：本课程为信息技术课程，以实践操作为主，结合理论知识，培养学生的实际操作能力和创新思维。
学生特点：学生处于初中阶段，对新鲜事物充满好奇，具备一定的计算机操作基础，喜欢动手实践。
教学要求：教师应注重理论与实践相结合，以学生为主体，引导学生主动探究，培养其独立思考和解决问题的能力。
同时，关注学生个体差异，因材施教，确保每个学生都能在课程中取得进步。
通过课程学习，使学生能够达到上述具体的学习成果，为后续的网页设计学习打下坚实基础。
二、教学内容1. 理解表格布局的概念与作用- 表格布局的定义与分类- 表格布局在网页设计中的应用场景2. HTML表格标签的使用- <table>、<tr>、<td>、<th>等基本标签的用法- 表格行、列、单元格的属性设置3. CSS样式表中与表格布局相关的属性- 边框样式：border、border-collapse、border-spacing等- 单元格样式：padding、margin、text-align、vertical-align等- 表格背景与颜色：background-color、background-image等4. 表格布局实例分析与操作- 分析经典表格布局案例，了解其设计思路和实现方法- 学生实践操作，完成一个简单的表格布局网页5. 响应式表格布局- 介绍响应式网页设计的基本概念- 学习使用CSS媒体查询调整表格布局以适应不同屏幕尺寸6. 表格布局在实际项目中的应用- 分析实际项目需求，确定表格布局设计方案- 学生团队合作，完成一个具有实际意义的网页设计项目教学内容安排与进度：第1课时：理解表格布局的概念与作用，学习HTML表格标签的使用第2课时：CSS样式表中与表格布局相关的属性，分析表格布局实例第3课时：实践操作，完成一个简单的表格布局网页第4课时：学习响应式表格布局，调整表格布局以适应不同屏幕尺寸第5课时：团队合作，完成实际项目中的表格布局设计教学内容与教材关联性：本教学内容与教材中关于网页设计、HTML和CSS的知识点紧密相关，涵盖了表格布局的基本概念、用法和实际应用，确保了教学内容的科学性和系统性。
用表格布局网页教学设计
用表格布局网页教学设计教学目标（一）知识与技能目标：1、理解用表格布局主页的作用。
2、掌握在网页中插入表格进行排版。
3、学生设置表格的属性。
（二）过程与方法目标：通过欣赏和借鉴别人布局的主页，取长补短，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的发散思维能力。
（三）情感、态度与价值观目标:用表格排版网页解决了网页版面杂乱的问题，培养学生在遇到困难时灵活运用各种方法解决，促进其建站信心。
五、重点与难点教学重点：插入表格和更改表格属性。
教学难点：让学生灵活掌握排列表格和设置表格属性的方法。
六、教学策略与手段游戏竞赛法，对比教学法，任务驱动法，讲解演示法，自主探究学习法，网站教学法，小组合作法。
七、课前准备1、学生的准备带课本进教室2、老师的教学准备（1）精心准备课堂，做好教学设计（2）预先做好问题的设计及突发事件的应对3、教学环境的设计与布置4、教学用具的设计与布置准备好一些具有代表性的版面设计优美合理的网站主页面作为参考八、教学过程（一）、课堂导入教师：第一次给大家上课，老师想了解一下情况，不知我们班是男生信息技术水平高还是女生信息技术水平高？学生：………教师：自己说了都不算，这节课我们就来较量一下。
怎么样？先从第一个环节拼图游戏开始。
邀请两位同学（男生和女生）上来，分别选择其中一个，帮我把网页上图片的位置调整好。
一位没调整好，另一位调整好了。
先采访一下失败的原因，你觉得问题出在哪里，是不是按照Word中的方法在操作，那你觉得在Word中图片、文字可以怎么样，而在FrontPage中呢？采访另一个，发表一下你的成功感言，你觉得你为什么会成功，是网页中的什么帮了你的忙？网页里面有表格。
也说是说在网页中要给图片定位，就必须要用到表格，表格在网页中起到了一个怎么样的作用——可以定位对象，即可以为网页布局，那怎样操作大家想不想学，今天这节课我们一起来学习第十五课《用表格为网页布局》。
教学设计(利用表格布局网页)
利用表格布局网页教学设计授课教师：刘春霞授课班级：计算机应用1202班一、课题名称：利用表格布局网页二、授课课时：1个课时三、教学内容分析本节课以利用表格制作一个简单主页为例，要求学生掌握并灵活运用表格及单元格的一些基本属性设置，从而设计出一个“匡”字型的主页。
本次课要求学生具有创建站点的知识，以及Dreamweaver CS3的一些基本操作。
四、学生特征分析授课对象是职高高二学生，学生已具有熟练操作一些常用软件的能力，已掌握Dreamweaver CS3的一些基本操作。
五、教学目标（知识与技能、过程与方法、情感态度与价值观）1、知识与技能目标掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。
2、过程与方法目标引导学生分析项目，自主独立思考及操作，指导与修正，掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。
3、情感态度与价值观目标提高学生的观察能力及分析能力，调动学生自主能动性，培养学生较浓的学习兴趣，使学生建立正确的人生观与价值观。
六、教学重点难点掌握插入表格的方法掌握表格属性设置的基本方法掌握单元格或行属性设置的基本方法掌握使用表格进行页面布局的基本方法七、教学方法1、讲授法2、演示法3、任务驱动法八、教学环境与资源教师机，教学广播软件，学生机（60台）九、教学过程1、创设情境，导入新课欣赏网页，分析网页结构，引入本次课学习的项目：利用表格制作一个简单的“匡”字型网页。
2、讲解知识，演示操作讲解插入表格的方法，表格属性设置的基本方法及单元格属性设置的基本方法，（1）插入表格的方法将光标置于页面中，然后在主菜单中选择【插入记录】／【表格】命令或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行参数设置，最后单击【确定】按钮插入表格。
（2）表格属性设置首先选中表格，然后通过表格【属性】面板设置表格的行数、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、背景图像、边框颜色等属性。
4.1用表格布局网页教案
§4.1 利用表格布局页面胡斌一、教学目标：1．知识与技能（1）了解网页设计中表格的作用。
（2）掌握网页中表格的制作方法、表格属性的设置方法，能够在单元格中正确插入图片。
（3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。
2．过程与方法（1）掌握软件学习中的对比学习法，培养学生迁移学习的能力。
（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。
（3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培养学生学会学习，驾御学习的能力。
3．情感态度与价值观（1）通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的能力。
（2）通过运用表格布局网页对象活动，进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。
（3）通过“全运会”网页的设计与制作，激发学生热爱运动，关心集体的意识。
二、教学重点、难点：1．教学重点：（1）了解表格在网页设计中的重要作用和功能。
（2）掌握插入表格、添加、删除行、列的方法及表格的属性设置方法。
（3）掌握表格嵌套的方法2．教学难点：表格中插入图片、表格属性设置三、教学方法：对比教学法、探究学习法、模仿学习法。
四、教学过程：1、复习以复习提问的方式来回顾站点的建立、页面属性的设置，学生认真回顾，回答教师提问。
为本节课教学做一定铺垫。
2、引入（5分钟）（1）观看两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。
你更喜欢怎样的页面布局？提出问题：有什么办法可以达到第一个页面的效果？学生讨论，交流，回顾Word中学习过的表格，明白表格在Dreamweaver中的作用。
3、新授（10分钟）（1）、插入表格“插入记录/记录”命令打开“表格”对话框（Ctrl+Alt+T）●“表格大小”项表格宽度：像素百分比 Ctrl+U●“页面”项●辅助功能（2）、表格属性设置表格ID 宽高填充间距对齐边框背景颜色边框颜色背景图案（3）、添加、删除行或列a、修改/表格/插入行或列右键/表格/插入行或列b、修改/表格/删除行或列右键/表格/删除行或列c、属性面板中添加删除（4）、表格嵌套将光标定为在要插入表格的单元格内，单击“表格”按钮或执行“插入/表格”命令学生演示以上4个操作，教师讲解及点评4．练习（任务驱动）任务1 建立站点，设置页面属性（10分钟）在D盘建立站点目录姓名+41文件夹（内含files、images、others三个子文件夹），站点名为“全运会”，新建“html”创建新网页，保存为index.html执行“修改/页面属性”完成以下设置设置任务2 完成页面基本布局（10分钟）1、插入表格插入一个3行1列，表格宽度为900像素，边框粗细、单元格边距及间距都为0的表格。
《应用表格布局网页结构》教学设计（精选多篇）
《应用表格布局网页结构》教学设计（精选多篇）第一篇：《应用表格布局网页结构》教学设计《应用表格布局网页结构》教学设计一、教学目标知识与技能：1、了解表格在网页设计中的作用。
2、能够根据网页的内容，正确布局表格的结构。
3、掌握网页中表格的制作方法，能够在单元格中正确插入文字和图片，掌握表格属性的设置方法以及单元格的修饰与编辑方法。
过程与方法：通过观看优秀网站表格布局，动手设计表格等环节，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的发散思维能力；通过学生自主地编辑和修饰表格等环节，培养学生自主探究学习的能力。
情感、态度与价值观：1、提高学生自学和探究的能力，培养学生应用表格布局网页结构的兴趣。
2、提高学生语言表达能力，学会客观的评价作品。
二、教学重点与难点重点：了解表格在网页设计中的重要作用掌握插入、编辑表格以及表格，单元格的属性设置方法。
难点：表格的嵌套表格，单元格，网页属性的设置三、教学方法讲解演示教学法，小组合作学习法，自主探究学习法四、教学设计说明本节课是初中信息技术（下册）2007年7月第一版第11单元《设计主题网站》第二节的内容，教学面向的是初二年级的学生，该年龄段的学生已具备了一定的信息素养，掌握了基本的信息技术知识和技能。
初中的学生喜欢新、奇、特的事物，接受能力和理解能力比较快。
而直观、醒目的网站示例图片则可以培养学生对于本课题的兴趣，但是学生对于如何应用表格布局网页结构的操作是比较模糊的。
因此本节课充分地发挥学生了的积极性，让学生随着学案所设置的环节，探究完成一个又一个的应用表格过程。
而学案则是在尊重学生解决问题的思维过程方式的基础上设置的，注重学生的学习体验和情感的体验。
整节课以学生为主体、教师为主导的架构下，搭建以生为本的情景学习的平台，帮助学生自学、交流讨论、深入探究，以不断的完成应用表格布局网页结构的过程为手段，一步步完成学习任务。
五、教学过程课前将素材和网站站点发送到桌面，指导学生解压缩。
高中信息技术用表格进行页面布局优秀教案
教学重点
插入表格、排列表格和更改表格属性。
教学难点
灵活掌握排列表格和设置表格属性。
教学方法
情境导入法、任务驱动法、“启发式〞教学法
教具准备
多媒体网络教室，FrontPage2003中文版。
教学过程
教学环节
教师活动
学生活动
设计意图
情境创设
学生分析
学生对于能够亲手制作自己的网页，热情很高，能够较为认真主动地学习制作。在上本课之前，制定了网页布局的初步构思，并为网页查找了一定的图片与文字素材。根据自己的网页布局，来设计和调整网页，从而到达自己预期的目的。在操作上，可以将FrontPage与Word进行比照，老师及时的点拔，指导。
教学目标
知识与技能：
1．理解表格在主页排版中的作用。
2．掌握在网页中用表格进行排版的方法。
3．学会设置表格的属性。
过程与方法：
学生通过浏览明星网页感受表格在页面布局中的用途，教师引导进行网页布局设计和制作。结合教师示范与学生探究学习，使学生初步掌握在网页中插入表格并进行排版的方法。
情感与价值观：
1．注重培养学生发现问题、解决问题的能力。
学生完成明星网页制作
培养学生知识迁移的能力和动手能力
学生展示自我点评
总结与课后反思
今天我们学习了利用表格进行网页布局。设计制作一张明星网页，使用的是一张表格，我们可不可以制作多张表或者表格嵌套呢？
小组讨论
稳固知识
探究问题
用表格进行页面布局
教材分析
《使用表格进行页面布局》是信息技术选修3第四章的内容，学生从浏览了解网站到自己规划站点，再到利用软件Frontpage2003进行网页制作。这节课开始真正制作网页，对后面网站的制作起着承前启后的作用。网页制作的初学者，在对页面上的对象进行排版时，表格起到了非常重要的作用。如何合理的布局，并在FrontPage中用表格的形式表达这个布局，是本课首先要解决的一个问题。
利用表格布局网页教案
利用表格布局网页教案教案标题：利用表格布局网页教案教学目标：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. 引导学生学习响应式设计，掌握如何使用媒体查询和表格布局来适应不同屏幕尺寸。
教学反思：根据学生的实际情况和学习进度，灵活调整教学过程中的时间分配和内容讲解，确保学生能够理解和掌握表格布局的基本原理和应用技巧。
《用表格布局网页》教学设计及反思
应用表格布局网页
■教材分析
本课是苏科版《初中信息技术》教材上册第十章第二节的内容，对应《江苏省义务教育信息技术课程指导纲要》中必修基础“信息的发布与交流”模块。
■教学目标
1．知识与技能:
（1）学会利用表格的相关操作布局网页。
（2）掌握插入文本、图片等对象的方法，并能根据需要设置属性。
2．过程与方法:
通过亲历建立网站、布局网页和插入对象的操作过程，在不断尝试中理解和学习基本知识。
3．情感态度与价值观:
通过制作主题网站，在创建站点和制作首页的过程中，树立人与动物和谐相处，珍爱、善待和保护动物的观念，同时在不断完成任务的过程中体验成功的喜悦。
4．行为与创新:
在制作首页的过程中，学会科学运用各种元素并进行合理布局，个性化地表达思想和情感。
■课时安排
安排1课时
■教学重点与难点
1．教学重点
（1）利用表格的相关操作布局网页。
（2）插入文本图片等对象以及属性的设置。
2．教学难点
灵活运用表格的相关操作合理布局网页。
教学方法与手段
知识迁移、类比教学、自主学习、小组合作、讲授法
■课前准备
极域多媒体广播软件、教学课件、学件、素材资源
教学过程：
■教学反思。
利用表格进行网页页面的布局教学设计
利用表格进行网页页面的布局教学设计《利用表格进行网页页面的布局》教学设计上海市蒙山中学夏勤在教学过程中发现:学生在网页制作时，往往只重视网页内素材的添加，而忽略了素材间的整体布局效果，致使制作出的网页布局不合理美观，页面上的素材布局杂乱无章。
为了解决这个问题，我设计了“如何利用表格进行网页页面的布局”这节课的内容。
本节课的教学对象是预备年级的学生，对于预备年级的学生来说，仅仅简单的讲解表格的使用，不利于学生对“利用表格布局网页页面”这一知识点的理解和实际信息技术应用能力的提高，因此，我在设计这节课的教法时，主要采用项目活动教学模式，整个项目活动通过比较、提问、引导、合作、展示、交流、评价等教学方法得以开展，激发了学生利用表格布局网页页面的积极性，培养和提高了学生辨别表格布局网页页面的能力、分析和解决如何利用表格布局网页页面的能力、审美能力、语言组织和表达能力、归纳能力、自主学习能力。
1( 先回顾网站制作的步骤，并展示两张素材相同而布局不同的网页，让学生进行比较、分析、归纳出两张素材相同而整体页面效果不同的原因是其中一张网页是利用表格布局了页面，从而引出本节课的课题——利用表格布局网页页面。
2( 师生继续分析页面效果好的那张网页，其布局页面的表格结构有几行几列，引出问题:如何对表格进行处理而使页面布局更合理,即表格的编辑操作。
3( 教师以页面较杂乱的那张网页为例，进行插入表格、合并、拆分单元格等示范操作。
4( 学生以小组为单位根据实际情况，进行“利用表格布局网页页面”的实践操作练习。
教师针对不同水平的学生进行分层教学:对特殊学生，允许他们完成一张网页的表格布局。
教师给予较多的个别辅导机会。
对天才学生，要求完成网站内多张网页的表格布局。
5( 要求各小组将已经利用表格布局好的网页进行交流展示，各小组评价。
以网页上各类素材间整体布局的合理性、谐调性和美观程度为评价标准。
达到加深学生对利用表格布局网页的理解及提高解决实际问题的能力，同时激发学生的积极性，并从中获取成功的体验。
用表格布局网页教案
用表格布局网页教案第一章：表格布局网页概述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 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。
基于表格的页面布局
第三课基于表格的页面布局教学目的：1．掌握如何在网页中运用表格；2．掌握主页、网页的概念；3．灵活运用本节知识。
教学重点难点：1．表格的运用；2．规划层次结构。
3.对页面进行布局。
教学方法：师生互动，讲练结合。
教学课时：一课时教学准备：展示制作好的网页，引课。
教具：多媒体转播系统、WORD、FORNTPAGE引课：从本章开始，我们来学习如何布置我们的网页，是我们的网页更加生动、有趣。
（展示制作好的网页）一．打开站点启动软件后，展开“文件”面板，可以看到创建好的站点会自动出现在“文件”面板中。
如果多个站点同时存在，需要在文件面板中选择需要的站点。
二．创建网站首页规划网站不仅仅是设计网站层次结构，还要按照一定对站点目录结构进行组织管理。
这里我们要将不同的素材分类组织到不同的文件夹中，不同链接等级的网页分级存放到不同的文件夹等。
1．整理素材制作首页所需的材料，图片和动画我们需要分类存放，以方便来寻找和工作。
步骤1：创建文件夹。
步骤2：将首页素材图片复制粘贴到文件中。
注意：在创建文件夹时，应合理命名文件与文件夹的名称，尽量避免使用中文，因为dreamweaver8在连接远程站点时，对中文命名的文件有时会出现识别错误，因此对文件和文件夹命名是应当使用有意义的英文或者汉语拼音。
2．创建并保存首页首页需要的素材已经整理就绪，现在就可以进行首页的创建工作了。
步骤1.执行文件新建命令，在弹出的新建对话框中选择常规标签，在基本页列表框中选择HTML选项，然后单击创建按钮，dreamweaver8建立了一个空白文件夹。
步骤 2.执行文件保存命令，在弹出的对话框中将文件名修改为index.htm，保存路径无需更改，系统默认保存在D:\safe下，也就是网站的根目录，这是首页默认名称和默认保存路径。
3.对首页进行初步布局（1）为首页添加背景首页的背景是白色的，这与将要使用的图片lndex.gif的主体颜色差异显著。
（2）设置网页标题并预览网页效果（3）使用表格初步布局网页4.测试网页同学们我们今天学习了在网页中应用表格，就让我们看一下今天的成果吧。
用表格进行页面布局教案
省淳中信息技术深度研课教学设计【课题】用表格进行页面布局【课程标准】1.理解WWW、网页、主页、网站的基本概念及其相互关系。
2.理解动态网页的概念，了解其工作过程。
3.能够使用常用的网页制作软件进行动态网页的制作与发布。
4.通过开发实践，学会简单网站的规划、设计、制作、发布与管理的基本方法。
5.能够根据网站主题要求设计评价指标并对常见网站的建设质量与运行状况进行评价。
【学业水平测试内容和要求】1.了解WWW、网页、主页、网站的概念及区别。
2.了解什么是静态网页和动态网页。
3.了解动态HTML技术和服务器端动态网页技术的基本知识。
4.了解网站开发的一般过程。
5.知道网站规划主要包含的内容，学会根据需求规划网站。
6.学会使用一种常用的网页制作软件制作网站，包括建立站点、新建网页、利用表格布局网页、修饰文字、插入多媒体信息、建立超级链接、制作简单的网页动态效果等。
7.了解如何在局域网或因特网上申请网站空间，发布网站。
8.了解简单维护网站的方法。
9.了解网站评价的几个主要方面，能使用评价量表进行网站评价。
【学情分析】网络技术应用是普通高中信息技术选修模块。
计算机网络的出现改变了人们的生活方式，对人类产生了深远的影响，网络技术的学习将帮助学生更好地合理地去使用它。
课时安排为7课时，本节教学设计为第1课时。
大部分学生小学或初中有了一定的计算机基础，掌握了计算机的基本操作技能，能够使用一些常用软件，并且对网络有一定的了解，但是也有个别零起点学生。
因此，在教学中要兼顾到不同层次的学生。
这一章在学业水平测试中要求较高，要求学生理解并能独立操作、迁移应用与熟练操作。
所以，在课时安排上有所侧重，在教学设计中也要着重锻炼学生的操作能力。
【学习目标】1．通过学生网页与示例网页的对比，引导学生发现及归纳其差异：文字与图片位置合理，确定问题，即需要对网页进行页面布局。
2．通过阅读材料和自主探究，归纳和总结网页布局的形式和方法。
基于表格的页面布局教案
基于表格的页面布局教案
教材：清华大学出版社信息技术初中二年级下册
第1单元初建网站
第3课开篇之作——基于表格的页面布局
一、教学目标：
（1）进一步熟悉Dreamweaver 8的工作界面。
（2）掌握利用“文件”面板打开网站的方法。
（3）学会根据网站素材的分类规划网站的文件夹。
（4）熟练地创建并保存网页。
（5）掌握设置网页标题的方法。
（6）能够根据网页内容使用表格恰当布局。
（7）学会设置网页背景色及表格背景图像。
（8）初步认识并尝试使用标签选择器选择对象。
（9）熟练地使用快捷键在浏览器中预览网页效果。
二、教学重点：
1.在“文件”面板中规划站点
2.设置网页标题
3.设置网页背景
4.使用表格对页面布局
三、教学难点：
能够根据网页内容使用表格恰当布局
四、教学方法：
（1）任务驱动—体验探究法
（2）分层教学法
（3）网络探究教学法
（4）激励教学法
五、课时：1课时
六、教学过程。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第3课开篇之作——基于表格的页面布局
教学设计
一、教学目标：
1.知识目标：
（1）进一步熟悉Dreamweaver 8的工作界面。
（2）掌握利用“文件”面板打开网站的方法。
（3）学会根据网站素材的分类规划网站的文件夹。
（4）熟练地创建并保存网页。
（5）掌握设置网页标题的方法。
（6）能够根据网页内容使用表格恰当布局。
（7）学会设置网页背景色及表格背景图像。
（8）初步认识并尝试使用标签选择器选择对象。
（9）熟练地使用快捷键在浏览器中预览网页效果。
2.能力目标：让学生能动手完成一个简单的网页布局的设计。
3.情感目标：
（1）培养学生严谨求实的工作态度以及感受美、评价美的艺术情操。
（2）培养学生在进行自主学习的过程中勇于克服困难，体验到成功后的快乐。
二、教学重点：
1.在“文件”面板中规划站点
2.设置网页标题
3.设置网页背景
4.使用表格对页面布局
三、教学难点：
根据网页内容使用表格恰当布局
四、教学策略的选择与设计
1、教学方法：
（1）任务驱动—体验探究法
（2）分层教学法
（3）网络探究教学法
（4）激励教学法
2、学法指导：形象探究法、经验探究法、体验探究法、合作式学习法。
3、资源的设计与选择：
结合本节内容设计了一个《安全自护我能行》的网站首页、极域电子教室系统、Dreamweaver网页编辑软件、多媒体等。
五、课时：1课时
六、素材准备：
1、安全自护我能行——首页的效果图
2、首页背景图片：index.gif
3.练习题的图片：bg1.gif和bg2.gif
七、教学过程：
教学步骤教师活动学生活动教学形式（一）课堂引入
上节课我们做好了站点，当站点规划并创建完毕边授课边欣赏并对对学生机。