《网页设计与制作》教学设计.pdf

《《网页设计与制作》教学设计.pdf》由会员分享，可在线阅读，更多相关《《网页设计与制作》教学设计.pdf（6页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、XXX 大学教案网页设计与制作教学设计网页设计与制作教学设计教学对象教学对象16.1、16.2教学时间教学时间90 分钟教学课题教学课题常用标签1.HTML 是一门静态网页的设计语言，学好它对后面学习动态网页的开发提供了保设计理念设计理念障。2.让学生学会常用的标签。3.以案例的方式来教学，能让学生举一反三，融会贯通。网页的本质是使用标签语言编写一篇“文章”，它通过浏览器的解析能够将页面中教材分析教材分析的元素表示出来，那么作为网页的设计者就必须对这种标签语言有所了解。通过教师讲解、师生互动等方式，使学生掌握 html 常用标签的用法，知识知识并能够把握静态网页的整体结构。通过老师的讲解与总结

2、使学生能够运用 html 标签进行静态网页的开技能技能教学目标教学目标发。情感、情感、态态通过学习，引导学生对网页开发产生兴趣，让学生熟悉静态网页的结构度价值度价值以及今后网页开发的方向。观目标观目标教学重点教学重点1.html 常用标记的用法 2.HTML 文档结构与基本语法教学难点教学难点1.表单标签与表单设计。1.任务驱动法：给学生一个小的题目，让学生通知刚学的知识来完成任务，编写程教学方法教学方法序；2.案例教学法：用设计案例的方式，让学生能熟练运用所学知识。教学后记教学后记XXX 大学教案教学流程教学流程教学内容教学内容与时间分配与时间分配教师行为教师行为【PPT1】：HTML教师：

3、教师：HTML 是一种标签语言，而不是一种编程语言，这种语言的结构很简单，只要明白了各种标签的使用方法便学懂了 HTML。HTML 是一种用于描述网页文档的超文本标记语言。【PPT2】：HTML 文档教师：教师：HTML 文档的扩展名为“.htm”或“.html”，两者并无差别。【PPT3】HTML 标签教师：教师：标签（tag，也称标记）是用一对尖括号“括起来的单词或单词缩写，它是HTML文档的主要组成部分。每个标签都有特定的描述功能，HTML 文档就是通过不同功能的标签来控制 Web页面内容的。【PPT4】HTML 的结构教师：教师：HTML 文档结构很简单，由最外层的 标签组成，里面是文

4、档的头部和主体。在 Dreamweaver 中新建一个HTML 文档可以清晰看到其基本结构，如图2-2 所示。学生行为学生行为学生思考学生回答教学理念教学理念（设计意图）（设计意图）导入导入（1313 分）分）XXX 大学教案教学内容教学内容与时间分配与时间分配正文讲授正文讲授一、什么一、什么是是HTMLHTML文档，及其文档，及其定义定义（416416 分）分）教师行为教师行为【PPT5】XHTML教教师师：XHTML 是 The Extensible Hyper Text MarkupLanguage(可扩展超文本标识语言)的缩写，它是一种标记语言，不需要编译便可直接由浏览器执行，表现方式

5、与超文本置标语言（HTML）类似。在 XHTML 文档中必须进行文件类型声明（DOCTYPEdeclaration），必须存在 html、head、body 元素，而且 title 元素还要位于 head 元素中。掌握文档类型声明部分、名字空间、head 元素、title 元素、body 元素【PPT6】：XHTML 的语法规则教师：教师：所有的标签都必须关闭，即便是空标签也必须关闭；所有标签的属性必须是小写；所有标签的属性值必须用英文格式的双引号括起来；所有标签都必须合理嵌套；明确属性值，且不能简写。【PPT7】：HTML5教师：教师：HTML5 是对 HTML 标准的第五次修订，其主要的目

6、标是将互联网语义化，以便更好地被人类和机器阅读，并同时降低 Internet 程序（RIA）对 Flash、Silverlight 和 JavaFX 一类浏览器插件的依赖，以便提供更好地支持各种媒体的嵌入。【PPT8】：XHTML 的结构教师：教师：标签：用来描述一节或一个完整 Web 页面的介绍性信息，该标记可以包括所有的通常放在页面头部的标志。标签：用于放置主站点的导航信息。标签：描述一个有主题的内容组，如章节、页眉、页脚或文档中的其他部分。标签：article 元素是将 section 进行打包形成 一个文档或网站独立的部分，例如一篇杂志或报纸文章，或一篇博客文章。【PPT9】：HTML

7、5 特性教师：教师：实现 Web应用程序；更好地呈现内容学生行为学生行为教学理念教学理念（设计意图）（设计意图）让 学 生对 HTML 文档的结构有个总体的把握多 媒 体技术的有效运用学生思考学生倾听学生回答XXX 大学教案教学内容教学内容与时间分配与时间分配正文讲授正文讲授二、二、HTMLHTML标记的用法标记的用法（416416 分）分）正文讲授正文讲授三、列表标三、列表标签的用法签的用法教师行为教师行为【PPT10】:网页文件的创建过程使用记事本创建网页、保存网页、启动浏览器进行浏览【PPT11】：常用标签教师：教师：标题标签:段落标签：换行标签：超链接标签:图像标签:列表标签:表单标签

8、：【PPT13】：表格标签教师：教师：:在 HTML 中表格由 table 元素以及一个或多个 tr、th 或 td元素组成，可以将任何东西（如图像、表单，甚至另一个表格）放进表格内。讲解表格标签的示例，如图2-31 所示。学生行为学生行为学生思考学生思考学生学生 讨论回答教学理念教学理念（设计意图）（设计意图）用例子的方式来区分有序列表和无序列表XXX 大学教案教学内容教学内容与时间分配与时间分配（二）超（二）超链接链接教师行为教师行为【PPT15】：表单标签教师：教师：表单让 HTML 和 XHTML 真正具有互交性，使用表单可以创建用来获取和处理用户输入数据的文档，同时还可以生成个性化的

9、回应，特别是在电子商务网站应用方面，表单更具有无限的潜能。标签用于为用户输入创建 HTML 表单。在文档主体中，表单可以被放置于任何位置，只要将表单的元素都放在标签与结束标签中就可以，此外 form 元素是块级元素，其前后会产生换行。Action 属性说明了接收和处理表单数据的应用程序的URL，通常 Web 管理员将表单处理应用程序放在 Web 服务器上名为“cgi-bin“目录下。Method 属性用于规定使用何种方法发送表单数据，共有两种方法 POST 方法和 GET 方法。Id 属性和 name 属性：id 属性允许用户使用一个唯一的字符串来标记控件，这样程序或者超链接就可以直接引用它们

10、。Name 属性就是控件的名称，可以重复。【PPT16】：标签教师：教师：标签用于定义表单控件，根据不同type 的属性值，输入字段拥有很多种形式。【PPT17】：HTML5 新增标签教师：教师：video 标签：HTML5 视频标签 video 是新增元素之一。该标签将改善用户 Web体验，让用户在轻松愉快的民用情况下观看视频。标签支持的视频格式，在不同浏览器中的兼容性见表 2-2。音频格式OggIE9Firefox3.5Opera10.5Chrome10Safari3.0学生行为学生行为教学理念教学理念（设计意图）（设计意图）对 学 生进行学练结合的方式进行讲解MPEG4WebM表 2-2

11、音频标签:HTML5规定了一种通过audio元素来包含音频的标准方法，与 video 元素类型类似，audio 元素能够播放声音文件或者频流。XXX 大学教案【PPT18】：小结学生：回答教师：教师：（注意速度，和学生一起回顾）今天我们所学的三个 略问题：是什么，为什么，怎么样。着重掌握如何HTML 文档中常用标签的用法的结构，特别是 HTML5 中视频标签 和音频标签课堂小结课堂小结【PPT19】：（18181919 分）分）教师：教师：最后再送大家一句话，”天才是等于1%的智商加上99%的汗水”教学内容教学内容与时间分配与时间分配延伸阅读延伸阅读及作业设计及作业设计（1919 2020分）

12、分）教师行为教师行为【PPT21】：延伸阅读教师：教师：关于 HTML 文档中如何创建漂亮的表格，我们下一节课再做进一步的了解。，请同学们结合我们的延伸阅读完成课后练习，并将阅读和思考的收获利用下节课的“课前三分钟”实践环节与大家一起分享。学生行为学生行为多次强调教学重难点，给学生良好的暗示。德育渗透教学理念教学理念（设计意图）（设计意图）作业设计与实践教学、课堂拓展相结合板书设计板书设计板书（板书（pptppt）一、一、HTMLHTML 文档的结构文档的结构1 1、头部、头部2 2、主体部分、主体部分二、标签的分类二、标签的分类三、标签的使用格式三、标签的使用格式现代与传统工具相结合，提高课堂效率副板书（手写）副板书（手写）HTMLHTML 的扩展名的扩展名.htm.htm 或或.html.html注释的方法