在网页中插入表格
第三小学信息技术学科学导案
教案:使用表格布局网页
教学内容:项目五表格的应用 任务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 进行对比。 【学生操作】 带 成
初中信息技术《网页中的表格》教案
第一单元第三课网页中的表格教 学设计 一、教学目标 1.知识、技能目标: 知识目标:理解表格在网页设计中的重要作用。 技能目标:⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 2.过程与方法目标:能够合理利用表格对网页进行布局和规划。 3.情感态度与价值观目标:了解学校概貌,发现校园之美,理解规矩与方圆的关系,养成良好的生活和学习习惯。 本课的重难点:重点和难点:掌握利用表格对网页进行布局的方法课时安排:一课时 教学过程: 一、回顾知识通过打开程序、站点、打开网页、调整图片等操作,复习前两课的内容。 二、导入新课 让同学们欣赏一些有特色的个人网站,引导学生注意网页的设置和布局,引导出本节课的学习内容──网页中的表格。 方法:观察,讨论、思考、回答。 三、自主学习 让学生通过阅读和动手操作的方式,完成以下任务:
任务一:插入表格:师:如果我们想要在网页中使用表格必须先插入表格,操作方法与Word差不多,自己尝试着在一个新网页中插入不同设置的表格,并填写表1-3-1。 学生参照图1-3-4在主页文件Index.htm中插入表格:教师随时观察指导。 任务二:表格的调整:师:此部分内容与Word中的操作也是非常相似,根据教材内容分组完成表格的调整。调整结束后将第二课中已经输入的内容移动到表格中。 对于学生相对熟悉的知识点,完全放手给学生探究完成。尝试通过不同途径解决同一问题,提高学习效率。 三、实践练习 让学生参照课本习题要求,完成练一练部分,让学生练习刚学会的命令。 分组预览网页,看布局的效果。 四、合作探究 分组讨论教材中布局表格命令的用法,使用布局表格命令重新布局网页。 让学生演示后,教师点拨需要注意的问题。 分组展示操作步骤及预览网页。审视自己的网页与其他小组的区别,查找自己的不足。 五、大显身手 仿照第一课中的三个页面,进行布局设计,插入相关素材,完成网页的设计。 每小组选择最优秀的作品,进行展示评比,选出最优秀的作品。 六、教学总结
第三课 网页中的表格(教参)
(一)教学设计部分 ?教学内容分析 本课的主要内容与地位 网页中表格除了能作为像WORD中表格的作用外,最常使用表格用来对网页中其它元素精确的定位,可以将复杂的元素有条理的分布到网页各个位置——网页布局。另外,当我们把表格的宽度定为固定像素值后,还能保证网页布局不会随浏览器窗口的大小变化而变化,当我们在网页中输入文字的时候,就可以让文字顶满格后自动换行,方便我们对文字的编辑。 由此可见,网页中只有利用表格进行布局,才能称的上真正意义上的网页设计。 本课与前后内容的关系 利用表格布局网页,将上一节设计的网站首页中的各种素材进行合理的分布,是对学生进行网页设计技能上的提升;利用表格布局网页也是整个网站设计中一个非常重要技术手段,应用非常广泛。 ?教学目标分析 知识目标/技能目标 知识目标 理解表格在网页设计中的重要作用; 技能目标 ⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 过程与方法目标 能够合理利用表格对网页进行布局和规划。 情感态度与价值观目标 了解学校概貌,发现校园之美,理解规矩与方圆的关系,养成良好的生活和学习习惯。 本课的重难点 重点和难点:掌握利用表格对网页进行布局的方法 本课的课时分配建议 一课时 ?教学策略设计建议
教法建议 由于关于表格的基本操作(插入表格、调整表格:调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列)在Word中已经有较详细的操作方法。在本课教学过程中,教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用——即:如何利用表格布局网页,让网页中的素材合理的在网页上分布。 另外,网页模板是提高建站效率的有效手段,教师要注意引导学生对网页模板的使用。 学法建议 注意观察和借鉴样板网站中表格的运用情况,刚开始使用表格设计网页时可将其边框粗细的值设为1,以观察调整表格的过程,从而掌握表格调整的技巧。 ?教学资源与环境建议 本课教学资源索引 1.第二课的半成品网页:Index.htm、Parents.htm ?教学评价建议 自评、互评、师评要注意的问题 学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。 ?教学过程参考案例 第一阶段:导入新课,明确学习目标
《网页中的表格》教学设计
《网页中的表格》教学设计 一、教学设计部分 本课的主要内容与地位 网页中,常用表格来对网页中其它元素定位,将复杂的元素有条理的分布到网页各个位置──网页布局。另外,当我们把表格的宽度定为固定像素值后,还能保证网页布局不会随浏览器窗口的大小变化而变化,当我们在网页中输入文字的时候,就可以让文字顶满格后自动换行,方便我们对文字的编辑。 由此可见,网页中只有利用表格进行布局,才能称得上真正意义上的网页设计。 本课与前后内容的关系 利用表格布局网页,将上一节设计的网站首页中的各种素材进行合理的分布,是对学生进行网页设计技能上的提升;利用表格布局网页也是整个网站设计中一个非常重要技术手段,应用非常广泛。 知识目标/技能目标 知识目标 理解表格在网页设计中的重要作用。 技能目标 ⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 过程与方法目标 能够合理利用表格对网页进行布局和规划。 情感态度与价值观目标 了解学校概貌,发现校园之美,理解规矩与方圆的关系,养成良好的生活和学习习惯。
本课的重难点 重点和难点:掌握利用表格对网页进行布局的方法 本课的课时分配建议 一课时 教法建议 由于关于表格的基本操作(插入表格、调整表格:调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列)在Word中已经有较详细的操作方法。在本课教学过程中,教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页,让网页中的素材合理的在网页上分布。 另外,网页模板是提高建站效率的有效手段,教师要注意引导学生对网页模板的使用。 学法建议 注意观察和借鉴样板网站中表格的运用情况,刚开始使用表格设计网页时可将其边框粗细的值设为1,以观察调整表格的过程,从而掌握表格调整的技巧。 本课教学资源索引 1.第二课的半成品网页:Index.htm、Parents.htm 自评、互评、师评要注意的问题 学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。
用表格为网页布局
第15课用表格为网页布局 绍兴市树人中学黄学锋1.设计思想 本节课的主题是对网页内容的排版。为了提高学生的建网兴趣,接受网页中表格的排版定位作用,设计了提供宠物——领养宠物——建立宠物园的教学过程,以“给宠物网上安家”、“不同的宠物需要不同大小的生活空间”等为引导,设计使用表格中不同大小的单元格来让宠物“和睦相处”。同时,请学生建立自已的开心宠物园,掌握网页的表格排版功能。 2.教材分析: 布局是网页制作的第一步,在本节教材中,先提出了规划布局,再进行表格定位,最后进行定位调整。这要求教学过程中需要对学生明确:对于网页中对象多而杂的情况,必需先规划、再定位,而用表格是一种很实用而有效的途径。 3.学性分析 在前几节课中,学生已学会了建立站点、新建主页、插入素材等操作。为了区别WORD和PPT等曾经排版方法,在学习网页排版时,创设一种情境能让学生对于多个网页对象能自然的用表格进行页面布局。通过这种教学方式,能让学生觉得网页表格排版理所当然,利用情境也大大提高了操作兴趣,在操作中掌握了技能。 4、教学目标 知识目标:用表格排版主页使其达到页面整洁有序; 技能目标:在网页中插入表格并更改表格的属性; 情感目标:用表格排版网页解决了网页版面杂乱的问题,提示同学们凡事要有计划,做事要遵守规则,促进其做事的信心。 5.重点难点 重点:插入表格和更改表格属性。 难点:让学生灵活掌握排列表格和设置表格属性的方法。 6.教学策略与手段 以网络流行的开心菜园、开心农场为引入,整堂课围绕建立自已的开心宠物园为主题对学生进行教学,最后通过若干学生作品展示来提高表格操作技巧。 7.环境与素材 1.教学环境:多媒体网络教室,配备投影仪;学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版,要求能上因特网; 课本准备。 2.教学素材:为学生准备好一批宠物GIF图片。
利用WebBrowser读取网页中表格的数据
利用WebBrowser读取网页中表格的数据 unit Unit1;interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, MSHTML, StdCtrls, OleCtrls, SHDocVw;type TForm1 = class(TForm) Button1: TButton; WebBrowser1: TWebBrowser; procedure FormCreate(Sender: TObject); procedure Button1Click(Sender: TObject); private { Private declarations } public { Public declarations } end;var Form1: TForm1;implementation{$R *.dfm}function GetHtmlTableCell(aTable: IHTMLTable; aRow, aCol: Integer): IHTMLElement; var Row: IHTMLTableRow;begin Result := nil;
if aTable = nil then Exit; if aTable.rows = nil then Exit; Row := aTable.rows.item(aRow, aRow) as IHTMLTableRow; if Row = nil then Exit; Result := Row.cells.item(aCol, aCol) as IHTMLElement; end;function GetHtmlTable(aDoc: IHTMLDocument2; aIndex: Integer): IHTMLTable; var list: IHTMLElementCollection; begin Result := nil; if aDoc = nil then Exit; if aDoc.all = nil then Exit; list := aDoc.all.tags('table') as IHTMLElementCollection; if list = nil then Exit; Result := list.item(aIndex, aIndex) as IHTMLTable; end;function GetWebBrowserHtmlTableCellText(const AWebBrowser: TWebBrowser; const TableIndex, RowIndex, ColIndex: Integer; var ResValue: string): Boolean; var
用表格布局网页教学设计
用表格布局网页教学设计 教学目标 (一)知识与技能目标: 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的表格中,使用了对单元格的操作转变过来的,单元格怎么操作——合并单元格,选择一个,让学生讨论一下,叫一个学生演示。 如果我要在这里增加一格,怎么操作,去掉这格又怎么操作?具体操作一个。(三种操作都讲讲菜单、右键、手绘) ②把你自己刚才的创意布局用表格的形式呈现在网页上。 任务三:今天来了这么多老师,你能不能用刚才的布局图,做一张宣传
《网页中的表格》教案设计
《网页中的表格》教案设计 一、教学设计部分 教学内容分析 R本课的主要内容与地位 网页中,常用表格来对网页中其它元素定位,将复杂的元素有条理的分布到网页各个位置──网页布局。另外,当我们把表格的宽度定为固定像素值后,还能保证网页布局不会随浏览器窗口的大小变化而变化,当我们在网页中输入文字的时候,就可以让文字顶满格后自动换行,方便我们对文字的编辑。 由此可见,网页中只有利用表格进行布局,才能称得上真正意义上的网页设计。 R本课与前后内容的关系 利用表格布局网页,将上一节设计的网站首页中的各种素材进行合理的分布,是对学生进行网页设计技能上的提升;利用表格布局网页也是整个网站设计中一个非常重要技术手段,应用非常广泛。教学目标分析 R知识目标/技能目标 ·知识目标 理解表格在网页设计中的重要作用。 ·技能目标
⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 R过程与方法目标 能够合理利用表格对网页进行布局和规划。 R情感态度与价值观目标 了解学校概貌,发现校园之美,理解规矩与方圆的关系,养成良好的生活和学习习惯。 R本课的重难点 重点和难点:掌握利用表格对网页进行布局的方法 R本课的课时分配建议 一课时教学策略设计建议 R教法建议 由于关于表格的基本操作在ord中已经有较详细的操作方法。在本课教学过程中,教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页,让网页中的素材合理的在网页上分布。 另外,网页模板是提高建站效率的有效手段,教师要注意引导学生对网页模板的使用。 R学法建议 注意观察和借鉴样板网站中表格的运用情况,刚开始使用表格设计网页时可将其边框粗细的值设为1,以观察调整表格的过程,从而掌握表格调整的技巧。教学资源与环境建
在网页中插入表格教案
在网页中插入表格 一、教学目标 知识方面: 1.使学生掌握在网页中生成表格的方法。 2.使学生掌握填写表格内容的方法。 3.使学生掌握调整表格的方法。 技能方面: 培养学生处理表格的能力。 情感方面: 培养学生自学意识。 二、教学重点 在网页中插入表格的方法。 三、教学难点 怎样在网页中插入表格。 四、教学方法 1.演示法。 2.自学法。 3.实践法。 五、教学手段与教学媒体 多媒体网络教室 教学过程。 一、导入课题 连接“搜狐”、“新浪”网,让学生欣赏一下这些漂亮的网页。提问:这些漂亮的网页开始编辑的时候是怎样构图的了?是插入表格做成的。使用frontpage打开“搜狐”,让学生看看其编辑的影子(表格)。 教师提问:插入表格后,起到哪些作用? 学生讨论后,教师归纳:插入表格可以使网页中的内容条理清晰。浏览者在访问你的网站时,可以更方便地找到感兴趣的材料。 二、新课 1.建立班级档案 教师演示操作步骤: (1)使用frontpage新建“我们班级大小人物介绍”网页,把光标调整到要插入表格的位置。 (2)单击菜单栏中的“表格”选项,打开它的下拉菜单; (3)单击下拉菜单中的“插入”选项,打开它的子菜单; (4)单击子菜单中的“表格”命令,打开“插入表格”对话框; (5)输入行数6和列数2; (6)在“对齐方式”文本框中选择“水平居中”; (7)单击“确定”按钮。 教师布置任务:在自己制作的网页中创建一个表格。 (注意查看和纠正学生完成任务情况) 教师介绍:为了使表格更加美观、实用,对表格中的单元格还需要进行必要的调整,操作方法与Word 2000相同。(教师演示,学生自己在下面操作)
网页设计:如何设计细线条的表格
网页设计:如何设计细线条的表格 2009-04-09 23:54 如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如 borderColor="#000000"),表格线其实是2px的,要做细线表格,有三种方法: 1.在Dreamweaver中按Ctrl+Alt+T,弹出插入表格的对话框,参数设置如图(带 红框项为固定值,否则无效果): 选中表格,在属性面板中设置表格的背景颜色:
光标定位到第一个单元格里,按住Shift键单击最后一个单元格,全选所有单元格,然后在属性面板中设置所有单元格的颜色: 完成后效果如图: 评价: 优点:简单 缺点:在单元格内容为空的时候会缺乏美观:
2.利用表格的暗边框(bordercolordark)和亮边框(bordercolorlight)属性做的细线表格: 还是按Ctrl+Alt+T插入表格,在对话框中设置如图(带红框项为固定植,否则无效果) 选中表格后按F9,展开"Tag Inspector"面板组,在"Attributes"面板中设置如图:
完成后如图: 评价: 优点:不会出现在单元格内容为空时“掉线”的问题,可以使用cellspadding 缺点:不能利用cellspacing做其他事,通常情况下必须先指定
3.设置表格的CSS属性border-collapse为collapse:按Ctrl+Alt+T插入表格,对话 框的设置同法2。选中表格,在属性面板中设置表格的边框颜色: |