在网页中插入表格

在网页中插入表格
在网页中插入表格

第三小学信息技术学科学导案

教案:使用表格布局网页

教学内容:项目五表格的应用 任务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。选中表格,在属性面板中设置表格的边框颜色:

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

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

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

制作表格网页中动态效果的制作

第二节制作表格——网页中动态效果的制作(第5课时) 教学目标: 1.知识目标 (1)理解动态网页与网页动态效果的区别。 (2)掌握网页动态效果的制作。 2.技能目标 掌握“插入”菜单中“组件”命令的使用,使得网页增添动态效果。 3.情感目标 通过学生自主学习网页动态效果的制作,形成积极、主动的学习气氛,激发学生的学习兴趣,培养学生的探究意识和创新能力。 教学重、难点: 1.重点:滚动字幕、交互式按钮等动态效果的制作与Flash的插入。 2.难点:各种效果对象的属性设置。 3.关键:动态效果制作中应图文并茂、色彩和谐、动静适宜。 教学方法:自主探究式学习、任务驱动式教学。 教学准备: 具有动态效果的网页,包括滚动字幕、交互式按钮和FLASH的插入 教学过程: 1.引入 老师打开静态网页和加有动态效果的网页,请学生感受它们的不同。学生观察、比较两张网页,指出它们的不同点。师生共同分析网页,引入新课的学习。 2.新授 任务1 滚动字幕的制作 教师巡视,个别给予指导。 学生完成任务后,展示作品,并演示操作。小结设置滚动字幕的关键点: 文本的大小、字体、颜色等。 表现方式。 运动方向。 背景色的设置。 任务2 交互式按钮的制作 教师巡视,个别给予指导。 学生展示作品,演示操作,小结制作交互式按钮的关键点: 按钮文本的设置。 按钮的颜色、背景色以及效果等。 图片按钮。 任务3 网页中插入一个Flash动画 教师巡视,个别给予指导。 学生展示作品,演示操作,小结插入Flash动画的关键点: Flash显示窗口的大小调整。 预览模式下才能看到Flash效果。 插入Flash后的网页保存。 学生参照教材内容完成网页动态效果制作,并比较分析其他同学的作品,对照自己的作品加以完善。

利用表格制作网页的详细步骤

利用表格制作网页的详细步骤 将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中,还是在网页设计中,表格通常都可以使信息更容易理解。HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格,并能对表格进行特定的修饰,从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列,从而获得特定的表格效果。 表格在网页设计中的地位非常重要,可以说如果您表格用不好的话,就不可能设计出出色的网页。大多数初学者一开始就接触表格,对表格都有一定的了解,但是要实现真正细致甚至强大的功能,仔细理解table的代码结构至关重要!我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题,了解和掌握了这些内容,你将发现,table原来是这样的亲切易用! 一、创建基本的表格 一个表由<table>开始,</table>结束,表的内容由<tr>,<th >和<td>定义。<tr>说明表的一个行,表有多少行就有多少个<tr>;<th >说明表的列数和相应栏目的名称,有多少个栏就有多少个<th>;<td>则填充由<tr>和<th>组成的表格。 表格重要的基本标记不多,但每个标记都有很多的属性,考虑到一下子把这些属性都列出来,可能让初学者感到无从下手,所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。 在讲解之前,我们先来看看表格的基本构造。下图是一个3行3列的表格。 这里面有两个概念要弄明白:表格与单元格。他们的关系是整体与局部的关系,如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的,所以一定要分清楚。前面已经说过表格的最基本标记为<table>、<tr>、<td>,可以先树立这样一个概念:描述整个表格的属性标记放在<table>里,描述单元格的属性标记放在<tr>、<td>里。有这样一个概念后,我们学习起来就可能简单些。 1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色

使用表格布局网页

巧用表格来布局 【学科领域】本教案所适用的学科为八年级信息技术学科。 【内容概述】在用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中插入表格的方法是一样的,但是编辑表格是不是也一样呢?

网页设计table表格知识

利用表格制作网页详细介绍 https://www.360docs.net/doc/c9180115.html, 更新日期:2005-03-09 09:46 出处:网页教学网作者: 将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中,还是在网页设计中,表格通常都可以使信息更容易理解。HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格,并能对表格进行特定的修饰,从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列,从而获得特定的表格效果。 表格在网页设计中的地位非常重要,可以说如果您表格用不好的话,就不可能设计出出色的网页。大多数初学者一开始就接触表格,对表格都有一定的了解,但是要实现真正细致甚至强大的功能,仔细理解table的代码结构至关重要!我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题,了解和掌握了这些内容,你将发现,table原来是这样的亲切易用! 一、创建基本的表格 一个表由<table>开始,</table>结束,表的内容由<tr>,<th>和<td>定义。<tr>说明表的一个行,表有多少行就有多少个<tr>;<th>说明表的列数和相应栏目的名称,有多少个栏就有多少个<th>;<td>则填充由<tr>和<th>组成的表格。 表格重要的基本标记不多,但每个标记都有很多的属性,考虑到一下子把这些属性都列出来,可能让初学者感到无从下手,所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。 在讲解之前,我们先来看看表格的基本构造。下图是一个3行3列的表格。 这里面有两个概念要弄明白:表格与单元格。他们的关系是整体与局部的关系,如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的,所以一定要分清楚。前面已经说过表格的最基本标记为<table>、<tr>、<td>,可以先树立这样一个概念:描述整个表格的属性标记放在<table>里,描述单元格的属性标记放在<tr>、<td>里。有这样一个概念后,我

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

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

FrontPage网页表格制作教程

FrontPage 网页表格制作教程 篇一:运用表格制作网页 运用表格制作网页教学设计 苏尚闻 一、教学目标 1.知识与技能 熟悉表格在网页编辑中的作用;掌握用菜单命令和工具按钮插入表格的方法;学会用菜 单命令、快捷菜单命令、鼠标操作等不同的方法对表格进行编辑。 2.过程与方法 通过知识迁移,培养学生利用已学过的知识进行自主学习的能力;通过比较表格在 FrontPage 中与在 Word 中的功能,培养学生观察、思考、总结的能力;利用表格使网页布局 合理、美观,从而让学生对网页制作更有兴趣。 3.情感态度价值观 培养学生独立思考、自主学习、合作讨论的能力,通过自己探究问题,进一步树立学生 学习信息技术的自信,提高学生学习网页制作的兴趣。 二、课时安排 1 课时 三、教学重点与难点 重点:表格在 FrontPage 中的作用;表格的插入与编辑;“表格”的菜单命令。难点:表格 属性、单元格属性。 四、教学准备 三个页面:一个是用表格存放文本、图片的页面,表格边框隐藏,页面美观;一个是表 格边框未隐藏的页面;一个是上节课制作的有图有文但没有表格的页面。 五、教学方法 任务驱动法 六、教学过程 (一)教学表格的插入 1、直觉判断 (1) 观看两个页面进行比较: 一个是用表格存放文本、 图片, 表格边框隐藏, 页面美观; 一个是上节课制作的页面,有图有文但没有表格的页面。 提出问题,学生讨论,有什么办法可以达到第一个页面的效果? (2)观察第三个页面(用表格存放文本、图片,但表格边框未隐藏的网页),告诉学生 其实有一种方法很简单,而且利用的是在学习 Word 时用过的一种工具,这就是表格,但是在 FrontPage 中表格的作用比 Word 中作用更大了。 1 / 6

网页表格制作速查手册

网页表格制作速查手册 创建网页表格的基本原则和方法 将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中,还是在网页设计中,表格通常都可以使信息更容易理解。HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格,并能对表格进行特定的修饰,从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列,从而获得特定的表格效果。 表格在网页设计中的地位非常重要,可以说如果您表格用不好的话,就不可能设计出出色的网页。大多数初学者一开始就接触表格,对表格都有一定的了解,但是要实现真正细致甚至强大的功能,仔细理解table的代码结构至关重要!我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题,了解和掌握了这些内容,你将发现,table原来是这样的亲切易用! 一、创建基本的表格 一个表由<table>开始,</table>结束,表的内容由<tr>,<th>和<td>定义。<tr>说明表的一个行,表有多少行就有多少个<tr>;<th>说明表的列数和相应栏目的名称,有多少个栏就有多少个<th>;<td>则填充由<tr>和<th>组成的表格。 表格重要的基本标记不多,但每个标记都有很多的属性,考虑到一下子把这些属性都列出来,可能让初学者感到无从下手,所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。 在讲解之前,我们先来看看表格的基本构造。下图是一个3行3列的表格。 这里面有两个概念要弄明白:表格与单元格。他们的关系是整体与局部的关系,如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的,所以一定要分清楚。前面已经说过表格的最基本标记为<table>、<tr>、<td>,可以先树立这样一个概念:描述整个表格的属性标记放在<table>里,描述单元格的属性标记放在<tr>、<td>里。有这样一个概念后,我们学习起来就可能简单些。 1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色 表格以及单元格的大小是用“width=#”和“height=#”属性说明,“width=#”表示宽,“height=#”表示高,,#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明,,#为宽度值,单位是象素,表格边框的颜色是用“bordercolor="#"