《“探究”在网页制作教学中的尝试》由会员分享,可在线阅读,更多相关《“探究”在网页制作教学中的尝试(7页珍藏版)》请在金锄头文库上搜索。
1、“探究” 在网页制作教学中的尝试设计者 叶胜利 单位 浙江省温州市瓯海区任岩松中学e_mail 适应范围 浙江教育出版,高一信息技术,网页制作课时 第1课时高一信息技术(浙教版,批准文号:浙价教材批20041号)中的“网页制作”部分,虽然内容不多,却是重点内容,而且随着近几年会考变化的动向,网页制作的重点位置越来越明显,占的比例也越来越大,最新的“2006年高中信息技术会考导引”中的例卷,IE操作部分内容为30分,而网页制作部分占了20分(05年为15分)。高一现阶段网页制作虽然是通过可视化的软件,如FrontPage、DreamWeaver MX等软件来完成,其优点是所见即所得的编辑,方便了
2、整个网页的排版布局。但是,书本同样指出:“一个网页文件只是一个纯文本文件。”(P69);同时,在“试一试”中也多次提到让学生查看某一对象的代码!由此可见,课程改革已经隐性的要求学生能够看懂部分简单的HTML语言代码!对学生而言,在理解上显然是一个难点。就网页而言,网页的布局是整个网页成功的关键,而布局是由表格来完成的,因此,掌握表格的插入和表格属性修改,也就成了网页制作首要任务。故笔者设计表格为这节课的重点。另说明,这节是网页制作课的第一课时。本校属于温州市的一个省二级重点中学,学生应该属于本地中上水平,同时温州的经济原因,家里基本上都有电脑!也都有一定的上网时间。所以,笔者想尝试探究方式的教
3、学,以便进行研究。(注:笔者在研究的一个关于“信息技术学习方法”方面的课题)为了适应瞬息变化的信息技术软件,培养学生的动手实践能力,掌握一定的信息技术学习方法,同时锻炼学生独立学习信息技术中各种不同软件的能力,提高学生探索问题的意识。笔者设计和实施本课教学流程如下:本设计的特点是:以“演示+陈述”为方法,重在引导学生从简单入手,通过对比来发现问题、解决问题;提出“局部改变法”和“对比法”相结合,探索未知知识;进一步延伸“局部改变法”,结合“对比法”,学习简单HTML语言。一、教学目标:1、知识目标:、知道网页文件实质是超文本标记语言组成的纯文本文件、通过演示,知道表格如何插入、运用局部改变法和
4、对比法,掌握表格属性修改,看懂表格的HTML代码2、能力目标:通过演示和陈述,引导学生运用局部改变法和对比法相结合进行探索实践,提高学习未知知识的能力,为学习瞬息万变的信息技术软件打下一定的基础。3情感目标:体会实践出真知的道理二、教学重点:表格属性的修改三、教学难点:1、建立网页文件是纯文本文件的观念2、表格属性对话框的各种属性设置四、教学方法:演示、对比、探索、实践五、教 具:教师机、Web服务器、学生机、教学控制软件、素材六、教学过程(一)、建立网页文件是纯文本文件的观念在学习网页下载保存时,我们发现网页中的图片并没有在下载下来的网页文件中,而是独立的被放在了特定的文件夹中。这一结果,和
5、各位同学预料的有很大不同(讲解网页保存时的课堂情景)。相信,各位同学对此有所疑问或不解。今天,我们就来讲讲网页文件的实质,以帮助大家解决心中的疑惑,同时,也开始初步学习网页制作。首先解决一个疑问:是不是网络上的页面下载下来后,页面中的图片都会被保存到特定的文件夹中,还是就网页文件中的图片是如此?实践方案:从网络上下载两个页面,一个是doc的word文件,一个是htm网页文件,对比页面中的图片是否都被保存到特定的文件夹中。(大多学生在初中学过word,对word文件已经有一定的认识) 注:网页截图见后面附录截图1学生实践:下载word文件和网页文件,对比各文件中的图片在哪里结果对比:_(学生比较
6、)得出结论:_(学生回答)总结1:在初中我们学过,word文件中的图片和word文件是一个整体,而网页中的图片下载结果是保存在网页文件外面,显然和word文件中插入图片是不同的。时间控制:5分钟上面的实践让我们得出了一个结论,同时也产生了另一个疑问:既然图片没有被真正放进网页中,那么,他是如何在网页中显示出来的?我们在讲IE浏览器时,曾经看过网页的源文件(IE查看源文件),那么我们不妨就从源文件入手,看看网页的真面目。提示:研究问题,应该抓住问题关键,从简单入手,查看只有图片的网页源文件。实践方案:查看只包含图片,但图片数量不同的网页,对比其中的源文件代码(网页课前准备好,放在Web服务器上,
7、以便学生浏览)注:相应网页及代码请看后面截图2、图3、图4学生实践:用IE分别打开三个网页,1个是空白没有内容的页面,第2个是只有1张图片的页面,第3个是只有2张图片的页面,分别对比它们源代码中不同的部分。结果对比:_(学生比较)得出结论:_(学生回答)总结2:从简单入手,分析、比较是学习信息技术常用的一种方法。从上面的比较我们发现,图片在网页中显示,其实是通过一段代码来实现的。这种代码,我们称为超文本标记语言,也叫HTML语言。它们其实都是一般的文字,所以,网页文件实质上是由这些代码组成的纯文本文件。时间控制:5分钟(二)、使用FrontPage2000制作网页虽然说,我们如果掌握了HTML
8、语言,应该可以在文本文件中通过输入HTML标记语句编辑网页,但是,由于这样做很不直观,很难让人想象成品的网页是什么样式。因此,在初期制作网页,都会借助网页制作软件,如FrontPage2000,DreamWeaver MX等。启动FrontPage2000:和以往启动软件的方法相同开始程序MicroSoft FrontPage 2000插入图片,修改代码,验证“网页中图片是通过标记语言被引用进来的”这一结论。实践方案:学会插入图片后,插入图片,查看分析HTML代码,并做局部代码修改,以达到改变被插入的图片源,从而验证代码引用外部图片文件的正确性。教师演示:打开FrontPage,分步骤插入图片
9、,插入1张图片和没有图片的网页比较,代码有什么不同;插入2张图片和1张图片的网页比较,代码有什么不同;插入2张不同文件名的图片和2张同文件名的图片的网页比较,代码有什么不同。(这里演示是为了示范“局部改变法”和“比较法”,以便下面能够模仿,进行实践探索)结果对比:_(学生比较)得出结论:(写出代码中的重要部分,并解释这部分代码含义) (学生总结,教师辅助)时间控制:78分钟表格的插入和属性修改如果我们直接在网页中插入图片,会发现图片的位置会很难调整到理想位置。那么,如何能够更好的安排网页的布局呢?现实生活有很多例子可以给我启发,比如手抄报,黑板报等等,都是先用表格打好框架,然后才在表格的不同位
10、置填写内容。事实上,空白网页就相当于一张空白的手抄报,也是要先进行表格布局,下面我们就来讲讲如何插入表格。问:在FrontPage窗口菜单中,什么菜单最有可能用来插入表格。(让学生有意识的了解各菜单的大致作用,有利于提高学习相类式的软件的能力)学生回答:插入菜单、表格菜单师:(演示)表格的插入在表格菜单中。不过表格菜单中除了插入表格之外,已经没有其他对象的插入了,可见,除了表格之外,其他对象在FrontPage中都是由插入菜单完成!比如前面讲的图片插入,就是由插入菜单来完成的。插入表格后发现,插入的表格总是几行几列,很规则。和实际需要的往往有一定差距,可见需要我们对表格进行调整,才能作出接近实
11、际需要的表格。下面是为了掌握表格属性修改而设计的方案及任务,请通过实践探索、进行比较,整理出你的结论:方法:从简单入手,采用“局部改变法”和“对比法”实践方案:在网页中插入两个独立的表格,表格1和表格2(有必要时可再插入表格),对表格2属性进行局部改变,从表格表现出来的变化,总结出这项属性设置的作用!任务1:改变属性中的对齐方式,看表格表现出来的变化,总结对齐方式是相对什么而言的?_(学生总结)任务2:改变表格宽度为90%,表格宽度有什么变化?这个90%大小是相对什么而言的?_(学生总结)任务3:边框粗细改为0,和粗细为1比较,有什么区别?(如果不能得出结论,可以提示在预览里看看他们的不同效果
12、)_(学生总结)学生:实践探索,总结个人结论 时间控制:10分钟总结:教师进行必要的概括运用“局部改变法”和“对比法”,探索发现表格的HTML语句表示方法。前面我们讲过,网页内容实质上是一些HTML语言代码,那么表格在HTML语言里是怎么表示的?方法:从简单入手,利用“局部改变法”和“对比法”,找出表示表格的 HTML语言。实践方案:(注意,为了不被前面插入的表格影响,都在一个空白的网页中完成)1、在空白网页中插入最简单的一行一列的表格,和空白网页代码比较,找出表示表格的代码。_(学生总结)验证:复制找出来的这段代码,如果网页中变成2个表格,说明这段代码确实是表示一个一行一列的表格。_(学生总
13、结)2、在空白网页中插入一个二行一列的表格,和一行一列的比较,找出表示行的代码。_(学生总结)验证:复制找出来的这段代码,如果网页中的表格行增加了,说明这段代码确实是表示行。(也可以删除这段代码,如果少了一行,也可以说明问题)3、在空白网页中插入一个一行二列的表格,和一行一列的比较,找出表示列的代码。_(学生总结)验证:复制找出来的这段代码,如果网页中的表格列增加了,说明这段代码确实是表示列。(也可以删除这段代码,如果少了一列,也可以说明问题)4、通过上面的分析,你现在能用代码将一个一行一列的表格,变成二行二列的表格吗?写出代码 (学生总结)5、在表格的一个单元格中输入文字内容,这段文字是在代码的哪个部分?_