制作网站——表格布局网页
制作网站——表格布局网页（第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中的作用。
3．新授
（1）分析表格结构
展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到教材中的例子（biaoge.htm），分析结构，得出表格的布局（如表格有几行几列，哪些行做了哪些处理）。任务1 规划网页表格布局
分层完成该任务，基础相对薄弱一些的同学仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的同学可以跳出课本，自行设计表格网页布局，并将自己的表格设计绘制在书本上。
学生可根据自己的实际情况选择任务难度，并动手分析与创意设计。
建议：使用多个非嵌套的表格来布局。
设计意图：分层教学，培养学生模仿以及创新能力。
（2）完成表格布局
FrontPage中表格的插入和编辑与Word中的表格操作类似，教师无需讲解，引导学生进行知识迁移。
任务2 新建一个页面，用表格布局该网页，并在该网页中放入相应内容
打开站点，新建网页，以“biaoge.htm”为文件名保存。
按前面分析的要求插入一个表格。
调整表格结构（主要是行列的插入、删除，单元格的合并、拆分、调整大小等）。
老师可安排操作熟练的同学进行演示。
（3）充实网页页面内容
任务3 在表格中插入图片、输入文字
建议：插入图片对象前，对图片做一定处理，例如选择风格统一的图片，调整图片大小至同一尺寸等。注意图片的保存。
（4）调整表格属性，美化页面
预览制作的网页，修饰网页，让网页看起来更美观。
任务4 表格属性以及单元格属性的设置
表格属性的设置，如去除网格线、设置表格背景色等。
使用不同的颜色区分各板块，设置单元格属性。
强调：学会利用右击后弹出的快捷菜单中的命令。
学生根据自己的实际情况选择任务难度，可按教师具体要求修饰、调整表格，也可根据自己的意图修饰、调整表格。（表格边框的调整都需掌握）
设计意图：完成必须要求掌握的知识同时，给学生一定的自主空间，鼓励他们去创新，而非一成不变的生硬模仿。
（5）表格的嵌套
有时为了制作出更加美观的网页，我们可以使用表格的嵌套来实现。
任务5 加入横向目录导航条，尝试使用表格嵌套的方法解决问题。
学生动手制作网页。
4．总结与评价
本节课我们学习了在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法。请同学回答几个问题、并演示几个基本操作。展示表格页面制作完成的优秀作品，表扬完成任务的同学，对未完成的同学给予激励，鼓励他们利用课余时间继续完成。
学生回答问题：
（1）表格在FrontPage中起到了的作用：定位对象。
（2）表格编辑的基本操作。
关注课堂学生操作达成率。
第四节制作表格——网页中动态效果的制作（第5-6课时）
教学目标：
1．知识目标
(1）理解动态网页与网页动态效果的区别。
(2）掌握网页动态效果的制作。
2．技能目标
掌握“插入”菜单中“组件”命令的使用，使得网页增添动态效果。
3．情感目标
通过学生自主学习网页动态效果的制作，形成积极、主动的学习气氛，激发学生的学习兴趣，培养学生的探究意识和创新能力。
教学重、难点：
1．重点：滚动字幕、交互式按钮等动态效果的制作与Flash的插入。
2．难点：各种效果对象的属性设置。
3．关键：动态效果制作中应图文并茂、色彩和谐、动静适宜。
教学方法：自主探究式学习、任务驱动式教学。
教学准备：
具有动态效果的网页，包括滚动字幕、交互式按钮和FLASH的插入
教学过程：
1．引入
老师打开静态网页和加有动态效果的网页，请学生感受它们的不同。学生观察、比较两张网页，指出它们的不同点。师生共同分析网页，引入新课的学习。
2．新授
任务1 滚动字幕的制作
教师巡视，个别给予指导。
学生完成任务后，展示作品，并演示操作。小结设置滚动字幕的关键点：
文本的大小、字体、颜色等。
表现方式。
运动方向。
背景色的设置。
任务2 交互式按钮的制作
教师巡视，个别给予指导。
学生展示作品，演示操作，小结制作交互式按钮的关键点：
按钮文本的设置。
按钮的颜色、背景色以及效果等。
图片按钮。
任务3 网页中插入一个Flash动画
教师巡视，个别给予指导。
学生展示作品，演示操作，小结插入Flash动画的关键点：
Flash显示窗口的大小调整。
预览模式下才能看到Flash效果。
插入Flash后的网页保存。
学生参照教材内容完成网页动态效果制作，并比较分析其他同学的作品，对照自己的作品加以完善。
培养学生自主学习，发现问题的能力，师生共同分析问题并给予解决。
3．总结与评价
（1）学习过程评价，展示学生的作品，师生给予评价，激发他们更大的主动性与积极性。（2）归纳总结。
学生对照“自我评价”表，进行过程性学习的评价。
参考资料
1．相关知识与技术
（1）关于横幅：用FrontPage 2003制作网页时，没有FrontPage 2000那样的插入“横幅广告管理器”功能，所以在FrontPage 2003中，网页中的横幅可以用静态的图片表示，也可以用Flash软件制作交替显示横幅，作为插件插入到网页的横幅位置。
（2）关于交互式按钮：在FrontPage 2003中交互按钮的形式有多种，其属性设置有文字、图像及背景等，这是FrontPage 2000所不能比拟的。
（3）关于DHTML效果
教材中没有介绍动态DHTML效果，这里建议老师们将动态DHTML效果内容补充讲解。
如下，将按钮“enter”图片当鼠标停在按钮处，显示进入下一页按钮“next”，设置方法如下：2．关于资源素材
（1）资源库：人与自然、环保等各种文字、图片、Flash动画资料。
（2）多种运用表格布局的网页——优秀网站。
教学反思：
教案：使用表格布局网页
教学内容：项目五表格的应用 任务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．网页设计中应注意的原则。 （1）制作网页的目的，谁看我的网页。 （2）为谁制作网页？ （3）网页可以提供产品或服务是什么？ （4）网页的消费者和受众的特点是什么？ （5）提供产品或服务适合什么样的表现方式（风格）？ 3．网页设计总体方案主题鲜明 在目标明确的基础上，完成网页的构思创意就是总体设计方案。对网页的整体风格和特色作出定位，规划出网页的组织结构。 Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。好的Web站点把图形表现手法和有效的组织与通信结合起来。 为了做到主题鲜明突出，要点明确，我们将按照客户的要求，以简单明确的语言和画面体现站点的主题；调动一切手段充分表现网站点的个性和情趣，办出网站的特点。 Web站点主页应具备的基本成分包括：页头：准确无误地标识你的站点和企业标志； Email地址：用来接收用户垂询；联系信息：如普通邮件地址或电话；版权信息：声明版权所有者等。 充分利用已有信息，如客户手册．公共关系文档．技术手册和数据库等。 三、网站的版式设计 网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。 版式设计通过文字图形的空间组合，表达出和谐与美。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。 四、色彩在网页设计中的作用 色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。如果您的企业有CIS（企业形象识别系统），我们将按照其中的VI进行色彩运用。 五、网页设计形式与内容相统一 为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。 灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。 六、三维空间的构成和虚拟现实
用表格为网页布局
第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中的作用。
网页设计-页面布局篇(Css+Div)
网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)
第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：
第三章 使用表格规划网页布局
第三章使用表格规划网页布局 一、相关概念 1、表格功能：显示数据，定位网页元素（布局） 2、表格的组成： 表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。单元格中的内容和边框之间的距离叫边距cellpadding。单元格和单元格之间的距离叫间距cellspacing。表格的边线叫做边框border。tr：代表一行。td：代表一个单元格。 3、占位符： 当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。 当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。 二、插入表格 两种方法：①“插入”→“表格”命令 ②单击“插入”面板的“常用”类别中的“表格”按钮上，打开“表格”对话框。
1、宽度（百分比，像素）：相对显示，绝对显示 2、边距/填充：文本内容与边框之间距离 3、间距：单元格与单元格之间距离 4、标题：设置表格标题位置 【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容 【练习1】：制作下面表格 【练习2】：如何让文本与表格边框有一定空白区间，如下： 5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。 【练习3】：利用表格制作下图样式： 说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的
解析网页界面设计和布局
近几年来，随着科技、计算机技术的迅猛发展和人们生活水平的不断提高。互联网以惊人的发展速度并且越来越深入到人们的生活和工作、学习中。信息的传播形式、内容、数量也在空前的改变着。互联网它凭借着一个崭新的媒介和独特传播形式打破了传统性的、地域性的、经济文化性的阻隔，并且在信息的传播范围和传播速度达到一个质的飞跃。随着互联网的发展，周边的附属品也同时在飞速的发展。而最明显的就是互联网最常用的网络媒介“网页”。网页设计—也开始慢慢上升到一个举足轻重的位置，一个好的网页界面设计小则可以让人赏心悦目，大则可以称之为现代原创艺术的结晶。越来越多的设计师也开始投入到追求网页界面形式美的行列中来。然而设计师们在设计界面的同时却忽略了一个微不足道的，但是却又是至关重要的“微观”元素—网页设计的“细节”处理。它可以让设计师们的界面美观度达到极 致的升华，也可以让界面变得暗淡和乏味。 然而，一个网页设计的“微观细节”都表现在哪里呢?它们要在何时何地出现才能为我们的界面设计带来一个极致的升 华呢?网页设计的“微观细节”主要表现有以下几点： 壹—页面的整体颜色，也可以称之为颜色。 貳—页面的整体布局，也可以称之为排版。 叁—页面的字体元素。也可以称之为字体。 肆—页面的效果元素。也可以称之为效果。 以上四点归纳出网页设计的“细节”主要在以上这些地方着重处理。 页面的整体色彩可以直接反映这个页面对用户的视觉感官，鲜艳的颜色可以给用户一种清新、活泼的视觉感受，然而此 时细节就在于设计师对于色彩与色彩间的把握。 图：
单一的色彩元素也可以给用户带来另一种不同的视觉感受，如：黑白单一色调可以给用户一种稳重、时尚的视觉体验，然而此时细节就在于设计师如何“画龙点睛”打破单一的色彩体系，不让用户感受到压抑的心理。 图：
用表格布局网页
第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。 在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标
用表格布局网页教学设计
用表格布局网页教学设计 教学目标 （一）知识与技能目标： 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.细化
在将各主要元素确定好之后,下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步,你可以利用网页编辑工具把草案做成一个简略的网页,当然对每一种元素所占的比例也要有一个详细的数字,以便以后修改。 经过以上几步,相信你的网页布局已经初具规模了,让别人看一下,给你提些建议,再不断修改,一个很有特色的网页就要浮出水面了。 二、网页排版布局的原则 上面我们简要介绍了设计网页布局的步骤,事实上,在构思和设计的过程中,你还 必须要掌握以下几项原则: 1.平衡性 一个好的网页布局应该给人一种安定、平稳的感觉,它不仅表现在文字、图像等要素的空间占用上分布均匀,而且还有色彩的平衡,要给人一种协调的感觉。 2.对称性 对称是一种美,我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉,因此要适当地打破对称,制造一点变化。 3.对比性 让不同的形态、色彩等元素相互对比,来形成鲜明的视觉效果。例如黑白对比,圆形与方形对比等,它们往往能够创造出富有变化的效果。 4.疏密度
网页设计中布局方式之比较
网页设计中布局方式之比较 摘要：在网页设计中，网页布局的效果直接影响到网页设计的质量，本文分析说明了目前常用的三种布局方式：表格方式、框架方式和div+css方式，并对三种方式进行了详细的比较。 关键词：表格 div+css 布局 1 概述 在网页设计过程中，色彩的搭配、文字的变化、图片的处理等，这些都是不可忽略的因素，但除此之外，还有一个非常重要的因素——网页的布局。不同类型的网站采用不同的布局，不但能使网站结构合理化，也可以使访问者一看就明白：这个网站是做什么的。目前网页常见的布局结构类型主要有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题文本型布局、框架型布局和变化型布局等。无论是哪一种布局结构，我们在布局时都应遵循以下三个基本原则：①主题鲜明：视觉设计表达的是一定的意图和要求，这就要求视觉设计不但要单纯、简练、清晰和精确，还要注意通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。②形式与内容统一：内容决定形式，形式反作用于内容，一个优秀的设计必定是形式对内容的完美表现。③强调整体性：注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页形式与整体内容的统一。 2 常见布局方式 在网页设计中，常见的布局方式一般有三种，第一种是使用表格
（table），第二种是使用框架，另一种是使用div+css。下面我们将具体的对这三种布局方式进行说明与分析。 2.1 表格布局方式 表格是一种简明扼要而内容丰富的组织和显示信息的方式，在文档处理中占有十分重要的位置。使用表格既可以在页面上显示表格式数据，也可以进行文本和图形的布局。由于表格使用简单而且灵活，是最早也是使用最广泛的网页布局技术。通过使用相关的一系列表格标签，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并对表格单元格进行合并或拆分以及在表格中嵌套表格等操作，从而得到需要的布局。 表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且在定位图片和文本时非常方便。但当使用过多表格时，页面下载速度将会受到影响。并且灵活性较差，不易修改和扩展。 2.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、学会设置表格属性，对表格进行编辑修改。 过程与方法目标： 通过欣赏、借鉴他人的主页布局，取长补短，为自己的主页布局做铺垫。 情感、态度与价值观目标： 1、通过作品欣赏，让学生意识到取长补短的可贵性，及在借鉴基础上的创新的重要性； 2、用表格排版网页解决网页版面杂乱问题，培养在遇到困难时灵活运用各种方法解决，强化建站信心。 为了实现这个教学目标，我将教学重点确定尾插入表格进行排版和更改表格属性。根据学生的思维障碍和学习情况的分析，我将难点定位于灵活掌握排列表格和设置表格属性。只有正确设置了表格的属性，才能美化和完善网页的布局。为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前截取了典型的旅游网页图片素材并设置成框架形式让学生一目了然地看到表格所起的作用，并设置了几个学生需要突破的任务。 信息技术课是培养学生对信息技术的兴趣和意识，使学生养成良好的信息素养为宗旨，强调学生的自主学习和研究学习。上新课前，我要求学生两两合作，通过传统手工绘制草图的学习方式，设计你需要建立网页的框架布局，同时学会和与他人合作。为了让学生主动的参与学习，我在设计教学流程时，准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。根据教学内容和学情的分析，本课我采用的教学方法有：讲解、练习、任务驱动、小组合作，学生可以通过小组合作、给定的任务等将本课学习用于实际操
网页设计的布局理解
网页设计的布局理解 矛盾出来了，像我们这些小作坊，基本都是设计布局一人搞定。甚至还有加后台程序的。假设设计的时候考虑布局了，我们都有这个能力进行调整。下面是小编为大家整理的网页设计的布局理解，欢迎参考~ 经常看到有网友抱怨设计师给的稿子无法还原。因为他们对浏览器和屏幕的理解不一样。也有的是因为效果太绚，颜色太多。更有甚者是使用flash制作嫌浪费，而html又鸡肋.....好吧，我们抛开这最后一种情况，只谈对屏幕和效果以及设计布局的理解。 屏幕分辨率，还是以1024×768为主。而满屏的定义则无从谈起。为什么?请看一下原因： 你不能确定用户的ie装了几个插件!插件越多，浏览器显示高度越低! 你不能确定用户的显示器是否设置正确(歪一边了，弧形的，截断的，缩小的放大的) 你不能确定用户显示器的分辨率是否为最佳分辨率。其典型在于某些宽屏或高屏显示器，有的是等比例缩小后留白。而更有甚者则是满屏拉伸。比例就不对了! 要使得网页满屏。很多人说宽度1003，也有人说是1004。而我则不这样认为。 假设客户要求网页满屏。那么，你就要晓得用户的显示
器尺寸的屏幕分辨率。如果客户对这玩意认知度很低。就不要轻易去改人家的分辨率。我1440×900的宽屏，我用1024×768的分辨率，我乐意!如果这客户要求一定要满屏，那么问题又出现了，如果交货的时候客户换了一台不同尺寸的显示器呢?分辨率变大了，你的网页窄了，分辨率小了，你的网页宽了!你咋办? 其实满屏也分两种，我姑且命名一种为内容满屏，一种为视觉满屏! 所谓内容满屏，就是指网站上的东西，左边界就在显示器左边界，右边界就是在显示器右边界。最佳的解决办法就是使用百分比。而百分比带来的负面效应： 所谓视觉满屏，其实是一种取巧的做法。而这种方法。其实很简单，一个网站的头部，无非就是导航和banner，如果导航在最上边，那么，将导航的背景呈100%，导航居中。如果banner在最上边，那么注意处理图片两端，还是100%宽背景! OK，虽然内容宽度还有可能是1000、1003、甚至是900或更低，视觉上依然是百分百的宽度，只要避免最小宽度大于浏览器宽度、或客户的显示器分辨率宽度大于你的最小宽度。永远OK。 其实呢，说网页制作，直角最简单，比如老印，他的东西全部是直角。用他的话说就是刀切一样!为嘛?简单方便速
使用表格布局网页
巧用表格来布局 【学科领域】本教案所适用的学科为八年级信息技术学科。 【内容概述】在用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( 先回顾网站制作的步骤，并展示两张素材相同而布局不同的网页，让学生进行比较、 分析、归纳出两张素材相同而整体页面效果不同的原因是其中一张网页是利用表格布 局了页面，从而引出本节课的课题——利用表格布局网页页面。 2( 师生继续分析页面效果好的那张网页，其布局页面的表格结构有几行几列，引出问 题:如何对表格进行处理而使页面布局更合理,即表格的编辑操作。 3( 教师以页面较杂乱的那张网页为例，进行插入表格、合并、拆分单元格等示范操作。
4( 学生以小组为单位根据实际情况，进行“利用表格布局网页页面”的实践操作练习。 教师针对不同水平的学生进行分层教学:对特殊学生，允许他们完成一张网页的表格 布局。教师给予较多的个别辅导机会。对天才学生，要求完成网站内多张网页的表格 布局。 5( 要求各小组将已经利用表格布局好的网页进行交流展示，各小组评价。以网页上各类 素材间整体布局的合理性、谐调性和美观程度为评价标准。达到加深学生对利用表格 布局网页的理解及提高解决实际问题的能力，同时激发学生的积极性，并从中获取成 功的体验。 6( 课堂小结则分成教师强调实践操作注意点和学生总结“利用表格布局网页”的重要性 两部分组成。 7( 为了巩固新知识及更好的布局网页页面，要求学生课后以小组为单位进行分工操作， 预先在草稿纸上设计好各自所负责网页页面的表格结构，以便上机操作时更快捷的完 成页面布局。
《应用表格布局网页结构》教案
《应用表格布局网页结构》教案 一、教学目标 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）布置学生完成任务二：制作“多彩的生物”网页；可以根据自己的设计对网页进行适当的调整； 掌握根据网页确定所需表格的结构 能根据网页规划表格 小组合作讨论，根据学案提供的参考表格确定“多彩的生物”网页的表格结构，再独立完成图片、文字的插入。 四、作品展示交流与课堂总结