教学难点
1.表单标签与表单设计。
教学方法
1.任务驱动法：给学生一个小的题目，让学生通知刚学的知识来完成任务，编写程序；
2.案例教学法：用设计案例的方式，让学生能熟练运用所学知识。
教学后记
教学流程
教学内容
与时间分配
教师行为
学生行为
教学理念
（设计意图）
导入
（1~3分）
【PPT1】：HTML
教师：HTML是一种标签语言，而不是一种编程语言，这种语言的结构很简单，只要明白了各种标签的使用方法便学懂了HTML。HTML是一种用于描述网页文档的超文本标记语言。
Action属性说明了接收和处理表单数据的应用程序的URL，通常Web管理员将表单处理应用程序放在Web服务器上名为“cgi-bin“目录下。
Method属性用于规定使用何种方法发送表单数据，共有两种方法POST方法和GET方法。
Id属性和name属性：id属性允许用户使用一个唯一的字符串来标记控件，这样程序或者超链接就可以直接引用它们。Name属性就是控件的名称，可以重复。
<nav>标签：用于放置主站点的导航信息。
<section>标签：描述一个有主题的内容组，如章节、页眉、页脚或文档中的其他部分。
<article>标签：article元素是将section进行打包形成 一个文档或网站独立的部分，例如一篇杂志或报纸文章，或一篇博客文章。
【PPT9】：HTML5特性
教师：
在HTML中表格由table元素以及一个或多个tr、th或td元素组成，可以将任何东西（如图像、表单，甚至另一个表格）放进表格内。
讲解表格标签的示例，如图2-31所示。
学生思考
学生讨论回答
用例子的方式来区分有序列表和无序列表
教学内容
与时间分配
教师行为
学生行为
教学理念
（设计意图）
（二）超链接
【PPT15】：表单标签
掌握文档类型声明部分、名字空间、head元素、title元素、body元素
【PPT6】：XHTML的语法规则
教师：所有的标签都必须关闭，即便是空标签也必须关闭；
所有标签的属性必须是小写；所有标签的属性值必须用英文格式的双引号括起来；所有标签都必须合理嵌套；明确属性值，且不能简写。
【PPT7】：HTML5
【PPT16】：<input> 标签
实现Web应用程序；更好地呈现内容
学生思考
学生倾听
学生回答
让学生对HTML文档的结构有个总体的把握
多媒体技术的有效运用
教学内容
与时间分配
教师行为
学生行为
教学理念
（设计意图）
正文讲授
二、HTML标记的用法
（4~16分）
正文讲授
三、列表标签的用法
【PPT10】:网页文件的创建过程
使用记事本创建网页、保存网页、启动浏览器进行浏览
教师：HTML5是对HTML标准的第五次修订，其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时降低Internet程序（RIA）对Flash、Silverlight和JavaFX一类浏览器插件的依赖，以便提供更好地支持各种媒体的嵌入。【PPT8】：XHTML的结构
教师：
<header>标签：用来描述一节或一个完整Web页面的介绍性信息，该标记可以包括所有的通常放在页面头部的标志。
【PPT11】：常用标签
教师：
标题标签:<h#></h#>
段落标签：<p></p>
换行标签：<br/>
超链接标签:<a></a>
图像标签:<img />
列表标签:<ul>
<li></li>
<li></li>
…
</ul>
表单标签：<form></form>
【PPT13】：表格标签
教师：:<table></table>
教案模板【经典】
《网页设计与制作》教学设计
教学对象
16.1、16.2
教学时间
90分钟
教学课题
常用标签
设计理念
1.HTML是一门静态网页的设计语言，学好它对后面学习动态网页的开发提供了保障。
2.让学生学会常用的标签。
3.以案例的方式来教学，能让学生举一反三，融会贯通。
教材分析
网页的本质是使用标签语言编写一篇“文章”，它通过浏览器的解析能够将页面中的元素表示出来，那么作为网页的设计者就必须对这种标签语言有所了解。
教学目标
知识
通过教师讲解、师生互动等方式，使学生掌握html常用标签的用法，并能够把握静态网页的整体结构。
技能
通过老师的讲解与总结使学生能够运用html标签进行静态网页的开发。
情感、态度价值观目标
通过学习，引导学生对网页开发产生兴趣，让学生熟悉静态网页的结构以及今后网页开发的方向。
教学重点
1.html常用标记的用法2.HTML文档结构与基本语法
【PPT2】：HTML文档
教师：HTML文档的扩展名为“.htm”或“.html”，两者并无差别。
【PPT3】HTML标签
教师：标签（tag，也称标记）是用一对尖括号“<“和”>“括起来的单词或单词缩写，它是HTML文档的主要组成部分。每个标签都有特定的描述功能，HTML文档就是通过不同功能的标签来控制Web页面内容的。
【PPT4】HTML的结构
教师：HTML文档结构很简单，由最外层的<html> 标签组成 ，里面是文档的头部和主体。在Dreamweaver中新建一个HTML文档可以清晰看到其基本结构，如图2-2所示。
学生思考
学生回答
教学内容
与时间分配
教师行为
学生行为
教学理念
（设计意图）
正பைடு நூலகம்讲授
一、什么是HTML文档，及其定义
（4~16分）
【PPT5】XHTML
教师：XHTML是The Extensible Hyper Text Markup Language(可扩展超文本标识语言)的缩写，它是一种标记语言，不需要编译便可直接由浏览器执行，表现方式与超文本置标语言（HTML）类似。
在XHTML文档中必须进行文件类型声明（DOCTYPE declaration），必须存在html、head、body元素，而且title元素还要位于head元素中。
教师：
表单让HTML和XHTML真正具有互交性，使用表单可以创建用来获取和处理用户输入数据的文档，同时还可以生成个性化的回应，特别是在电子商务网站应用方面，表单更具有无限的潜能。
<form>标签用于为用户输入创建HTML表单。在文档主体中，表单可以被放置于任何位置，只要将表单的元素都放在<form>标签与</form>结束标签中就可以，此外form元素是块级元素，其前后会产生换行。
