高中网络技术应用html语言,4.1.3 选择网页制作工具新颖的课程导入教案

HTML语言

一、教学内容分析和设计

本次课是教科版高中技术选修“4.1.3 选择网页制作工具”中的第1部分内容，主要是基于必修的网页制作基础学习学习HTML语言知识，由于在前面学习“所见即所得”网页制作方法的时候简单介绍过frontpage2003的代码工作模式，因此学生对HTML也算是“有所耳闻”的。同时，学习HTML语言对于后继学习CSS\javascript等内容也会奠定很好的基础。因此可以说，HTML语言的学习起到了一个承前启后的作用。

二、教学对象分析

授课对象主要为高一学生，经过了解，他们绝大部分对“代码”这个词没有什么概念，更没有使用过“代码”，最多也就是听说过而已。因此，总体来说，相当于是“零起点”教学。

三、教学目标

1、知识与技能：了解HTML语言的相关知识及用法

2、过程与方法：学会使用HTML语言制作网页；能够读懂简单的网页代码

3、情感态度与价值观：通过代码的学习过程，培养学生细致认真的做事风格；在制作网页的过程中，学生进行小组合作，培养其团队意识和协作精神；提升学习代码的热情和兴趣，引导其将来争取为国家的IT事业做贡献。

四、教学重点：

HTML语言的识别，HTML语言的使用方法

五、教学难点：

HTML语言的使用方法

六、教学方法

探究法、讲授法，任务驱动法，小组合作

七、教学过程

(一)新课导入

【师】同学们，我们前面学习过利用“所见即所得”工具制作网页，通过这种方法，大家已经基本掌握了网页的制作原理和方法，实际上，制作网页除了利用软件工具之外，还有一种方法：利用代码，今天我就一起来学习下如何利用代码制作网页。

(说明：在讲解的时候，同时利用PPT展示两张图像，一张是同学之前做的静态网页，没有交互功能；另一张是申请QQ账户的动态网页，可以实现交互。)

【师】通过两张不同的网页的功能，我们可以发现，要想和网页之间实现互动，必须要使用“代码”。

(二)新课讲解

1、HTML文件的基本结构

2、HTML中的基本元素

【插入】——基本知识

(1)图片

src=images/1.jpg>

表示图像文件的位置

属性值：border:图片边框，src:图片路径，width:图片的宽，height:图片的高

例：

(2)文字

①一般文字设置 文字 属性值：size:大小， face:字体， color:颜色

例：要显示的文字 ②、标题字体

# =1，2，3，4，5，6 例：

今天天气真好！

③、其它设置，如：

下划线：文字

粗体：文字

斜体：文字

(3)

表示水平线

属性值：size:高度(粗细)，color:颜色，width:宽

例：

(4)滚动：文字或图片 属性：behavior:指滚动方式，可以是scroll、slide或alternate

direction：指滚动方向，可以为up、down、left和right四个。

(5)插入一个空行：

插入一个段落:

(6)对齐方式：

对象 特殊：对象居中 文字或图片 (说明：此处主要是采用讲授法，由教师先讲解，把概念以及一些基本代码的简单用法进行演示，帮助学生顺利适应“用代码制作网页”的课程)

【小试牛刀】

(1)给网页添加文字“欢迎进入HTML世界”，设置文字居中对齐、黑

体、7号；

(2)在文字下方插入一水平线，设置高度为4，颜色#ff6600，宽度80%；

(3)在水平线下插入一幅gif格式的图片(图片自由选择),设置图片从左向右滚动；

【一起来找茬】

(说明：以上代码为教师在巡查过程中发现学生的各种错误情况，并当场将这些错误情况整合到一张网页中，然后通过给这段代码“找茬”来总结“小试牛刀”的操作情况，这样可以帮助学生更好地发现自己的错误。)

【其他】——拓展知识

(7)网页的背景

背景颜色：

bgcolor=red>；

背景图片：

background＝images\tupian.jpg> 背景音乐： 注意：

①背景颜色、背景图片在区域，

②背景音乐在之间。

【继续挑战】

(4)根据自己的喜好为网页设置背景图片(jpg格式)；

(5)更改网页标题为自己的“座位号姓名”；

(6)保存源文件，浏览网页；

(说明：这个任务虽然内容不多，但相对来说有点难度，因此学生在操作的时候有些困难，需要小组之间更好地合作以及教师的指导。)

(三)本课小结

HTML的标签远不止这些，刚才介绍的是最基本的几个。互联网上的网页几乎都是代码写成，能够读懂基本的代码，对制作一个理想的网页会有很大的帮助。因为很多能够实现动态交互的网络编程语言(如ASP，PHP)等，其程序也是嵌入在HTML中使用的。

【补充：终极挑战】此任务供学有余力的同学挑战，不做强制要求。

打开“挑战任务”文件夹中的ms.htm(用记事本打开),完成以下任务：

1、输入文字“我的网站——美食美刻”，设置以下内容：居中对齐，加粗，字号为7，红色。

2、插入一幅自己喜欢的美食图片，并设置以下内容：居中对齐，图片的大小修改为80%。

3、在图片下面插入一条水平线，设置以下内容:宽度80%，高度5像素，颜色为黄色，水平居中对齐

4、在水平线下面插入图片：“enter1.gif”或“enter2.gif”，并设置其为右对齐，宽度105像素，高度58像素

5、设置网页的背景图片为“bg.jpg”

6、修改网页标题为“高一(*)班**号***”

7、做好之后，保存退出，将“课堂任务”文件夹改为自己的“座位号姓名”并提交到FTP指定文件夹。

教学反思

总体：本节课是学生初次接触代码，而且需要记忆的代码比较多，因此学生在学习的过程中难免会遇到这样那样的困难，针对不同的困难，我采取不同的方法去应对，力争使每个学生都能掌握大部分的知识点。达到课堂效益最大化。

不足：在导入时，本来设计是想让学生自行去体验静态网页和动态网页的区别的，可是由于上课前机房突然网络出现故障，导致“体验动态网页交互”这一环节无法实施。随即，当场对“导入这个环节”做了调整，以教师口头叙述为主，从后面的表现看，学生也能基本理解，但是终究没有亲自体验的效果好。

优点：由于平时课堂上，比较注重让学生练习打字，因此学生在输入代码时表现得不错，这样就避免了浪费不必要的时间，而将重点放在学会使用代码上。