《HTML基础设计教案新部编本(共6页).doc》由会员分享，可在线阅读，更多相关《HTML基础设计教案新部编本(共6页).doc（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精选优质文档-倾情为你奉上教师学科教案 20 20 学年度 第_学期 任教学科：_任教年级：_任教老师：_xx市实验学校教案编写日期：2011年11月20日 授课时间：2011年11月21日-25日授课班级：高二3-8班 授课地点：高中微机教室第六章 HTML代码基础1.1 HTML语言指导思想与理论依据：HTML语言基础广西科学技术出版社信息技术高中第三册第一单元第六章“了解一点HTML”的入门知识，HTML语言是超文本标记语言的缩写 (HyperTextMarkupLanguage) ,它是网页设计中应用最广泛的一种语言，也是网页制作中学生感到最头疼难学的一个内容。掌握html语言基础会让
2、动态网页制作的学习事半功倍，因而本部分知识显得非常重要，因此在本节课程的教学中，结合新课标及教材的特点，采用多种教学法结合方式（启发式教学法、任务驱动法、演示法等等.），激发学生学习兴趣，尤其是注重对学生的引导，采用任务驱动方式教学，引导学生通过自主学习平台自主学习从而提高学生的学习效率，本节内容是在学生已经掌握了利用FRONTPAGE制作普通网页的基础上，对网页语言的深入学习。学情背景分析：本节之前，学生已经学习了如何利用FrontPage进行网页以及网站的制作，但是对于网页的认识还知识停留在页面的直观设计上，缺少对HTML代码的认识。本节课主要对学生讲述HTML的基本概念，为学生培养良好的
3、代码结构意识打下基础。在本节课程的教学中，结合新课改的理念，采用创设情境演示教学的方法，激发学生学习兴趣，采用任务驱动方式教学，引导学生通过自主学习平台自主学习从而提高学习效率。教学目标知识与技能：1、掌握HTML基本概念、格式，理解其与网页的关系；2、掌握基本的HTML标签的作用与用法；过程与方法：通过对简单网页html代码的观察对和html语言的基本结构进行自我概括，掌握HTML文件的基本结构，能够明确HTML语言的结构和特点，并能在实验的过程中尝试自我修改。情感态度价值观：本课主要锻炼学生分析能力，语言构成能力。在相应的实验中，还能提升学生自主探究、自我学习的能力。教学重点：HTML标签
4、的基本用法及其意义教学难点：HTML主要标签属性的具体意义及使用教学方法：任务驱动法（引导学生自主学习）、演示法（激发学生学习兴趣）、上机操作实习法（精讲多练 ）、联系对比法（化难为易，照葫芦画瓢）教学媒体：教材、多媒体课件、电脑等教学过程：教学内容及知识点教师活动学生活动备注HTML与网页的关系HTML与网页的关系前面的课程中我们都自己动手制作了自己的网站，我们知道网页上所包含的信息内容是丰富的，有文字、图片、动画、音频、视频（和同学一起回顾）下面我们来做个实验。上网查看任意一个网站的源文件。小结：无论是我们做的简单网页，还是包罗万象、功能强大的大型的网站，亦或包含动画、声音、电影等多媒体信
5、息的精美网页，它们的源文件都是HTML代码。什么是HTML代码呢？是用一种网页编写语言HTML语言编写的代码，那什么是HTML语言呢？这种语言与网页有什么关系，它有什么特征？如何用HTML语言设计网页代码？思考：网页的本质是？利用“IE” “查看”菜单中“查看源文件”的功能查看各种网页代码。大家认真观察并思考一下：这些代码有什么特点？它与我们的网页有什么关系？学生在老师的引导下通过老师的演示试验理解网页与HTML的关系。通过老师的演示试验活动形成自我体验。培养学生的观察与自我探究能力。利用幻灯片展示教学目标：1、掌握HTML概念，及其与网页的关系；HTML基本结构及四个基本标识利用幻灯片展示H
6、TML的概念。现在让我们一起来看看一个空白的网页是否有HTML代码，如果有，它们有些什么规律。（利用FRONTPAGE制作一张空白的网页，并查看源代码。）一个完整网页的HTML结构新建网页基本结构标签Html标记：头部信息：主体标记：HTML语言的特点：1、包含在中的标签语言；2、大多成对出现，以开始，以结束;3、书写上不区分大小写，可以在同一行也可不在同行，中间留空不限四大基本标示的功能：一、 指明文件内容是用HTML语言编写的，html文件中的所有文本和其他html标识都应包含在其内.二、 html将文件内容分成head和body两部分，head部分的内容一般是对网页文件所做的一些说明，如
7、页面标题等三、 用来指明页面的标题，显示在网页的标题栏中，这个标识必须放在head标识内四、 body是html文件的主体部分，在浏览器中看到的网页内容都放在body标识内.学生结合刚才的活动和老师一起学习HTML，思考一张空白的网页怎么也会有学多代码呢？利用FRONTPG自动生成HTML的功能，查看网页代码，为下面的自学铺垫。利用幻灯片展示教学目标：2、掌握HTML特点及其主体结构；3、掌握常见HTML TAG（标签）的作用与用法；4、能看懂普通网页的源代码，并能根据要求在文本编辑器中做适当修改。学生分组活动，进入自主学习平台进行自我探究学习请同学们进入自主学习平台学习更多的HTML代码知识
8、，并完成老师的布置的任务请同学们在老师的引导下进入本节新课栏目进行自主学习，然后完成下面的任务任务一：1、将老师传送到桌面的名为“练习”的文件夹改名为你自己的名字2、将桌面上已改为你名字的文件夹导入到FRONTPAGE中3、在Fronptage中双击首页index.htm文件并点击右下角“代码”进入HTML编辑状态：编辑首页HTML代码增加如下的页面效果：A、给首页添加背景图片（背景图片素材放在了下发文件夹中的images中，素材文件名为bj.jpg）B、给首页添加背景音乐（背景音乐素材放在了下发文件夹中的music中，素材文件名为sound.mp3）C、在首页的任意位置添加一个FLASH动画
9、（FLASH动画素材放在了下发文件夹中的FLASH中，素材文件名为game.swf，宽为500，高为500）D、保存并将整个文件夹进行作业提交学有余力的同学可以进行任务二的练习：任务二：编写代码使首页能增加如下左右交替滚动的字幕效果（演示任务完成后的效果）以刚才老师讲解的四个HTML基本标示为基础，进入学习平台自学更多的HTML代码知识学生边利用FRONTPAGE学习，边进行组内讨论互助学习通过自主学习平台进行自主学习、讨论协作学习、自我小结等多种方式，实施有效学习，分层学习，使每个同学能体会到学习的成就感。作品展示及学习情况演示老师对提交的作业作品展示及对出现问题的讲解比较其他同学的作品并自
10、己小结与展示同学作品的异同与优逆在评价中对学习方法与学习成果进行比较升华。小结和学生一起小结HTML的分类、特点与格式。任何HTML标记都是由“”号括住，标记名不区分大小写，语法宽松2、多数的标识是成对出现的 例如：3、少数标识单独出现，如：、等4、部分标识拥有属性如颜色，大小等 例如：属性格式：网页内容或学生回顾自身学习成果，在老师的指导下进行再次比较升华。这部分知识概念性、理论性较强，而且又是学生首次尝试在计算机中通过写代码的形式来实现设计目的，因此，老师进行适当的小结与讲解是有必要的。在线测试时间允许的情况下进行在线测评，难度与会考题同步学生在线进行约五分钟的测评考核让学生在线测评考核，考题结合会考难度及会考知识点可能出现的题目教学反思专心-专注-专业