4.3.3使用表格进行页面布局

《4.3.3使用表格进行页面布局》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、使用表格进行页面布局教材分析：本课是广东教育出版社编写的《网络技术应用》选修3，第四章第三节“网页的制作”中的第三小节“使用表格布局网页”中的内容。学生分析：学生为高二年级，他们在学习本课之前，已经学习了如何新建一个网站，在空白网页中插入图片和滚动字幕等内容，况且学生在高一年级已经学习了在word文档中插入表格的方法和表格的编辑，关于表格的操作有了一定的基础。学习目标：知识与技能目标：1、熟悉表格在网页设计中的作用2、掌握网页中表格的制作方法及其基本编辑方法3、区分表格属性和单元格属性，并掌握属性的设置过程

2、与方法目标：通过比较表格在Frontpage中与在Word中的功能，培养学生观察、思考、总结的能力。情感态度与价值观目标：利用表格使网页布局合理、美观，从而让学生对网页制作更感兴趣教学重点：表格在Frongpage中的作用；表格的插入与编辑；表格的菜单命令。教学难点：表格属性和单元格属性的灵活运用。教学方法：讲授法，演示法，任务驱动法教学过程：新课引入：教师用教师控制系统展示两张网页，第一张是上节课制作的网页，里面有文字有图片但没有表格，页面摆放有点乱；另一张是用表格存放文本、图片，结构整齐的网页，表格边框

3、隐藏。提出问题：哪一张网页比较美观，它是怎么做到的呢？通过对比，引出表格的作用及优点，从而导入本课主题：使用表格布局网页结构讲授新知：一、表格的作用：用表格布局网页结构是非常重要，也是最为常用的方法，它是网页设计中最主要的内容之一，也是网页设计的重点，大部分网页都要用到表格去布局。用表格控制文字、图片等对象的位置，可以使网页的布局既紧凑又整齐美观。二、任务驱动出示任务，制作下面图示的表格“个人简介表”回顾Word中插入表格的方法，引入Frongpage中插入表格的方法：1、单击常用工具栏上的插入表格按钮，按

4、住鼠标左键向下向右拖动，拖出一个6行5列的表格。2、单击菜单栏上的“表格”，在下拉菜单中选择“插入”里的“表格”，弹出“插入表格”对话框，在其中输入表格的行数6和列数5，即插入一个6行5列的表格。三、表格的编辑：1、输入表格中的文字内容；2、调整表格的行高和列宽：鼠标指向表格的某一行，光标变成上下箭头时，按住鼠标的左键拖动，可以调整表格的行高；鼠标指向表格的某一列，光标变成左右箭头时，按住鼠标的左键拖动，可以调整表格的列宽。3、合并单元格（1）选定所要合并的单元格；（2）鼠标指向选定的内部，击鼠标的右键，在

5、出来的快捷菜单中选择“合并单元格”命令，这样即将选定的单元格合并成一个大的单元格。4、拆分单元格鼠标指向要拆分的单元格内部右击，在弹出的快捷菜单中选择“拆分单元格”命令，这时弹出拆分单元格对话框，在其中选定“拆分成列或拆分成行”，然后输入拆分成的列数或行数，最后“确定”。这样就将这个单元格拆分成相应的几列或几行了。5、删除多余的行或列（1）选定所要删除的行或列；（2）鼠标指向选定的内部右击，在弹出的快捷菜单中选择“删除行或删除列”命令。6、调整表格内容的居中选定整个表格，单击“格式”工具栏上的“居中”按钮。

6、7、调整表格边框的粗细、颜色：鼠标指向表格的内部击右键，在弹出的快捷菜单中选择“表格属性”命令，打开“表格属性”对话框，在其中的边框选项中可以设置边框的粗细及颜色。若要在预览时，别人看不见的话，可以将表格的边框粗细设置为0，这样就将表格隐藏起来了。8、设置表格的背景颜色，将某一张图片作为表格的背景（1）将光标置于表格内；（2）击鼠标的右键，在弹出的快捷菜单中选择“表格属性”命令，打开其对话框；（3）在其中背景颜色列表框中选择一种颜色，单击确定，这样此颜色将作为表格的背景；（4）如果要将某一图片作为表格的背景

7、，则需要勾选“使用背景图片”复选框，再单击“浏览”按钮，选择此图片，最后确定。四、探究与思考：1、单元格中插入照片的方法；2、如何改变单元格的背景颜色，如何将某一张图片作为单元格的背景。五、总结本节课我们学习了插入表格和编辑表格的方法，通过比较发现，表格操作在Frontpage中起到了重要的作用。希望大家在以后的网站制作中能合理的利用表格对网页进行布局。