
4.3.2 网页制作2.doc
5页4.3.2网页制作教科版网络技术应用(选修)泰州第三高级中学 李玲教学目标(1)知识与技能:①了解表格在网页设计中的作用②掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法,能够在单元格中正确插入文字和图片③能够根据网页设计内容,正确布局表格的结构,掌握表格嵌套的设计方法2)过程与方法:①利用对比学习,培养学生知识迁移的能力②通过用表格结构设计网页,使学生进一步理解表格的作用、功能及网页设计方法的多样性,培养学生的发散思维能力③通过自主探究,使学生掌握软件的使用规则,培养学生自主学习的能力3)情感态度与价值观:①通过对比学习使学生体验软件学习的一般方法及规律,提高学生自主学习的能力②通过运用表格布局网页对象活动,进一步掌握各种不同对象属性的设置方法和规律,体验创造的快乐学情分析学生已经学过Word表格的制作方法,对表格的相关操作有一定的基础,网页表格的制作相似根据需要应用网页表格页面设计是网站建设重要的部分,本节操作性较强使用表格进行排版是一个最佳方法,这样制作的网站非常优美重点难点重点:(1)了解表格在网页设计中的重要作用2)掌握插入、编辑表格的方法及表格的属性设置。
3)掌握单元格的修饰与属性的设置4)掌握网页元素的添加难点:网页表格的调整教学过程新课导入: 网站的内容是通过主页来展示给浏览者的,一个好的主页应该主题鲜明、美观生动、引人入胜现在我们首先制作网站的主页,然后在主页的基础上,制作网站中的其他页面在我们设计网页的时候,经常想把网页设计的美观大方,一些网页元素想放到适当的位置,铺满整个页面,达到页面平衡想达到这样的效果,我们就要学会使用网页表格来布局一、利用表格定位网页(一)插入表格单击“表格(A)” 菜单中的“插入”“表格”命令;或单击“常用”工具栏上的“插入表格”按钮“”拖动;或使用手绘表格我们通过任务一来完成对第一点的练习任 务 一在E盘中新建站点“yayun”后,在网页中插入一个4行3列,水平居中,边框粗细为0,指定宽度为1024像素的表格,效果如下面样张 (二)调整表格表格建立好了以后,我们可以对表格进行调整1)合并单元格: 选中要合并的两个或两个以上单元格 → 右击 → 合并单元格 (2)拆分单元格: 选中要拆分的单元格 → 右击 → 拆分单元格 或者使用表格工具栏上的合并或拆分单元格按钮3)表格的嵌套: 在表格单元格中再插入表格(三)单元格属性的设置(1)高度(2)宽度(3)背景对于这些知识点,我们通过任务二来进行巩固。
任 务 二1、任务一的基础上进行如下操作,分别将第一行、第二行、第三行合并单元格2、设置第四行第一个单元格宽度为160像素,第四行第二个单元格宽度为540像素,第四行第三个单元格宽度为250像素效果如样张学生完成任务一和任务二学生参考《学习材料》和微视频中的制作方法,尝试操作,可小组讨论,老师巡视并做出相应指导二、添加网页元素(一)编辑文字(二)插入图片等素材将插入点移到要插入图片的单元格,依次单击“插入(I)”菜单中的“图片(P)”“来自文件(F)”命令,打开“图片”对话框对于第二大点,我们通过任务三和任务四的完成来巩固一下任 务 三1、在任务二的基础上进行如下操作,在第四行第二个单元格中插入图片nr.jpg,2、在第一行单元格中插入图片biaoti.jpg,3、在第三行单元格中插入图片tiaowen1.gif并设为水平居中,4、设置第二行单元格背景色为值Hex={FF,99,66}的颜色效果如样张任 务 四1、在任务三的基础上,在中插入一个5行1列,对齐方式水平居中,指定宽度100%的表格,设置表格高度为498像素,将“亚运资讯 亚运筹备 亚运服务 互动亚运 网上亚运会”分别复制到其中的单元格中并居中对齐,设置其单元格背景颜色为值Hex={D8,F0,FF}的颜色,第四行的第三个单元格中插入图片“right2.jpg”。
效果如样张2、保存网页到E盘命名为“index.htm”,网页中的图片保存到yayun站点的“images”文件夹中学生完成任务三和任务四学生参考《学习材料》和微视频中的制作方法,尝试操作,可小组讨论,老师巡视并做出相应指导学生制作过程中,老师小结表格的嵌套 我们已经完成了这个网页,我想大家对网页表格的制作过程和方法已经有了一个初步的认识思考题:在上面这个例子中,我们已经学会了使用表格来构造网页,那么,如果网页的结构更加复杂一点儿呢?我们应该怎么解决呢?如下图所示大家分析一下这个网页的具体机构分析以后,我们发现这个网页的机构是这样的,如下图有兴趣的同学可以建立这样的表格,并在表格的恰当位置插入文本和图片,完善网页总结提升 一个好的表格布局应该易于理解,简单明了地传递大量的信息巧妙的设计不仅可以使一个表格更具吸引力,而且可以增加可读性教学反思运用表格来布局网页是网页布局的常用方法,本节课通过任务进行教学,调动了学生的学习兴趣和学习积极性由于课堂时间有限,任务中涉及到的具体的填充内容选择的是较简单的添加所有同学基本完成了网页布局,对网页表格有了初步了解而网页元素的添加,可以根据学生不同的情况,设计具体的内容。
网页的内容有待进一步充实,网页的美化也有待进一步完善。












