应用表格布局网页结构

应用表格布局网页结构
应用表格布局网页结构

《应用表格布局网页结构》教学实录

[作者:阜宁县明达中学姜秀菊来源:本站原

创点击数:1078 更新时间:2010-6-12 文章录

入:yc_chl ]

知识与技能目标:

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

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

3、区分表格属性和单元格属性,并掌握属性的设置。

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

过程与方法目标:

1、利用对比学习,形成知识迁移的能力

2、通过用表格布局网页,进一步理解表格的作用、功能

3、通过对比学习与自主探究,了解并掌握软件学习的一般方法及规律,提升自主学习能力

4、通过任务驱动学会

情感态度与价值观目标:

1、通过对用表格布局网页的学习,增强审美观,提高对学习网页制作的兴趣。

2、通过“保护动物”网站的制作,激发学生关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。

教学重点与难点:

1、重点。

(1)了解表格在网页设计中的重要作用。

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

(3)掌握单元格的修饰属性的设置。

2、难点。

表格的嵌套在网页设计的重要作用。

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

教学过程

一、导入:

播放歌曲“一个真实的故事”,激发学生兴趣,与学生互动。

师:这首歌里讲的是什么样的故事呢?

生回答。一个姑娘救丹顶鹤的故事

师:丹顶鹤,它是一种珍稀动物,同学们还知道哪些珍稀动物呢?是从哪里知道这些珍稀动物的呢?

生抢答。扬子鳄,大鲵,金丝猴,丹顶鹤……

师:很好,同学们知道的可真多啊,是从哪里知道这些珍稀动物的呢?

生回答:书,报纸,网络……

师:同学们知道,但是很多人不知道呢,更不知道人与动物要和谐相处,我们是不是有必要做些宣传。为保护珍稀动物尽一份力?

生:对

师:但是这么多珍稀动物在网页上应该如何分布呢?

展示:两张素材相同布局不同的网页(动物——人类的朋友)。(然后将两个页面并排显示在投影上)

提问:同学们,请大家比较一下这两个网页,相互之间可以讨论一下,那一个网页布局更合理,哪张较美观?较美观的那张网页是怎么布局的?(请学生回答,请坐。)

【设计意图】展示作品,激发学生兴趣;引导学生发现问题,并学会分析问题。

观察和比较两张素材相同布局不同的网页,分析布局网页页面的元素。这两个网页,通过比较会发现:一个是页面工整,文本、图片摆放对称且有一定规律,使用表格布局,但表格边框隐藏(看不出表格痕迹);一个是页面凌乱,有图有文,摆放杂乱,提出问题,有什么办法可以达到第一个页面的效果?

二、新授:

1、分析表格结构布局

展示一些由表格布局的网页,引导学生分析其表格结构,自然过渡到书本例子(biaoge.htm),分析结构,得出表格的布局(几行几列,哪些行做了哪些处理)。

(1)归纳:较美观的一组是利用表格来布局的。

提问:谁能看出这张网页中所隐含的表格是几行几列的?

展示:分析网页中所隐含的表格结构。

(2)学生讨论、交流,FrontPage中表格的插入和编辑与Word中的表格操作雷同,教师无需讲解,引导学生知识迁移。

任务一、学生操作:插入10行一列的表格。

2、编辑表格并完成页面布局

演示:进行插入表格和编辑表格(合并、拆分单元格)

任务二、学生观察示范,学生与教师进行合并、拆分单元格的实践操作。

3、充实网页内容:

任务三、在表格中插入图片、输入文字

展示学生作品,引导学生发现表格页面中存在的问题,教师提出需要做哪些修改?

学生回答:图片的大小,对齐方式,边框线、背景的设置。

4、表格嵌套

生:图片调整后,其它单元格随之变化,如何解决这个问题?

师:这就要用到表格的“嵌套”。

【设计意图】这是本节课的重点,布局主要就是通过插入表格、表格嵌套、拆分单元格来实现的。让学生动手制作,体验表格的作用;以任务驱动形式自主学习,然后让学生自己发现问题,并解决问题,推动学生的探索意识和交流能力。

教师讲解,表格嵌套的含义,并演示。

任务四:表格嵌套,把第一和第二行的单元格各自合并后,分别插入表格。

5、调整表格属性,美化页面

教师演示:表格、单元格属性的调整。

任务五:表格属性以及单元格属性的编辑。调整图片大小、位置,设置单元格与表格属性。

A、表格属性的调整去除网格线、设置表格背景色等

B、使用不同的颜色区分各版块单元格属性的调整

强调:鼠标右键快捷菜单。

辅导:教师巡视各小组的实践操作练习,对特殊学生给予较多的个别辅导机会。学生以小组为单位,进行“表格布局网页页面”的实践操作练习并进行交流展示。

一般学生:模仿课本中例子完成一张网页的表格布局。

优秀学生:自主设计网页的页面布局,教师给予一定的辅导。

6、保存、预览网页

任务五:保存、预览网页,并互相评价、学习。

7、提高内容:请做的好的学生尝试做出拓展作业里的网页的表格布局。

【设计意图】鼓励学有余力的学生自主探索;鼓励学生质疑,疑问是学生探索、创新的动力源泉

三、作品的展示交流评价:(教师评价与学生评价相结合)

展示表格页面制作完成的优秀作品,表扬完成任务的同学,对未完成的同学给予激励,鼓励他们利用中午以及下午放学时间抽空到机房继续完成。

四、小结

本节课我们学习了在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法。

请同学们回答几个问题,并演示几个基本操作。在网页制作中,我们经常利用表格来布局和规划网页的版面。表格在网页制作中能很好的控制文本和图片,表格能让你的页面具有良好的易读性。利用表格的详细设置,你能创建符合页面需要的表格。

五、教学反思

信息技术课是一周上一节,网站的制作上过一次,学生对网页编辑工具和打开站点都已经生疏了,所以,在学生操作之前我先演示如何打开站点,这样学生就能快速的回忆原来的知识,上手比较快。《应用表格布局网页》是网站制作的第三课时。本节课的重点应该是首先让学生了解表格在网页设计中的作用,所以在课的一开始,我通过对比引入,加上复习回忆Word中的表格,了解表格的不同的功能,让学生明白表格的网页设计中的重要性。

重点之二就是掌握网页中表格的制作方法及其基本编辑方法。FRONTPAGE中表格的制作方法与WORD有很多相似之处,所以学生应该都是有表格制作的基础的,我运用了知识的迁移,适当的和学生一起回顾一下,这样可以使学生知道不同软件之间是有互通性的,突破以往满堂灌的形式。

重点之三就是区分表格属性和单元格属性,并掌握属性的设置。这一部分主要是让学生知道打开对象属性的方法,掌握操作共性。表格属性和单元格属性参数的设置并不难,主要是让学生带着问题自己探索,从而区分表格属性和单元格属性。对于难点部分“表格的嵌套”,我让学生自己发现问题,先思考,然后教师解答并操作。这样学生就掌握了。最后通过拓展任务体现分层教学。考虑到学生的差异,本人还提供了学案加以辅导,学生的任务达成率比较高。

在整个教学过程中时时引导学生去探索问题、解决问题,从而引动和维持学生学习的兴趣和动机。教学过程看起来比较多,但环环相扣,层层递进。

本节课也有一些不足之处,一是学生还不习惯小组的合作,很多的同学自己忙自己的。在以后课堂中要想办法激发学生小组合作意识。二我高估了学生的基础,本应在上节课学会的东西,比如调整图片的大小等,学生并没有很好的掌握,所以导致部分同学表格不太好调整。应当适当的和学生回顾一下。三是可能对学生的要求过高,大部分的学生只能模仿课本的作品没有什么创新。如何能让学生将模仿和探究很好的结合,在模仿中创新,这将是我在以后的教学设计中要认真思考的问题。

最后,我感到这次展评课的开设,对我是一次很好的锻炼,学到了很多。我会在不断的研究教材,研究学生,改进教学设计中提高自己。

.

教案:使用表格布局网页

教学内容:项目五表格的应用 任务3、使用表格布局网页课程:网页设计与制作 专业:计算机 授课课时: 1课时 教师: 授课班级: 单位: 授课时间: 教学设计说明:对于使用表格布局“个人写真”首页的任务,我在坚持以教

师为主导,学生为主体的教学原则下,通过复习提问——巩固旧知;创设情景——导入新课,明确任务;提出问题——分析任务,引发思考、课堂讨论、获取知识;讲授点拨——任务实施,引出重点;师生互动,归纳提高——攻破难点五个环节进行教学。在任务实施中采取小组合作完成的方法,以小组为整体回答问题及完成操作性任务,小组评比采用星级制,小组得星数量从多到少评为优、良、

D:/myweb素材 2 文本、图片等元素的布局,强调两个网页在制作中的区别是前者运用表格进行合理布局,可见布局在网页制作中的 提出本次课的任二、导入新课 看图观察对比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%的表格。 【提出问题】 如何使嵌套的表格置于单元格的最顶端并居 中? 练习二:完成表格的结构调整操作。 【总结】表格中的第二种对齐 单元格中的对象相对该单元格的对齐方式, 在[属性]面板中展开[水平对齐]/[垂直对齐]下 拉列表,选择相应的水平方向和垂直方向的 学生到前面操作, 及 在的普遍问题。 【学生操作】 带 成 设置操作。 总结表格的填充、 间距、 义。 学 整 法, 习操作方法, WORD 进行对比。 【学生操作】 带 成

用表格为网页布局

第15课用表格为网页布局 绍兴市树人中学黄学锋1.设计思想 本节课的主题是对网页内容的排版。为了提高学生的建网兴趣,接受网页中表格的排版定位作用,设计了提供宠物——领养宠物——建立宠物园的教学过程,以“给宠物网上安家”、“不同的宠物需要不同大小的生活空间”等为引导,设计使用表格中不同大小的单元格来让宠物“和睦相处”。同时,请学生建立自已的开心宠物园,掌握网页的表格排版功能。 2.教材分析: 布局是网页制作的第一步,在本节教材中,先提出了规划布局,再进行表格定位,最后进行定位调整。这要求教学过程中需要对学生明确:对于网页中对象多而杂的情况,必需先规划、再定位,而用表格是一种很实用而有效的途径。 3.学性分析 在前几节课中,学生已学会了建立站点、新建主页、插入素材等操作。为了区别WORD和PPT等曾经排版方法,在学习网页排版时,创设一种情境能让学生对于多个网页对象能自然的用表格进行页面布局。通过这种教学方式,能让学生觉得网页表格排版理所当然,利用情境也大大提高了操作兴趣,在操作中掌握了技能。 4、教学目标 知识目标:用表格排版主页使其达到页面整洁有序; 技能目标:在网页中插入表格并更改表格的属性; 情感目标:用表格排版网页解决了网页版面杂乱的问题,提示同学们凡事要有计划,做事要遵守规则,促进其做事的信心。 5.重点难点 重点:插入表格和更改表格属性。 难点:让学生灵活掌握排列表格和设置表格属性的方法。 6.教学策略与手段 以网络流行的开心菜园、开心农场为引入,整堂课围绕建立自已的开心宠物园为主题对学生进行教学,最后通过若干学生作品展示来提高表格操作技巧。 7.环境与素材 1.教学环境:多媒体网络教室,配备投影仪;学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版,要求能上因特网; 课本准备。 2.教学素材:为学生准备好一批宠物GIF图片。

制作网站——表格布局网页

制作网站——表格布局网页(第3-4课时) 教学目标: 1.知识与技能 (1)了解网页设计中表格的作用。 (2)掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能 够在单元格中正确插入文字和图片。 (3)能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。 2.过程与方法 (1)掌握软件学习中的对比学习法,培养学生迁移学习的能力。 (2)通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法的多 样性,培养学生的发散思维能力。 (3)通过自主探究,使学生掌握软件的使用规则,由摸索、探究性学习到形成性学习,培 养学生学会学习,驾御学习的能力。 3.情感态度与价值观 (1)通过对比学习使学生体验软件学习的一般方法及规律,提高学生自主学习信息技术的 能力。 (2)通过运用表格布局网页对象活动(各人根据网站主题,设计网页),进一步掌握各种 不同对象的属性设置方法和规律,体验创造的快乐。 (3)通过“动物——人类的朋友”表格页的设计与制作,再次激发学生关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。 教学重点、难点: 1.教学重点: (1)了解表格在网页设计中的重要作用和功能。 (2)掌握插入、编辑表格的方法及表格的属性设置方法。 (3)掌握单元格的修饰与属性设置。 2.教学难点: 表格的嵌套设计在网页设计中的应用。 教学方法: 对比教学法、探究学习法、模仿学习法。 教学准备: 各自制作的站点文件夹,整理、归类相关素材并按要求摆放。 教学过程: 1.复习 以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入,学 生认真回顾,回答教师提问。为本节课教学做一定铺垫。 2.引入 (1)观看两个页面并进行比较:一个使用表格布局,但表格边框隐藏(看不出表格痕迹),其页面工整,文本、图片摆放对称,具有一定规律;另一个页面凌乱,图文混杂,摆放杂乱。你更喜欢怎样的页面布局? 提出问题:有什么办法可以达到第一个页面的效果? (2)观察第三个页面,内容与第一个页面相同,显现页面的表格边框。 学生讨论,交流,回顾Word中学习过的表格,明白表格在FrontPage中的作用。

利用表格布局网页教学反思

《网页中的表格》教学反思 表格的作用在网页制作中非常重要,网页的布局都由表格来控制,本节课通过任务驱动式教学,启发并引导学生完成任务。首先,给学生展示网络上的许多漂亮的网页,将网页布局的布局进行大概的分类,让学生体验表格在网页制作中的强大作用。由于学生在Word中已经学习过如何进行表格的操作,应此,将此部分的内容迁移到Frontpage还是比较简单的,所以本课主要以学生的自主探索为主,教师讲解为辅进行。 本节课使用任务驱动式教学法,通过启发的方式引导学生完成任务,首先,给学生展示如何用表格控制网页,通过与word类比的方法让学生认识表格的组成结构,接着,给学生展示一张利用表格控制后做出来的网页,明确目标,激发学生的学习兴趣。在学生学习的过程中给学生准备一个学程导航,让学生每次阅读任务的步骤,遇到操作中的难点,教师再进行示范。 在自主学习中,有效地培养了学生的动手能力,大部分的学生都能迅速地完成操作。但是学生在知识迁移的过程中还有一些小问题,因此,在今后的备课中还要加强每一个操作小任务的设计,对每一个操作的环节,应该准备操作的效果图,让学生能够快速直接地发现自己的问题,尽快去寻找解决问题的方法。 在本节教学过程中,要注意每一个小任务的提出,都要事先出示表格效果图,让学生面对眼前的实际问题,指导学生看书去寻求解决问题的方法,随后教师示范,学生看着大屏幕跟着一起解决问题,效果良好。另外,要求学生试制作“双休日活动安排表”这一残缺不全的表格时,教师一定要巡视每个学生,必要时结合本节课的知识要点进行个别辅导,让学得不扎实的学生也能尝受到成功的喜悦,以达到大面积提高教学质量的目的。

用表格布局网页

第13课用表格布局网页 一、教学目标: 1.知识与技能 (1)了解网页设计中表格的作用。 (2)掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能够在单元格中正确插入文字和图片。 (3)能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。2.过程与方法 (1)掌握软件学习中的对比学习法,培养学生迁移学习的能力。 (2)通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法的多样性,培养学生的发散思维能力。 (3)通过自主探究,使学生掌握软件的使用规则,由摸索、探究性学习到形成性学习,培养学生学会学习,驾御学习的能力。 3.情感态度与价值观 (1)通过对比学习使学生体验软件学习的一般方法及规律,提高学生自主学习信息技术的能力。 (2)通过运用表格布局网页对象活动(各人根据网站主题,设计网页),进一步掌握各种不同对象的属性设置方法和规律,体验创造的快乐。 (3)通过“动物——人类的朋友”表格页的设计与制作,再次激发学生关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。 二、教学重点、难点: 1.教学重点: (1)了解表格在网页设计中的重要作用和功能。 (2)掌握插入、编辑表格的方法及表格的属性设置方法。 (3)掌握单元格的修饰与属性设置。 2.教学难点: 表格属性和单元格属性设置 三、教学方法: 对比教学法、探究学习法、模仿学习法。 四、教学过程: 1.复习 以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入,学生认真回顾,回答教师提问。为本节课教学做一定铺垫。 2.引入 (1)观看两个页面并进行比较:一个使用表格布局,但表格边框隐藏(看不出表格痕迹),其页面工整,文本、图片摆放对称,具有一定规律;另一个页面凌乱,图文混杂,摆放杂乱。你更喜欢怎样的页面布局? 提出问题:有什么办法可以达到第一个页面的效果? (2)观察第三个页面,内容与第一个页面相同,显现页面的表格边框。

用表格布局网页教学设计

用表格布局网页教学设计 教学目标 (一)知识与技能目标: 1、理解用表格布局主页的作用。 2、掌握在网页中插入表格进行排版。 3、学生设置表格的属性。 (二)过程与方法目标: 通过欣赏和借鉴别人布局的主页,取长补短,帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性,培养学生的发散思维能力。(三)情感、态度与价值观目标: 用表格排版网页解决了网页版面杂乱的问题,培养学生在遇到困难时灵活运用各种方法解决,促进其建站信心。 五、重点与难点 教学重点:插入表格和更改表格属性。 教学难点:让学生灵活掌握排列表格和设置表格属性的方法。 六、教学策略与手段 游戏竞赛法,对比教学法,任务驱动法,讲解演示法,自主探究学习法,网站教学法,小组合作法。 七、课前准备 1、学生的准备 带课本进教室 2、老师的教学准备 (1)精心准备课堂,做好教学设计 (2)预先做好问题的设计及突发事件的应对 3、教学环境的设计与布置 多媒体网络教室,学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版 4、教学用具的设计与布置 准备好一些具有代表性的版面设计优美合理的网站主页面作为参考八、教学过程 (一)、课堂导入 教师:第一次给大家上课,老师想了解一下情况,不知我们班是男生信息技术水平高还是女生信息技术水平高? 学生:……… 教师:自己说了都不算,这节课我们就来较量一下。怎么样?先从第一个环节拼图游戏开始。

邀请两位同学(男生和女生)上来,分别选择其中一个,帮我把网页上图片的位置调整好。一位没调整好,另一位调整好了。 先采访一下失败的原因,你觉得问题出在哪里,是不是按照Word中的方法在操作,那你觉得在Word中图片、文字可以怎么样,而在FrontPage 中呢? 采访另一个,发表一下你的成功感言,你觉得你为什么会成功,是网页中的什么帮了你的忙?网页里面有表格。也说是说在网页中要给图片定位,就必须要用到表格,表格在网页中起到了一个怎么样的作用——可以定位对象,即可以为网页布局,那怎样操作大家想不想学,今天这节课我们一起来学习第十五课《用表格为网页布局》。 板书:用表格为网页布局 (二)、页面布局 其实一般的网站都是用表格来布局的,我们先来欣赏几个网站。 1,2欣赏以后分别看编辑图,都是有表格,除了都有表格外,老师还发现了一个共同点,从整体看,得出这张主页都是怎么样的一个图形,半包围型,老师今天的这个教学网站也是包包围型。除了这个半包围型,你还看到过哪些。然后得出任务一,小组合作,让学生结合平时上网的经历,设计一张页面布局图,(分层教学)1、可以自行设计,2、也可以参考课本。 板书:1、页面布局 绝大部分同学已经设计好了。我看有几位同学做得很不错,然后展示,让学生具体说说他的设计。 (三)制作主页 (1)布局图设计好了,那么如何在网页中插入表格进行布局,我们以前在哪里学习过表格的插入——Word,当时是怎么操作的,想起来了吗?(表格——插入——表格) 看任务二。 任务二,①根据任务要求,探究着在FrontPage中插入一个6X3的表格。谁来试试,马上请一个学生来演示。演示好后,下面同学自己操作。板书:2、制作主页 (2)老师这里也有几个页面布局,这些都是网页上常用的布局图,其实这些都是从6X3的表格中,使用了对单元格的操作转变过来的,单元格怎么操作——合并单元格,选择一个,让学生讨论一下,叫一个学生演示。 如果我要在这里增加一格,怎么操作,去掉这格又怎么操作?具体操作一个。(三种操作都讲讲菜单、右键、手绘) ②把你自己刚才的创意布局用表格的形式呈现在网页上。 任务三:今天来了这么多老师,你能不能用刚才的布局图,做一张宣传

FrontPage2003轻松布局网页

FrontPage2003轻松布局网页 内容提要:很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能。用FrontPag 很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能。 用FrontPage2003的“布局表格和单元格”功能布局网页时,需要通过两部分来完成。 首先通过“布局表格”功能来为网页布局创建一个框架,然后通过“布局单元格”功能为该框架填充包含有网页内容(包括文本、图像、Web部件和其他元素)的区域,也就是单元格。 下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。 一、创建布局表格 1.创建布局表格 打开一个空白网页,并切换到“设计”视图下,单击“表格”菜单中的“布局表格和单元格”命令,随后在右侧弹出一个任务窗口(图1),在该任务窗口下面程序提供了多种表格布局模板,在此单击其中需要的模板即可将该模板添加到网页中。

2.绘制布局表格 如果你对模板中提供的布局表格不太满意,还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”,随后将指针移到操作窗口最左端,然后拖动鼠标即可绘制表格。 3.设置表格属性 插入表格后,还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。 提示:在设置表格时,如果要想覆盖网页的默认边距,并让布局表格跨到文档窗口的边缘,可以将表格中的各个边距的属性都设置为0。 在设计框架时经常需要调整某一行或列的属性,这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框,每一侧都会出现显示列宽和行高的标

《网页中的表格》教学设计

《网页中的表格》教学设计 一、教学设计部分 本课的主要内容与地位 网页中,常用表格来对网页中其它元素定位,将复杂的元素有条理的分布到网页各个位置──网页布局。另外,当我们把表格的宽度定为固定像素值后,还能保证网页布局不会随浏览器窗口的大小变化而变化,当我们在网页中输入文字的时候,就可以让文字顶满格后自动换行,方便我们对文字的编辑。 由此可见,网页中只有利用表格进行布局,才能称得上真正意义上的网页设计。 本课与前后内容的关系 利用表格布局网页,将上一节设计的网站首页中的各种素材进行合理的分布,是对学生进行网页设计技能上的提升;利用表格布局网页也是整个网站设计中一个非常重要技术手段,应用非常广泛。 知识目标/技能目标 知识目标 理解表格在网页设计中的重要作用。 技能目标 ⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 过程与方法目标 能够合理利用表格对网页进行布局和规划。 情感态度与价值观目标 了解学校概貌,发现校园之美,理解规矩与方圆的关系,养成良好的生活和学习习惯。

本课的重难点 重点和难点:掌握利用表格对网页进行布局的方法 本课的课时分配建议 一课时 教法建议 由于关于表格的基本操作(插入表格、调整表格:调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列)在Word中已经有较详细的操作方法。在本课教学过程中,教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页,让网页中的素材合理的在网页上分布。 另外,网页模板是提高建站效率的有效手段,教师要注意引导学生对网页模板的使用。 学法建议 注意观察和借鉴样板网站中表格的运用情况,刚开始使用表格设计网页时可将其边框粗细的值设为1,以观察调整表格的过程,从而掌握表格调整的技巧。 本课教学资源索引 1.第二课的半成品网页:Index.htm、Parents.htm 自评、互评、师评要注意的问题 学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。

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

《应用表格布局网页结构》教案 一、教学目标 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( 师生继续分析页面效果好的那张网页,其布局页面的表格结构有几行几列,引出问 题:如何对表格进行处理而使页面布局更合理,即表格的编辑操作。 3( 教师以页面较杂乱的那张网页为例,进行插入表格、合并、拆分单元格等示范操作。

4( 学生以小组为单位根据实际情况,进行“利用表格布局网页页面”的实践操作练习。 教师针对不同水平的学生进行分层教学:对特殊学生,允许他们完成一张网页的表格 布局。教师给予较多的个别辅导机会。对天才学生,要求完成网站内多张网页的表格 布局。 5( 要求各小组将已经利用表格布局好的网页进行交流展示,各小组评价。以网页上各类 素材间整体布局的合理性、谐调性和美观程度为评价标准。达到加深学生对利用表格 布局网页的理解及提高解决实际问题的能力,同时激发学生的积极性,并从中获取成 功的体验。 6( 课堂小结则分成教师强调实践操作注意点和学生总结“利用表格布局网页”的重要性 两部分组成。 7( 为了巩固新知识及更好的布局网页页面,要求学生课后以小组为单位进行分工操作, 预先在草稿纸上设计好各自所负责网页页面的表格结构,以便上机操作时更快捷的完 成页面布局。

使用表格布局网页

巧用表格来布局 【学科领域】本教案所适用的学科为八年级信息技术学科。 【内容概述】在用FrontPage制作网页的过程中,良好的版面设计是使网页美观的要素之一。在本课的学习中,学生通过比较,了解使用表格可以合理布局网页空间,起到美化网页的作用。 【学习目标】 1.知识与技能:熟悉表格在网页编辑中的作用;掌握用菜单命令和工具按钮插入表格的方法;学会用菜单命令、快捷菜单命令、鼠标操作等不同的方法对表格进行编辑。 2.过程与方法:通过知识迁移,培养学生利用已学过的知识进行自主学习的能力;利用表格使网页布局合理、美观,从而让学生对网页制作更有兴趣。 3.情感态度价值观:培养学生独立思考、自主学习、合作讨论的能力,通过自己探究问题,进一步树立学生学习信息技术的自信,提高学生学习网页制作的兴趣。 【课时安排】:1课时。 【教学重难点】: 1、重点:表格在FrontPage中的作用;表格的插入与编辑;“表格”的菜单命令。 2、难点:表格属性、单元格属性。 【教学过程】: 一、教学表格的插入

1.直觉判断 (1)观看两个页面进行比较:一个是用表格存放文本、图片,表格边框隐藏,页面美观;一个是上节课制作的页面,有图有文但没有表格的页面。 提出问题,学生讨论,有什么办法可以达到第一个页面的效果?(2)观察第三个页面(用表格存放文本、图片,但表格边框未隐藏的网页),告诉学生其实有一种方法很简单,而且利用的是在学习Word时用过的一种工具,这就是表格,但是在FrontPage中表格的作用比Word中作用更大了。 2.任务驱动、知识迁移、观察总结 布置任务1:回忆过去学Word时是如何插入一个3行2列的表格的,尝试一下在FrontPage中是不是可以用同样的方式插入这样的表格。并仿照刚才观看的第三个页面将“我的第一个网页”进行修改。遇到问题可查阅书上“插入表格”的步骤。 小组讨论总结FrontPage中的表格比Word中有了什么更大的作用。 二、教学表格的编辑 1.推测、实践、证实(培养自主学习的方法) 提出问题:在Word和FrontPage中插入表格的方法是一样的,但是编辑表格是不是也一样呢?

使用表格布局网页操作步骤

使用表格布局制作欢迎光临我的小屋网页步骤 1.设置页面字体格式14px 2.在页面中插入1个3行1列的表格,宽度774px 3.在表格的第1行插入图像topbar0.jpg 4.在表格的第2行输入如图所示的文字 5. 选中单元格在属性面板中设置背景颜色#66FFFF 选中这些文字,在CSS面板中编辑新规则设置如下图所示 单击确定按钮进入下图所示 单击确定按钮版权信息设置完毕。 6.将第2行拆分成2列,左侧列宽212排序,右侧562px 7. 选中左侧单元格,在CSS面板中设置新规则如图所示

单击确定按钮进一步设置如下图所示 单击确定按钮单元格背景设置完毕。 8. 将左侧单元格设置水平对齐:居中对齐;垂直对齐:顶端 9. 插入1个9行1列的表格,宽度212px;选中所有单元格,设置水平对齐:居中对齐;垂直:默认或居中 在表格的第1行插入图像menu.gif 然后适当拉高单元格 在表格的第2行插入时间 将表格的第3行适当拉高 将表格的第4-8行设置单元格高度50 将第4行拆分为3列,列宽33%,33%,33%;第5-8行同样设置 如图所示将单元格进行合并;然后依次插入鼠标经过图像 10. 将右侧单元格拆分成5行1列 第1行水平:居中对齐;垂直:底部。输入文字“欢迎光临我的小屋” 选中文字在CSS面板中设置字体样式:title 字体:隶书字号24px 颜色#686868 第2行插入图片090.gif,适当设置单元格的高度

第3行插入图片200542313154753935_0hxRJjK7O018.gif,适当调整单元格高度第4行插入图片27_4200_107.gif,适当调整单元格高度 第5行设置水平:水平居中;垂直:居中。 输入文字 刚刚无意风吹起 花瓣随着风落地 我看见多么美的一场樱花雨 选中文字,切换到“代码”编辑窗口,在文字的前后进行如下图设置 将窗口切换回“设计”为文字设置一个比较好看的字体样式 单击确定按钮,进一步设置如下图

html表格布局实例

[html]表格布局之实例版 | [<<][>>] 前面我们讲了html表格的基础知识,今天我们通过一个实例让大家更清晰的了解下表格的用途。 例如:我们做一个简单的网站布局,代码如下:

网站名称
网站标题 搜索框
左边 中间 右边
网站底部信息
产生如下的表格:

这是一张整体的表格,第一行和第四行分别跨度了三列,这里用 colspan="3"来限制,而第二行的“搜索框”占用了两列的位置,用colspan="2"控制;align="center"是对表格内文字的对齐限制,center表示中间,right 表示靠右,left靠左。 表格的基础设置,可以参考: [html]利用表格规划网站布局 [html]如何制作多行多列的表格 [html]设定表格的尺寸和边框 如果你现在可以根据自己的想法制作出一个表格了,那么你就是向自己制作模板迈近了一步。^o^ 表格布局现在仍然很多人在用,方便实在。 网页设计现有两种布局方法,一种即是表格布局,另一种是现在W3C极力推荐的CSS布局。不过,就目前来说,由于xhtml并未完全占据主流,表格布局依然是大多数网页设计师的首选。 你所描述的问题属于表格的对齐问题,解决方式有以下几种: 如果两个表格的宽度不一致,那么选择默认的对齐方式,也即左对齐,在html 中的标签和属性是:

就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式,例如居中对齐,而第二个表格并没有设置对齐方式,所以默认为左对齐,这样就出现了上述问题。 我的一些表格布局的经验: 1、表格布局第一步:先插入一个表格,宽度是760-780px(记住,一定要用px,不要用百分比),高度不用设置,然后令这个表格居中。以后所有的内容都限制在这个表格中。 2、熟练使用表格嵌套。也就是说,在一个表格中再插入另一个表格。举个例子,把你要设计的页面分成大的几个部分,然后利用表格的行数和列数来控制它们的布局,如果某一个单元格中的内容又要分成几部分,可以继续在这个单元格中插入表格,方法同上。 3、补充:表格的边框一定要为0,即table中的border属性值为"0"。也就是让表格在网页预览中不可见,这样才能实现表格布局的目的。 如何利用表格实现画中画,也就是页中页效果 网页的排版大多使用表格,利用一个表个单元可以嵌入一个网页,你知道吗?这样做有很多好处,比如你把经常更新的区域划分一个表格单元,然后在这个表

第三课时应用表格布局网页结构

《应用表格布局网页结构》 教学目标 (一)知识与技能目标: 1、了解表格在网页设计中的作用。 2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能够在单元格中正确插入文字和图片。 3、区分表格属性和单元格属性,并掌握属性的设置。 4、能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。(二)过程与方法目标: 1、利用对比学习,形成知识迁移的能力 2、通过用表格布局网页,进一步理解表格的作用、功能 3、通过对比学习与自主探究,了解并掌握软件学习的一般方法及规律,提升自主学习能力 4、通过任务驱动学会应用表格布局网页结构。 (三)情感、态度与价值观目标: 1、通过对用表格布局网页的学习,增强审美观,提高对学习网页制作的兴趣。 2、通过“多彩的生物”网站的制作,激发学生关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。 教学重点与难点 教学重点:了解表格在网页设计中的重要作用,插入表格和更改表格属性。 教学难点:让学生灵活掌握排列表格和设置表格属性的方法。表格的嵌套在网页设计的重要作用。 教学过程 一、课堂导入 展示:两张素材相同布局不同的网页(多彩的生物)。 提问:同学们,请大家比较一下这两个网页,相互之间可以讨论一下,哪一个网页布局更合理,哪张较美观?较美观的那张网页是怎么布局的?(请学生回答。)想一想:为什么一般我们在网页上看不到表格呢?——表格线隐藏设置。 【设计意图】展示作品,激发学生兴趣;引导学生发现问题,并学会分析问题。 观察和比较两张素材相同布局不同的网页,分析布局网页页面的元素。这两个网页,通过比较会发现:一个是页面工整,文本、图片摆放对称且有一定规律,使用表格布局,但表格边框隐藏(看不出表格痕迹);一个是页面凌乱,有图有文,摆放杂乱,提出问题,有什么办法可以达到第一个页面的效果?这就是我们今天所要学习的内容《应用表格布局网页结构》 二、新授: 1、分析表格结构布局 展示有表格布局的网页,引导学生分析其表格结构,分析结构,得出表格的布局(几行几列,哪些行做了哪些处理)。

应用表格布局网页结构

《应用表格布局网页结构》教学实录 [作者:阜宁县明达中学姜秀菊来源:本站原 创点击数:1078 更新时间:2010-6-12 文章录 入:yc_chl ] 知识与技能目标: 1、了解表格在网页设计中的作用。 2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能够在单元格中正确插入文字和图片。 3、区分表格属性和单元格属性,并掌握属性的设置。 4、能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。 过程与方法目标: 1、利用对比学习,形成知识迁移的能力 2、通过用表格布局网页,进一步理解表格的作用、功能 3、通过对比学习与自主探究,了解并掌握软件学习的一般方法及规律,提升自主学习能力 4、通过任务驱动学会 情感态度与价值观目标: 1、通过对用表格布局网页的学习,增强审美观,提高对学习网页制作的兴趣。 2、通过“保护动物”网站的制作,激发学生关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。 教学重点与难点: 1、重点。 (1)了解表格在网页设计中的重要作用。 (2)掌握插入、编辑表格的方法及表格的属性设置方法。 (3)掌握单元格的修饰属性的设置。 2、难点。 表格的嵌套在网页设计的重要作用。 教学准备:各自制作的站点文件夹,整理、归类相关素材并按要求摆放。 教学过程 一、导入:

播放歌曲“一个真实的故事”,激发学生兴趣,与学生互动。 师:这首歌里讲的是什么样的故事呢? 生回答。一个姑娘救丹顶鹤的故事 师:丹顶鹤,它是一种珍稀动物,同学们还知道哪些珍稀动物呢?是从哪里知道这些珍稀动物的呢? 生抢答。扬子鳄,大鲵,金丝猴,丹顶鹤…… 师:很好,同学们知道的可真多啊,是从哪里知道这些珍稀动物的呢? 生回答:书,报纸,网络…… 师:同学们知道,但是很多人不知道呢,更不知道人与动物要和谐相处,我们是不是有必要做些宣传。为保护珍稀动物尽一份力? 生:对 师:但是这么多珍稀动物在网页上应该如何分布呢? 展示:两张素材相同布局不同的网页(动物——人类的朋友)。(然后将两个页面并排显示在投影上) 提问:同学们,请大家比较一下这两个网页,相互之间可以讨论一下,那一个网页布局更合理,哪张较美观?较美观的那张网页是怎么布局的?(请学生回答,请坐。) 【设计意图】展示作品,激发学生兴趣;引导学生发现问题,并学会分析问题。 观察和比较两张素材相同布局不同的网页,分析布局网页页面的元素。这两个网页,通过比较会发现:一个是页面工整,文本、图片摆放对称且有一定规律,使用表格布局,但表格边框隐藏(看不出表格痕迹);一个是页面凌乱,有图有文,摆放杂乱,提出问题,有什么办法可以达到第一个页面的效果?

《应用表格布局网页结构》教学设计

《应用表格布局网页结构》教学设计 一、教学目标 知识与技能:1、了解表格在网页设计中的作用。 2、能够根据网页的内容,正确布局表格的结构。 3、掌握网页中表格的制作方法,能够在单元格中正确插入文字和 图片,掌握表格属性的设置方法以及单元格的修饰与编辑方法。 过程与方法:通过观看优秀网站表格布局,动手设计表格等环节,帮助学生进一步了解表格的作用、功能以及网页设计方法的多样性,培养学生的 发散思维能力;通过学生自主地编辑和修饰表格等环节,培养学生 自主探究学习的能力。 情感、态度与价值观: 1、提高学生自学和探究的能力,培养学生应用表格布局网页结构 的兴趣。 2、提高学生语言表达能力,学会客观的评价作品。 二、教学重点与难点 重点:了解表格在网页设计中的重要作用掌握插入、编辑表格以及表格,单元格的属性设置方法。 难点:表格的嵌套表格,单元格,网页属性的设置 三、教学方法 讲解演示教学法,小组合作学习法,自主探究学习法 四、教学设计说明 本节课是初中信息技术(下册)2007年7月第一版第11单元《设计主题网站》第二节的内容,教学面向的是初二年级的学生,该年龄段的学生已具备了一定的信息素养,掌握了基本的信息技术知识和技能。

初中的学生喜欢新、奇、特的事物,接受能力和理解能力比较快。而直观、醒目的网站示例图片则可以培养学生对于本课题的兴趣,但是学生对于如何应用表格布局网页结构的操作是比较模糊的。因此本节课充分地发挥学生了的积极性,让学生随着学案所设置的环节,探究完成一个又一个的应用表格过程。而学案则是在尊重学生解决问题的思维过程方式的基础上设置的,注重学生的学习体验和情感的体验。整节课以学生为主体、教师为主导的架构下,搭建以生为本的情景学习平台,帮助学生自学、交流讨论、深入探究,以不断的完成应用表格布局网页结构的过程为手段,一步步完成学习任务。 五、教学过程 课前将素材和网站站点发送到桌面,指导学生解压缩。并带领学生熟悉本节课所要制作的网页的素材。 (一)设置情境,引入课题 师:我们知道,地球是人类赖以生存的家园,然而,近几年来,地球的环境却越来越恶劣:全球性气候变暖、暴雨、雪灾等灾难性天气频繁出现,给我们的生活带来严重威胁。因此,我们每一位同学,都有责任去保护环境,那么我们应该如何去保护环境呢?我想首先是宣传环保、倡导环保。那上一节课呢我们已经建立了以环保为主题的站点,学习制作了网站的欢迎页。今天这节课,我们将一起学习制作网站的主页面来宣传环保,那如何来设计主页面呢?首先我们先来欣赏几个著名网站的主页。(播放课件) 师:你们能看出这些是哪些网站的主页吗? 生:网易,新浪,搜狐 师:很好,它们分别是网易、新浪、搜狐的主页面。我们知道这些网站的主页面包含的内容都相当丰富,但给我们的视觉感受却是繁多而不杂乱,紧凑而不单调。这些页面设计是如何做到这一点的呢? 师:我们以搜狐主页面为例,(呈现搜狐主页面的图片),来探究一下如何设计网站的主页面。首先这一页面的左上角有一张的搜狐的LOGO图片,使我们一眼能认出这是搜狐页面。在图片的右边呢,是网站中的导航,通过导航链接到其它的页面。下面的主体部分,分成了几个区域,我把它标示出来,这样我们

相关文档
最新文档