使用表格布局网页分析

项目4 使用表格布局制作页面一、教学建议该项目主要介绍表格布局在网页中的应用，学生除了掌握利用表格进行简单的网页布局，还需要学会使用嵌套表格制作复杂的网页布局。

该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，以“项目总结”的形式小结所学知识，加深学生的印象，增强学习效果。

以掌握实际应用能力为导向，建议教师在教学的过程中辅导好项目后面“技能巩固”的操作题，让学生在实际操作的过程中提高专业技能，达到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。

二、教学简案【组织教学】检查学生出勤情况，做好学生考勤记录。

强调上课课堂纪律，活跃互动教学气氛。

【课题导入】制作一个页面清晰，层级分明的静态网页，首先需要进行网页布局。

使用表格可以给网页搭建布局框架，然后我们就可以往里面填内容了。

这样做出来的成品才有整体感，不会杂乱无章。

所以，一个网页只有在布局好页面的基础上，添加各种网页元素才会得心应手，事半功倍。

Dreamweaver提供了多种网页页面布局的方式，其中表格布局是应用最为广泛并最为简单易学的。

表格既可以作为网页元素使用，又可以用来布局网页，功能十分全面。

【技能训练】（上机实训：4课时）一、目标任务任务一：使用表格布局制作简单的页面。

任务二：使用嵌套表格制作比较复杂的页面。

二、项目实训1.学生根据该项目的任务要求进行上机操作，教师在机房巡回指导。

2.完成一个任务后，教师引导学生进行总结，然后进行下一个任务。

3.在完成该项目所有任务的基础上，教师结合项目后“技能巩固”的操作题及光盘中的实例题，布置课后上机题。

【布置作业】1.教材项目4后面的“自我测评”。

表格布局网页教学目标：1．知识与技能（1）理解网页设计中表格的作用。

（2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中准确插入文字和图片。

（3）能够根据网页设计内容，准确布局表格的结构，掌握表格嵌套的设计方法。

（1）掌握软件学习中的比照学习法，培养学生迁移学习的水平。

（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维水平。

（3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培养学生学会学习，驾御学习的水平。

3．情感态度与价值观（1）通过比照学习使学生体验软件学习的一般方法及规律，提升学生自主学习信息技术的水平。

（2）通过使用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。

（3）通过“动物——人类的朋友”表格页的设计与制作，再次激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。

教学重点、难点：1．教学重点：（1）理解表格在网页设计中的重要作用和功能。

（2）掌握插入、编辑表格的方法及表格的属性设置方法。

（3）掌握单元格的修饰与属性设置。

2．教学难点：表格的嵌套设计在网页设计中的应用。

教学方法：比照教学法、探究学习法、模仿学习法。

教学准备：各自制作的站点文件夹，整理、归类相关素材并按要求摆放。

教学过程：1．复习以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学生认真回顾，回答教师提问。

为本节课教学做一定铺垫。

2．引入（1）观看两个页面并实行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。

你更喜欢怎样的页面布局？提出问题：有什么办法能够达到第一个页面的效果？（2）观察第三个页面，内容与第一个页面相同，显现页面的表格边框。

第三章使用表格规划网页布局一、相关概念1、表格功能：显示数据，定位网页元素（布局）2、表格的组成：表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。

单元格中的内容和边框之间的距离叫边距cellpadding。

单元格和单元格之间的距离叫间距cellspacing。

表格的边线叫做边框border。

tr：代表一行。

td：代表一个单元格。

3、占位符：当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。

因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。

当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。

如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。

二、插入表格两种方法：①“插入”→“表格”命令②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。

1、宽度（百分比，像素）：相对显示，绝对显示2、边距/填充：文本内容与边框之间距离3、间距：单元格与单元格之间距离4、标题：设置表格标题位置【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容【练习1】：制作下面表格【练习2】：如何让文本与表格边框有一定空白区间，如下：5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。

插入嵌套表格的方法与插入表格的方法相同。

【练习3】：利用表格制作下图样式：说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。

【思考】：利用嵌套表格留空白操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。

《应用表格布局网页结构》教学设计（精选多篇）第一篇：《应用表格布局网页结构》教学设计《应用表格布局网页结构》教学设计一、教学目标知识与技能：1、了解表格在网页设计中的作用。

2、能够根据网页的内容，正确布局表格的结构。

3、掌握网页中表格的制作方法，能够在单元格中正确插入文字和图片，掌握表格属性的设置方法以及单元格的修饰与编辑方法。

过程与方法：通过观看优秀网站表格布局，动手设计表格等环节，帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性，培养学生的发散思维能力；通过学生自主地编辑和修饰表格等环节，培养学生自主探究学习的能力。

情感、态度与价值观：1、提高学生自学和探究的能力，培养学生应用表格布局网页结构的兴趣。

2、提高学生语言表达能力，学会客观的评价作品。

二、教学重点与难点重点：了解表格在网页设计中的重要作用掌握插入、编辑表格以及表格，单元格的属性设置方法。

难点：表格的嵌套表格，单元格，网页属性的设置三、教学方法讲解演示教学法，小组合作学习法，自主探究学习法四、教学设计说明本节课是初中信息技术（下册）2007年7月第一版第11单元《设计主题网站》第二节的内容，教学面向的是初二年级的学生，该年龄段的学生已具备了一定的信息素养，掌握了基本的信息技术知识和技能。

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

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

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

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

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

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

2020年15期New Generation《表格布局网页》教学设计与案例分析吴丹林1罗媛媛2（1.沧州工贸学校河北沧州061001；2.沧州职业技术学院河北沧州061001)摘要：“互联网+教育”即利用互联网平台和先进的通信技术，构造的教育模式。

其中移动平台下的信息化教学，是目前教育研究领域炙手可热的焦点问题。

本文以实际案例，探究移动平台的信息化教学应用。

关键词：互联网+教育；移动学习；教学设计一、信息化教学与移动学习移动端平台下的信息化教学与移动学习，是目前教育研究领域炙手可热的焦点问题。

本文以实际案例，探究移动平台的信息化教学应用，落实到教学实践。

二、以移动智能终端为依托的信息化教学应用（一）利用移动学习实现课前导学，微课助学课前：我制作本节教学课件、微课视频、准备案例和素材，并利用蓝墨云班课———手机端的信息化助手，创建了《网页设计与制作》班课，并发布邀请码，请全班同学加入。

在蓝墨云班课中上传本节教学课件、微课视频、准备案例和素材等内容，实现课前导学，微课助学，即时反馈互助教学，让学习时间化整为零，从而实现翻转课堂的教学效果。

（二）以移动智能终端为依托的信息化教学流程利用云班课的的签到功能，进行考勤，例如今天的签到手势为字母Z。

利用云班课的固定分组功能，把学生分成若干固定的小组，固定学生小组来完成小组任务和小组作业。

课中：1明确任务：首先是激景创趣，通过徽课视频的再次观看，用案例激发学生的兴趣和求知的欲望，本节课项目是———表格布局网页。

也是任务明确环节，通过项目的层层分解，把此模块分成三个小任务，让学生明白了具体操作任务。

从而逐步提高。

2解析案例：教师演示案例，让学生思路清晰，掌握要领，体现教师“主导”作用。

学生活动：通过以上任务的分析对给出的“教学素材”进行网页制作。

3突破疑难：在完成的作品中有的小组完成此表格有表格线，有的小组完成此表格没有表格线。

我并没有直接公布答案，我对不同做法的同学进行了表扬，并让他利用学生机的演示功能对全班学生进行演示，引起了所有同学的注意。

用表格为网页布局教材分析：本节内容为八年级上册第三单元《网上安家》中的第五课，学生在前面学过了网站内容设计、配色方案等，制定了建站计划，有了明确的分工，并为网站建设搜集了部分素材。

教材通过页面布局来引入本课的主要任务，通过表格的建立、单元格的合并与拆分来达到网页布局的目的。

学生分析：学生通过前四节课的学习，初步了解网站建设的一般流程，并对网页的构成有了一个大致的了解。

七年级时已学过利用Word进行排版，对于本节FrontPage使用表格布局具有一定的知识迁移性。

设计思路：为什么要用表格来布局？FrontPage中的表格与Word中的表格操作有什么联系？整个教学过程围绕这二个问题展开，把表格知识点从Word中迁移过来。

教学目标：知识与技能：了解用表格排版网页的作用；掌握网页中表格的制作方法、表格属性的设置以及单元格的修饰与编辑；能够根据网页设计内容较为合理地布局表格结构。

过程与方法：通过网页结构拆分这一活动，让学生在学习中发现问题、探究问题，培养学生学会学习、驾驭学习的能力，能够用表格布局网页，进一步理解表格的作用。

情感态度与价值观：通过运用表格布局网页解决网页版面杂乱的问题，培养学生遇到困难时灵活运用各种方法解决，促进其建站信心，同时意识到事前规划的重要性。

教学重点：利用表格规划网页结构。

教学难点：利用表格进行不规则布局。

教学过程：引入情景创设：展示新浪、淘宝、126邮箱等优秀网站，并提问这些网站漂不漂亮？想不想知道怎么做的啊？通过学生的回答来提升学生学习积极性，同时在课堂中利用这些网页通过化繁为简的方法来进行教学。

新课一、规划主页页面布局页面版块分解，展示四个页面，让学生分析整个页面的结构，参照书本P58图一图二图三图四来划分。

教师提问：每个页面的各个版块是怎样分布的？通过机房学生座位分成四个小组，每个小组拆分一个网页，版块的划分以明显的分界线为依据，要求简单、清晰。

通过学生划分之后，老师以淘宝页面为例来进行网页版块分解演示。