HTML5+CSS3网站设计基础教程教学设计_第1页
HTML5+CSS3网站设计基础教程教学设计_第2页
HTML5+CSS3网站设计基础教程教学设计_第3页
HTML5+CSS3网站设计基础教程教学设计_第4页
HTML5+CSS3网站设计基础教程教学设计_第5页
已阅读5页，还剩123页未读， 继续免费阅读

付费下载

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

教学课题HTML概述专业大类计算机大类所属课程静态网页设计授课对象计算机应用技术专业学生所选教材《HTML5+CSS3网站设计基础教程》授课地点机房授课时长6课时教学分析内容分析本课程根据《计算机应用技术专业人才培养方案》，确定该课程是面向计算机相关专业的一门专业基础课，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。“HTML概述”选自《HTML5+CSS3网站设计基础教程》第一章节内容，为后面章节的学习打下良好的基础。学情分析授课对象为高职计算机应用技术专业学生。根据学生学情分析如下：1.知识基础：本课程开设在大一第二学期，大部分学生对程序设计语言有了一定的了解，具备一定的平面设计基础。2.能力基础：通过前面的学习，能熟练的使用电脑，具备简单的代码编写能力。3.行为习惯：现代学生是生活一个信息化的时间，学生喜欢形象化，活动式的教学内容，适应从简单到复杂的学习模式。对网页开发比较感兴趣，有较为丰富的网站使用经验。教学目标知识目标技能目标素养目标1.掌握HTML5文档基本格式。2.掌握文本控制标签。3.掌握图像标签。能够使用HTML5相关标签及属性，制作简单的网页页面。1.培养学生计算机思维的能力，帮助学生树立科学严谨的负责态度。2.培养学生的团队协作意识，自主解决问题的能力。教学重点文本控制标签和图像标签。教学难点绝对路径和相对路径的使用。教学策略教学组织与实施本课以学生的疑问、观点和观察结果为教学契机，采用探究式学习方式。利用职教云平台布置课前任务，通过学生完成任务分析教学重难点，在课堂教学中引入案例突破教学重难点，争取学生的薄弱环节布置课后任务巩固教学知识点。整个教学采用线上线下相结合的模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学。同时加强德育渗透，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神，以及精益求精开拓创新的艺术家精神。教学方法本课程采用探究式教学方法，分为三大任务：一是基础理论部分，通过学生讲解，教师总结。二是学生分享分析作品，在相互学习中共同提高，加深印象。三是将专业教育渗透到教学中，实践教学案例的选取，以学生专业领域为背景，充分发挥学生的主体地位，为后续的专业学习打下良好的基础。教学资源与手段电子教学资料（如PPT，知识笔记，微课视频）、职教云平台等，辅助学生自主学习和探究，解决教学重难点，提高学习效率。教学实施课前教师活动学生活动教学资源与手段设计意图1.发布学习资源，比如：教学PPT、知识清单等，下达任务。2.查看学生提交职教云平台作业，根据提交作业调整教学策略，确定教学难点。1.学生领取任务单，借助职教云微课初步了解HTML简介，了解常用的网页制作工具。1.教学资源：教学PPT、知识清单、职教云微课。2.教学手段：职教云平台作业提交功能。1.学生预习，为课中做准备，培养学生的自主学习能力。2.教师通过作业反馈掌握学生的预习情况，确定教学难点。课中教学过程第一课时（讲解HTML5发展历程、HTML5优势、HTML5浏览器支持情况、创建第一个HTML5页面）本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：什么是HTML5？为什么要学习HTML5语言呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：HTML5是超文本标签语言（Hypertextmarkuplanguage）的第5代版本，目前还处于推广阶段。从HTML4.0、XHTML到HTML5，从某种意义上讲，这是HTML描述性标签语言的一种更加规范的过程。随着时代的发展，统一的互联网通用标准显得尤为重要。在HTML5之前，由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的目标就是将Web带入一个成熟的应用平台。在HTML5平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。2014年10月29日，万维网联盟宣布，经过8年的艰辛努力，HTML5标准规范终于制定完成，并公开发布。HTML5将会逐渐取代HTML4.01、XHTML1.0标准，引领时代的潮流，开创互联网的新时代。知识点讲解讲解“HTML发展历程”（1）教师微课展示对“HTML语言”的概念及发展历史进行简单介绍。（2）教师微课展示对HTML从2.0版到3.2版、4.0版，再到1999年的4.01版的各个版本的区别与联系。（3）教师微课展示对HTML5出现的原因及背景进行介绍。（4）教师微课展示对HTML5的出现与发展进行讲解，并分析其优缺点。（5）学生自主提问，教师对疑难问题进行解答。讲解“HTML5优势”（1）教师展示PPT指出HTML5增加了很多新功能和新特性。（2）教师展示PPT，针对HTML5的“解决了跨浏览器问题、新增了多个新特性、用户优先的原则、化繁为简的优势”优势分别进行讲解，并联系实际举例说明。（3）学生自主提问，教师对疑难问题进行解答。讲解“HTML5浏览器支持情况”（1）教师通过PPT展示一些常见浏览器，并进行汇总。教师展示PPT分别讲解IE浏览器、火狐浏览器、Google浏览器、Safari浏览器、Opera浏览器对HTML5语言新功能和新特性的浏览器支持情况。（3）教师分别对Web标准的“结构标准”、“表现标准”及“行为标准”进行详细讲解，并分别举例说明。（4）教师分析这些浏览器纷纷朝着HTML5的方向迈进，指出HTML5的时代即将来临。（5）学生自主提问，教师对疑难问题进行解答。讲解“创建第一个HTML5页面”（1）教师和学生互动：我们知道，创建文档可以使用word，创建数据表可以使用excel，那么创建HTML网页可以使用哪些工具呢？网页制作过程中，创建HMTL5网页源代码的工具很多，如Editplus、notepad++、sublime等。（2）教师指出实际工作中，最常用的网页制作工具是HBuilder。（3）教师打开HBuilder工具，对HBuilder工具的常见操作进行演示说明。（4）教师打开HBuilder，新建一个HTML5默认文档，演示如何编写、修改并保存HTML5代码。（5）、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点：创建第一个HTML5页面。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生了解HTML5发展历程、HTML5优势、HTML5浏览器支持情况，并能够使用HBuilder创建一个HTML5页面。第二课时（讲解HTML5文档基本格式、HTML5语法、标签的属性、HTML5文档头部相关标签）复习上节课内容本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML5标签语言也不例外，同样需要遵从一定的规范。请大家讨论下：使用HBuilder新建HTML5默认文档时，HTML5文档的基本格式包括哪些标签？请小组代表对以上问题发表见解。教师对上述问题进行解释：<!DOCTYPE>标签<!DOCTYPE>标签标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。<html>标签<html>标签位于<!doctype>标签之后，也称为根标签，用于告知浏览器其自身是一个HTML文档。<head>标签<head>标签用于定义HTML文档的头部信息，也称为头部标签。<body>标签<body>标签用于定义HTML文档所要显示的内容，也称为主体标签。知识点讲解讲解“HTML5文档基本格式”（1）、教师通过Dreamweaver工具新建默认文档，并指出默认文档中会自带一些源代码。<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>（2）、教师分析自带的源代码，讲解HTML5文档的基本格式及构成标签。（3）、教师让学生自行尝试，理解<!DOCTYPE>文档类型声明、<html>根标签、<head>头部标签、<body>主体标签的语义及用法。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“HTML5语法”（1）、教师展示PPT对“HTML5语法”进行简单介绍。（2）、教师展示PPT，对“HTML5语法”规则进行分析，并与之前的各种版本进行对比分析。（3）、教师针对HTML5语法中的“标签不区分大小写、允许属性值不使用引号、允许部分属性值的属性省略”通过代码演示，并举例说明。（4）、学生自主提问，教师对疑难问题进行解答。讲解“HTML标签”（1）、教师展示PPT对“单标签与双标签”、“注释标签”的概念进行讲解，并指出“单标签与双标签”的不同。（2）、教师举例说明常见的单标签、双标签以及注释标签。（3）、教师通过代码对“单标签与双标签”、“注释标签”的使用方法进行演示。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“标签的属性”（1）、教师和学生互动：在网页制作时，如果大家想要控制标签的样式，比如：希望标题文本的字体为“微软雅黑”且居中显示，或者段落文本中的某些名词颜色突出显示等问题。此时仅仅依靠HTML标签的默认显示样式已经不能满足需求了，需要使用“HTML标签的属性”进行控制。（2）、教师展示PPT对“标签的属性”进行讲解，并使用代码进行实时演示。（3）、学生练习，教师巡视，对疑难问题进行解答。讲解“HTML5文档头部相关标签”（1）、教师展示PPT对“HTML文档头部相关标签”进行讲解。（2）、教师分别对<title>标签、<meta/>标签、<link>标签及<style>标签的基本语法格式进行讲解，并进行代码演示。（3）、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点：HTML5语法、HTML5标签、标签的属性。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生了解HTML5发展历程、HTML5优势、HTML5浏览器支持情况，并熟练地掌握HTML5语法、HTML5标签及属性的使用。布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习1.3节【文本控制标签】。第三课时（讲解标题和段落标签、文本格式化标签、特殊字符标签）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、简要描述“HTML5语法”，并举例说明“HTML5语法”相对于以前的语法格式有哪些新变化？答案：标签不区分大小写HTML5采用宽松的语法格式，标签可以不区分大小写，这是HTML5语法变化的重要体现。例如：<p>这里的p标签大小写不一致</P>在上面的代码中，虽然p标签的开始标签与结束标签大小写并不匹配，但是在HTML5语法中是完全合法的。允许属性值不使用引号在HTML5语法中，属性值不放在引号中也是正确的。例如：<inputchecked=atype=checkbox/><inputreadonly=readonlytype=text/>以上代码都是完全符合HTML5规范的，等价于：<inputchecked="a"type="checkbox"/><inputreadonly="readonly"type="text"/>允许部分属性值的属性省略在HTML5中，部分标志性属性的属性值可以省略。例如：<inputchecked="checked"type="checkbox"/><inputreadonly="readonly"type="text"/>说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：我们知道，一篇结构清晰的文章通常都有标题和段落，那么如何使用HTML5语言创建网页中的标题和段落呢？教师对上述问题进行解释：为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML5提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式如下：<hnalign="对齐方式">标题文本</hn>该语法中n的取值为1到6，align属性为可选属性，用于指定标题的对齐方式。同样地，网页也可以分为若干个段落，而段落的标签就是<p>。默认情况下，文本在段落中会根据浏览器窗口的大小自动换行。<p>是HTML文档中最常见的标签，其基本语法格式如下：<palign="对齐方式">段落文本</p>该语法中align属性为<p>标签的可选属性，和标题标签<h1>~<h6>一样，同样可以使用align属性设置段落文本的对齐方式。知识点讲解讲解“标题和段落标签”（1）、教师展示PPT对“标题标签”、“段落标签”的概念及基本语法格式进行讲解。（2）、教师对“标题标签”、“段落标签”的显示效果通过代码进行演示。（3）、教师分别对“标题标签”及“段落标签”的align属性进行讲解并通过代码进行演示。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“文本格式化标签”（1）、教师和学生互动：使用“HTML标签的属性”可以设置文本的对齐方式、颜色等，那么，如果想要为文字设置粗体、斜体或下划线效果需要怎么办呢？下面，我们来学习“文本格式化标签”。（2）、教师展示PPT对“文本格式化标签”进行讲解，并使用代码进行实时演示。（3）、学生练习，教师巡视，对疑难问题进行解答。讲解“特殊字符标签”（1）、教师和学生互动：浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？下面，我们来学习特殊字符标签。（2）、教师展示PPT对“常用特殊字符标签”进行讲解，分析“字符标签”的构成，并使用代码进行实时演示。（3）、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点：段落标签、文本格式化标签。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生掌握段落标签、文本格式化标签、特殊字符标签的使用。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习1.4节【图像标签】。第四课时（讲解常用图像格式、图像标签<img/>、绝对路径和相对路径）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、在上节课中，我们学习了文本格式化标签。那么，在文本格式化标签中，如何将文字设置为粗体呢？答案：将文字以粗体方式显示的标签是：<b>标签或<strong>标签。其中，使用<b>标签定义文本粗体，<strong>标签定义强调文本。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在网站中，我们可以看到绚丽多彩的图片。那么，目前网页上常用的图像格式有哪些呢，请结合它们的优缺点进行说明？请小组代表对以上问题发表见解。教师对上述问题进行解释：目前网页上常用的图像格式主要有GIF、JPG和PNG三种，具体区别如下：GIF格式GIF最突出的地方就是它支持动画，同时GIF也是一种无损的图像格式。另外，GIF支持透明（全透明或全不透明），因此很适合在互联网上使用。但GIF只能处理256种颜色。在网页制作中，GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。PNG格式PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相对于GIF，PNG最大的优势是体积更小，支持alpha透明（全透明，半透明，全不透明），并且颜色过渡更平滑，但PNG不支持动画。JPG格式JPG所能显示的颜色比GIF和PNG要多的多，可以用来保存超过256种颜色的图像，但是JPG是一种有损压缩的图像格式，网页制作过程中类似于照片的图像比如横幅广告（banner）、商品图片、较大的插图等都可以保存为JPG格式。简而言之，在网页中小图片或网页基本元素如图标、按钮等考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG。知识点讲解讲解“常用图像格式”（1）、教师带领学生查看网页中的图像，总结网页中常用的图像格式。（2）、教师展示PPT对GIF、JPG和PNG三种常用的图像格式进行讲解，比较三种格式的异同，并指出其优缺点。（3）、学生提问，教师对疑难问题进行解答。讲解“图像标签<img/>”（1）、教师和学生互动：在网页中随处可见各种各样的图像，比如：广告图、推广图、轮播图等。大家在网页中都见过哪些图片呢？然后，教师使用PPT展示网页中各式各样的图片效果。（2）、教师展示PPT对“图像标签”及其属性进行讲解，并使用代码进行实时演示。（3）、学生练习，教师巡视，对疑难问题进行解答。讲解“绝对路径和相对路径”（1）、教师通过文件夹的层级关系对“路径”进行讲解，并指出网页中的路径通常分为“相对路径与绝对路径”两种。（2）教师展示PPT对“绝对路径”进行讲解，并举例说明。（3）、教师展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的不同位置进行演示。（4）、学生提问，教师对疑难问题进行解答。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：图像标签。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握图像标签<img/>的使用，并能够区分图像的相对路径与绝对路径的不同。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习1.5节【阶段案例—制作学院简介页面】。第五课时（讲解制作学院简介页面）复习上节课内容本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：下列选项中，哪一个属性不是文本的标签属性？（）。A、nbsp;B、alignC、colorD、size答案：Aalign、color、face都是<p>标签的属性，align属性设置段落文本的对齐方式,color属性设置文本的颜色，size属性设置文本的大小。只有“nbsp;”选项不是文本的标签属性，而是一个代表空格符的特殊标签。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。案例讲解案例描述本章前几节重点讲解了HTML5语法及标签、文本控制标签以及图像标签等。为了使读者能够更好地认识HTML5，本节将通过案例的形式分步骤地制作一个HTML5学院简介页面，默认效果如下图所示。案例分析分析“制作学院简介页面”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML5标签及应用了哪些HTML5标签的属性。案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面、制作页面链接等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：制作学院简介页面。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，让学生再制作一次“制作学院简介页面”。以此使学生更熟练地掌握“HTML5语法、文本控制标签、图像标签”等知识点，并能够通过创建超链接来实现页面间的跳转。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。复习本课时的所有知识点和案例，加强巩固。第六课时（上机测试）教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对HTML5相关标记及属性的熟练程度，以及对“文本控制标记”、“图像标记”、“超链接标记”等知识点的掌握程度。（作品点评）教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。课后教师活动学生活动教学资源与手段设计意图教师在职教云平台布置拓展任务。根据课中修改意见，继续完善网页简介页面。职教云平台作业提交功能。内化知识，学以致用。教学评价1.评价构成：线上学习平台记录成绩和线下实践操作成绩构成。2.评价结果：为了多元化全过程考核评价，学生课堂学习评价表：科学量化学生各环节学习情况；学习周报：准确呈现学生学习趋势；好友积分排行表：显示与同学好友学习情况的对比。教学反思教学效果本教学设计采用线上线下的混合教学模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学，同时加强专业教育，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神。诊改措施1.教学过程中引入了职教云平台，平台虽然给予了学生较为中肯的建议，但还缺乏有效的监督手段。2.在今后的工作中，将注重对学生的成长性评价，努力为学生的个性化学习和终身学习提供帮助。

教学课题HTML5标签及属性专业大类计算机大类所属课程静态网页设计授课对象计算机应用技术专业学生所选教材《HTML5+CSS3网站设计基础教程》授课地点机房授课时长6课时教学分析内容分析本课程根据《计算机应用技术专业人才培养方案》，确定该课程是面向计算机相关专业的一门专业基础课，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。“HTML5标签及属性”选自《HTML5+CSS3网站设计基础教程》第二章节内容，为后面网页的制作打下良好的基础。学情分析授课对象为高职计算机应用技术专业学生。根据学生学情分析如下：1.知识基础：本课程开设在大一第二学期，大部分学生对程序设计语言有了一定的了解，具备一定的平面设计基础。2.能力基础：通过前面的学习，能熟练的使用电脑，具备简单的代码编写能力。3.行为习惯：现代学生是生活一个信息化的时间，学生喜欢形象化，活动式的教学内容，适应从简单到复杂的学习模式。对网页开发比较感兴趣，有较为丰富的网站使用经验。教学目标知识目标技能目标素养目标1.掌握HTML文档的基本结构，能够熟练创建HTML文档。2.掌握HTML的列表标签、超链接标签的使用。3.掌握HTML5新增标签的使用。4.理解HTML5语义标签。能够使用HTML5分组标签、页面交互标签，实现简单的网页交互效果。1.培养学生计算机思维的能力，帮助学生树立科学严谨的负责态度。2.培养学生的团队协作意识，自主解决问题的能力。教学重点列表标签的使用和页面交互标签。教学难点列表标签的嵌套应用。教学策略教学组织与实施本课以学生的疑问、观点和观察结果为教学契机，采用探究式学习方式。利用职教云平台布置课前任务，通过学生完成任务分析教学重难点，在课堂教学中引入案例突破教学重难点，争取学生的薄弱环节布置课后任务巩固教学知识点。整个教学采用线上线下相结合的模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学。同时加强德育渗透，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神，以及精益求精开拓创新的艺术家精神。教学方法本课程采用探究式教学方法，分为三大任务：一是基础理论部分，通过学生讲解，教师总结。二是学生分享分析作品，在相互学习中共同提高，加深印象。三是将专业教育渗透到教学中，实践教学案例的选取，以学生专业领域为背景，充分发挥学生的主体地位，为后续的专业学习打下良好的基础。教学资源与手段电子教学资料（如PPT，知识笔记，微课视频）、职教云平台等，辅助学生自主学习和探究，解决教学重难点，提高学习效率。教学实施课前教师活动学生活动教学资源与手段设计意图1.发布学习资源，比如：教学PPT、知识清单等，下达任务。2.查看学生提交职教云平台作业，根据提交作业调整教学策略，确定教学难点。1.学生领取任务单，借助职教云微课初步了解HTML简介，了解常用的网页制作工具。1.教学资源：教学PPT、知识清单、职教云微课。2.教学手段：职教云平台作业提交功能。1.学生预习，为课中做准备，培养学生的自主学习能力。2.教师通过作业反馈掌握学生的预习情况，确定教学难点。课中教学过程第一课时（讲解无序列表标签、有序列表标签、定义列表标签、列表的嵌套应用、超链接标签）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第一章“HTML概述”的基础知识。1、在上一章中，我们学习了HTML5的相关标记及其属性。在HTML标记中，主要分为单标记和双标记两种。那么，什么是“单标记”呢？答案：单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：<标记名/>例如：<hr/>2、浏览网页时，我们经常阅读很多的段落文字。在网页制作时，同样需要使用段落标记搭建页面结构，那么如何设置段落标记<p>的对齐属性呢？答案：段落标记<p>的基本语法格式如下：<palign="对齐方式">段落文本</p>该语法中align属性为<p>标记的可选属性，使用align属性可以设置标题和段落的对齐方式，其取值如下：left设置标题文字左对齐（默认值）center设置标题文字居中对齐right设置标题文字右对齐说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：为了使网页更易读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的商品服务分类、排列有序，呈现为列表的形式。其实，在HTML5中，提供了3种常用的列表，分别为无序列表、有序列表和定义列表。那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？请小组代表对以上问题发表见解。教师对上述问题进行解释：所谓无序列表就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈、方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰，更合理。有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为<li>。无序列表使用<ul></ul>标记定义，<li></li>为具体的列表项。有序列表使用<ol></ol>标记定义，<li></li>为具体的列表项。知识点讲解讲解“ul标签”（1）、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT，对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。（3）、教师指出定义“无序列表”时需要注意的问题，并给与解答。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“ol标签”（1）、教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT，对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。（3）、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与联系。（4）、教师指出定义“有序列表”时需要注意的问题，并给与解答。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“dl标签”（1）、教师展示PPT对“定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT，对“定义列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。（3）、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分析其区别与联系。（4）、教师指出定义“定义列表”时需要注意的问题，并给与解答。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“列表的嵌套应用”（1）、教师和学生互动：所谓列表的嵌套应用就是无序列表和有序列表嵌套混合使用。嵌套列表可以把页面分成多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可以互相嵌套。下面，将对列表的嵌套进行讲解。（2）、教师通过PPT对“列表嵌套”在网页中的常见效果进行展示。（3）、教师对“列表嵌套”进行讲解并通过代码进行演示。（4）、教师指出“列表嵌套”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“创建超链接”（1）、教师和学生互动：教师打开360导航网址/，点击页面中的导航文字，就可以跳转到相应的页面，这就是通过给文字创建超链接来实现的。教师组织学生讨论：如何通过超链接实现页面中的跳转呢？（2）、教师针对超链接的作用以及基本语法格式进行讲解，并进行演示说明。（3）、教师展示PPT对“创建超链接”进行讲解，并使用代码进行实时演示。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“内部书签”（1）、教师和学生互动：如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。那么如何提高信息的检索速度呢？HTML5语言提供了一种特殊的链接——锚点链接，用户能够快速定位到目标内容。（2）、教师针对“锚点链接”的作用及创建方法进行讲解，并进行演示说明。（3）、教师对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。（4）、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点：ul标签、ol标签、dl标签、列表的嵌套应用、超链接标签。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生了解无序列表、有序列表、定义列表的不同，并能熟练地应用ul标签、ol标签、dl标签搭建列表结构以及列表的嵌套应用、超链接的使用。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第二课时（讲解header标签、nav标签、article标签、aside标签、section标签、footer标签）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。在上节课中，我们已经学习了如何定义无序列表和有序列表。本节课将学习另一种列表——定义列表。那么，请大家讨论下什么是“定义列表”？以及如何使用“定义列表”？答案：请小组代表对以上问题发表见解。答案：定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。定义列表使用<dl></dl>、<dt></dt>和<dd></dd>进行定义，其中，<dt></dt>标记用于指定术语名词，<dd></dd>标记用于对名词进行解释和描述。一对<dt></dt>可以对应多对<dd></dd>，即可以对一个名词进行多项解释。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：浏览网站时，我们经常需要通过点击导航栏目下的链接来查找相应的内容，那么如何使用HTML5语言中的相关标记创建网页中的导航栏目呢？教师对上述问题进行解释：在HTML5中，nav标签用于定义导航链接，该标签可以将具有导航性质的链接归纳在一个区域中，使页面标签的语义更加明确。其中的导航标签可以链接到站点的其他页面，或者当前页的其他部分。例如下面这段示例代码：<nav><ul><li><ahref="#">首页</li><li><ahref="#">公司概况</li><li><ahref="#">产品展示</li><li><ahref="#">联系我们</li></ul></nav>在上述代码中，通过在nav标签内部嵌套无序列表ul来搭建导航结构。通常，一个HTML页面中可以包含多个nav标签，作为页面整体或不同部分的导航。知识点讲解讲解“header标签”（1）、教师展示PPT对“header标签”的概念及基本语法格式进行讲解。（2）、教师对“header标签”的显示效果及应用范围通过代码进行演示。（3）、教师对“header标签”的注意事项进行讲解，并使用代码进行实时演示。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“nav标签”（1）、教师和学生互动：打开任意公司官网，可以看到首页面中的导航栏，包括首页、Java培训、PHP培训、网页平面培训等多个版块。在HTML5中，通常通过nav标签内部嵌套无序列表ul来搭建导航结构。一个HTML页面中可以包含多个nav标签，下面，我们来学习“nav标签”。（2）、教师展示PPT对“nav标签”的适用范围进行总结，包括传统导航条、侧边栏导航、页内导航、翻页操作等。（3）、教师针对“nav标签”进行讲解，并使用代码进行实时演示。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“article标签”（1）、教师和学生互动：浏览网页时常常会看到一些新闻页面，包含一篇日志、一条新闻或用户评论等。那么如何使用HTML5标签搭建页面中的这些独立的页面版块呢？下面，我们来学习article标签。（2）、教师展示PPT对“article标签”的概念及基本语法格式进行讲解。（3）、教师通过PPT对“article标签”的显示效果及应用范围进行展示。（4）、教师针对“article标签”进行讲解，并使用代码进行实时演示。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“aside标签”（1）、教师和学生互动：学习aside标签。（2）、教师展示PPT对“aside标签”的概念及应用范围进行讲解。（3）、教师通过PPT对“article标签”在网页中的显示效果进行展示。指出aside标签用来定义内容相关的引用、侧边栏、广告、导航条。（4）、教师针对“article标签”进行讲解，并使用代码进行实时演示。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“section标签”（1）、教师和学生互动：在网页中随处可见各种各样的页面版块或栏目，比如：新闻版块、内容板块、广告版块等。大家在网页中都见过哪些页面版块或栏目呢？下面，我们来学习section标签。（2）、教师展示PPT对“section标签”的概念及应用范围进行讲解。（3）、教师针对“section标签”进行讲解，并使用代码进行实时演示（4）、教师对比“section标签”与“article标签”的区别与联系，分析其用法的异同。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“footer标签”（1）、教师和学生互动：看到页面底部包含一个底部版块。在HTML5中，通常通过footer标签来定义。下面，我们来学习“footer标签”。（2）教师展示PPT对“footer标签”的概念及应用范围进行讲解。（3）、教师对“footer标签”在网页中的显示效果进行展示。（4）、教师针对“footer标签”进行讲解，并使用代码进行实时演示。（5）、学生练习，教师巡视，对疑难问题进行解答。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：nav标签、article标签、section标签。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，让学生使用结构标签搭建一个按照模块分区的页面，以此使学生更熟练地掌握header标签、nav标签、article标签、aside标签、section标签、footer标签的使用。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习2.4节【分组标签】。预习2.5节【页面交互标签】。第三课时（讲解figure和figcaption标签、hgroup标签、details和summary标签、progress标签、meter标签）说明：将2.4~2.5小节作为一个课时进行讲解。复习上节课内容对新课进行讲解前，先让学生分组讨论以下问题：上节课中我们学习了header标签、nav标签、article标签、aside标签、section标签以及footer标签，请对比分析它们的用法与区别？请小组代表对以上问题发表见解。教师对上述问题进行解释：header标签、nav标签、article标签、aside标签、section标签以及footer标签都是用于搭建页面结构的标签，具体区别如下：header标签header标签是一种具有引导和导航作用的结构标签，该标签可以包含所有通常放在页面头部的内容。header标签通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。nav标签nav标签用于定义导航链接，该标签可以将具有导航性质的链接归纳在一个区域中，使页面标签的语义更加明确。其中的导航标签可以链接到站点的其他页面，或者当前页的其他部分。article标签article标签代表文档、页面或者应用程序中与上下文不相关的独立部分，该标签经常被用于定义一篇日志、一条新闻或用户评论等。article标签通常使用多个section标签进行划分，一个页面中article标签可以出现多次。aside标签aside标签用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。section标签section标签用于对网站或应用程序中页面上的内容进行分块，一个section标签通常由内容和标题组成。footer标签footer标签用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：HTML5中新增了很多标签，其中，details和summary标签是其中重要的一个标签。那么，如何理解details和summary标签呢？教师对上述问题进行解释：details标签用于描述文档或文档某个部分的细节。summary标签经常与details标签配合使用，作为details标签的第一个子标签，用于为details定义标题。标题是可见的，当用户点击标题时，会显示或隐藏details中的其他内容。知识点讲解讲解“figure和figcaption标签”（1）、教师展示PPT对“figure和figcaption标签”的概念及应用范围进行讲解，指出figure标签用于定义独立的流内容，figcaption标签用于为figure标签组添加标题。（2）、教师对“figure和figcaption标签”在网页中的显示效果进行展示。（3）、教师对“figure和figcaption标签”进行讲解，并使用代码进行实时演示。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“hgroup标签”（1）、教师展示PPT对“hgroup标签”的概念及应用范围进行讲解，指出hgroup标签用于将多个标题（主标题和副标题或者子标题）组成一个标题组，通常它与h1~h6标签组合使用。（2）、教师针对“hgroup标签”进行讲解，并使用代码进行实时演示。（3）、教师分析说明使用“hgroup标签”需要注意的事项，并进行总结。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“details和summary标签”（1）、教师展示PPT对“details和summary标签”的概念及应用范围进行讲解，指出details标签用于描述文档或文档某个部分的细节，summary标签为details定义标题。（2）、教师对“details和summary标签”在网页中的显示效果进行展示。（3）、教师对“details和summary标签”进行讲解，并使用代码进行实时演示。（4）、教师分析说明使用“details和summary标签”需要注意的事项，并进行总结。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“progress标签”（1）、教师和学生互动：在日常工作中，我们经常需要统计某项工作完成的进度，那么在网页中使用HTML5标记统计某项工作完成的进度呢？HTML5语言提供了一个progress标签，下面将对progress标签进行讲解。（2）、教师展示PPT对“progress标签”的概念及应用范围进行讲解，指出progress标签用于定义一个正在完成的进度条。（3）、教师对“progress标签”进行讲解，并使用代码进行实时演示。（4）、教师针对“progress标签”的常用属性进行讲解，并进行代码演示。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“meter标签”（1）、教师展示PPT对“meter标签”的概念及应用范围进行讲解，指出meter标签用于表示指定范围内的数值。（2）、教师对“meter标签”进行讲解，并使用代码进行实时演示。（3）、教师针对“meter标签”的常用属性进行讲解，并进行代码演示。（4）、学生练习，教师巡视，对疑难问题进行解答。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：figure和figcaption标签、details和summary标签、progress标签。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生了解分组标签、页面交互标签，并能熟练地使用figure和figcaption标签、hgroup标签、details和summary标签、progress标签、meter标签搭建网页。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第四课时（讲解time标签、mark标签、cite标签、draggable属性、hidden属性、spellcheck属性、contenteditable属性）说明：将2.6~2.7小节作为一个课时进行讲解。复习上节课内容对新课进行讲解前，先让学生分组讨论以下问题：上节课中我们学习了progress标签，用于定义一个正在完成的进度条，这表示进度正在进行，但是不清楚还有多少工作量没有完成。progress标签的有两个常用属性值，请解释其属性值的具体含义及用法？请小组代表对以上问题发表见解。教师对上述问题进行解释：progress标签用于表示一个任务的完成进度，用0到某个最大数字（如100）之间的数字来表示准确的进度完成情况（如进度百分比）。progress标签的常用属性值有两个，具体如下：value：已经完成的工作量。max：总共有多少工作量。需要注意的是value和max属性的值必须大于0，且value的值要小于或等于max属性的值。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在HTML5中，为了使HTML页面中的文本内容更加形象生动，需要使用一些特殊的标签来突出文本之间的层次关系，这样的标签被称为层次语义标签。其中，time标签是一个重要的层次语义标签。那么，如何理解time标签及其属性呢？教师对上述问题进行解释：time标签用于定义时间或日期，可以代表24小时中的某一时间。time标签不会在浏览器中呈现任何特殊效果，但是该标签够以机器可读的方式对日期和时间进行编码，这样，用户能够将生日提醒或其他事件添加到日程表中，搜索引擎也能够生成更智能的搜索结果。time标签有两个属性：datetime：用于定义相应的时间或日期。取值为具体时间（例如：14:00）或具体日期（例如2015—09—01），不定义该属性时，由标签的内容给定日期/时间。pubdate：用于定义time标签中的日期/时间是文档（或article标签）的发布日期。取值一般为“pubdate”。知识点讲解讲解“time标签”（1）、教师和学生互动：浏览新闻页面时，我们经常可以看到很多带有时间和日期的新闻事件？有时候，这些时间我们需要记录下来，将生日提醒或其他事件添加到日程表中以提醒我们以后的生活或工作。为此，HTML5语言提供了一个time标签，下面将对time标签进行讲解。（2）、教师展示PPT对“time标签”的概念及应用范围进行讲解，指出time标签用于定义时间或日期。（3）、教师对“time标签”在网页中的显示效果进行展示。（4）、教师对“time标签”及其常用属性进行讲解，并使用代码进行演示。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“mark标签”（1）、教师和学生互动：我们知道，使用em和strong标记可以将某些文本加粗显示？但是，有时候我们需要让某些文本中高亮显示，以引起用户注意。HTML5语言提供了一个mark标签，下面将对mark标签进行讲解。（2）、教师展示PPT对“mark标签”的概念及应用范围进行讲解，指出mark标签的主要功能是在文本中高亮显示某些字符。（3）、教师对“mark标签”在网页中的显示效果进行展示。（4）、教师针对“mark标签”进行讲解，并使用代码进行实时演示。（5）、教师分析说明“mark标签”与“em和strong标签”的显示效果，并分析其异同。（6）、学生练习，教师巡视，对疑难问题进行解答。讲解“cite标签”（1）、教师和学生互动：在编辑一本书或者编写一篇论文时，需要编写文档参考文献的引用说明，并且通常将标记的文档内容以斜体展示在页面中。在HTML5标记中，提供了一个cite标签，用于对参考文献的引用说明。下面将对cite标签进行讲解。（2）、教师展示PPT对“cite标签”的概念及应用范围进行讲解。（3）、教师对“cite标签”进行讲解，并使用代码进行实时演示。（4）、教师分析说明使用“cite标签”需要注意的事项，并进行总结。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“draggable属性”（1）、教师展示PPT对“draggable属性”的概念进行讲解，指出draggable属性用来定义标签是否可以拖动。（2）、教师对“draggable属性”进行讲解，并使用代码进行实时演示。（3）、教师针对“draggable属性”的常用属性进行讲解，并举例说明。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“hidden属性”（1）、教师展示PPT对“hidden属性”的概念及应用范围进行讲解。（2）、教师对“hidden属性”进行讲解，并使用代码进行实时演示。（3）、教师对“hidden属性”的常用属性进行讲解，并举例说明。（4）、教师对“hidden属性”的注意事项进行说明，并分析总结。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“spellcheck属性”（1）、教师和学生互动：当我们登陆某个网站时，经常需要注册个人信息。填写信息时，如果不对输入的内容进行检查，用户很容易在输入框中填写不符合要求或拼写错误的内容，给用户带来很大的麻烦。在HTML5中，spellcheck属性主要针对于input标签和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。下面将对spellcheck属性进行讲解。（2）、教师展示PPT对“spellcheck属性”的概念进行讲解，指出spellcheck属性针对input标签和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。（3）、教师对“spellcheck属性”进行讲解，并使用代码进行实时演示。（4）、教师对“spellcheck属性”的常用属性进行讲解，并举例说明。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“contenteditable属性”（1）、教师展示PPT对“contenteditable属性”的概念讲解，指出contenteditable属性规定是否可编辑标签的内容。（2）、教师对“contenteditable属性”进行讲解，并使用代码进行实时演示。（3）、教师对“contenteditable属性”的常用属性进行讲解，并举例说明。（4）、教师对“contenteditable属性”的注意事项进行说明，并分析总结。（5）、学生练习，教师巡视，对疑难问题进行解答。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：time标签、mark标签、hidden属性、spellcheck属性。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生了解文本层次语义标签、全局属性，能够熟练地使用time标签、mark标签、cite标签控制页面，并使用draggable属性、hidden属性、spellcheck属性、contenteditable属性控制页面标签的显示效果。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习2.8节【阶段案例——制作专业宣传页面】。第五课时（讲解“阶段案例——制作专业宣传页面”）复习上节课内容对新课进行讲解前，先让学生分组讨论以下问题：上节课中我们学习了全局属性，主要包括draggable属性、hidden属性、spellcheck属性、contenteditable属性。下面，请大家讨论下，如何使用spellcheck属性及其属性值？请小组代表对以上问题发表见解。教师对上述问题进行解释：spellcheck属性主要针对于input标签和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值：true（默认值）和false，值为true时检测输入框中的值，反之不检测。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：通过前面几节的学习，我们了解了HTML5页面标签及其相关属性的使用。那么，请大家讨论下：如何使用结构标签中的相关标记搭建一个网站的页面结构？教师对上述问题进行解释：header标签是一种具有引导和导航作用的结构标签，该标签可以包含所有通常放在页面头部的内容。nav标签用于定义导航链接。article标签通常使用多个section标签进行划分。aside标签用来定义当前页面或者文章的附属信息部分，包括侧边栏、广告、导航条等其他类似的有别于主要内容的部分。section标签用于对网站或应用程序中页面上的内容进行分块，一个section标签通常由内容和标题组成。footer标签用于定义一个页面或者区域的底部。案例讲解案例描述本章前面讲解了HTML5新增的结构标签、分组标签、页面交互标签、文本层次语义标签以及常用的标准属性等内容。本节将结合前面所学知识点制作一个“专业宣传页面”，默认效果如图所示。当点击“计算机应用技术专业”时，会显示计算机应用技术专业的简介下拉菜单；再次点击，将下拉菜单收缩。同样，点击“计算机网络技术专业”时，会显示网络技术专业的简介下拉菜单；再次点击，将下拉菜单收缩。案例分析分析“制作专业宣传页面”的构成标签，将其拆解为几个部分，分析各部分使用了哪些HTML5标记及应用了哪些HTML5标记的属性。案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面结构等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。阶段小结小结重点：制作专业宣传页面。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，让学生再制作一次“制作专业宣传页面”。以此使学生更熟练地掌握“列表标签、结构标签、页面交互标签、全局属性”等知识点。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第六课时（上机测试）教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对HTML5页面标签及属性的熟练程度，以及对“列表标签”、“结构标签”、“分组标签”、“页面交互标签”、“全局属性”等知识点的掌握程度。（作品点评）教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。布置作业完成课后“动手实践”，并扫描二维码查看答案。预习3.1节【CSS3简介】。课后教师活动学生活动教学资源与手段设计意图教师在职教云平台布置拓展任务。根据课中修改意见，继续完善网页简介页面。职教云平台作业提交功能。内化知识，学以致用。教学评价1.评价构成：线上学习平台记录成绩和线下实践操作成绩构成。2.评价结果：为了多元化全过程考核评价，学生课堂学习评价表：科学量化学生各环节学习情况；学习周报：准确呈现学生学习趋势；好友积分排行表：显示与同学好友学习情况的对比。教学反思教学效果本教学设计采用线上线下的混合教学模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学，同时加强专业教育，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神。诊改措施1.教学过程中引入了职教云平台，平台虽然给予了学生较为中肯的建议，但还缺乏有效的监督手段。2.在今后的工作中，将注重对学生的成长性评价，努力为学生的个性化学习和终身学习提供帮助。

教学课题CSS3入门专业大类计算机大类所属课程静态网页设计授课对象计算机应用技术专业学生所选教材《HTML5+CSS3网站设计基础教程》授课地点机房授课时长4课时教学分析内容分析本课程根据《计算机应用技术专业人才培养方案》，确定该课程是面向计算机相关专业的一门专业基础课，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。“CSS3入门”选自《HTML5+CSS3网站设计基础教程》第三章节内容，为后面网页的样式的设置打下良好的基础。学情分析授课对象为高职计算机应用技术专业学生。根据学生学情分析如下：1.知识基础：本课程开设在大一第二学期，大部分学生对程序设计语言有了一定的了解，具备一定的平面设计基础。2.能力基础：通过前面的学习，能熟练的使用电脑，具备简单的代码编写能力。3.行为习惯：现代学生是生活一个信息化的时间，学生喜欢形象化，活动式的教学内容，适应从简单到复杂的学习模式。对网页开发比较感兴趣，有较为丰富的网站使用经验。教学目标知识目标技能目标素养目标1.掌握创建CSS的步骤和编写规则。2.熟悉CSS基本选择器的使用。3.掌握常用字体、文本属性。能够运用CSS选择器定义标记样式，能够运行文本样式属性定义文本样式。1.培养学生计算机思维的能力，帮助学生树立科学严谨的负责态度。2.培养学生的团队协作意识，自主解决问题的能力。教学重点CSS样式表和基础选择器教学难点CSS层叠性和继承性教学策略教学组织与实施本课以学生的疑问、观点和观察结果为教学契机，采用探究式学习方式。利用职教云平台布置课前任务，通过学生完成任务分析教学重难点，在课堂教学中引入案例突破教学重难点，争取学生的薄弱环节布置课后任务巩固教学知识点。整个教学采用线上线下相结合的模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学。同时加强德育渗透，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神，以及精益求精开拓创新的艺术家精神。教学方法本课程采用探究式教学方法，分为三大任务：一是基础理论部分，通过学生讲解，教师总结。二是学生分享分析作品，在相互学习中共同提高，加深印象。三是将专业教育渗透到教学中，实践教学案例的选取，以学生专业领域为背景，充分发挥学生的主体地位，为后续的专业学习打下良好的基础。教学资源与手段电子教学资料（如PPT，知识笔记，微课视频）、职教云平台等，辅助学生自主学习和探究，解决教学重难点，提高学习效率。教学实施课前教师活动学生活动教学资源与手段设计意图1.发布学习资源，比如：教学PPT、知识清单等，下达任务。2.查看学生提交职教云平台作业，根据提交作业调整教学策略，确定教学难点。1.学生领取任务单，借助职教云微课初步了解HTML简介，了解常用的网页制作工具。1.教学资源：教学PPT、知识清单、职教云微课。2.教学手段：职教云平台作业提交功能。1.学生预习，为课中做准备，培养学生的自主学习能力。2.教师通过作业反馈掌握学生的预习情况，确定教学难点。课中教学过程第一课时（讲解CSS概述、CSS3发展历史、CSS3浏览器支持情况）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习第二章“HTML5标签及属性”的相关知识。通过上一章的学习，我们知道：HTML5文档的基本格式中，有一个重要的标记——<!DOCTYPE>标记。请简要描述什么HTML5中的“<!DOCTYPE>声明”及其用法？答案：<!DOCTYPE>标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：<!doctypehtml><!doctypehtml>只有在开头处使用<!DOCTYPE>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在网页设计中，运用CSS3技术能够让原有的网站变得趣味盎然，很多站点都为自己的页面添加了各种炫酷的CSS3效果。但是CSS3技术是怎样发展起来的？哪些浏览器能够很好的兼容CSS3呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：CSS基础选择器主要包括四种，具体如下：20世纪90年代初，HTML语言的诞生，各种形式的样式表也随之出现。1994年哈坤·利提出了CSS的最初建议，CSS发展至今出现了4个版本，对它们的具体介绍如下：（1）CSS11996年12月W3C发布了第一个有关样式的标准CSS1。这个版本中，已经包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。（2）CSS21985年5月，CSS2正式推出，这个版本开始使用样式表结构，该版本也是目前正在使用的版本。（3）CSS2.12004年2月，CSS2.1正式推出。它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。（4）CSS3早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定。但是各主流浏览器已经开始支持其中的绝大部分特性。CSS3给我们带来了众多全新的设计体验，但是并不是所有的浏览器都完全支持它。其中，谷歌（Chrome）和Safari浏览器对从CSS3的支持较好。知识点讲解讲解“CSS概述”（1）、教师展示PPT对“CSS概念及作用”进行讲解，并打开网页进行效果展示。（2）、教师讲解CSS在HTML5中的书写位置，并使用代码进行演示。（3）、教师展示PPT，对初学者在书写CSS样式时需要注意的问题进行讲解。（4）、教师让学生自行尝试，理解“CSS样式规则”的语法，并能灵活运用。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“CSS3发展历史”（1）、教师展示PPT对“CSS3发展历史”进行说明，并对比各个版本间的区别与联系。（2）、教师展示PPT对“CSS3发展历史”进行讲解并通过代码进行演示。（3）、学生自主提问，教师对疑难问题进行解答。讲解“CSS3浏览器支持情况”（1）、教师和学生互动：浏览器是网页运行的平台，目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，但是并不是所有的浏览器都完全支持CSS3。（2）、教师分别对各个浏览器对CSS3的支持情况进行分析，并总结出谷歌（Chrome）浏览器对CSS3的支持最好。（3）、教师指出由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，各主流浏览器都定义了自己的私有属性。内核类型相关浏览器私有前缀TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o（4）、教师对各个浏览器的私有属性进行讲解，并通过代码进行演示。（5）、学生练习，教师巡视，对疑难问题进行解答。阶段小结小结重点：CSS3浏览器支持情况。易错点：注意区分各个浏览器在CSS3中的私有前缀。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地了解“CSS概述、CSS3发展历史、CSS3浏览器支持情况”等知识点。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。第二课时（讲解CSS样式规则、引入CSS样式表、CSS基础选择器）复习上节课内容浏览网页的时候，我们可以看见很多炫丽的CSS3效果，CSS3给我们带来了众多全新的视觉感受和用户体验，但是并不是所有的浏览器都完全支持它，所以使用CSS3时需要添加私有前缀。那么，常见的浏览器内核类型和私有前缀都有哪些呢？说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。本课时内容学习分组讨论对新课进行讲解前，先让学生分组讨论以下问题：如果把一个网页看成一个人的话，HTML5就相当于人的骨架，是结构；CSS相当于人的衣服，是表现。那么如何使用CSS去修饰页面呢？其实，给网页应用样式首先需要使用CSS中的选择器。那么，CSS基础选择器主要有哪些？又有哪些不同呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：CSS基础选择器主要包括四种，具体如下：标记选择器。标记选择器是指用HTML标记名称作为选择器。用标记选择器定义的样式对页面中该类型的所有标记都有效。类选择器。类选择器使用“.”进行标识，后面紧跟类名。其最大的优势是可以为元素对象定义单独或相同的样式。id选择器。id选择器使用“#”进行标识，后面紧跟id名。元素的id值是唯一的，只能对应于文档中某一个具体的元素。通配符选择器。通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。知识点讲解讲解“CSS样式规则”（1）、教师展示PPT对“CSS样式规则”的具体格式进行讲解，并使用代码进行演示。（2）

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论