用Html做制作静态网页教案.docx

用Html做制作静态网页教案.docx

《用Html做制作静态网页教案.docx》由会员分享，可在线阅读，更多相关《用Html做制作静态网页教案.docx（11页珍藏版）》请在冰豆网上搜索。

用Html做制作静态网页教案

用Html做制作静态网页_教案

_____用Html做制作静态网页_____教学设计

课题名称

用html制作一个静态网站

设计者

专业类别

课时

3

使用教材

教学对象

中职二年级学生

教学目标

1.知识与技能

a）掌握html制作页面的方法；

b）理解html制作网页的标签；

c）灵活运用各类标签制作各式的网面。

2.过程与方法

a）教师和学生共同分析页面的构成，它是由几部分构成，每部分该怎么做；

b）通过教师实际操作演示、学生自主探究实践，由浅入深，完成一系列任务，使学生熟练掌握html标签的运用。

3.情感态度与价值观

体会创作的乐趣，提高学生对制作页面的兴趣，在学习过程中学会交流，学会扩展创新。

教学内容

只用html制作一个静态的网站

教学难点与重点

重点：

灵活运用各类标签。

难点：

掌握建页的思维方式。

学习者

特征分析

该课面向中职二年级动画专业学生，经过了中一一年的学习与调整，同学们已经具有一定的自学能力，对动画历史及发展有了一定的了解，但是由于他们是中专的学生年龄还小，学习能力自觉性约束力还是稍有欠缺。

教学模式

与策略

演示教学法、任务驱动

教学媒体

选择

计算机（一般的配置就可以了，因为没有涉及到iis服务器sql等的运用）

【教学过程】

教学环节

教师活动

学生活动

设计意图

引入

（5min）

【教师提问】：

大家平时都喜欢浏览网页吗,对网页有什么要求?

这节课通过上几节课的教学，运用我们手上紧有的标签知识制作一个静态的网页，熟练掌握方法后我们能布局任何的页面

【学生回答】：

网速快，页面漂亮，简洁…..

这个过程是引入话题，提高学生学习的兴趣。

任务一：

分析结构（5min）

分析主页（index.html）的结构：

两个部分hand+body（里面有两个部分）即一个片头flash+logo和字+Enter

分析第一页（intro.html）结构：

hand+body（有三个内容）

观看老师操作并自主实践。

分析难度，逐级深入，引导学生形成自己的思维方法。

分析制作整个静态网站的结构（5min）

分析任务二：

制作hand（5min）

【教师问题】：

我们上节课是怎么建网页的标签的首先要有那些？

操作演示:

1、在website文件夹里建一个text文本，然后把文件名改为index.html。

2、首先写上：

>

【回答】：

>

边看边操作

引导学生对有整体的模型。

分析任务三：

制作背景（2min）

【教师提问】：

然后我们要做什么bg先还是其它？

操作演示:

添加背景：

【学生回答】：

bg。

引导学生形成自己的建模思维。

任务四:

制作页面主体（10min）

【教师问题】：

bg做好后我们就要进行主体的制作，我们要用那个标签最简单？

操作演示:

1、制作主体_1：

2、、制作主体_2:

3、制作主体_3：

ENTER

【学生回答】：

引导学生形成自己的建模思维。

任务五：

整体测试（2min）

教师巡视、指导

【教师提问】：

大的模型已经做好了，还有那些细节？

在IETester用不用版本的浏览器进行测试。

【学生回答】：

测试。

引导学生形成自己的思维方式。

第一部分总结：

（3min）

1、标签的选择

2、很重要的，就是要一边制作一边测试，而不是制作完了再测试。

任务六:

制作hand（5min）

1、在website文件夹里建一个text文本，然后把文件名改为intro.html。

2、首先写上：

>

分析任务7：

制作背景（2min）

添加背景：

任务八：

制作页面主体（10min）

1、主体_1：

2、主体_2：

3、主体_3：