教案：使用表格布局网页

合集下载

2024版DW网页布局表格布局表格学习教案

媒体查询技术运用在表格布局中
01
媒体查询定义
媒体查询是CSS3的一项新特性，允许根据设备的特定条件（如宽度、
高度和色彩等）应用不同的CSS样式。
02
媒体查询在表格布局中应用
通过媒体查询，可以根据不同设备的屏幕大小和方向，为表格设置不同
的布局和样式，实现响应式表格布局。
03
媒体查询语法及示例
媒体查询的语法包括媒体类型和条件表达式，例如`@media screen
02
使用有序列表
如果需要展示带有顺序的列表项，可以使用HTML的有序列表（`<ol>`标签）。
03
自定义列表样式
通过CSS样式来自定义列表项的样式，如列表项符号、文字颜色、行高等，以达到更好的视觉效果和布局效果。同时，可以考虑使用CSS的伪元素来进一步美化列表项的样式。
05
响应式表格布局设计思路与实现方法
表格布局作用
表格布局可以实现网页中复杂数据的展示和整理，同时也可以用于实现网页的基本结构和布局。在一些早期的网页设计中，表格布局被广泛使用。
常见网页布局方式比较
流式布局
流式布局是一种基于CSS的布局方式，它可以让网页元素根据屏幕大小和分辨率自动调整位置和大小，实现响应式设计。流式布局具有灵活性和适应性强的特点。
讲解面板组的概念、分类和作用，以及如何打开、关闭和调整面板组。
基本文档操作：新建、保存、打开和关闭
保存文档
讲解如何保存文档，包括保存位置、文件名和文件类型等设置，以及保存时可能出
现的错误和解决方法。
新建文档
介绍如何创建新的HTML、CSS、 JavaScript等类型的文档，以及设置
文档的基本属性和参数。

人教版信息技术六上第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. 引导学生学习响应式设计，掌握如何使用媒体查询和表格布局来适应不同屏幕尺寸。

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

用表格布局网页教案

用表格布局网页教案第一章：表格布局网页概述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 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。

网页制作教学案——应用表格布局网页

（2）出示任务一：规划网页表格的布局（见图片 buju.gif）。分层完成该任务，基础相对薄弱的学生仅要求读懂网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的学生可以跳出教材，自行设计表格网页布局，并将自己的表格设计付诸实施。
（3）、出示任务二：见环保网站的index.html新建一个页面，用表格布局该网页。FrontPage中表格的插入于编辑与Word中的表格操作类似，教师着重引导学生进行知识迁移。
（4）给出时间让学生操作，然后安排操作熟练的学生进行演示、教师讲解。
设计意图：分层教学，学生可以根据自己的实际情况选择任务难度，并动手分析和进行创意设计，培养学生的模仿以及创新能力。
设计意图：培养学生知识迁移的能力和动手能力。
在实际操作中考虑到学生的基础水平不一，此处应将常用的表格创建的方法，表格编辑、表格工具栏的使用方法等再介绍演示一次。
表格属性与单元格属性设置是本节课重点，普通同学易混淆二者。
设计意图：更好的发挥优秀学生创作思维动手能力。
3、课堂小结、后续活动
（1）、教师引导学生回忆本节课学习的内容：在FrontPage中插入表格、编辑表格、表格属性和单元格属性设置、以及表格嵌套的基本方法等。
（2）、教师展示优秀作品，表扬完成任务的学习，对未完成任务的学生，应鼓励他们利用课余时间继续完成
该任务基本与word里类似，而且图片、动画前面已经讲过。故不详细讲叙。
给出素材：
学生操作
对完成情况好的学生予以评品，对尚未完成或完成不理想的学生给出修正意见。
至此第一课时新课部分结束
设计意图：确保达到教学目标的同时，给学生一定的自主空间，鼓励他们去创新，而不应让学生一成不变地生硬模仿。
第二课时开始

《网页设计与制作》教案-第7讲布局技术之一-表格一

第7讲布局技术之一-表格一1.1教学目标：◆知识目标1.掌握表格的基本操作2.掌握表格各项属性设置的作用◆技能目标能合理运用表格进行页面布局，能合理设置表格属性◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：掌握表格的插入和表格属性的设置。

1.3 教学难点理解表格进行页面布局的好处和表格各属性的作用。

1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：一、激趣导入，揭示课题表格是网页设计制作时不可缺少的重要元素。

无论是用于对齐数据还是在页面上对文本进行排版，表格都体现出强大的功能。

它以简洁明了和高效快捷的方式将数据、文本、图像、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。

对于使用表格绘制页面布局，而非着重文字数据编排的设计来说，手动绘制表格布局是最佳方法，虽然这种方法极其容易建立表格，但不容易掌握尺度，因为其手动操作的特性，所以非常适合于制作网页版面，但对于内容的编排，就不如标准模式的标准那么方便。

标准表格是表格应用的另一种方法，它以几行几列的方式插入到页面，然后将图像、文字等内容插入表格，即可定位和编排这些内容。

二、使用表格在Dreamweaver MX 2004中，可以导入外部数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。

表格的格式控制能力使设计者可以使用表格来构造网页的框架。

先用较大的表格对网页的版面进行大致的控制，再使用嵌套的表格对细节进行刻画。

使用表格排版的页面在不同的平台、不同的分辨率的浏览器里都能保持布局，所以表格是网页中常用的版面控制和制作模板的强有力的工具。

0.1插入表格Dreamweaver MX 2004提供了强大的工具进行表格编辑，使网页设计者可以对几乎所有的表格属性进行控制。

用表格为网页布局教学设计

用表格为网页布局教学设计Teaching design of web page layout with tabl es用表格为网页布局教学设计前言：小泰温馨提醒，信息技术是主要用于管理和处理信息所采用的各种技术的总称，主要是应用计算机科学和通信技术来设计、开发、安装和实施信息系统及应用软件。

本教案根据信息技术课程标准的要求和针对教学对象是高中生群体的特点，将教学诸要素有序安排，确定合适的教学方案的设想和计划。

便于学习和使用，本文下载后内容可随意修改调整及打印。

课题（教学内容）第15课用表格为网页布局总课时第15课时教学目标：1．学会并熟练掌握插入表格的技能。

2．学会并掌握设置表格属性、合并、拆分单元格等表格编辑技能。

3．能利用表格合理的布局网页页面。

：1．展示两组素材相同而布局不同的网页，让学生进行比较认知。

2．利用多媒体教学网进行“利用表格布局网页页面”的教学演示。

3．学生实践练习并交流展示及评价。

4．通过项目活动教学法学会知识技能培养能力。

：1．锻炼学生“利用表格合理的布局网页页面”知识技能。

2．培养学生的审美能力、设计和组织能力、语言表达能力、小组合作能力。

3．使学生在活动完成后获得成功的体验，激发更大的网站制作的学习兴趣。

重点学生自主的设计表格并布局网页难点利用表格合理的、谐调的布局网页教法项目活动教学法*特殊学生：允许他们完成一张网页的表格布局。

教师给予较多的个别辅导机会。

*天才学生：完成多张网页的表格布局操作。

教具教学板书内容教学过程【教学过程】教师活动学生活动方式方法一、导入：1．复习：网站制作的步骤。

2．展示：两张素材相同布局不同的网页。

3．提问：哪张较美观？较美观的那张网页是怎么布局的？1．回顾网站制作的步骤。

2．观察和比较两张素材相同布局不同的网页，并确认哪张较美观？分析布局网页页面的元素。

通过提问、引导、比较等方法，培养学生辨别表格布局网页页面的能力。

二、新授：一）分析表格结构布局1．归纳：（引出课题）较美观的一组是利用表格来布局的。

第十二课用表格为网页布局

教学难点
让学生灵活掌握排列表格和设置表格属性的方法
所需的资源和环境
常规资源
教学环境
1、教学环境的准备：
（1）多媒体网络教室：学生计算机上安装IE6.0，能上因特网；
（2）教师机上准备好学生上交作业的共享文件夹。
2、教学工具的准备：
（1）电子教室；
（2）学生任务单
教学设计
新课导入：
“凡事预则立，不预则废。”预：指事先的计划和准备；制作网页前也想要进行规划，引出本课主题——用表格为网页布局。
注意：页面布局的设计没有限定的规则，但要配合网站内容，让访问者浏览网站时感觉简洁、有序、方便。
（二）为什么要用表格来规划
拼图小游戏：
下发拼图文件1，让学生用Frontpage尝试将9张图片拼成完整的一张（预设：学生会发现很难把嘉兴粽子这幅图拼好）
下发拼图文件2，再次尝试进行拼图（预设：学生会发现拼图相对变的简单）
信息技术（八年级）
课题
第十二课用表格为网页布局
总课时
1
课型
任务驱动型
教学课时
第1课时
教学目标
知识目标：用表格排版主页使其达到页面整洁有序；
技能目标：在网页中插入表格并更改表格的属性；
情感目标：用表格排版网页解决了网页版面杂乱的问题，提示同学们凡事要有计划，做事要遵守规则，促进其做事的信心。
教学重点
插入表格和更改表格属性
试一试：运用表格为自己的网站主页布局并添加图片和文字。
作品上传、点评；
课堂小结：
本堂课主要学习的知识点：有序的规划、网页布局及Frontpage中表格的使用。
作业
随堂练习
课后反思正式授课：本 Nhomakorabea的主要任务，解决三个问题

(参考)用表格布局网页教案

第二节网页布局
一、教学目标
知识与技能
1了解常见的网页版式
2会用表格进行网页的规划和布局
过程与方法
通过欣赏、解剖典型的网页版式，引出表格是布局网页的主要手段。

通过利用表格布局设计制作网页，掌握用表格布局网页的方法。

情感态度与价值观
学会欣赏网页
二、重点和难点
重点是网页版式的设计和表格的建立。

难点是设计出好的网页布局。

三、教学过程
（注：文档可能无法思考全面，请浏览后下载，供参考。

可复制、编制，期待你的好评与关注）。