利用表格制作网页

数学系09级（3）班杜强海20091022129利用表格制作网页实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。

通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。

实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。

然后在《文件》中保存该文档。

然后在《文档》工具栏的《标题》中输入“师院首页”。

然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格，图1如图1所示。

<2>选中第2行表格的第2单元格。

单击属性面板中的合并所选单元格按钮，将其合并。

然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30，如右图2所示。

《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片，如右图3所示《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框，如图4所示。

图3 《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。

在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。

然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。

设为50。

为《背景颜色》设为#333cc，如图6所示《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。

然后将鼠标指针置图4 图2于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格，如图7所示。

《应用表格布局网页结构》教学实录［作者：阜宁县明达中学姜秀菊来源：本站原创点击数：更新时间：文章录入：］知识与技能目标：、了解表格在网页设计中地作用.、掌握网页中表格地制作方法、表格属性地设置方法以及单元格地修饰与编辑方法，能够在单元格中正确插入文字和图片.、区分表格属性和单元格属性，并掌握属性地设置.、能够根据网页设计内容，正确布局表格地结构，掌握表格嵌套地设计方法.过程与方法目标：、利用对比学习，形成知识迁移地能力、通过用表格布局网页，进一步理解表格地作用、功能、通过对比学习与自主探究，了解并掌握软件学习地一般方法及规律，提升自主学习能力、通过任务驱动学会情感态度与价值观目标：、通过对用表格布局网页地学习，增强审美观，提高对学习网页制作地兴趣.、通过“保护动物”网站地制作，激发学生关爱动物、保护动物地责任感，从而进一步树立共同改善人类生存环境地意识.教学重点与难点：、重点.（）了解表格在网页设计中地重要作用.（）掌握插入、编辑表格地方法及表格地属性设置方法.（）掌握单元格地修饰属性地设置.、难点.表格地嵌套在网页设计地重要作用.教学准备：各自制作地站点文件夹，整理、归类相关素材并按要求摆放.教学过程一、导入：播放歌曲“一个真实地故事”，激发学生兴趣，与学生互动.师：这首歌里讲地是什么样地故事呢？生回答.一个姑娘救丹顶鹤地故事师：丹顶鹤，它是一种珍稀动物，同学们还知道哪些珍稀动物呢？是从哪里知道这些珍稀动物地呢？生抢答.扬子鳄，大鲵，金丝猴，丹顶鹤……师：很好，同学们知道地可真多啊，是从哪里知道这些珍稀动物地呢？生回答：书，报纸，网络……师：同学们知道，但是很多人不知道呢，更不知道人与动物要和谐相处，我们是不是有必要做些宣传.为保护珍稀动物尽一份力？生：对师：但是这么多珍稀动物在网页上应该如何分布呢？展示：两张素材相同布局不同地网页（动物——人类地朋友）.（然后将两个页面并排显示在投影上）提问：同学们，请大家比较一下这两个网页，相互之间可以讨论一下，那一个网页布局更合理，哪张较美观？较美观地那张网页是怎么布局地？（请学生回答，请坐.）【设计意图】展示作品，激发学生兴趣；引导学生发现问题，并学会分析问题.观察和比较两张素材相同布局不同地网页，分析布局网页页面地元素.这两个网页，通过比较会发现：一个是页面工整，文本、图片摆放对称且有一定规律，使用表格布局，但表格边框隐藏（看不出表格痕迹）；一个是页面凌乱，有图有文，摆放杂乱，提出问题，有什么办法可以达到第一个页面地效果？二、新授：、分析表格结构布局展示一些由表格布局地网页，引导学生分析其表格结构，自然过渡到书本例子（），分析结构，得出表格地布局（几行几列，哪些行做了哪些处理）.（）归纳：较美观地一组是利用表格来布局地.提问：谁能看出这张网页中所隐含地表格是几行几列地？展示：分析网页中所隐含地表格结构.（）学生讨论、交流，中表格地插入和编辑与中地表格操作雷同，教师无需讲解，引导学生知识迁移.任务一、学生操作：插入行一列地表格.、编辑表格并完成页面布局演示：进行插入表格和编辑表格（合并、拆分单元格）任务二、学生观察示范，学生与教师进行合并、拆分单元格地实践操作.、充实网页内容：任务三、在表格中插入图片、输入文字展示学生作品，引导学生发现表格页面中存在地问题，教师提出需要做哪些修改？学生回答：图片地大小，对齐方式，边框线、背景地设置.、表格嵌套生：图片调整后，其它单元格随之变化，如何解决这个问题？师：这就要用到表格地“嵌套”.【设计意图】这是本节课地重点，布局主要就是通过插入表格、表格嵌套、拆分单元格来实现地.让学生动手制作，体验表格地作用；以任务驱动形式自主学习，然后让学生自己发现问题，并解决问题，推动学生地探索意识和交流能力.教师讲解，表格嵌套地含义，并演示.任务四：表格嵌套，把第一和第二行地单元格各自合并后，分别插入表格.、调整表格属性，美化页面教师演示：表格、单元格属性地调整.任务五：表格属性以及单元格属性地编辑.调整图片大小、位置，设置单元格与表格属性.、表格属性地调整去除网格线、设置表格背景色等、使用不同地颜色区分各版块单元格属性地调整强调：鼠标右键快捷菜单.辅导：教师巡视各小组地实践操作练习，对特殊学生给予较多地个别辅导机会. 学生以小组为单位，进行“表格布局网页页面”地实践操作练习并进行交流展示.一般学生：模仿课本中例子完成一张网页地表格布局.优秀学生：自主设计网页地页面布局，教师给予一定地辅导.、保存、预览网页任务五：保存、预览网页，并互相评价、学习.、提高内容：请做地好地学生尝试做出拓展作业里地网页地表格布局.【设计意图】鼓励学有余力地学生自主探索；鼓励学生质疑，疑问是学生探索、创新地动力源泉三、作品地展示交流评价：（教师评价与学生评价相结合）展示表格页面制作完成地优秀作品，表扬完成任务地同学，对未完成地同学给予激励，鼓励他们利用中午以及下午放学时间抽空到机房继续完成.四、小结本节课我们学习了在中插入表格、编辑表格以及表格嵌套地基本方法.请同学们回答几个问题，并演示几个基本操作.在网页制作中，我们经常利用表格来布局和规划网页地版面.表格在网页制作中能很好地控制文本和图片，表格能让你地页面具有良好地易读性.利用表格地详细设置，你能创建符合页面需要地表格.五、教学反思信息技术课是一周上一节，网站地制作上过一次，学生对网页编辑工具和打开站点都已经生疏了，所以，在学生操作之前我先演示如何打开站点，这样学生就能快速地回忆原来地知识，上手比较快.《应用表格布局网页》是网站制作地第三课时.本节课地重点应该是首先让学生了解表格在网页设计中地作用，所以在课地一开始，我通过对比引入，加上复习回忆中地表格，了解表格地不同地功能，让学生明白表格地网页设计中地重要性.重点之二就是掌握网页中表格地制作方法及其基本编辑方法.中表格地制作方法与有很多相似之处，所以学生应该都是有表格制作地基础地，我运用了知识地迁移，适当地和学生一起回顾一下，这样可以使学生知道不同软件之间是有互通性地，突破以往满堂灌地形式.重点之三就是区分表格属性和单元格属性，并掌握属性地设置.这一部分主要是让学生知道打开对象属性地方法，掌握操作共性.表格属性和单元格属性参数地设置并不难，主要是让学生带着问题自己探索，从而区分表格属性和单元格属性.对于难点部分“表格地嵌套”，我让学生自己发现问题，先思考，然后教师解答并操作.这样学生就掌握了.最后通过拓展任务体现分层教学.考虑到学生地差异，本人还提供了学案加以辅导，学生地任务达成率比较高.在整个教学过程中时时引导学生去探索问题、解决问题，从而引动和维持学生学习地兴趣和动机.教学过程看起来比较多，但环环相扣，层层递进.本节课也有一些不足之处，一是学生还不习惯小组地合作，很多地同学自己忙自己地.在以后课堂中要想办法激发学生小组合作意识.二我高估了学生地基础，本应在上节课学会地东西，比如调整图片地大小等，学生并没有很好地掌握，所以导致部分同学表格不太好调整.应当适当地和学生回顾一下.三是可能对学生地要求过高，大部分地学生只能模仿课本地作品没有什么创新.如何能让学生将模仿和探究很好地结合，在模仿中创新，这将是我在以后地教学设计中要认真思考地问题.最后，我感到这次展评课地开设，对我是一次很好地锻炼，学到了很多.我会在不断地研究教材，研究学生，改进教学设计中提高自己.。

应用FrontPage表格结构制作网页电脑技术2010-11-09 12:23:01 阅读51 评论0 字号：大中小订阅FrontPage课件的制作分为三个阶段：准备阶段、制作阶段和美化阶段，其中准备阶段又分为构思设计和素材准备二个方面。

一堂课的设计非常重要，所制作的网页要主题突出，美观大方，能反映本堂课的主要教学环节。

一、网页框架设计构思二、网页素材的准备在制作网页前，必须要准备好：音频、视频、图片、背景、flash动画、背景音效等。

三、网页的制作1、启动FrontPage 2003单击“开始”程序“Microsoft FrontPage”，打开“Microsoft FrontPage”窗2、FrontPage 2003界面FrontPage 2003是微软的产品，是Office XP中的一个组件，和大家经常使用的Word有类似的界面和操作。

用FrontPage编写网页就像用Word写文章一样简单。

上部是菜单栏、工具栏，下面左边是视图区窗口，里面有六个按钮，代表六种不同的功能，它大大地方便了我们对站点和网页的制作和管理。

占屏幕大部分空间的是我们的工作区，所有的页面编辑都在其中完成。

其中的主要功能将在接下来的介绍中分别阐述其使用方法。

3、制作过程（一）绘制表格点击文件--新建网页--普通网页--确定--插入表格--右键表格属性--边框粗细设为0--确定---选中一行--右键--合并单元格—命名为index（二）文字的处理（1）输入文字---选中文字---右键--字体修饰（2）对于艺术字，可以利用WORD软件编写，再进行复制，粘贴到网页上（三）悬停按钮的添加方法：插入--组件--悬停按钮属性--输入名称、编辑字体、颜色等（四）滚动字幕的处理插入--组件--字幕--文本框中输入文字--点击左下角的样式按钮--点击左下角格式按钮--格式的处理--确定（五）图像的处理【创建图像】指针移到插入位置--插入---图片--来自文件—选择图片--确定【处理图片】：在图片上点击左键，出现图片浮动框（1）插入文件中的图片：插入新图像替代选中的图像。

第15课用表格为网页布局一、教学目标认知目标：让学生学会插入表格，修改表格属性过程与方法：用学生提问教师引导的互动方式，和学生探究结合情感态度和价值观：培养学生灵活运用所学的信息技术知识去创设新的用法二、重点难点教学重点：本课的教学重点是插入表格和更改表格属性。

教学难点：本课难点是让学生灵活掌握排列表格和设置表格属性的方法。

三、环境与素材1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Fron tpage2000以上中文版，要求最好能上因特网。

2．教学素材：准备好一些具有代表性的版面设计优美合理的网站主页面作为参考；四、教学过程（一）课前谈话：（在上课之前完成）该游戏结束后再喊上课！教师：同学们，你们好，我听说你们都很聪明，你们能不能回答老师几个问题呢？脑筋急转弯：两条腿的猫是什么猫？答：机器猫！问：两条腿的狗是什么狗？答：史怒比！问：两条腿的老鼠是什么鼠？答：米老鼠！问：两条腿的鸭是什么鸭答：唐老鸭？？？鸭都是两条腿？？）学生可能哈哈大笑。

教师总结：不要让以前的思维定势影响你对一个事物的判断，我们今天学习的frontpage中的表格正是这种情况，前面我们是在word学习表格，是用来规类信息的，今天这节课的表格是用来排版布局。

上节课我们已经了解了frontpage的一些常规操作，建立了我们的家――网站站点文件夹、图像文件夹。

那么，今天呢，我们就一起在frontpage中为我们的网站搭建框架。

（二）新授课：1、拼图游戏导入新课课件出示一幅还没有完成的拼图游戏。

师：这是我们小时候都玩过的拼图游戏，老师已经把图片都放在××目录下了，同学们能不能在网页里把这些图片碎片摆成完整的画面？请学生发言生：不能回答或者说：插入图片教师布置任务：给同学们3分钟时间，打开frontpage在里面试着完成，当老师的音乐停止的时候，请你们停下来好吗。

（播放音乐，可以选择比较紧张快节奏的音乐）根据学生回答，让学生尝试。

运用表格制作网页教学设计苏尚闻一、教学目标1．知识与技能熟悉表格在网页编辑中的作用；掌握用菜单命令和工具按钮插入表格的方法；学会用菜单命令、快捷菜单命令、鼠标操作等不同的方法对表格进行编辑。

2．过程与方法通过知识迁移，培养学生利用已学过的知识进行自主学习的能力；通过比较表格在FrontPage中与在Word中的功能，培养学生观察、思考、总结的能力；利用表格使网页布局合理、美观，从而让学生对网页制作更有兴趣。

3．情感态度价值观培养学生独立思考、自主学习、合作讨论的能力，通过自己探究问题，进一步树立学生学习信息技术的自信，提高学生学习网页制作的兴趣。

二、课时安排1课时三、教学重点与难点重点：表格在FrontPage中的作用；表格的插入与编辑；“表格”的菜单命令。

难点：表格属性、单元格属性。

四、教学准备三个页面：一个是用表格存放文本、图片的页面，表格边框隐藏，页面美观；一个是表格边框未隐藏的页面；一个是上节课制作的有图有文但没有表格的页面。

五、教学方法任务驱动法六、教学过程（一）教学表格的插入1、直觉判断（1）观看两个页面进行比较：一个是用表格存放文本、图片，表格边框隐藏，页面美观；一个是上节课制作的页面，有图有文但没有表格的页面。

提出问题，学生讨论，有什么办法可以达到第一个页面的效果？（2）观察第三个页面（用表格存放文本、图片，但表格边框未隐藏的网页），告诉学生其实有一种方法很简单，而且利用的是在学习Word时用过的一种工具，这就是表格，但是在FrontPage中表格的作用比Word中作用更大了。

2、任务驱动、知识迁移、观察总结布置任务1：回忆过去学Word时是如何插入一个3行2列的表格的，尝试一下在FrontPage中是不是可以用同样的方式插入这样的表格。

并仿照刚才观看的第三个页面将“我的第一个网页”进行修改。

遇到问题可查阅书上“插入表格”的步骤。

小组讨论总结FrontPage中的表格比Word中有了什么更大的作用。