XXX大学教案网页设计与制作教学对象16.1、16.2教学时间

XXX XXX 大学教案网页设计与制作》教学设计教学对象16.1 、16.2教学时间 90 分钟教学课题常用标签设计模式1.HTML 是一门静态网页的设计语言，学好它对上面学习动态网站的研发提供了保 障。2. 让学生学会常用的标签。3. 以实例的方法来教学，能使教师举一反三，融会贯通。教材分析网站的本质是使用标签语言撰写一篇 “文章” ，它借助浏览器的解读能够将页面中 的元素表示出来，那么作为网页的设计者就需要对某些标签语言有所了解。教学目标知识通过学生讲解、师生互动等方法，使学生掌握 html 常用标签的用法， 并无法掌握静态网页的整体构架。技能通过老师的讲解与小结使学生无法利用 html 标签进行静态网页的开 发。情感、态 度价值 观目标通过学习， 引导学员对网页开发造成兴趣， 让学生熟悉静态网页的构架 以及未来网页开发的方向。教学重点1. html 常用标记的用法 2.HTML文档结构与基本词汇教学难点1. 表单标签与表单设计。教学方法1.任务驱动法： 给教师一个小的题目， 让学员通知刚学的知识来完成任务， 编写程 序；2. 案例教学法：用设计实例的方法，让学员可熟练运用所学知识。

教学后记教学步骤教学内容 与时间分配校长行为学生行为教学模式 （设计意图）导入（ 1~3 分）【PPT1】：HTML教师： HTML 是一种标签语言，而不是一种编程语言，这 种语言的结构很简单，只要知道了诸多标签的使用方式便学懂 了 HTML 。HTML 是一种用于表述网页文档的超文本标记语言。【PPT2】： HTML 文档教师： HTML 文档的扩展名为“ .htm”或“ .html ”，两者并 无差别。【PPT3】 HTML 标签教师：标签（ tag，也称标记） 是用一对尖括号“ “括出来的词组或短语缩写， 它是 HTML 文档的主要组成部分。 每个标签都有特定的表述功能， HTML 文档就是通过不同功能 的标签来控制 Web 页面内容的。【PPT4】 HTML 的结构教师： HTML 文档结构很简单， 由更外层的 标签组 成 ，里面是文档的头部跟主体。在 Dreamweaver 中新建一个 HTML 文档可以清晰看到其基本结构，如图 2-2 所示。学生探讨学生提问教学内容 与时间分配校长行为学生行为教学模式 （设计意图）正文讲授【PPT5】XHTML教师 ： XHTML 是 The Extensible Hyper Text Markup Language（可扩展超文本标识语言 ） 的缩写， 它是一种标记语言， 不需要编译便能直接由浏览器执行，表现形式与超文本置标语 言（ HTML ）类似。

在 XHTML 文档中需要进行文件类型声明（ DOCTYPE一、什么declaration ），必须存在 html、 head、 body 元素，而且 title 元素是 HTML还要位于 head 元素中。文档，及其掌握文档类型声明部分、名字空间、 head 元素、 title 元使学生定义素、 body 元素对 HTML 文【PPT6】： XHTML 的语法规则档的结构有（ 4~16 分）教师： 所有的标签都需要关闭， 即便是空标签也需要关闭；个总体的把所有标签的属性需要是大写；所有标签的属性值必须用英握文格式的双引号括出来；所有标签都需要合理嵌套；明确属性 值，且不能简写。【PPT7】： HTML5教师： HTML5 是对 HTML 标准的第五次修订，其主要的 目标是将互联网语义化，以便更好地被人类跟机器阅读，并同 时增加 Internet 程序（ RIA ）对 Flash、 Silverlight 和 JavaFX 一 类浏览器插件的依赖，以便提供更好地支持各类媒体的嵌入。 【 PPT8】： XHTML 的结构教师：标签：用来表述一节或一个完整 Web 页面的介绍 性信息，该标记可以包含所有的一般置于页面头部的标志。

标签：用于放置主站点的导航信息。 标签：描述一个有主题的内容组，如章节、页眉、 页脚或文档中的其它个别。 标签： article 元素是将 section 进行打包形成 一个 文档或网站独立的个别，例如一篇期刊或杂志文章，或一篇博 客文章。【PPT9】： HTML5 特性教师：实现 Web 应用程序；更好地呈现内容学生探讨学生倾听学生提问多媒体 技术的有效 运用教学内容 与时间分配校长行为学生行为教学模式 （设计意图）【PPT10】:网页文件的构建过程使用记事本创建网站、保存网页、启动浏览器进行浏览【PPT11】：常用标签教师：标题标签 :段落标签： 换行标签：

超链接标签 :图像标签 :

列表标签 :二、 HTML表单标签： 标记的用法【PPT13】：表格标签（ 4~16 分）教师： :在 HTML 中表格由 table 元素或者一个或多个 tr、 th 或 td 元素构成，可以将任何东西（如图像、表单，甚至另一个表格）正文讲授放进表格内。三、列表标讲解表格标签的样例，如图 2-31 所示。用事例的签的用法学生 讨论回 答形式来区别 有序列表和 无序列表教学内容 与时间分配校长行为学生行为教学模式 （设计意图）（二）超 链接【PPT15】：表单标签教师：表单让 HTML 和 XHTML 真正具备互交性，使用表单可以 创建用来获得跟处理客户输入数据的文档，同时还可以生成个 性化的回应教案格式推荐，特别是在电子商务网站应用方面，表单更具备无 限的潜能。 结束标签中就可以，此外 form 元素是块 级元素，其前后会造成换行。Action 属性表明了接收和处理字段数据的应用程序的 URL ， 通常 Web 管理员将表单处理应用程序放在 Web 服务器上名为 “ cgi-bin “目录下。Method 属性用于要求使用某种方式发送表单数据，共有两 种方式 POST 方法跟 GET 方法。Id属性和 name属性： id 属性允许用户使用一个唯一的字节 串来标记控件，这样程序以及超链接就可以直接引用他们。

Name 属性就是控件的名称，可以重复。【PPT16】： 标签教师：标签用于定义表单控件，根据不同type 的属性值，输入数组拥有众多种方式。【 PPT17】： HTML5 新增标签教师：video 标签 ： HTML5 视频标签 video 是新增元素之一。该 标签将提高客户 Web 体验，让客户在轻松愉悦的民用情况下观 看视频。 标签支持的视频格式，在不同浏览器中的兼容性见 表 2-2 。对学生 进行学练结 合的方法进 行讲解音频格 式IE9Firefox3.5Opera10.5Chrome10Safari3.0OggMPEG4WebM表 2-2音频标签 :HTML5 规定了一种通过 audio 元素来包括音频的 标准方式，与 video 元素类型类似， audio 元素能够播放声音文 件以及频流。课堂小结 （18－ 19 分）【PPT18】：小结 教师：（注意速度，和学生一起回顾）今天我们所学的三个 问题：是哪个，为什么，怎么样。着重把握如何 HTML 文档中 常用标签的用法的结构， 特别是 HTML5 中视频标签 和 音频标签 【PPT19】：教师： 最后再送大家一句话，”天才是等于1%的智力加上99%的汗水”学生：回答略多次强调教 学重难点， 给 学生良好的 暗示。

德育渗透教学内容 与时间分配校长行为学生行为教学模式（设计动机）延伸阅读 及作业设计 （ 19 － 20 分）【PPT21】：延伸阅读教师： 关于 HTML 文档中怎样创建漂亮的表格，我们下一 节课再做进一步的知道。教案格式推荐，请同学们结合我们的延伸阅读完成课 后训练，并将阅读跟思考的收获利用下节课的“课前三分钟” 实践环节与你们一起分享。作业设计与 实践教学、 课 堂拓展相结 合板书设计板书（ ppt ）一、 HTML文档的结构1、头部2、主体部分二、标签的分类三、标签的使用格式现代与特色 工具相结合， 提高教学效 率副板书（手写）HTML 的扩展名 .htm 或 .html 注释的方法