教案：使用表格布局网页
人教版信息技术六上第5课 使用表格版面齐 教案
第五课使用表格版面齐
教学目的与要求：
1．了解表格在网页中的作用；
2．掌握插入表格的方法；
3．掌握首页命名及设置网页标题的方法。
教学重难点：
1．利用表格制作网页。
教学过程：
一．复习巩固
二．引入新课
一个好的网页不仅内容要充实，而且版面要美观。
为了一个好的视觉效果，需要精心装点自己的家园。
打开我们的网页，怎样将网页中的文字、图片摆放得更美观一些呢？
三．利用表格制作网页
插入表格的方法非常简单，但在插入表格之前，我们需要知道自己要画一个几行几列的表格。
1．新建网页并设置网页背景。
单击“新建”按钮，新建一个网页。
将适合的图片设置成网页背景2．打开“插入表格”对话框。
单击“表格”→“插入”→“表格”，弹出“插入表格”对话框。
3．输入行、列数，设置布局参数，单击“确定”按钮。
4．通过鼠标调整表格的列宽。
5．在合适的位置放入欢迎文字、全家福、欢迎词等。
四．设置网页标题
在“保存网页”对话框中设置网页标题。
1．输入文件名：index
2．单击“更改”弹出“设置网页标题”对话框
3．输入网页标题“首页”，单击“确定按钮”
{index.htm是网站常用的首页名。
这是因为，我们在浏览器中输入一个网址时，浏览器会自动寻找该地址的index.htm文件，并将其打开。
} 五．思考与练习
建立一个介绍自己的网页。
并将内容通过表格定位。
用表格为网页布局
第15课用表格为网页布局绍兴市树人中学黄学锋1．设计思想本节课的主题是对网页内容的排版。
为了提高学生的建网兴趣，接受网页中表格的排版定位作用，设计了提供宠物——领养宠物——建立宠物园的教学过程，以“给宠物网上安家”、“不同的宠物需要不同大小的生活空间”等为引导，设计使用表格中不同大小的单元格来让宠物“和睦相处”。
同时，请学生建立自已的开心宠物园，掌握网页的表格排版功能。
2．教材分析：布局是网页制作的第一步，在本节教材中，先提出了规划布局，再进行表格定位，最后进行定位调整。
这要求教学过程中需要对学生明确：对于网页中对象多而杂的情况，必需先规划、再定位，而用表格是一种很实用而有效的途径。
3．学性分析在前几节课中，学生已学会了建立站点、新建主页、插入素材等操作。
为了区别WORD和PPT等曾经排版方法，在学习网页排版时，创设一种情境能让学生对于多个网页对象能自然的用表格进行页面布局。
通过这种教学方式，能让学生觉得网页表格排版理所当然，利用情境也大大提高了操作兴趣，在操作中掌握了技能。
4、教学目标知识目标：用表格排版主页使其达到页面整洁有序；技能目标：在网页中插入表格并更改表格的属性；情感目标：用表格排版网页解决了网页版面杂乱的问题，提示同学们凡事要有计划，做事要遵守规则，促进其做事的信心。
5．重点难点重点：插入表格和更改表格属性。
难点：让学生灵活掌握排列表格和设置表格属性的方法。
6．教学策略与手段以网络流行的开心菜园、开心农场为引入，整堂课围绕建立自已的开心宠物园为主题对学生进行教学，最后通过若干学生作品展示来提高表格操作技巧。
7．环境与素材1．教学环境：多媒体网络教室，配备投影仪;学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版，要求能上因特网; 课本准备。
2．教学素材：为学生准备好一批宠物GIF图片。
8．教学过程建园策划书宠物园名称：喜欢的宠物（呢称）：宠物园规划：（在相应的位置填入将放入宠物的名称）4。
用表格布局网页教学设计
用表格布局网页教学设计教学目标（一）知识与技能目标：1、理解用表格布局主页的作用。
2、掌握在网页中插入表格进行排版。
3、学生设置表格的属性。
（二）过程与方法目标：通过欣赏和借鉴别人布局的主页，取长补短，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的发散思维能力。
（三）情感、态度与价值观目标:用表格排版网页解决了网页版面杂乱的问题，培养学生在遇到困难时灵活运用各种方法解决，促进其建站信心。
五、重点与难点教学重点：插入表格和更改表格属性。
教学难点：让学生灵活掌握排列表格和设置表格属性的方法。
六、教学策略与手段游戏竞赛法，对比教学法，任务驱动法，讲解演示法，自主探究学习法，网站教学法，小组合作法。
七、课前准备1、学生的准备带课本进教室2、老师的教学准备（1）精心准备课堂，做好教学设计（2）预先做好问题的设计及突发事件的应对3、教学环境的设计与布置4、教学用具的设计与布置准备好一些具有代表性的版面设计优美合理的网站主页面作为参考八、教学过程（一）、课堂导入教师：第一次给大家上课，老师想了解一下情况，不知我们班是男生信息技术水平高还是女生信息技术水平高？学生：………教师：自己说了都不算，这节课我们就来较量一下。
怎么样？先从第一个环节拼图游戏开始。
邀请两位同学（男生和女生）上来，分别选择其中一个，帮我把网页上图片的位置调整好。
一位没调整好，另一位调整好了。
先采访一下失败的原因，你觉得问题出在哪里，是不是按照Word中的方法在操作，那你觉得在Word中图片、文字可以怎么样，而在FrontPage中呢？采访另一个，发表一下你的成功感言，你觉得你为什么会成功，是网页中的什么帮了你的忙？网页里面有表格。
也说是说在网页中要给图片定位，就必须要用到表格，表格在网页中起到了一个怎么样的作用——可以定位对象，即可以为网页布局，那怎样操作大家想不想学，今天这节课我们一起来学习第十五课《用表格为网页布局》。
《应用表格布局网页》微教案设计与反思.doc
一、教学目标1、知识与技能(1)了解表格在网页布局中的作用。
(2)掌握网页规划中表格的设计方法、表格的修改、修饰方法。
(3)掌握应用表格嵌套的设计方法。
2、过程与方法(1)通过对重点部分的演示操作，培养学生知识获取、迁移的能力。
(2)通过演示表格的嵌套操作，使学生进一涉理解表格的作用、运用的多样性，培养学生的发散思维能力。
(3)通过自主探究，交流与合作，培养学生自主学习的能力。
3、情感态度与价值观在自主学习活动中，认识表格在网页规划中的应用价值，培养学生独立钻研的精神，以及团队协作的意识。
二、教学重点与难点重点：在网页结构的规划中表格的应用，以及表中表的嵌套应用。
难点：表中表的嵌套技巧。
三、教学方法与手段•对比教学法、演示教学法、探究学习法、模仿学习法。
•多媒体教学平台、校园网FTP服务、互联网、网络通讯工具（QQ）四、教学准备各自制作的站点文件夹，整理、归类相关素材并按要求摆放，校园网FTP下载常规素材及学习资源。
五、教学过程1、创设情境、阐述学习耳的和任务，导入新课（1）学生简单讨论、交流（主要通过QQ）,回顾Word中学过的表格制作方法及应用意义。
（2）通过分析教材案例《体艺节》中的表格应用，领悟表格在FrontPage中的作用。
2、演示操作，突破重点难点的应用以教材案例《体艺节》主页的规划设计为例，演示表格的制作技巧，以及表屮表的嵌套方法和技巧。
3、任务驱动、自主探究学习以“2013届校运动会”为主题，规划主页的布局。
基础和对薄弱的学生仅要求读懂教材中的网页表格布局，模仿制作，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的学生可以跳出教材，自行设计表格网页布局，并将自己的表格设计抓图共享在“八年级信息技术学习群”上，供有需要的同学参考学习。
4、学生自由组合分组或独自为组，开展自主探究学习活动，开放式课堂，允许学生相互讨论、交流（在线QQ）,通过校园网FTP 和互联网获取学习资源，但必须是自己独立完成。
电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目五
课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。
行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。
（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。
步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。
步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。
下面简单介绍一下“表格”对话框中几个重要选项的意义。
●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。
●在Dreamweaver中，最常使用的单位是像素和百分比。
像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。
●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。
整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。
●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。
●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。
（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。
当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。
具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。
利用表格布局网页教案
利用表格布局网页教案教案标题：利用表格布局网页教案教学目标：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 表格布局的缺点
不适用于响应式设计，较难实现某些现代化布局效果。
应用场景
电子商务网站
表格布局适用于展示商品列表和 购物车等功能。
仪表盘界面
表格布局可用于显示数据统计和 信息概览等。
新闻网站布局
表格布局容易呈现多列文章列表 和分类导航等。
用表格布局网页教案
用表格布局网页教案第一章：表格布局网页概述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、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
教学内容：项目五表格的应用
任务3、使用表格布局网页课程：网页设计与制作
专业：计算机
授课课时： 1课时
教师：
授课班级：
单位：
授课时间：
教学设计说明：对于使用表格布局“个人写真”首页的任务，我在坚持以教师为主导，学生为主体的教学原则下，通过复习提问——巩固旧知；创设情景——导入新课，明确任务；提出问题——分析任务，引发思考、课堂讨论、获取知识；讲授点拨——任务实施，引出重点；师生互动，归纳提高——攻破难点五个环节进行教学。
在任务实施中采取小组合作完成的方法，以小组为整体回答问题及完成操作性任务，小组评比采用星级制，小组得星数量从多到少评为优、良、
D:/myweb素材
二、导入新课
看图观察对比2张网页效果图
图1 图2
首页效果图
三、进入新课
1、任务分析
2、任务实施
（一）、插入布局页面的表格并在表格、单元格属性面板中设置表格
【操作步骤】
步骤1：单击菜单栏[插入记录]/[表格]，设
置：1*1，边框、边距、间距：0；
步骤2：单击状态栏[table]标签，设置表格对齐方式为“居中”；
步骤3：单击状态栏[td]标签，设置单元格高；步骤4：表格2、3、4的创建方法同上。
【提出问题】
如果表格属性填充、间距、边框不设为0是什么效果？
练习一：带着问题完成表格插入及属性设置操作。
【总结】如果没有指明单元格边距和单元格间距，大多数浏览器按单元格边距为1、单元格间距为2来显示表格。
（二）调整表格结构
1、合并、拆分表格
【操作步骤】
步骤1：光标定位于表格2中，单击单元格属性面板“拆分”按钮，将单元格差分成10列；步骤2：按住ctrl键选择不连续单元格，设置奇数单元格为80px,偶数单元格为20px;
2、表格嵌套
【操作步骤】
光标定位于表格3第二例，插入一个2*3，宽度80%的表格。
【提出问题】
如何使嵌套的表格置于单元格的最顶端并居中？
练习二：完成表格的结构调整操作。
【总结】表格中的第二种对齐
单元格中的对象相对该单元格的对齐方式，在[属性]面板中展开[水平对齐]/[垂直对齐]下拉列表，选择相应的水平方向和垂直方向的
对齐方式。
3、归纳提高
网页布局排版的原则:网页布局最好用多个表格叠加在一起来实现，即网页中有多个表格从上到下独立的排放。
4、任务拓展
根据首页效果图运用已学知识技能将图片、文字等对象插入到相应位置。
提示：
在同一个单元格里文字下方还有图片该如何处理？。