用表格为网页布局_教学设计_v6.docVIP

《用表格为网页布局》教学过程 诸暨市直埠镇中 张八一 师：同学们知道孔乙己这个人物吗？我们绍兴哪个地方有他的塑像？ 生：知道——咸亨酒店 师：老师今天带来了一张咸亨酒店的主页，请大家来看看。 师：你会制作这样的网页吗？你能在很短的时间内制作这样的网页吗？ 生：（不能） 师：先来看看我现场制作吧。 教师边演示边讲解：先启动FrontPage，文件——打开，浏览到D盘，打开咸亨酒店网站文件夹，找到index.htm，再打开进入编辑。先定位好光标（在网页中单击鼠标左键），单击“插入”菜单——“图片”——“来自文件”——选择素材的位置（我们一般把素材都放在网站文件夹里的images文件夹中），这里有这么多文件，要是在这里能看到文件内容就好了，我给大家介绍一个小技巧，右键单击——“查看”——“缩略图”，怎么样，现在方便多了。我们选择这个图片，单击插入。（其他各个素材按照这样的方式逐个插入） 师：怎么样，看起来很轻松吧，老师不用一分钟就搞定了。你可以吗？网页所需要用到的素材在D盘中的咸亨酒店文件夹里，大家来动手试试。 （教师把学生操作要求和范例图投影） （教师巡视制作的情况） 师：我发现大部分同学都没能完成这个任务。你们插入的图片是不是都挤在了一起（是），没能按需要摆放到相应位置，其实我在操作过程中用了一个法宝，只是你们看不到，现在我把它请出来。 教师操作：在表格上右键，选择“表格属性”，找到其中的边框颜色，并把它改为自动，确定。 师：看到我的法宝了吗？这个法宝实际上就是个表格。不过你千万可别小看了它，有了这个法宝，老师制作网页就顺手多了，网页上的素材排列起来也非常方便。今天我们就来学习如何用表格这个法宝来为网页布局。 教师板书：用表格为网页布局。 插入表格 师：要用好表格这个法宝，还是要讲方法的。首先我们来分析一下，要制作出像老师这样的一张网页，你觉得需要一个多少乘多少的表格呢？咱们可以看着屏幕数一数，行数，列数。 师：那我们就来插入一个6行4列的表格吧，你会在word插入表格吗？（会或者不会）其实在FrontPage插入方法是一样的，那我们请一个同学来示范下！ 学生演示： 点评：非常不错，三两下就搞定了。同学们都看清楚了吗？ 解决对比出来的问题 师：不知道有没有同学发现，我们现在插入6行4列的表格，和刚才老师显示的那个表格不太一样。大家看看大屏幕，对比一下，有区别吗？ 学生：有 师：有哪些明显的区别？ 学生：1、高度不一样。这里的高度实际上应该是单元格的高度有区别。 教师板书：单元格高度 2、单元格数量不一样。这里应该指一行里单元格的数量有区别，举例说明。 教师板书：单元格数量 师：好，那我们一个一个来解决问题。首先是： 单元格的数量问题。通过对比我们可以发现，我们插入的表格第一行有四个单元格，而大屏幕上第一行只有三个单元格，实际上大屏幕上第一行左边的两个单元格变成了一个单元格，那么怎样才能把两个单元格变成一个单元格呢？我们回忆一下在学习Word表格操作的时候是怎样把两个单元格合在一起，变成一个单元格的？我们是通过“合并单元格”来把两个单元格变成一个单元格的，那么在FrontPage中是不是也可以这样做呢？我又要请一位同学上来试试，看能不能顺利完成合并单元格。 学生演示，大家都看清楚了吗？我们让这位同学再来演示一遍，老师先把刚才的操作撤消。 学生先选中单元格，老师叫暂停，问：刚才这们同学的操作看清楚了吗？怎么样来选中单元格，要把鼠标移动到第一个单元格，按下左键拖动到第二个单元格放开，这时候两个单元格的颜色发生了变化，说明这两个单元格被选中了。 学生继续操作，合并单元格。 教师板书：合并 师：单元格合并的操作大家都会了吧。这个操作和Word中的有区别吗？没有。好，接下来我们解决下一个问题。 单元格高度的问题。单元格的高度怎么调整？实际上和Word中的操作也没有区别，那么哪位同学来尝试调整单元格的高度呢？ 学生演示，大家都看清楚刚才的操作了吗？ 教师板书：拖动调整 师：实际上以后如果我们再遇到鼠标形状变成双向箭头，就说明这个地方一般情况下是可以改变大小的。单元格的宽度也是这样调整的。 重新制作范例 师：好了，我们把这两个问题都解决了，现在你有信心来完成这张网页了吧？你在操作过程中可以直接向老师、同学、书本求助，这里我还给大家请来了一个小助手——学件，你在操作过程中遇到什么问题，可以找这他们帮忙。老师来简单演示一下学件的使用方法。 广播结束 （投影操作要求）（学生重新制作主页）（教师巡视情况） 点评学生作品。 拆分单元格 师：老师这里还有一张网页，大家仔细观察右上角，和刚才的主页有什么区别？是的，收藏本站和设为主页两个内容的排列方式发生了变化。要实现现在的效果，我们要把最后这个单元格分成上下两个单元格，那么同学们回忆一下我们刚才在合并单元格