当前位置:首页>>信息技术>>教师之家>>教学资源>>初中·教学资源>>教学案例与设计

  一、教学设计部分

 

教学内容分析

 

  本课的主要内容与地位

 

  网页的学名是HTML(即:超文本文件),从本质上说网页只是一个文本文件,超文本的意思即含超级链接的文本文件。

 

  网页中所有丰富的元素都是通过链接实现的,用一段文本文件告诉浏览器图片或者声音的位置,然后浏览器会自动加载到网页中显示,但网页本身仍然没有嵌入任何非文本的文件。

 

  超链接是网页赖以存在的基础。理解超链接的原理、熟练地使用超链接是一个合格的网站建设者必须具备的能力。

 

  本课与前后内容的关系

 

  学习超链接的相关知识,是对前面几课制作的几个孤立网页的有机整合。只有通过超链接,由网页组成的集合才能被称作网站。

 

教学目标分析

 

  知识目标/技能目标

 

  ·知识目标

 

  理解超链接的概念。

 

  理解导航栏在网页设计中的重要性。

 

  ·技能目标

 

  掌握在网页中插入超链接的一般过程;

 

  熟练掌握将链接指向站点内、站点外和电子信箱的一般方法;

 

  学会在网站内设置导航栏。

 

  过程与方法目标

 

  能够根据实际需要,选择不同的网页素材、建立不同的链接。

 

  情感态度与价值观目标

 

  体会万物皆有联系,加强与父母、老师和同学之间沟通和交流,虚心听取别人的意见,不至于在自己的成长过程中迷失方向。

 

  本课的重难点

 

  重点:“创建超链接”对话框;标签链接。

 

  难点:导航栏的设置。

 

  本课的课时分配建议

 

  一课时

 

教学策略设计建议

 

  教法建议

 

  本课是第一单元的重点和难点,教学中建议采用将学生进行分组,不同级别的学生完成不同的探究任务。其中包括:站点内的超链接、到外部站点的超链接、到电子邮箱的链接和到应用程序或文档的链接,以及选择不同的网页素材(文字、图片)作为链接对象的操作方法。

 

  在学生的学习过程中,教师应指导学生实时进行网页的预览,以体验不同链接的不同作用。对实践中遇到的如Outlook Express的使用问题,教师可在讲解知识点时做简单介绍。

 

  讲解设置导航栏部分时,教师可指导学生回顾第二课设置网页模板的相关知识。

 

教学资源与环境建议

 

  教学环境准备建议

 

  1.保证每台学生机能够连接Internet或虚拟网络环境;

 

  2.学生机安装Outlook Express

 

  教学评价建议

 

  自评、互评、师评要注意的问题

 

  在任务驱动、协作探究的教学过程中,学生是否顺利地建立了各种超链接;

 

  在教师的指导下,各任务小组的学生能否相互协作。

 

教学过程参考案例

 

  第一阶段:导入新课,明确学习目标

教学

环节

教师活动

学生活动

设计理念

导入新课

引导学生“读一读”。

 

师:“超链接”是网页存在的基础,否则因特网也不会如此绚丽多彩,我们也不可能完成网页的浏览。如何设置超链接将是我们这一节课要学习的主要内容。

阅读材料

由“阿拉丁与神灯”的童话引出超链接的概念,让学生通过对童话中情节的想像理解这一概念,激发学习兴趣。

 

  第二阶段:范例精讲,学生自主探究,完成范例

教学

环节

教师活动

学生活动

设计理念

学习

 

  与

 

  探究

师:如果我们去旅游,需要确定哪几件事情?(起点、目的地以及交通工具)

 

师:今天我们学习的超链接的设置与我们的旅游类似,也要指定三个要素:起点(文字或图片)、目的地(到的目标)以及链接方式(协议)。请大家参照教材提示打开“创建超链接”对话框,然后完成以下任务:

 

一、建立站点内的链接

 

师:根据教材中“做一做”的要求,完成相应链接。

 

二、建立到其它网站的链接

 

师:根据教材P??页“做一做”要求完成相应链接。

 

教师强调:以上两种链接方式链接对象可以是网页,也可以是应用程序、图片、音频、视频等类型的文件,只不过打开链接的方式会有所不同。

 

三、建立到邮箱的链接

 

师:设置到邮箱的超链接,观察与前面两种链接的区别。

 

师:预览网页时,观察打开三种链接方式的不同之处。

 

四、建立到书签的链接

 

师:因内容关系,有的网页可能需要几屏才能全部显示,这时需要我们建立网页内部的超链接,这就是书签链接。

 

步骤一:建立书签

 

步骤二:建立到书签和链接

 

师:预览网页,观察是否还有缺陷?该怎么改进?

 

五、设置网站导航栏

 

师:根据教材提示,结合第二课网页模板设置网站的导航栏。

 

生:回答问题

 

 

 

参照教材提示,打开Indexhtm文件,选定文字或图片,打开“创建超链接”对话框。

 

 

完成相应操作

 

 

 

  

 

分组打开网页Domainhtm,将网页中“我要下载”链接目标指向多种文件类型,讨论不同类型的链接目标打开时的区别。

 

操作,观察

 

  

 

  

针对Domainhtm插入书签,并建立到书签的链接。

 

分组讨论存在的问题。

 

  

 

分组讨论导航栏的设置方法。

 

 

  

 

设置超链接都是在同一个对话框中进行,所以这部分操作是相同的。

 

  

 

  

 

 

  

 

知识的拓展,让学生知道超链接目标的多样性。

 

  

 

  

 

 

通过预览强化记忆。

 

  

  

 

  

 

由学生思考得出建立返回页首的书签链接。

 

  

 

  

 

非重点知识,不深入讲解。

 

  第三阶段:知识、情感拓展

教学

环节

教师活动

学生活动

设计理念

知识与情感

师:网页中的超链接将因特网资源形成一个有机的整体,网页间能够方便地相互访问,给我们带来了方便;在你的成长过程中,又有多少人为你的成长付出了艰辛和努力呢?你和他们进行过联系和沟通吗?请你采用不同的方式与他们进行交流,表达你的感恩之情。

通过书信、电子邮件、电话、QQ等通信方式与人交流,表达感恩之情。

体会万物皆有联系,加强与父母、老师和同学之间的交流与沟通。

 

  第四阶段:综合实践,巩固与提高,自由创作,迁移运用

教学

环节

教师活动

学生活动

设计理念

实践

创新

一、打开Neighborhtm,进行相关超链接的设置。

 

二、打开Parentshtm,修改网页内容,将前几课的网页Feeling1htmFeeling3htm作为网站的三级网页。

 

三、尝试改变超链接文字三种状态的颜色。

 

 

根据要求完成操作,并对超链接做一下总结。

完善网站的二、三级网页,逐步形成一个完整的网站,以用后续工作(网站发布)的展开。

 

  第五阶段:教学总结,设疑激趣,为下一节课作好铺垫

教学

环节

教师活动

学生活动

设计理念

课堂小结

课堂小结本节课的学习内容。

 

师:学习完本节课的内容,网站已经初具规模。但是,小宇的愿望实现了吗?我们在Internet上能够访问到吗?

 

师:如果不能访问,我们怎样才能实现这个愿望呢?

 

师:请同学们课后预习第六课的内容──网站的发布与维护。

回顾,总结

 

 

思考,尝试

 

  

以小宇建站的主线贯穿整个单元,以问题的形式激发学生学习新知识的兴趣。

 

教学反思

 

  超链接是网页中最显著的特征,也是网页设计中的重点和难点。在教学过程中,应注重让学生通过实践理解超链接的概念,并熟练运用。

 

  二、补充资料部分

 

1.课件与学件

 

  学生用学件

名称

文件名

设置站点内的超链接

超链接1swf

建立到其它站点的链接

超链接2swf

建立到邮箱的链接

超链接3swf

建立书签链接

超链接4swf

 

 

2.资料库

 

FrontPage2000做样式表

 

  Dreamweaver以其强大的功能正在扩张到更多“网虫”的硬盘里,然而Dreamweaver的样式表(CSS)设置方面太专业了。经过N次下载、安装,到头来我才发现原来最容易使用的早已在自己的手中,那就是被我封存很久的FrontPage2000。下面就让我带领大家一块来分享傻瓜化”软件带来的快乐吧。

 

  一、三种添加CSS的方式

 

  在FrontPage2000里可以通过三种方式给网页增加样式表。

 

  1.页面链接一个外部的样式表文件,这种方法可以使多个页面使用同一个样式表文件,方便保持页面的主题。

 

  步骤:启动FrontPage2000,然后执行“文件à新建à网页”命令,打开FrontPage2000的新建对话框,选择“样式表”选项,其中有FrontPage2000自带的很多样式表供参考。当然如果你对CSS熟悉的话,也可以使用空白的样式表,自己重新创建一个。

 

  2.通过在FrontPage2000创建一个样式表单,此时样式表就是网页的一部分,直接位于HTML文档的之中。这个实际上不算创建,只要把已经创建好的样式表直接复制下来,然后选择网页编辑的“html”选项,然后粘贴到<HEAD>之间就可以了。

 

  3.通过使用内含样式表元素,单独指定样式表。在FrontPage2000编辑一个页面的时候,只要选中要发生变化的文字,然后点击右键,选择"网页属性"就可以随时随地进行可视化操作了。

 

  二、内含式样式表的使用

 

  下面就以修改美化一个搜索框为例,给大家介绍一下内含式样式表的使用。

 

  打开FrontPage2000,然后调入这个页面。接下来对输入框进行处理:选中那个最长的输入框,接着右击,然后选择"表单域属性",出现文本框属性。

 

  单击“样式”,接着单击“格式”中的“边框”按钮,出现边框与阴影对话框。

 

  因为要保持表格的统一,我们在“设置”中选择“自定义”,然后选择“样式”中的“实线”。最重要的就是应用边框的设置。点击方框,四周出现的四个小按钮分别代表着文本输入框的四条边框。为了和文本输入框外面的表格统一,这里的宽度也选择为“1”,然后“确定”。

 

  右击搜索按钮,选择“超链接属性”,就会出现窗口。

 

  单击“样式”按钮,再选择“浏览”,插入我们事先做好的搜索图片。

 

  选中那四个字然后右击,选择“超链接属性”,弹出Windows窗口。

 

  选择“背景”选项,然后选中“启用超链接翻转效果”,然后单击“翻转样式”,弹出新的Windows窗口。

 

  在这里,我们可以一目了然地设置要实现的翻转效果。为了突出“搜索帮助”四个字,我们把字体设置成12pt,这样当鼠标放上去的时候,字体就会从9pt变成12pt,从而让用户看得更清楚。接下来我们还可以根据自己的爱好来设置喜欢的颜色以及其他样式。通过内含式样式表的使用,我们很轻松地美化了搜索框。

    
【上一篇】
【下一篇】