基于表格的页面布局教学设计

网页制作——利用表格进行页面布局
◆教学目标：
【知识与技能目标】
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 利用表格布局页面胡斌一、教学目标：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单元《设计主题网站》第二节的内容，教学面向的是初二年级的学生，该年龄段的学生已具备了一定的信息素养，掌握了基本的信息技术知识和技能。

初中的学生喜欢新、奇、特的事物，接受能力和理解能力比较快。

而直观、醒目的网站示例图片则可以培养学生对于本课题的兴趣，但是学生对于如何应用表格布局网页结构的操作是比较模糊的。

因此本节课充分地发挥学生了的积极性，让学生随着学案所设置的环节，探究完成一个又一个的应用表格过程。

而学案则是在尊重学生解决问题的思维过程方式的基础上设置的，注重学生的学习体验和情感的体验。

整节课以学生为主体、教师为主导的架构下，搭建以生为本的情景学习的平台，帮助学生自学、交流讨论、深入探究，以不断的完成应用表格布局网页结构的过程为手段，一步步完成学习任务。

五、教学过程课前将素材和网站站点发送到桌面，指导学生解压缩。

利用表格布局网页教案教案标题：利用表格布局网页教案教学目标：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. 引导学生学习响应式设计，掌握如何使用媒体查询和表格布局来适应不同屏幕尺寸。

教学反思：根据学生的实际情况和学习进度，灵活调整教学过程中的时间分配和内容讲解，确保学生能够理解和掌握表格布局的基本原理和应用技巧。