《“探究”在网页制作教学中的尝试》由会员分享，可在线阅读，更多相关《“探究”在网页制作教学中的尝试（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、在表格的一个单元格中输入文字内容，这段文字是在代码的哪个部分？_
