《建立超链接》教学设计

《建立超链接》教学设计一、教学设计部分教学内容分析本课的主要内容与地位网页的学名是HTML（即：超文本文件），从本质上说网页只是一个文本文件，超文本的意思即含超级链接的文本文件。网页中所有丰富的元素都是通过链接实现的，用一段文本文件告诉浏览器图片或者声音的位置，然后浏览器会自动加载到网页中显示，但网页本身仍然没有嵌入任何非文本的文件。超链接是网页赖以存在的基础。理解超链接的原理、熟练地使用超链接是一个合格的网站建设者必须具备的能力。本课与前后内容的关系学习超链接的相关知识，是对前面几课制作的几个孤立网页的有机整合。只有通过超链接，由网页组成的集合才能被称作网站。教学目标分析知识目标/技能目标知识目标理解超链接的概念。理解导航栏在网页设计中的重要性。技能目标掌握在网页中插入超链接的一般过程；熟练掌握将链接指向站点内、站点外和电子信箱的一般方法；学会在网站内设置导航栏。过程与方法目标能够根据实际需要，选择不同的网页素材、建立不同的链接。情感态度与价值观目标体会万物皆有联系，加强与父母、老师和同学之间沟通和交流，虚心听取别人的意见，不至于在自己的成长过程中迷失方向。本课的重难点重点：“创建超链接”对话框；标签链接。难点：导航栏的设置。本课的课时分配建议一课时教学策略设计建议教法建议本课是第一单元的重点和难点，教学中建议采用将学生进行分组，不同级别的学生完成不同的探究任务。其中包括：站点内的超链接、到外部站点的超链接、到电子邮箱的链接和到应用程序或文档的链接，以及选择不同的网页素材（文字、图片）作为链接对象的操作方法。在学生的学习过程中，教师应指导学生实时进行网页的预览，以体验不同链接的不同作用。对实践中遇到的如OutlookExpress的使用问题，教师可在讲解知识点时做简单介绍。讲解设置导航栏部分时，教师可指导学生回顾第二课设置网页模板的相关知识。教学资源与环境建议教学环境准备建议1．保证每台学生机能够连接Internet或虚拟网络环境；2．学生机安装OutlookExpress。教学评价建议自评、互评、师评要注意的问题在任务驱动、协作探究的教学过程中，学生是否顺利地建立了各种超链接；在教师的指导下，各任务小组的学生能否相互协作。教学过程参考案例第一阶段：导入新课，明确学习目标教学环节教师活动学生活动设计理念导入新课引导学生“读一读”。师：“超链接”是网页存在的基础，否则因特网也不会如此绚丽多彩，我们也不可能完成网页的浏览。如何设置超链接将是我们这一节课要学习的主要内容。阅读材料由“阿拉丁与神灯”的童话引出超链接的概念，让学生通过对童话中情节的想像理解这一概念，激发学习兴趣。第二阶段：范例精讲，学生自主探究，完成范例教学环节教师活动学生活动设计理念学习与探究师：如果我们去旅游，需要确定哪几件事情？（起点、目的地以及交通工具）师：今天我们学习的超链接的设置与我们的旅游类似，也要指定三个要素：起点（文字或图片）、目的地（到的目标）以及链接方式（协议）。请大家参照教材提示打开“创建超链接”对话框，然后完成以下任务：一、建立站点内的链接师：根据教材中“做一做”的要求，完成相应链接。二、建立到其它网站的链接师：根据教材P？？页“做一做”要求完成相应链接。教师强调：以上两种链接方式链接对象可以是网页，也可以是应用程序、图片、音生：回答问题参照教材提示，打开Index．htm文件，选定文字或图片，打开“创建超链接”对话框。完成相应操作分组打开网页Domain．htm，将网页中“我要下载”链接目标指向多种设置超链接都是在同一个对话框中进行，所以这部分操作是相同的。知识的拓展，让学生知道超链接目标的多样性。频、视频等类型的文件，只不过打开链接的方式会有所不同。三、建立到邮箱的链接师：设置到邮箱的超链接，观察与前面两种链接的区别。师：预览网页时，观察打开三种链接方式的不同之处。四、建立到书签的链接师：因内容关系，有的网页可能需要几屏才能全部显示，这时需要我们建立网页内部的超链接，这就是书签链接。步骤一：建立书签步骤二：建立到书签和链接师：预览网页，观察是否还有缺陷？该怎么改进？五、设置网站导航栏师：根据教材提示，结合第二课网页模板设置网站的导航栏。文件类型，讨论不同类型的链接目标打开时的区别。操作，观察针对Domain．htm插入书签，并建立到书签的链接。分组讨论存在的问题。分组讨论导航栏的设置方法。通过预览强化记忆。由学生思考得出建立返回页首的书签链接。非重点知识，不深入讲解。第三阶段：知识、情感拓展教学环节教师活动学生活动设计理念知识与情感师：网页中的超链接将因特网资源形成一个有机的整体，网页间能够方便地相互访问，给我们带来了方便；在你的成长过程中，又有多少人为你的成长付出了艰辛和努力呢？你和他们进行过联系和沟通吗？请你采用不同的方式与他们进行交流，表达你的感恩之情。通过书信、电子邮件、电话、QQ等通信方式与人交流，表达感恩之情。体会万物皆有联系，加强与父母、老师和同学之间的交流与沟通。第四阶段：综合实践，巩固与提高，自由创作，迁移运用教学教师活动学生活动设计理念环节实践与创新一、打开Neighbor．htm，进行相关超链接的设置。二、打开Parents．htm，修改网页内容，将前几课的网页Feeling1．htm～Feeling3．htm作为网站的三级网页。三、尝试改变超链接文字三种状态的颜色。根据要求完成操作，并对超链接做一下总结。完善网站的二、三级网页，逐步形成一个完整的网站，以用后续工作（网站发布）的展开。第五阶段：教学总结，设疑激趣，为下一节课作好铺垫教学环节教师活动学生活动设计理念课堂小结课堂小结本节课的学习内容。师：学习完本节课的内容，网站已经初具规模。但是，小宇的愿望实现了吗？我们在Internet上能够访问到吗？师：如果不能访问，我们怎样才能实现这个愿望呢？师：请同学们课后预习第六课的内容──网站的发布与维护。回顾，总结思考，尝试以小宇建站的主线贯穿整个单元，以问题的形式激发学生学习新知识的兴趣。教学反思超链接是网页中最显著的特征，也是网页设计中的重点和难点。在教学过程中，应注重让学生通过实践理解超链接的概念，并熟练运用。二、补充资料部分1．课件与学件学生用学件名称文件名设置站点内的超链接超链接1．swf建立到其它站点的链接超链接2．swf建立到邮箱的链接超链接3．swf建立书签链接超链接4．swf2．资料库用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,从而让用户看得更清楚。接下来我们还可以根据自己的爱好来设置喜欢的颜色以及其他样式。通过内含式样式表的使用，我们很轻松地美化了搜索框。