用表格布局网页教案

通州六中云雪连

教案：使用表格布局网页

教学内容：项目五表格的应用任务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 进行对比。【学生操作】带成

网页布局设计

网页布局设计：用户的视觉路径一般是：从上到下，从左到右。好的视觉设计路径应该是顺应这样的用户习惯，糟糕的设计会让用户无所适从，焦点到处都是。对用户引导的关键就在于怎么处理主次关系。就是对比，从视觉的角度上看：形状的大小，颜色，摆放的位置都会影响信息的重要与否。从大的区块来看，不要平均分割页面，三栏的设计应该让其中一栏明显短一些。从局部来看，也要把握信息呈现的节奏，比如yahoo中间新闻栏的设计，大图带大标题是第一要点，小图带字是第二要点，纯文本第三，节奏感、主次关系非常强。下面是几种常见的网页布局结构： <1>骨骼型结构。即类似于人体的骨骼结构。分为上中下，内容部分分为两、三栏的设计。

这就是一个web 2.0风格的页面，骨骼型结构，上面主要是logo,导航banner,内容部分三成两栏，页脚版权，典型的骨骼型结构。 <2>对称型结构，对称型结构就是网站有一个对称轴，称左右或者上下对称。这种网页在阅读上很明明确给出用户重要和次要区域的划分，根据于都习惯往往在比较大的位置上安排主要内容。这个网页就是一个对称结构，左边是网站的一些导航和产品信息以及版权信息以及练习方式等等。右边是网站的主要信息。最大的特点是板我们骨骼型的top和foot放到了左边，body放到了右边，形成一个对称结构。 <3>满版型的结构。其实这种网页结构随着现在显示器尺寸的增大和分辨率的提高逐渐再做一个过度，即以前的整个图片满版到后面的背景满版，到现在的局部满版。这种版式给人的感受是内容紧凑，气氛表达充分，适合温馨和暖性思维的表达。这个早期的满版多见于韩版网页。 <4>焦点型，这类网页多见于围绕一个中心点，真个页面围绕中心，多见于销售类网站或者品牌产品网站。其特点是中心明确，表达信息集中，传达信息清楚。占据网页面积最大的图片吸引了大部分焦点，展现了个性。

初中信息技术《网页中的表格》教案

第一单元第三课网页中的表格教学设计一、教学目标 1.知识、技能目标：知识目标：理解表格在网页设计中的重要作用。技能目标：⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。 2.过程与方法目标：能够合理利用表格对网页进行布局和规划。 3.情感态度与价值观目标：了解学校概貌，发现校园之美，理解规矩与方圆的关系，养成良好的生活和学习习惯。本课的重难点：重点和难点：掌握利用表格对网页进行布局的方法课时安排：一课时教学过程：一、回顾知识通过打开程序、站点、打开网页、调整图片等操作，复习前两课的内容。二、导入新课让同学们欣赏一些有特色的个人网站，引导学生注意网页的设置和布局，引导出本节课的学习内容──网页中的表格。方法：观察，讨论、思考、回答。三、自主学习让学生通过阅读和动手操作的方式，完成以下任务：

任务一：插入表格：师：如果我们想要在网页中使用表格必须先插入表格，操作方法与Word差不多，自己尝试着在一个新网页中插入不同设置的表格，并填写表1-3-1。学生参照图1-3-4在主页文件Index．htm中插入表格：教师随时观察指导。任务二：表格的调整：师：此部分内容与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类比的方法让学生认识表格的组成结构，接着，给学生展示一张利用表格控制后做出来的网页，明确目标，激发学生的学习兴趣。在学生学习的过程中给学生准备一个学程导航，让学生每次阅读任务的步骤，遇到操作中的难点，教师再进行示范。在自主学习中，有效地培养了学生的动手能力，大部分的学生都能迅速地完成操作。但是学生在知识迁移的过程中还有一些小问题，因此，在今后的备课中还要加强每一个操作小任务的设计，对每一个操作的环节，应该准备操作的效果图，让学生能够快速直接地发现自己的问题，尽快去寻找解决问题的方法。在本节教学过程中，要注意每一个小任务的提出，都要事先出示表格效果图，让学生面对眼前的实际问题，指导学生看书去寻求解决问题的方法，随后教师示范，学生看着大屏幕跟着一起解决问题，效果良好。另外，要求学生试制作“双休日活动安排表”这一残缺不全的表格时，教师一定要巡视每个学生，必要时结合本节课的知识要点进行个别辅导，让学得不扎实的学生也能尝受到成功的喜悦，以达到大面积提高教学质量的目的。

网页的排版与布局-网页设计初学者入门攻略.

网页的排版与布局网页设计初学者入门攻略 WORD制作：寻找尤娜

网络时代，人本身的因素是相当重要的，只有拥有这方面的一定的审美知识，才有机会做好网页，而真正技术上的东西是不重要的，毕竟技术的发展是使每个使用者使用更加的方便，发展的趋势是让软件成为“傻瓜型”。终极目标就是用鼠标一点就能够使所有的网页完成。所以，我们应该培养自己的审美修养才是最重要的。而真正的体现是在具体的网页的布局上，网页的设计呈现出多样化的趋势，但是万变不离其宗，我想认真的分析一下，可以得到一些有用的东西，在我们应用的时候作为参考。虽然网页设计拥有传统的媒体的不具有的优势，例如是能够声音、图片、文字、动画相结合，营造一个富有生气的独特世界，同时它拥有极强交互性，使使用者能够参与其中，同设计者相交流。但是最基本的模式还是平面设计的内容，所以平面设计就要考虑形式美的内容，其中网页的排版布局就属于形式的内容，那什么形式呢？形。原形，包括原始形，或称自然形。式。许慎之《说文解字》说：“法也”。它包括“法则”、“法度”、“法制”、有“用法”的含义，也就是一种“格律”。中国古典建筑形式就称为“法式”。“形”是自然的，“式”是人为的。“形式”是将自然形态经过人为改造而称为一种新的美的形式。自然形态只有通过人的改造，才能起更大的作用，由于这个原因，就形成了今天的审美形态，形象是客观的，形式则是依据客观的规律进行主观的创造。如果没有主观的创造，就没有艺术，也不可能有今天的一切，

当然对于实际的网页制作来说，这也是最基本的，就是主观的创造，因为这是一个网页的灵魂，假如没有自己的主观创造，就只能拾人牙慧，重复别人丢掉不用的东西，是毫无意义的。所以现在强调网页设计的创造，表现在对页面的布局上，具体说就是体现在页面的形式美方面。就是通过页面的合理安排，例如文字的条理清楚、流畅、整体，使形式美得到体现。首先从网站内容上来进行排版现在的网站通常具有的内容是文字、图片、符号、动画、按钮等，其中文字占很大的比重，因为现在网络基本上还是以传送信息为主，而用文字还是非常有效率的一种方式，其次是图片，加入图片不但可以是页面更加的活跃，而且可以形象的说明问题。所以按照目前网页的设计，可以有针对性的对这些内容作一些调整，可以得出一些可以借鉴的东西。既然文字是现在网页传输信息的主要工具，那么就得把页面上主要的部分留给它，这个看似简单的道理却是很多的网站所忽视的，包括一些影响力较大的网站，一味的讲求“美观”，花在形式上的没有具体内容的东西占了很大的比例。主要的文字性的内容却放到下边，结果上网的用户却要难以很舒服的获得信息，有时候要拉动下拉条才能看到整个页面的主要内容。

基于表格的页面布局教学设计

第3课开篇之作——基于表格的页面布局教学设计一、教学目标： 1.知识目标：（1）进一步熟悉Dreamweaver 8的工作界面。（2）掌握利用“文件”面板打开网站的方法。（3）学会根据网站素材的分类规划网站的文件夹。（4）熟练地创建并保存网页。（5）掌握设置网页标题的方法。（6）能够根据网页内容使用表格恰当布局。（7）学会设置网页背景色及表格背景图像。（8）初步认识并尝试使用标签选择器选择对象。（9）熟练地使用快捷键在浏览器中预览网页效果。 2.能力目标：让学生能动手完成一个简单的网页布局的设计。 3.情感目标：（1）培养学生严谨求实的工作态度以及感受美、评价美的艺术情操。（2）培养学生在进行自主学习的过程中勇于克服困难，体验到成功后的快乐。二、教学重点： 1.在“文件”面板中规划站点 2.设置网页标题 3.设置网页背景 4.使用表格对页面布局三、教学难点：根据网页内容使用表格恰当布局四、教学策略的选择与设计 1、教学方法：（1）任务驱动—体验探究法（2）分层教学法（3）网络探究教学法（4）激励教学法 2、学法指导：形象探究法、经验探究法、体验探究法、合作式学习法。 3、资源的设计与选择：结合本节内容设计了一个《安全自护我能行》的网站首页、极域电子教室系统、Dreamweaver网页编辑软件、多媒体等。五、课时：1课时六、素材准备： 1、安全自护我能行——首页的效果图

2、首页背景图片：index.gif 3.练习题的图片：bg1.gif和bg2.gif 七、教学过程：教学步骤教师活动学生活动教学形式（一）课堂引入上节课我们做好了站点，当站点规划并创建完毕边授课边欣赏并对对学生机

解析网页界面设计和布局

近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极致的升华，也可以让界面变得暗淡和乏味。然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升华呢?网页设计的“微观细节”主要表现有以下几点：壹—页面的整体颜色，也可以称之为颜色。貳—页面的整体布局，也可以称之为排版。叁—页面的字体元素。也可以称之为字体。肆—页面的效果元素。也可以称之为效果。以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此时细节就在于设计师对于色彩与色彩间的把握。图：

单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。图：

第三章使用表格规划网页布局

第三章使用表格规划网页布局一、相关概念 1、表格功能：显示数据，定位网页元素（布局） 2、表格的组成：表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。单元格中的内容和边框之间的距离叫边距cellpadding。单元格和单元格之间的距离叫间距cellspacing。表格的边线叫做边框border。tr：代表一行。td：代表一个单元格。 3、占位符：当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。二、插入表格两种方法：①“插入”→“表格”命令 ②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。

1、宽度（百分比，像素）：相对显示，绝对显示 2、边距/填充：文本内容与边框之间距离 3、间距：单元格与单元格之间距离 4、标题：设置表格标题位置【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容【练习1】：制作下面表格【练习2】：如何让文本与表格边框有一定空白区间，如下： 5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。【练习3】：利用表格制作下图样式：说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的

网页设计与制作教案免费学技术改变生活

网页设计和发布流程第一步是对站点进行规划第二步是创建站点的基本结构第三步即可开始具体的网页创作过程最后一步是站点的发布第一节站点的规划与创建【教学目的与要求】一、规划站点二、创建一个站点【教学方法与手段】多媒体教学：借助多媒体手段，进行课堂理论教学；启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性；【教学重点与难点】：基础知识：规划站点重点知识：创建一个站点 2课时【教学组织过程】2课时 1．上讲回顾 2．教授新知【授课内容】一、规划站点 Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。 1、规划站点结构

注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图） 2、规划站点的浏览机制一般可采用以下的方法： ●创建返回主页的链接 ●显示网站专题目录 ●显示当前位置 ●搜索和索引 ●反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中）二、创建一个站点步骤： 1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令） 2、选择一种站点模板或向导 3、单击“确定”按钮三、站点的基本操作 1、打开站点：“文件”---“打开站点” 2、删除站点：方法一：在Windows资源管理器中删除一个站点方法二：在FrontPage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令 3、站点的设置 “工具”----“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡【课程小结】【作业】 1．5 课后练习书本课后练习作业

用表格布局网页

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

FrontPage2003轻松布局网页

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

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

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

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

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

用表格布局网页教学设计

用表格布局网页教学设计教学目标（一）知识与技能目标： 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的表格中，使用了对单元格的操作转变过来的，单元格怎么操作——合并单元格，选择一个，让学生讨论一下，叫一个学生演示。如果我要在这里增加一格，怎么操作，去掉这格又怎么操作？具体操作一个。（三种操作都讲讲菜单、右键、手绘） ②把你自己刚才的创意布局用表格的形式呈现在网页上。任务三：今天来了这么多老师，你能不能用刚才的布局图，做一张宣传

《用表格为网页布局》教学设计说课稿

《用表格为网页布局》教学设计《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页。通过本课的学习，是对表格知识的巩固和深入，更重要的是为后面的网页制作打下基础，所以本课是本单元的重点，起到承上启下的作用。前阶段学生已经学习了文本编辑、图片插入、网络基本知识、文件操作等内容，很多知识都可以迁移到本课来。八年级学生对电脑基本操作已经不再陌生，已经能够独立完成一定要求的学习任务，但是学生对于特定任务进行分析，整体规划能力相对还是比较欠缺的。本节课教学的作业设计中，我将注重培养学生这个方面的能力。根据课程标准和教材内容，我将本课的教学目标设计成三个方面：知识与技能目标： 1、了解主页布局的常见布局图，并明确主页设计的基本要素； 2、理解用表格排版主页的作用； 3、掌握在网页中插入表格进行排版的技能； 4、学会设置表格属性，对表格进行编辑修改。过程与方法目标：通过欣赏、借鉴他人的主页布局，取长补短，为自己的主页布局做铺垫。情感、态度与价值观目标： 1、通过作品欣赏，让学生意识到取长补短的可贵性，及在借鉴基础上的创新的重要性； 2、用表格排版网页解决网页版面杂乱问题，培养在遇到困难时灵活运用各种方法解决，强化建站信心。为了实现这个教学目标，我将教学重点确定尾插入表格进行排版和更改表格属性。根据学生的思维障碍和学习情况的分析，我将难点定位于灵活掌握排列表格和设置表格属性。只有正确设置了表格的属性，才能美化和完善网页的布局。为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前截取了典型的旅游网页图片素材并设置成框架形式让学生一目了然地看到表格所起的作用，并设置了几个学生需要突破的任务。信息技术课是培养学生对信息技术的兴趣和意识，使学生养成良好的信息素养为宗旨，强调学生的自主学习和研究学习。上新课前，我要求学生两两合作，通过传统手工绘制草图的学习方式，设计你需要建立网页的框架布局，同时学会和与他人合作。为了让学生主动的参与学习，我在设计教学流程时，准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。根据教学内容和学情的分析，本课我采用的教学方法有：讲解、练习、任务驱动、小组合作，学生可以通过小组合作、给定的任务等将本课学习用于实际操

浙教版初中信息技术第十二课用表格为网页布局教学设计 (4)

第十二课用表格为网页布局教学设计 1教学目标知识与技能: 1)了解表格在网页设计中的作用; 2)掌握网页中表格的制作方法、表格属性的设置方法以及单元格属性的设置方法,能够在单元格中正确插入文字。 3)能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法。过程与方法：通过对常见网页布局认识,了解网页板块分布结构,通过表格设计网页,掌握网页制作基本思路。情感与价值观：学生通过掌握利用表格设计网页思路,打破网页设计难度并激发网页创作的积极性。 2学情分析学生通过上一节课准备的素材,如何组织用网页形式表现出来,这是学生期待的;另外sharepoint designer 2013软件与word界面相似,学生很容易迁移,技术入门会相对简单,主要是要有一个熟悉过程。学生通过网页制作设计思路形成,增强网页设计的积极性。 3重点难点 1)掌握插入、编辑表格的方法及表格属性设置; 2)掌握单元格拆分的方法及属性设置; 4教学过程活动1【导入】课堂引入我们上网主要是访问网络上网页资源,它包括丰富的资源,页面上有很多栏目板块。【展示幻灯片第1页】提问1:哪个是网页标题栏、菜单栏、主题部分; 提问2:主题部分分开几个板块? 提问3:视觉中心在哪个位置? 活动2【活动】网页集中常见类型分析分别请学生回答几种类型包括包围型、半包围型、主题突出型、导航型等四种; 活动3【讲授】小结网页布局特点总结:网页布局要求简洁、有序、方便,注意浏览者视觉中心。

活动4【活动】复习新建站点第1步:找到制作网页的软件SharePoint Designer;并新建站点。任务1:新建站点; 活动5【活动】表格插入与内容填充第2步: 插入表格填充文字和图片到表格单元格中; 任务2:插入表格并填充各板块内容; 活动6【活动】解决学生存在问题教师巡视学生操作情况并发现问题?请几位同学上来帮忙演示操作。 1)导航菜单用文字空格分隔开,而不是用单元格拆分; 2)单元格大小调整很难均匀; 学生上台演示操作解决学生存在困难。【操作】选中第二行,在菜单栏中选择“表格”->“修改”->“拆分单元格”,设置列数为“5”问题2:单【操作】选择需要均匀分布的单元格,右击->”修改”->平均宽度。活动7【活动】调整网页大小和表格大小现在我们将做好的网页在浏览器里面查看一下效果; 提问:网页浏览有什么问题? 【教师演示】表格宽度修改操作。缩小浏览宽度后请学生观察? 教师演示网页大小修改操作步骤任务4:修改表格大小为960像素宽度;网页大小修改为960像素活动8【活动】作业上交要求上交站点文件夹

利用表格进行网页页面的布局教学设计

利用表格进行网页页面的布局教学设计《利用表格进行网页页面的布局》教学设计上海市蒙山中学夏勤在教学过程中发现:学生在网页制作时，往往只重视网页内素材的添加，而忽略了素材间的整体布局效果，致使制作出的网页布局不合理美观，页面上的素材布局杂乱无章。为了解决这个问题，我设计了“如何利用表格进行网页页面的布局”这节课的内容。本节课的教学对象是预备年级的学生，对于预备年级的学生来说，仅仅简单的讲解表格的使用，不利于学生对“利用表格布局网页页面”这一知识点的理解和实际信息技术应用能力的提高，因此，我在设计这节课的教法时，主要采用项目活动教学模式，整个项目活动通过比较、提问、引导、合作、展示、交流、评价等教学方法得以开展，激发了学生利用表格布局网页页面的积极性，培养和提高了学生辨别表格布局网页页面的能力、分析和解决如何利用表格布局网页页面的能力、审美能力、语言组织和表达能力、归纳能力、自主学习能力。 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中插入表格的方法是一样的，但是编辑表格是不是也一样呢？