动态HTML（复习）——CSS、JS的简单使用.docVIP

动态HTML（复习）——CSS、JS的简单使用 微课教学设计 江苏省大港中学 沈建国 说明：本教学设计为针对学业水平测试复习所用，因此重在知识的实际掌握，不考虑学生体验性的拓展运用。 学习者特征分析： 学生对网络技术应用类的知识学习较感兴趣，对所见即所得的网站设计与制作类软件（如FrontPage）在静态网页的操作时很容易通过实际摸索和知识迁移（类似于word）掌握相关知识。 但对于动态网页，学生虽然非常崇尚其精妙的效果，却很难深度掌握和运用，尤其体现在复习阶段——因为前期基础知识的脱档（遗忘），学生在遇到动态网页类的真题操作时感觉无从下手，苦于找不出快速应对的办法。 任务分析： 此类操作是要求学生在编辑制作网页工具（一般选用FrontPage软件）的“HTML”状态下，认清html的基本元素和结构，选用CSS样式表、JavaScript等固有的格式标签插入到html代码相对固定的位置中，以实现动态网页的基本效果。 教学目标： 《基础教育信息技术课程标准2012版》在“网络应用系统设计与开发”这一模块中，学习要求为“了解界面设计高级工具（如 CSS和 JavaScript的使用方法。）”；最新修订的《2014年江苏省普通高中信息技术学业水平测试说明》也明确对“CSS样式表、JavaScript的简单使用”的测试要求为B等级，即达到“理解水平和独立操作的水平”。 结合近年来学业测试水平的复习经验，最终将将教学目标设置为：对CSS样式表（一般为内联式）、JavaScript（一般为内部调用）知识的了解和灵活运用。 设计思路和意图： 学生在练习通过FrontPage（简称FP）制作网页时，熟悉的是所见即所得的“普通”状态，（），当遇到HTML状态（）中的成百上千行的代码时，很容易被“吓懵”而觉得无从下手，首先在心理上便溃败了。 在高一学生刚刚接触这一部分知识的学习时，有经验的教师一般会要求学生学习借助记事本输入HTML代码的基本元素，然后通过文件格式更换的形式（将文件扩展名TXT更换为HTML）将其转变为网页，使学生对其中的head、title、body等区块的作用有基本认识，同时熟悉HTML代码的基本结构和格式规范。 基于此，在复习阶段设计了“快速呈现此部分知识唤醒学生之前的学习储备”的方法，在此基础上再介绍CSS样式表、JavaScript的摆放位置，排除其他无关代码的干扰，减轻学生学习的焦恐心态，提高学习效率。 教学过程： 向学习者明确教学目标——CSS样式表的简单使用；Javascript的简单使用。 呈现考试真题： 具体学习（复习）： 回顾HTML代码的基本结构： 具体实施方法：打开记事本，输入如下基本内容（逐字输入，唤醒学生对之前学习的认识）。具体如下： 输入完成后，教师语言描述HTML的基本元素主要有：html、head、title、body等。标记（开头）用(英文状态下)、结尾用/ 表示，两两须严格配对、可嵌套。 同时强调：HTML的整体结构主要由头部分（head，即head……/head）和主体部分（body,即body……/body）组成。 解析CSS样式表练习做法： 内联式CSS样式表的格式为——（板书：） 提示：CSS代码一般放在html的头部分（head……/head）； 板书中的CSS代码蓝色标记头部分需要熟记。 CSS实例操作演示练习第17题（前页图下半部，体现操作过程，边解说边操作）。 类比解析CSS样式表练习做法： JavaScript（页面内调用）格式——（板书：） 提示：JS代码一般放在html的主体部分（body……/body）； 板书中的JS代码蓝色标记头部分需要熟记。 JS实例操作演示练习第16题（前页图上半部，体现操作过程，边解说边操作）。 说明：因有前一次演示的基础，JS的实例演示速度可稍快一些。 学生练习（巩固）：操作题中含CSS样式表、JS代码的相关题目。 自主性教学评价（反思）： 1、本设计主要针对复习课的内容特点，直接利用试题示例和操作，吸引学生关注力的同时，也便于教师的讲解和实际操作。 2、本设计用于动态网页技术（CSS样式表和Javascript）的实例操作部分（操作题），重在让学生突破操作难点，因此在选择内容时忽略了外联式CSS样式表的介绍（掌握要求为了解程度，能够了解其基本特点即可）。外联式样式表需要在其他学习层面介绍。 3、以上教学过程中，板书的作用非常重要。因此若做成微课视频的形式进行实际应用，可以把板书内容另做成图片的形式单独存放和浏览，便于学生对照学习，提升其学业成就感。 style type=”text/css” CSS语句 /style Head部位 Body部位 script language=”javascript” JS语句 /script