用表格布局网页教案.doc

第二节 网页布局一、教学目标知识与技能1了解常见的网页版式2会用表格进行网页的规划和布局过程与方法通过欣赏、解剖典型的网页版式，引出表格是布局网页的主要手段。通过利用表格布局设计制作网页，掌握用表格布局网页的方法。情感态度与价值观学会欣赏网页二、重点和难点重点是网页版式的设计和表格的建立。难点是设计出好的网页布局。三、教学过程环节教师活动学生活动备注导入新课同学们咱们在上一节课上尝试了用FrontPage2000自带的模板进行网页制作，但是很多同学也提出了疑问，即模板提供的板式不能完全满足我们的实际需要。那么我们能否解决这一问题呢？今天咱们就一起来看一下网页的布局。常见的网页板式网页的板式没有统一的标准，可以根据自己的需要进行编排。常见的板式有分栏式和封面型。下面同学们来看几个网页。展示给学生红泥巴村的网页，提问：这个网页 什么板式回答封面式根据具体情况而改变展示给学生山东特产简介引导他们观察提问这个网页是什么板式？回答是分栏式，最好能答出是一栏式板式展示中国基础教育网分栏式，最好能答出是三分栏板式使用表格布局网页同学们都使用过田字格写字，我们把字写进固定的框框里是不是要比在白纸上写字更容易一些，也更整齐？回答是如果有回答不是的则：看来这位同学写字很有水平，课下老师可要见识一下。现在咱们先来看这个网页如果我们根据自己的需要设计一些像田字格一样的框框把把网页中的文字和图片放进去是不是就会容易很多？那么这种想法能不能实现呢？又要怎么去实现呢？下面咱们先看一个简单的网页，展示我提前制作的网页。同学们想一下如果要达成这样的效果要怎么去布局呢？展示制作好的带有表格的网页，同学们现在能看出来怎么去布局了吗？回答利用表格我们在Word里已经接触过插入表格的内容，那些操作在这里也适用，现在请同学们自己尝试对表格进行插入。迅速回忆以前的知识点，尝试进行表格的插入学生说我演示表格的插入，在此插入一个8行2列的表格故意把表格边框设置为非零现在我们如果直接用这个表格进行布局，显然达不到预期的效果，我们再怎么对这个表格进行改变呢？对比网页我们不难发现，第一行的两列变成一列了，第二行的两列变成三列了等，那么怎么可以实现呢？学生回答合并单元格这边主要是引导学生去发现差别我会演示第一行的单元格的合并，让学生自己探索第二行及其它单元格的的合并学生尝试对第二行单元格进行合并，但由于牵涉到合并再拆分，可能有的同学做不出，所以一定时间后我还是要操作一遍的。现在表格已经符合要求了，咱们可以进行填入内容了。操作一个图片的插入并输入文字，图片和文字都是挨着左边排列的，怎么可以让他们居中排列呢？选中居中现在咱们预览一下效果，同学们发现了什么问题？回答有表格线怎么才能解决呢？可能回答得出可能回答不出，告诉他们对于表格属性进行设置，将边框的粗细设为零，另外对齐方式应该选择居中，当然这些都可以在插入表格时进行设置。布置任务下面同学们自己进行尝试制作秦楼中心初中的网页，看谁制作得又快又好，一定要注意布局的美观性。学生开始进行操作我在下