用表格布局网页
- 格式:doc
- 大小:26.00 KB
- 文档页数: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. 掌握使用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 课后作业学生完成一个表格布局的响应式网页设计,并在不同设备上测试其表现。
小学五年级信息技术教学设计课题:《用表格布局网页》执教:高密市井沟镇呼家庄小学赵治一、教材分析:本节选自青岛版信息技术教材中的《用表格布局网页》一课,主要内容是学习在表格中插入图片、调整图片以及表格中插入表格方法(也叫表格的嵌套),本课是在学生掌握了表格制作的基础上进行的,通过本节课的学习为美化网页迈出了重要的一步,能够培养学生学习的浓厚兴趣。
二、学情分析:本课的讲授对象是小学五年级学生,通过前二个课时的学习,学生对网页已有了基本的了解,学生能够熟练的启动、退出网页、制作表格并插入新图片,能够利用菜单进行一些基本操作,也为本节课的学习打下了基础,所以,引导学生探究完成学习目标对学生来说并不困难。
三、教学目标:1、知识与技能:掌握在表格中插入图片的方法和表格中插入表格的方法与技巧,设置单元格背景颜色。
2、过程与方法:通过小组合作形式,运用任务驱动方式,培养学生的协作探究能力。
3、情感、态度和价值观目标:通过小组合作培养学生的合作意识和探究能力;通过作品的美化布局与评价,培养学生的审美意识。
通过介绍银杏美景,培养学生热爱大自然的情怀。
四、教学策略:为鼓励学生大胆动手操作,利用探究任务的形式完成一个个操作,让学生根据已有知识和教师的指导、同伴的帮助,通过导学案的引领,自主探究完成操作;通过展示和评价学生的作品,提高学生的审美意识,体会成功的喜悦。
五、教学重点与难点:1、重点:在表格中插入图片及表格中插入表格的方法。
2、难点:表格的嵌套在网页设计中的应用。
六、教学过程:七、教学后记:本节课利用网络环境下的多媒体教学系统呈现教学内容和控制教学。
教学过程中,通过小组合作完成探究任务的形式,运用探究学习、合作学习、任务驱动等教学方式完成一个个教学任务。
整个过程引导学生大胆质疑、大胆尝试不同的操作方法,注重学生动手能力与合作探究能力的培养。
利用小组合作,让学生教学生,协作互助,教师始终保持一个指导者、组织者的角色,体现师生关系的和谐。
⼋:HTML之表格嵌套和⽤表格实现⽹页布局⼀:表格嵌套嵌⼊表格说明 1.完整表格结构 2.放到td标签中⼆:⽤表格实现⽹页布局,⽤表格做⼀个页⾯框架页⾯结构实现布局<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!-- width="100%"充满屏幕 --><table width="100%" bgcolor="#f2f2f2"><!-- 页头start --><tr height="80px" bgcolor="14191e"><td>11111111111</td></tr><!-- 页头end --><!-- 上空⾏start --><tr height="10px"><td></td></tr><!-- 上空⾏end --><!-- 主体内容start --><tr><td><table align="center" width="1024px"><tr><!-- 左内容start --><td width="240px" valign="top"><table width="100%" bgcolor="#ffffff" ><tr><td align="center" height="60px">关于我们</td></tr><tr><td align="center" height="60px">团队介绍</td></tr><tr><td align="center" height="60px">⼈才招聘</td></tr><tr><td align="center" height="60px">联系我们</td></tr><tr><td align="center" height="60px">常见问题</td></tr><tr><td align="center" height="60px">意见反馈</td></tr><tr><td align="center" height="60px">友情链接</td></tr></table></td><!-- 左内容end --><!-- 空隙start --><td width="20px"></td><!-- 空隙end --><!-- 右内容start --><td width="764px" bgcolor="#ffffff"><pre>HTML称为超⽂本标记语⾔,是⼀种标识性的语⾔。
第13课用表格布局网页
一、教学目标:
1.知识与技能
(1)了解网页设计中表格的作用。
(2)掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能够在单元格中正确插入文字和图片。
(3)能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。
2.过程与方法
(1)掌握软件学习中的对比学习法,培养学生迁移学习的能力。
(2)通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法的多样性,培养学生的发散思维能力。
(3)通过自主探究,使学生掌握软件的使用规则,由摸索、探究性学习到形成性学习,培养学生学会学习,驾御学习的能力。
3.情感态度与价值观
(1)通过对比学习使学生体验软件学习的一般方法及规律,提高学生自主学习信息技术的能力。
(2)通过运用表格布局网页对象活动(各人根据网站主题,设计网页),进一步掌握各种不同对象的属性设置方法和规律,体验创造的快乐。
(3)通过“动物——人类的朋友”表格页的设计与制作,再次激发学生关爱动物、保护动物的责任感,从而进一步树立共同改善人类生存环境的意识。
二、教学重点、难点:
1.教学重点:
(1)了解表格在网页设计中的重要作用和功能。
(2)掌握插入、编辑表格的方法及表格的属性设置方法。
(3)掌握单元格的修饰与属性设置。
2.教学难点:
表格属性和单元格属性设置
三、教学方法:
对比教学法、探究学习法、模仿学习法。
四、教学过程:
1.复习
以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入,学生认真回顾,回答教师提问。
为本节课教学做一定铺垫。
2.引入
(1)观看两个页面并进行比较:一个使用表格布局,但表格边框隐藏(看不出表格痕迹),其页面工整,文本、图片摆放对称,具有一定规律;另一个页面凌乱,图文混杂,摆放杂乱。
你更喜欢怎样的页面布局?
提出问题:有什么办法可以达到第一个页面的效果?
(2)观察第三个页面,内容与第一个页面相同,显现页面的表格边框。
学生讨论,交流,回顾Word中学习过的表格,明白表格在FrontPage中的作用。
3.新授
(1)分析表格结构
展示一些由表格布局的网页,引导学生分析其表格结构,自然过渡到教材中的例子(biaoge.htm),分析结构,得出表格的布局(如表格有几行几列,哪些行做了哪些处理)。
任务1 规划网页表格布局
分层完成该任务,基础相对薄弱一些的同学仅要求读懂教材中的网页表格布局,知道规则,根据表格的行数与列数,调整至最终样式;基础扎实、操作能力较强的同学可以跳出课本,自行设计表格网页布局,并将自己的表格设计绘制在书本上。
学生可根据自己的实际情况选择任务难度,并动手分析与创意设计。
建议:使用多个非嵌套的表格来布局。
设计意图:分层教学,培养学生模仿以及创新能力。
(2)完成表格布局
FrontPage中表格的插入和编辑与Word中的表格操作类似,教师无需讲解,引导学生进行知识迁移。
任务2 新建一个页面,用表格布局该网页,并在该网页中放入相应内容
打开站点,新建网页,以“biaoge.htm”为文件名保存。
按前面分析的要求插入一个表格。
调整表格结构(主要是行列的插入、删除,单元格的合并、拆分、调整大小等)。
老师可安排操作熟练的同学进行演示。
(3)充实网页页面内容
任务3 在表格中插入图片、输入文字
建议:插入图片对象前,对图片做一定处理,例如选择风格统一的图片,调整图片大小至同一尺寸等。
注意图片的保存。
(4)调整表格属性,美化页面
预览制作的网页,修饰网页,让网页看起来更美观。
任务4 表格属性以及单元格属性的设置
表格属性的设置,如去除网格线、设置表格背景色等。
使用不同的颜色区分各板块,设置单元格属性。
强调:学会利用右击后弹出的快捷菜单中的命令。
学生根据自己的实际情况选择任务难度,可按教师具体要求修饰、调整表格,也可根据自己的意图修饰、调整表格。
(表格边框的调整都需掌握)
设计意图:完成必须要求掌握的知识同时,给学生一定的自主空间,鼓励他们去创新,而非一成不变的生硬模仿。
4.总结与评价
本节课我们学习了在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法。
请同学回答几个问题、并演示几个基本操作。
展示表格页面制作完成的优秀作品,表扬完成任务的同学,对未完成的同学给予激励,鼓励他们利用课余时间继续完成。
学生回答问题:
(1)表格在FrontPage中起到了的作用:定位对象。
(2)表格编辑的基本操作。
关注课堂学生操作达成率。