表格基础和DIV+CSS网页布局基础教案（模版）

第一篇：表格基础和DIV+CSS网页布局基础教案（模版）

 本部分任务

制作“宝贝分类”页面 制作“公告栏”页面

 为什么使用表格

 表格应用场合 具体内容见ppt  表格的基本结构

具体内容见ppt

 表格的基本语法

 Table标签  Tr标签  Td标签 具体内容见ppt 注：表格标签中没有列标签。

 如何创建表格

具体内容见ppt

 跨行跨列的表格

 什么是跨行跨列的表格  跨多行的表格

 跨多列的表格 具体内容见ppt

 表格的美化修饰

  什么是表格的美化修饰 如何设置表格的尺寸和边框 width用来设置表格的宽度 height用来设置表格的高度

border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 如何设置背景

background属性用来设置表格的背景图片

bgcolor属性用来设置表格、行、列的背景色。HTML中颜色的表示方式：“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝。

如何设置对其方式

align属性用来设置表格、行、列的对齐方式 为什么要使用填充属性 具体内容见ppt 什么是填充属性和间距属性 



  border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)如何使用填充、间距属性 border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)

 表格的布局

   什么是表格布局 使用表格进行布局

用表格对网页的内容进行整体控制

 DIV+CSS规划页面

    什么是CSS？

为什么要使用CSS？ 如何使用CSS？

DIV+CSS如何规划页面？

 什么是CSS？

CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。

 为什么要使用CSS？

 CSS的特点

便于页面的修改。便于页面风格的统一。减少网页的体积。为什么要使用CSS？ 使用CSS布局的优点 表现和内容相分离 提高页面浏览速度 易于维护和改版

CSS样式表极大地提高了工作效率

样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。内联定义

内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

 如何使用CSS？

 只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。 定义内部样式块对象

你可以在你的HTML文档的和标记之间插入一个块对象。定义方式请参阅样式表语法。

这样的样式表只能针对本页有效。不能作用于其它页面。 导入样式——Style导入

与链入外部样式的功能基本相同，只是语法和实现方式上有差别。

它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式链接全局样式，这样就使代码达到很好的重用性。 导入样式——Link标签导入

使用Link标签代替Style标签来导入CSS文件。

它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

除了内联定义是直接作用于标签本身以外，其他CSS使用方式都需要建立标签和样式之间的映射关系。主要的映射关系有： id映射 class映射 标签映射 混合映射  CSS样式和页面标签元素的对应方式

   

 几种样式的优先级

 id优先级高于class  后面的样式覆盖前面的  指定的高于继承  行内样式高于内部或外部样式

总结原则：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的。

 DIV+CSS如何规划页面？

请关注上机实验3

By---QQ69848627

第二篇：《应用表格布局网页结构》教案

《应用表格布局网页结构》教案

一、教学目标

1、知识与技能：

（1）了解表格网页的作用；

（2）掌握网页中表格的制作方法，表格属性的属性设置方法；（3）能根据网页设计内容，正确布局表格的结构；（4）尝试根据内容需要设计表格布局网页页面。

2、过程与方法：

（1）利用对比，加深学生对表格布局网页的认识；

（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法；（3）通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。

3、情感态度与价值观：

（1）通过实践创作的过程，形成主动学习和利用信息技术、参与信息作品创作的态度；（2）培养学生注重吸取成功的经验，提高本身的信息素养。

二、教学重点

1、表格的制作及设置方法；

2、根据实际情况设计并应用表格布局网页。

三、教学难点

1、应用表格布局网页页面的意识；

2、合理制作表格，实现页面布局。

四、教学方法

教师讲解、演示、与学生任务驱动、合作学习相结合。

五、教学过程 教学过程

教师活动

学生活动

课前准备

将“学习素材”文件夹发送到学生机桌面；

打开并预习本课内容。

一、对比，引入新课

1、明确表格在网页制作时的作用：页面规划

（1）展示两个页面（1.htm和2.htm）并进行比较： 提问：①这2个网页，你喜欢哪个？为什么？ ②网页中的文字、图像对象如何插入？

③在Frontpage中打开2张网页，观察有什么不一样。

总结：这些线就是表格线，在做网页时，可以利用表格布局网页结构。（2）引出本课内容：探索用表格来布局网页的页面。（3）明确本课的任务：使用表格制作网页。

学生小组交流、讨论，对比加深印象，感受表格布局网页的作用 发现表格可以布局页面 明确本课内容

二、小组合作，体会用表格布局网页

2、模仿用表格布局网页页面结构（1）引导学生回忆Word中学过的表格内容，提示学生表格操作跟Word中具有很大的相通之处；

提问：还记得哪些表格的编辑方法？

（2）展示效果页，引导学生分析页面的结构，探索需要制作表格的结构；（3）讲解演示表格的制作及调整；（4）布置学生完成任务一：“心憩空间”网页

（5）展示成功学生的作品，引出表格属性的设置；

如：行列的插入、删除、单元格的合并、拆分、调整大小等。

根据网页内容来规划所需表格结构，了解网页中表格制作及设置的方法。学生小组合作，完成网页“chushi.htm”

三、小组合作，尝试用表格布局网页

3、小组交流并独立制作表格布局网页

（1）刚才我们一起体会用表格布局网页的网面结构：先分析确定所需表格的结构，然后根据实际制作设置表格布局网页页面结构。接下来我们就来尝试用表格布局我们的网页了；引入用表格布局“多彩的生物”网页；

（2）引导学生分析确定网页的表格结构；

（3）布置学生完成任务二：制作“多彩的生物”网页；可以根据自己的设计对网页进行适当的调整；

掌握根据网页确定所需表格的结构 能根据网页规划表格

小组合作讨论，根据学案提供的参考表格确定“多彩的生物”网页的表格结构，再独立完成图片、文字的插入。

四、作品展示交流与课堂总结

1、展示成功学生的作品并点评；

2、总结本课内容：为了制作的网页内容工整、美观，所以我们选择使用表格布局。本课我们尝试并使用了表格来规划布局网页，尝试设计个人网站的首页，自主设计版面，灵活使用表格进行网页制作。

掌握表格布局网页的常见技巧，加强表格布局网页的意识。

第三篇：教学设计(利用表格布局网页)[推荐]

利用表格布局网页

教学设计

授课教师：刘春霞

授课班级：计算机应用1202班

一、课题名称：利用表格布局网页

二、授课课时：1个课时

三、教学内容分析

本节课以利用表格制作一个简单主页为例，要求学生掌握并灵活运用表格及单元格的一些基本属性设置，从而设计出一个“匡”字型的主页。本次课要求学生具有创建站点的知识，以及Dreamweaver CS3的一些基本操作。

四、学生特征分析

授课对象是职高高二学生，学生已具有熟练操作一些常用软件的能力，已掌握Dreamweaver CS3的一些基本操作。

五、教学目标（知识与技能、过程与方法、情感态度与价值观）

1、知识与技能目标

掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。

2、过程与方法目标

引导学生分析项目，自主独立思考及操作，指导与修正，掌握插入表格、表格基本属性的理解与设置、单元格或行的基本属性的理解与设置，掌握利用表格布局网页的方法。

3、情感态度与价值观目标

提高学生的观察能力及分析能力，调动学生自主能动性，培养学生较浓的学习兴趣，使学生建立正确的人生观与价值观。

六、教学重点难点

掌握插入表格的方法 掌握表格属性设置的基本方法 掌握单元格或行属性设置的基本方法 掌握使用表格进行页面布局的基本方法

七、教学方法

1、讲授法

2、演示法

3、任务驱动法

八、教学环境与资源

教师机，教学广播软件，学生机（60台）

九、教学过程

1、创设情境，导入新课

欣赏网页，分析网页结构，引入本次课学习的项目：利用表格制作一个简单的“匡”字型网页。

2、讲解知识，演示操作 讲解插入表格的方法，表格属性设置的基本方法及单元格属性设置的基本方法，（1）插入表格的方法

将光标置于页面中，然后在主菜单中选择【插入记录】／【表格】命令或在【插入】／【常用】面板中单击（表格）按钮打开【表格】对话框进行参数设置，最后单击【确定】按钮插入表格。（2）表格属性设置

首先选中表格，然后通过表格【属性】面板设置表格的行数、列数、宽度、高度、填充、间距、边框、对齐方式、背景颜色、背景图像、边框颜色等属性。

▲宽度中的百分比单位一般在制作表格嵌套的时候用。（3）设置单元格或行【属性】的方法

首先选择单元格或行，然后通过单元格或行【属性】面板可以设置单元格的宽度和高度、水平和垂直对齐方式、背景颜色和背景图像以及边框颜色等。

（4）展示网页的最终结果并引导学生分析其结构，提示并演示操作的关键步骤，让学生独立思考完成，培养学生知识的迁移能力，效果图如下：

主要操作步骤：

a、新建一个站点，站点根目录为自己的文件夹（含有素材），在站点里新建一个文件index,html。

b、在页面属性里设置字体为“12像素”，页边距为“0”

c、制作页眉部分，插入一个1行1列的表格，宽度为770像素，其它属性参考效果图设置，然后插入Logo图片，d、制作主体部分，I、插入一个1行2列，宽度为770像素的表格，左侧单元格为200像素，设置间距为2，其它属性参考效果图设置。II、III、在左侧单元格中插入一个5行1列，宽度为70%的表格，设置间距为5，其它属性参考效果图设置。（表格嵌套）

在右侧单元格中插入一个4行2列，宽度为96%的表格，设置间距为5，表格标题为“参考咨询”，第一列单元格宽度为160像素，其它属性参考效果图设置。（表格嵌套）

e、制作页脚部分，插入一个1行1列，宽度为770像素的表格，插入图像“foot,.jpg”。

3、学生练习，巡堂指导

（1）、学生参考最终效果图，根据教师提示的主要步骤，独立思考分析，完成主页。（2）、教师巡堂指导，留意学生在操作时出现的细节问题，做好作业点评。

4、上交作业，点评作业

（1）、要求学生把主页及素材（自己的文件夹）一起交到教师机“1202班”文件夹中。（2）、抽出两个学生的作业点评，修正错误，完善主页。

5、课堂小结，宣布下课

本次课主要学习插入表格、表格基本属性的设置、单元格或行的基本属性的设置，利用表格布局网页的方法。

十、教学反思（欢迎名位听课老师提出您宝贵的教学建议）

第四篇：应用表格布局网页教案设计与反思

应用表格布局网页教案设计与反思

一、教学目标：

1、知识与技能：

（1）、了解表格在网页设计中的作用。

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

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

2、过程与方法：

（1）、利用对比学习，培养学生知识迁移的能力。

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

（3）、通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。

3、情感态度与价值观：

（1）、通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习的能力。

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

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

二、教学重点难点：

1、教学重点：

（1）、了解表格在网页设计中的重要作用。

（2）、掌握插入、编辑表格的方法及表格的属性设置。（3）、掌握单元格的修饰与属性的设置。

2、教学难点：

（1）、表格的嵌套在网页设计中的应用。

三、教学过程：

1、创设情境、导入新课

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

（2）、提问：你喜欢那个页面的布局？学生回答。

（3）、提出问题：有什么方法可以达到第一个页面的效果。观察第三个页面，内容与第一个页面相同，显现页面中表格的边框。

（4）、学生讨论、交流，回顾Word中学习过的表格，领悟表格在FrontPage中的作用。

设计意图：通过对比学习，培养学生知识迁移的能力。

2、任务驱动、自主学习

（1）、展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到分析教材中的例子，得出表格的布局。

（2）出示任务一：规划网页表格的布局。分层完成该任务，基础相对薄弱的学生仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的学生可以跳出教材，自行设计表格网页布局，并将自己的表格设计绘制在教材上。

设计意图：分层教学，学生可以根据自己的实际情况选择任务难度，并动手分析和进行创意设计，培养学生的模仿以及创新能力。

（3）、出示任务二：新建一个页面，用表格布局该网页，并在该网页中放入相应内容。FrontPage中表格的插入于编辑与Word中的表格操作类似，教师着重引导学生进行知识迁移。

（4）、学生操作，教师安排操作熟练的学生进行演示。设计意图：培养学生知识迁移的能力和动手能力。

（5）、出示任务三：在表格中插入图片、输入文字。任务四：表格属性以及单元格属性的设置。

（6）、学生根据自己的实际情况选择任务难度，可按教师的具体要求操作，也可根据自己的意图进行设计。设计意图：确保达到教学目标的同时，给学生一定的自主空间，鼓励他们去创新，而不应让学生一成不变地生硬模仿。

（7）、出示任务五（提高内容）：表格的嵌套。学生动手制作网页。设计意图：更好的发挥优秀学生创作思维动手能力。

3、课堂小结、后续活动

（1）、教师引导学生回忆本节课学习的内容：在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法等。

（2）、教师展示优秀作品，表扬完成任务的学习，对未完成任务的学生，应鼓励他们利用课余时间继续完成。

四、教学反思： 略

第五篇：网页中表格教案

第三课 在网页中插入表格

一、教材分析

网页制作中用表格来规划整个网页的布局，是我们设计制作网页常用的手法。所以学会在网页中插入表格是网页制作中的一个重要的部分。本课的主要内容包括在网页中插入表格，表格的编辑和修饰，在表格中插入文字、图片等。通过对本课的学习，让学生了解用表格来规划网页会使网页结构显得清晰明快。在网页制作中，引导学生用表格来规划网页，为以后网页的开发设计打下一个良好的基础。

重点：学会使用多种方法在FrontPage中插入表格。难点： FrontPage表格的美化。

二、教学目标

知识与技能：学会在FrontPage中插入表格及美化表格的方法，培养学生运用表格设计来美化网页的能力。

过程与方法：采用研究体验式和协作式学习方法，培养学生对计算机知识的迁移能力和综合运用知识的能力。

情感态度、价值观：通过网页制作，培养学生良好的审美情趣。使学生逐步形成用表格来规划网页布局的网页制作习惯，为今后网页的开发设计打下一个良好的基础。

三、教学准备：

硬件环境：使用多媒体网络教室，配备宽带网络。软件环境：WinXP操作系统、FrontPage2000以上版本。素材资源：

1、在教师机或学生机上为学生建立相关的素材资源文件夹。

2、教师为学生准备上课演示用的教师制作的网页1。

我打算出示一组关于学生作文的中学生作文网。

3、为学生准备上课演示用的教师制作的网页2-----情感小屋网页，通过在情感小屋的首页内插入表格，通过进一步用表格规划情感小屋首页的网页布局来学习网页中表格的设计与制作。

五、教学流程

出示课前准备的含有表格的网页1中学生作文网，（一）创设情境，确定问题，布置任务

师：当你漫步在环境优雅的校园时，是否考虑过校园里的林荫道和绿化带的作用？ 生：起着绿化与方便交通的作用

师：其实还有着非常重要的作用，将行政区、办公区、生活区、活动区分成各自独立的区域，使整个校园错落有致，美丽如画，同样，如何将网页布置的美观整齐，结构清晰呢我们运用表格来布局与美化网页？

任务一：在FrontPage中有几种创建表格的方法？它们各有什么优点？

方法一：“常用”工具栏“插入表格”命令。

优点：操作速度快

方法二：“表格”菜单“插入”→“表格”命令。优点：能对表格预先进行设置。

方法三：“表格”菜单的“绘制表格”命令，手工绘制表格。优点：能做出特殊的表格，可以对表格进行修改。

任务二：

如何隐藏表格边框？-----推出表格属性的用法 任务三：

请同学们尝试着在FrontPage中制作如下表格：

（二）学生自主探究学习我 就 是 我姓名 年龄 学校 家庭住址 特长

姓别 QQ1、在FrontPage插入简单表格这一教学环节，考虑到学生已有Word知识的基础，故在此可放手让学生自主学习。通过让同学演示示范，得出插入表格的几种基本方法。并利用同Word相类似的编辑方法来体会FrontPage中表格的简单编辑。完成表格的简单制作。

2、为完成“表格的调整”这一教学任务，教师可提前演示制作好的表格，带着如下问题以小组为单位，研究和尝试对表格进一步美化：

（1）怎样进行行高与列宽的调整（2）怎样进行单元格的合并和拆分（3）怎样进行插入或删除表格中的行或列，（4）怎样进行平均分布行和列等基本操作（5）怎样进入表格属性对话框？

（6）表格属性对话框中相应选项的改变会给网页的效果带来哪些变化，起到什么修饰作用？

在此过程中，教师也可深入到各小组的研究讨论中去，和同学们共同寻找答案。然后，请完成表格美化的同学演示示范，以此突破本课利用表格属性来美化表格这一教学难点。

（四）创设任务，小组协作，巩固新知

在学生已基本学会插入表格和美化表格的基础上，再次创设学习任务，以小组为单位，打开站点“情感小屋”，并打开首页文件index.htm,分别插入四个表格，依次为：2╳3、2╳2、1╳4、2╳

1、宽度为780像素，水平居中。

最后展示各小组学生的作品，展开自评与互评。

六、评价建议：

本课的评价环节贯穿在学生学习活动的全过程，在学生每完成一个学习任务之后教师都要予以充分肯定，尤其在小组的作品展示阶段，教师要注意引导学生从多方面、多角度评

价每个小组的作品，如对各小组的网页作品，可在网页内容、网页规划及网页美化等方面进行自评和互评。注意培养学生良好的审美情趣。