第2单元利用表格制作网页

1、青春是什么？第第2 2单元单元 利用利用表格制作网页表格制作网页学学习习目目标标1、知识与技能：、知识与技能：设计构思网页的整体布局，按布局在网页中插入表格，并能在表格单元格中，添加合适的内容，通过文本、单元格的修饰，美化自己的页面。2、过程与方法：、过程与方法：通过手绘、清除框经线、添加、删除行列、拆分、合并单元格等方法，完善网页布局。3、情感态度与价值观目标：、情感态度与价值观目标：通过学习，培养学生的设计、审美能力，并能发现生活中、网页中的美。体验并珍惜青春的美好时光，树立争取成功的意识。想一想：为什么要使用表想一想：为什么要使用表格来布局网页？格来布局网页？对对“我的竞选网页我的竞选网

2、页”进行结构化设计。进行结构化设计。任务：任务：以小组为单位，以小组为单位，在一张白纸上利用表格对自己的网页进行在一张白纸上利用表格对自己的网页进行结构化设计，看看哪一个小组设计得又好又快又新颖？结构化设计，看看哪一个小组设计得又好又快又新颖？网页结构化设计网页结构化设计设计规划网页时，通常把整个网页划分成几个模块，分别放设计规划网页时，通常把整个网页划分成几个模块，分别放置不同的内容，这称为对网页时行结构化设计。网页大多是置不同的内容，这称为对网页时行结构化设计。网页大多是从上到下进行划分的，通常可以分为四大部分：从上到下进行划分的，通常可以分为四大部分：1、标记导航区：放置有关标记、标题和

3、导航链接内容等。、标记导航区：放置有关标记、标题和导航链接内容等。2、主内容区：放置有关宣传标语和页面主题内容。、主内容区：放置有关宣传标语和页面主题内容。3、信息区：放置有关个人联系方式和网站简介等内容。、信息区：放置有关个人联系方式和网站简介等内容。4、版权区：放置有关网站信息版权内容。、版权区：放置有关网站信息版权内容。1、在、在Frontpage2003中新建一张页面，保存网页为中新建一张页面，保存网页为“jieshao.htm”。（1）单击工具栏中的）单击工具栏中的“新建新建”按钮，新建一张普通网页。按钮，新建一张普通网页。（2）在菜单栏中选择）在菜单栏中选择“文件文件/保存保存”，

4、弹出，弹出“另存为另存为”对话框。对话框。在在“保存位置保存位置”处选择网页保存位置处选择网页保存位置“D：/ygr”文件夹。文件夹。在在“文件名文件名”处输入网页的文件名处输入网页的文件名“jieshao.htm”。单击单击“更改标题更改标题”按钮，在弹出的按钮，在弹出的“输入文字输入文字”对话框中的对话框中的“网页标题网页标题”栏栏输入自定的网页标题（如输入自定的网页标题（如“我的竞选网页我的竞选网页”），然后单击），然后单击“确定确定”按钮。按钮。单击单击“保存保存”按钮。按钮。网页文件名与网页网页文件名与网页标题有什么区别？标题有什么区别？探探究究任任务务 你还记得你还记得word中如

5、何插中如何插入一个表格吗？入一个表格吗？任务：任务： 在在FrontPage中创建一个中创建一个13行行2列的表格。（参照网页结构化设计及列的表格。（参照网页结构化设计及页面中所有放置的对象页面中所有放置的对象文字、图片、文字、图片、媒体等媒体等的位置来确定表格的行和列数的位置来确定表格的行和列数的）。的）。操作步骤提示操作步骤提示：1 1、在菜单栏中选择、在菜单栏中选择“表格表格”/ /“插入插入”/ /“表表格格”命令，打开命令，打开“插入表格插入表格”对话框。对话框。2 2、在、在“插入表格插入表格”对话框中，设置表格的大对话框中，设置表格的大小及布局：输入对应的表格行列数；设定表小及布

6、局：输入对应的表格行列数；设定表格框线的粗细及对齐方式。单击格框线的粗细及对齐方式。单击“确定确定”按按钮。钮。 1.预览的时候，你看见表格预览的时候，你看见表格的边框了吗？这是如何设置的呢？的边框了吗？这是如何设置的呢？操作步骤：操作步骤：1、在菜单栏中选择、在菜单栏中选择“表格表格/绘制表格绘制表格”，此时鼠标会变，此时鼠标会变成铅笔的形状，同时弹出成铅笔的形状，同时弹出“表格表格”工具栏。工具栏。2、在页面中绘制新的是在已存在的表格中通过绘制横、在页面中绘制新的是在已存在的表格中通过绘制横线和竖线来增加单元格的行和列。线和竖线来增加单元格的行和列。3、绘制完毕，按键盘上的、绘制完毕，按键

7、盘上的Esc键退出键退出“绘制表格绘制表格”。擦除表格：擦除表格：单击单击“表格表格”工具栏中的工具栏中的“擦除擦除”按钮，进入按钮，进入“清除清除”状态，状态，鼠标变成橡皮擦形状，点选不需要的边框线，对出现鼠标变成橡皮擦形状，点选不需要的边框线，对出现的的红色边框线红色边框线即可删除。清除完毕，按键盘上的即可删除。清除完毕，按键盘上的Esc键退出键退出“清除清除”。小小组组探探究究 学生分五组分别来探究的这五个学生分五组分别来探究的这五个问题。限时问题。限时8分钟。分钟。8分钟后该组的小分钟后该组的小组长汇报探究结果。组长汇报探究结果。1.行高和列宽的调整。行高和列宽的调整。2.单元格的合并

8、与拆分。单元格的合并与拆分。3.插入或者删除表格中的行或列。插入或者删除表格中的行或列。4.平均分布行与列。平均分布行与列。5.设置表格或者单元格的背景。设置表格或者单元格的背景。 插上你青春的翅膀，完善你的竞选网页。让你的青春在你手 中飞扬。大显身手大显身手小小组组探探究究任务任务1： 调整表格的行高和列宽到调整表格的行高和列宽到适当的大小。适当的大小。操作步骤提示操作步骤提示： 方法一：手动调整。方法一：手动调整。 方法二：选择要调整行高或列宽方法二：选择要调整行高或列宽的单元格，在选中的位置右键单击鼠标，的单元格，在选中的位置右键单击鼠标，选择单元格属性（或表格属性），设置选择单元格属性

9、（或表格属性），设置行高（或列宽）。行高（或列宽）。小小组组探探究究任务任务2： 通过合并单元格或者拆分通过合并单元格或者拆分单元格来把你插入的表格调整单元格来把你插入的表格调整为老师网页中表格的布局。为老师网页中表格的布局。操作步骤提示：操作步骤提示： 选中要合并或者拆分的单元格，选中要合并或者拆分的单元格，右键单击鼠标，选择合并单元格，右键单击鼠标，选择合并单元格，或者拆分单元格。或者拆分单元格。注：拆分单元格时要注意行或列的注：拆分单元格时要注意行或列的设置设置小小组组探探究究任务任务3：插入或删除表格中的行或列。插入或删除表格中的行或列。操作步骤提示：操作步骤提示：在要插入行或列的地方

10、，右键单在要插入行或列的地方，右键单击，选择击，选择“插入行或列插入行或列”。选择要删除的行或列，右键单击，选择要删除的行或列，右键单击，选择选择“删除行或列删除行或列”。问题问题1：选择插入行或列时，新行：选择插入行或列时，新行或列会出现在什么位置？或列会出现在什么位置？问题问题2：对表格进行删除操作时，右：对表格进行删除操作时，右击鼠标前是否选择行或列，对右键击鼠标前是否选择行或列，对右键菜单命令内容有影响吗？在什么情菜单命令内容有影响吗？在什么情况下会出现况下会出现“删除行删除行/列列”命令？命令？小小组组探探究究任务任务4：平均分布行或列。平均分布行或列。操作步骤提示：操作步骤提示：选

11、择要平均分布的行或列，右键选择要平均分布的行或列，右键单击选择单击选择“平均分布行和列平均分布行和列”。小小组组探探究究任务任务5：设置表格或者单元格的背景。设置表格或者单元格的背景。操作步骤提示：操作步骤提示：选择要设置的单元格，右键单击选择要设置的单元格，右键单击选择选择“表格属性表格属性”或或“单元格属单元格属性性”。1.在Frontpage中，要是制作的表格看不到边框则应该将（）调整为零。A.单元格边距B.单元格间距C.单元格边框粗细D.高度与宽度2.在Frontpage中插入表格一般是为了（）A.在网页中插入图片B.在网页中插入声音C.在网页中插入视频D.在网页中控制文字、图片等的布局3.在Frontpage中，可以设置（）使表格中的单元格背景色不一样？A.单元格属性B.表格属性C.网页属性D.框架属性公布答案咯：C D A你答对了吗？1.Frontpage中，可在表格属性对话框中设定的有（）A.表格边框的粗细B.表格边框的颜色C.表格背景的颜色D.背景音乐2.Frontpage中，可以在单元格属性对话框中设定的有（）A.文字对齐方式B.用图片做背景C.单元格背景颜色D.单元格边框的颜色1.使用Frontpa