HTML5+CSS3网站设计基础教程教学设计.docx
教学课题HTML概述专业大类计算机大类所属课程静态网页设计授课对象计算机应用技术专业学生所选教材HTML5+CSS3网站设计基础教程授课地点机房授课时长6课时教学分析内容分析本课程根据计算机应用技术专业人才培养方案，确定该课程是面向计算机相关专业的一门专业基础课，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。“HTML概述”选自HTML5+CSS3网站设计基础教程第一章节内容，为后面章节的学习打下良好的基础。学情分析授课对象为高职计算机应用技术专业学生。根据学生学情分析如下：1 .知识基础：本课程开设在大一第二学期，大部分学生对程序设计语言有了一定的了解，具备一定的平面设计基础。2 .能力基础：通过前面的学习，能熟练的使用电脑，具备简单的代码编写能力。3 .行为习惯：现代学生是生活一个信息化的时间，学生喜欢形象化，活动式的教学内容，适应从简单到复杂的学习模式。对网页开发比较感兴趣，有较为丰富的网站使用经验。教学目标知识目标技能目标素养目标1 .掌握HTML5文档基本格式。2 .掌握文本控制标签。3 .掌握图像标签。能够使用HTML5相关标签及属性，制作简单的网页页面。L培养学生计算机思维的能力，帮助学生树立科学严谨的负责态度。2.培养学生的团队协作意识，自主解决问题的能力。教学重点文本控制标签和图像标签。教学难点绝对路径和相对路径的使用。教学策略教学组织与实施本课以学生的疑问、观点和观察结果为教学契机，采用探究式学习方式。教学方法利用职教云平台布置课前任务，通过学生完成任务分析教学重难点，在课堂教学中引入案例突破教学重难点，争取学生的薄弱环节布置课后任务巩固教学知识点。整个教学采用线上线下相结合的模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学。同时加强德育渗透，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神，以及精益求精开拓创新的艺术家精神。本课程采用探究式教学方法，分为三大任务：一是基础理论部分，通过学生讲解，教师总结。二是学生分享分析作品，在相互学习中共同提高，加深印象。三是将专业教育渗透到教学中，实践教学案例的选取，以学生专业领域为背景，充分发挥学生的主体地位，为后续的专业学习打下良好的基础。电子教学资料（如PPT,知识笔记，微课视频）、职教云平台等，辅助学生自主学习和探究，解决教学重难点，提高学习效率。教学实施课前教师活动学生活动教学资源与手段设计意图L发布学习资源，比如：教学PPT.知识清单等，下达任务。2.查看学生提交职教云平台作业，根据提交作业调整教学策略，确定教学难点。1.学生领取任务单，借助职教云微课初步了解HTML简介，了解常用的网页制作工具。L教学资源：教学PPT、知识清单、职教云微课。2.教学手段：职教云平台作业提交功能。L学生预习，为课中做准备，培养学生的自主学习能力。2.教师通过作业反馈掌握学生的预习情况，确定教学难点。教学资源与手段课中第一课时（讲解HTML5发展历程、HTML5优势、HTML5浏览器支持情况、创建第一个HTML5页面）上本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：什么是HTML5?为什么要学习HTML5语言呢？请小组代表对以上问题发表见解。教师对上述问题进行解释：HTML5是超文本标签语言（Hypertextmarkuplanguage）的第5代版本，目前还处于推广阶段。从HTML4.0XHTML至IIHTML5,从某种意义上讲，这是HTML描述性标签语言的一种更加规范的过程。随着时代的发展，统一的互联网通用标准显得尤为重要。在HTML5之前，由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的目标就是将Web带入一个成熟的应用平台。在教学过程HTML5平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。2014年10月29日，万维网联盟宣布，经过8年的艰辛努力，HTML5标准规范终于制定完成，并公开发布。HTML5将会逐渐取代HTML4.01、XHTML1.0标准，引领时代的潮流，开创互联网的新时代。Q知识点讲解讲解“HTML发展历程”（1）教师微课展示对“HTML语言”的概念及发展历史进行简单介绍。（2）教师微课展示对HTML从2.0版至J3.2版、4.0版，再到1999年的4.01版的各个版本的区别与联系。（3）教师微课展示对HTML5出现的原因及背景进行介绍。（4）教师微课展示对HTML5的出现与发展进行讲解，并分析其优缺点。（5）学生自主提问，教师对疑难问题进行解答。讲解“HTML5优势”（1）教师展示PPT指出HTML5增加了很多新功能和新特性。（2）教师展示PPT,针对HTML5的“解决了跨浏览器问题、新增了多个新特性、用户优先的原则、化繁为简的优势”优势分别进行讲解，并联系实际举例说明。（3）学生自主提问，教师对疑难问题进行解答。>讲解“HTML5浏览器支持情况”（I）教师通过PPT展示一些常见浏览器，并进行汇总。（2）教师展示PPT分别讲解IE浏览器、火狐浏览器、Google浏览器、Safari浏览器、Opera浏览器对HTML5语言新功能和新特性的浏览器支持情况。（3）教师分别对Web标准的“结构标准”、“表现标准”IE浏览器火用视况器<w««««GOO及“行为标准”进行详细讲解，并分别举例说明。（4）教师分析这些浏览器纷纷朝着HTML5的方向迈进，指出HTML5的时代即将来临。（5）学生自主提问，教师对疑难问题进行解答。讲解“创建第一个HTML5页面”（1）教师和学生互动：我们知道，创建文档可以使用word,创建数据表可以使用excel,那么创建HTML网页可以使用哪些工具呢？网页制作过程中，创建HMTL5网页源代码的工具很多，如EditPIus、notepad+>SUblime等。（2）教师指出实际工作中，最常用的网页制作工具是HBuiIdero(3)教师打开HBuiIder工具，对HBuiIder工具的常见操作进行演示说明。(4)教师打开HBuiIder,新建一个HTML5默认文档，演示如何编写、修改并保存HTML5代码。XWF)M(E)tt(D*义2)KC(三)KK(G)*tt)SH(B)IIW)Ha(V)(MMH)+©同博索(双击CtrnQ”边改边看模式RQ-<34AGJIQHSiYB"0“BfnpteOlhtmlN-三。Webin.11"00-1<100ctyp三ht>。口4>«-0proctlKkUfi>11>g2"<htal>3<hd>4<tchrtt三UTF->S<titl><titl>6<hd>卜rx4mp*cl.htmi(dex.html7<body>8<body>9<htal>e(5)、学生练习，教师巡视，对疑难问题进行解答。令阶段小结小结重点：创建第一个HTML5页面。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生了解HTML5发展历程、HTML5优势、HTML5浏览器支持情况，并能够使用HBuiIder创建一个HTML5页面。第二课时(讲解HTML5文档基本格式、HTML5语法、标签的属性、HTML5文档头部相关标签)工复习上节课内容工本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML5标签语言也不例外，同样需要遵从一定的规范。请大家讨论下：使用HBUilder新建HTML5默认文档时，HTML5文档的基本格式包括哪些标签？请小组代表对以上问题发表见解，教师对上述问题进行解释： <!DOCTYPE>标签<!DOCTYPE>标签标签位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。 <html>标签<html>标签位于v!doctype>标签之后，也称为根标签，用于告知浏览器其自身是一个HTML文档。 <head>标签<head>标签用于定义HTML文档的头部信息，也称为头部标签。<body>标签<body>标签用于定义HTML文档所要显示的内容，也称为主体标签。令知识点讲解>讲解“HTML5文档基本格式”(I)、教师通过DreamWeaVer工具新建默认文档，并指出默认文档中会自带一些源代码。<!doctypehtml><html><head><metacharset=nutf-8n>Ctitle无标题文档<title><head><body><body><html>(2)、教师分析自带的源代码，讲解HTML5文档的基本格式及构成标签。(3)、教师让学生自行尝试，理解!DOCTYPE文档类型声明、html根标签、head头部标签、body主体标签的语义及用法。(4)、学生练习，教师巡视，对疑难问题进行解答。讲解“HTML5语法”(1)S教师展示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)、教师分别对vVtle标签、Vmeta/标签、Vlink标签及VStyle标签的基本语法格式进行讲解，并进行代码演示。(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=nantype=,'checkbox><inputreadonly=*'readonly"type=,'textn>允许部分属性值的属性省略在HTML5中，部分标志性属性的属性值可以省略。例如：<inputchecked=ncheckedtype=checkboxn/><inputreadonly="readonly"type=,'text>说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。手本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：我们知道，一篇结构清晰的文章通常都有标题和段落，那么如何使用HTML5语言创建网页中的标题和段落呢？教师对上述问题进行解释：为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML5提供了6个等级的标题，即<hl>、<h2>><h3>x<h4>><h5>和<h6>,从<hl>到<h6>重要性递减。其基本语法格式如下：<hnalign="对齐方式”>标题文本<hn>该语法中n的取值为1到6,align属性为可选属性，用于指定标题的对齐方式。同样地，网页也可以分为若干个段落，而段落的标签就是vp>。默认情况下，文本在段落中会根据浏览器窗口的大小自动换行。vp>是HTML文档中最常见的标签，其基本语法格式如下：<palign="对齐方式”>段落文本</p该语法中align属性为<p>标签的可选属性，和标题标签vhl><h6>一样，同样可以使用align属性设置段落文本的对齐方式。令知识点讲解>讲解“标题和段落标签”（1）、教师展示PPT对“标题标签”、“段落标签”的概念及基本语法格式进行讲解。（2）、教师对“标题标签”、“段落标签”的显示效果通过代码进行演示。（3）、教师分别对“标题标签”及“段落标签”的align属性进行讲解并通过代码进行演示。(4)、学生练习，教师巡视，对疑难问题进行解答。讲解“文本格式化标签”(1)、教师和学生互动：使用“HTML标签的属性”可以设置文本的对齐方式、颜色等，那么，如果想要为文字设置粗体、斜体或下划线效果需要怎么办呢？下面，我们来学习“文本格式化标签”。(2)、教师展示PPT对“文本格式化标签”进行讲解，并使用代码进行实时演示。(3)、学生练习，教师巡视，对疑难问题进行解答。讲解“特殊字符标签”(1)、教师和学生互动：浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？下面，我们来学习特殊字符标签。(2)、教师展示PPT对“常用特殊字符标签”进行讲解，分析“字符标签”的构成，并使用代码进行实时演ZjSo(3)、学生练习，教师巡视，对疑难问题进行解答。令阶段小结小结重点：段落标签、文本格式化标签。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生掌握段落标签、文本格式化标签、特殊字符标签的使用。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。Q布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习1.4节【图像标签】。第四课时(讲解常用图像格式、图像标签img/、绝对路径和相对路径）复习上节课内容在讲解本节内容前，抛出以下问题让学生回答，以复习上节课内容。1、在上节课中，我们学习了文本格式化标签。那么，在文本格式化标签中，如何将文字设置为粗体呢？答案：将文字以粗体方式显示的标签是：Vb标签或sirong标签。其中，使用b标签定义文本粗体，strong标签定义强调文本。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。工本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：在网站中，我们可以看到绚丽多彩的图片。那么，目前网页上常用的图像格式有哪些呢，请结合它们的优缺点进行说明？请小组代表对以上问题发表见解C教师对上述问题进行解释：目前网页上常用的图像格式主要有GIF、JPG和PNG三种，具体区别如下： GIF格式GlF最突出的地方就是它支持动画，同时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格式。简而言之，在网页中小图片或网页基本元素如图标、按钮等考虑GlF或PNG-8,半透明图像考虑PNG-24,类似照片的图像则考虑JPGo÷知识点讲解讲解“常用图像格式”（1）、教师带领学生查看网页中的图像，总结网页中常用的图像格式。（2）、教师展示PPT对GIF、JPG和PNG三种常用的图像格式进行讲解，比较三种格式的异同，并指出其优缺点。（3）、学生提问，教师对疑难问题进行解答。讲解“图像标签img”（1）、教师和学生互动：在网页中随处可见各种各样的图像，比如：广告图、推广图、轮播图等。大家在网页中都见过哪些图片呢？然后，教师使用PPT展示网页中各式各样的图片效果。（2）、教师展示PPT对“图像标签”及其属性进行讲解，并使用代码进行实时演示。（3）、学生练习，教师巡视，对疑难问题进行解答。讲解“绝对路径和相对路径”（1）、教师通过文件夹的层级关系对“路径”进行讲解，并指出网页中的路径通常分为“相对路径与绝对路径”两种。（2）教师展示PPT对“绝对路径”进行讲解，并举例说明。（3）、教师展示PPT对“相对路径”进行讲解，并通过“图像文件和Hml文件”的不同位置进行演示。（4）、学生提问，教师对疑难问题进行解答。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。令阶段小结小结重点：图像标签。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。÷巩固练习巩固本课时知识点学完知识点后，教师带领学生对本课时所学知识点进行回顾。以此使学生更熟练地掌握图像标签img的使用，并能够区分图像的相对路径与绝对路径的不同。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。预习1.5节【阶段窠例一制作学院简介页面】。第五课时（讲解制作学院简介页面）复习上节课内容工本课时内容学习令分组讨论对新课进行讲解前，先让学生分组讨论以下问题：下列选项中，哪一个属性不是文本的标签属性？（）。A、nbsp;alignC、colorD、size答案：Aalign、colorsface都是p标签的属性，align属性设置段落文本的对齐方式,color属性设置文本的颜色，size属性设置文本的大小。只有“nbsp;”选项不是文本的标签属性，而是一个代表空格符的特殊标签。说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。令案例讲解案例描述本章前几节重点讲解了HTML5语法及标签、文本控制标签以及图像标签等。为了使读者能够更好地认识HTML5,本节将通过案例的形式分步骤地制作一个HTML5学院简介页面，默认效果如下图所示。案例分析分析“制作学院简介页面”的构成元素，将其拆解为几个部分，分析各部分使用了哪些HTML5标签及应用了哪些HTML5标签的属性。案例实现教师带领学生分步骤地进行网页制作，通过分析效果图、制作页面、制作页面链接等步骤完成页面的制作，并指出其中需要注意的事项。说明：在网页制作时可适时停下来，让学生自行尝试。小组之间可以协作讨论，教师巡视，对疑难问题进行解答。令阶段小结小结重点：制作学院简介页面。答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。令巩固练习巩固本课时知识点学完知识点后，让学生再制作一次“制作学院简介页面”O以此使学生更熟练地掌握“HTML5语法、文本控制标签、图像标签”等知识点，并能够通过创建超链接来实现页面间的跳转。通过“补充案例”加强学习教师分发测试题目及案例素材给学生，对于掌握较好的同学，可以通过补充案例对相关知识点进行巩固。令布置作业完成“补充案例”，通过平台提交给教师，教师下节课进行点评。复习本课时的所有知识点和案例，加强巩固。第六课时（上机测试）教师发放测试题目及案例素材，学生进行上机测试。以此检查学生对相关知识点的掌握情况。测试完成后将作品通过平台提交给老师。上机测试主要针对本章中需要重点掌握的知识点，以及在代码中容易出错的操作步骤。通过上机测试可以考察同学对HTML5相关标记及属性的熟练程度，以及对“文本控制标记”、“图像标记”、“超链接标记”等知识点的掌握程度。（作品点评）教师对学生的提交的上机测试作品进行点评，指出代码中容易出现bug的地方，并给与解答。课后教师活动学生活动教学资源与手段设计意图教师在职教云平台布置拓展任务。根据课中修改意见，继续完善网页简介页面。职教云平台作业提交功能。内化知识，学以致用。教学评价1 .评价构成：线上学习平台记录成绩和线下实践操作成绩构成。2 .评价结果：为了多元化全过程考核评价，学生课堂学习评价表：科学量化学生各环节学习情况；学习周报：准确呈现学生学习趋势；好友积分排行表：显示与同学好友学习情况的对比。教学反思教学效果本教学设计采用线上线下的混合教学模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学，同时加强专业教育，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神。诊改措施L教学过程中引入了职教云平台，平台虽然给予了学生较为中肯的建议，但还缺乏有效的监督手段。2.在今后的工作中，将注重对学生的成长性评价，努力为学生的个性化学习和终身学习提供帮助。教学课题HTML5标签及属性专业大类计算机大类所属课程静态网页设计授课对象计算机应用技术专业学生所选教材HTML5+CSS3网站设计基础教程授课地点机房授课时长6课时教学分析内容分析本课程根据计算机应用技术专业人才培养方案，确定该课程是面向计算机相关专业的一门专业基础课，通过本课程的学习，学生能够了解网页Web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。“HTML5标签及属性”选自HTML5+CSS3网站设计基础教程第二章节内容，为后面网页的制作打下良好的基础。学情分析授课对象为高职计算机应用技术专业学生。根据学生学情分析如下：1.知识基础：本课程开设在大一第二学期，大部分学生对程序设计语言有了一定的了解，具备一定的平面设计基础。2 .能力基础：通过前面的学习，能熟练的使用电脑，具备简单的代码编写能力。3 .行为习惯：现代学生是生活一个信息化的时间，学生喜欢形象化，活动式的教学内容，适应从简单到复杂的学习模式。对网页开发比较感兴趣，有较为丰富的网站使用经验。教学目标知识目标技能目标素养目标L掌握HTML文档的基本结构，能够熟练创建HTML文档。2.掌握HTML的列表标签、超链接标签的能够使用HTML5分组标签、页面交互标签，实现简单的网页交互效果。L培养学生计算机思维的能力，帮助学生树立科学严谨的负责态度。2.培养学生的团队协作意识，自主解决问题的使用。3 .掌握HTML5新增标签的使用。4 .理解HTML5语义标签。能力。教学重点列表标签的使用和页面交互标签。教学难点列表标签的嵌套应用。教学策略本课以学生的疑问、观点和观察结果为教学契机，采用探究式学习方教 学 组 织 与 实 施式。利用职教云平台布置课前任务，通过学生完成任务分析教学重难点，在课堂教学中引入案例突破教学重难点，争取学生的薄弱环节布置课后任务巩固教学知识点。整个教学采用线上线下相结合的模式，借助信息化手段，以学生为主体，自主学习探究教师辅助加以引导，完成理论实践一体化的教学。同时加强德育渗透，注重学生全面发展，在教学过程中注重引导和培养学生的爱岗敬业坚持不懈的职业精神，以及精益求精开拓创新的艺术家精神。本课程采用探究式教学方法，分为三大任务：一是基础理论部分，通过学生讲解，教师总结。二是学生分享分析作品，在相互学习中共同提高,加深印象。三是将专业教育渗透到教学中，实践教学案例的选取，以学生专业领域为背景，充分发挥学生的主体地位，为后续的专业学习打下良好的基础。教电子教学资料（如PPT,知识笔记，微课视频）、职教云平台等，辅学助学生自主学习和探究，解决教学重难点，提高学习效率。资段教学实施教师活动学生活动课前设计意图教学资源与手段L发布学习资源，比如：教学PPT、知识清单等，下达任务。2.查看学生提交职教云平台作业，根据提交作业调整教学策略，确定教学难点。L学生领取任务单，借助职教云微课初步了解HTML简介，了解常用的网页制作工具。L教学资源：教学PPT、知识清单、职教云微课。2.教学手段：职教云平台作.业提交功能。1 .学生预习，为课中做准备，培养学生的自主学习能力。2 .教师通过作业反馈掌握学生的预习情况，确定教学难点O课中教学过程第一课时（讲解无序列表标签、有序列表标签、定义列表标签、列表的嵌套应用、超链接标签）工复习上节课内容在讲解本节内容前,抛出以下问题让学生回答，以复习第一章“HTML概述”的基础知识。1、在上一章中，我们学习了HTML5的相关标记及其属性。在HTML标记中，主要分为单标记和双标记两种。那么，什么是“单标记”呢？答案：单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：标记名/例如：<hr/>2、浏览网页时，我们经常阅读很多的段落文字。在网页制作时，同样需要使用段落标记搭建页面结构，那么如何设置段落标记p的对齐属性呢？答案：段落标记p的基本语法格式如下：palign="对齐方式”段落文本p该语法中align属性为p标记的可选属性，使用align属性可以设置标题和段落的对齐方式，其取值如下： left设置标题文字左对齐(默认值) center设置标题文字居中对齐right设置标题文字右对齐说明：教师可根据学生对上述问题的回答情况，对以上问题进行简单讲解或直接进入本课时新内容的学习。，本课时内容学习÷分组讨论对新课进行讲解前，先让学生分组讨论以下问题：为了使网页更易读，经常将网页信息以列表的形式呈现，例如，淘宝商城首页的商品服务分类、排列有序，呈现为列表的形式。其实，在HTML5中，提供了3种常用的列表，分别为无序列表、有序列表和定义列表。那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？请小组代表对以上问题发表见解。教师对上述问题进行解释:所谓无序列表就是列表中列表项的前导符号没有一定的次序,而是用黑点、圆圈、方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰，更合理。有序列表是一个有特定顺序的列表项的集合。在有序列表中,各个列表项有先后顺序之分，它们之间以编号来标记。使用ol标签可以建立有序列表，表项的标签仍为Gi。无序列表使用vulul标记定义，lili为具体的列表项。有序列表使用标记定义，lili为具体的列表项。知识点讲解讲解标签”(I)、教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。D无序列表O127.0.0.1:802.书城的支付方式到付付银货财支网付通宝在（2）、教师展示PPT,对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。（3）、教师指出定义“无序列表”时需要注意的问题，并给与解答。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“。1标签”（1）、教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明。JD向序列太X+口IalGJC127.0.0.1:802.网银在线支付步骤a.选择您要使用的银行；b.显示您的应付总价，点击"付款"；c.确认您在银行的预留信息；d输入您的网银账号、苣录密码和验证码；e.支付成功,提示"已完成付款".（2）、教师展示PPT,对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。（3）、教师对比“无序列表”与“有序列表”的显示效果，分析其区别与联系。（4）、教师指出定义“有序列表”时需要注意的问题，并给与解答。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“dl标签”（1）教师展示PPT对“定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。（2）、教师展示PPT,对“定义列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。（3）、教师对比“定义列表”与“无序列表和有序列表”的显示效果，分析其区别与联系。（4）、教师指出定义“定义列表”时需要注意的问题，并给与解答。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“列表的嵌套应用”（1）、教师和学生互动：所谓列表的嵌套应用就是无序列表和有序列表嵌套混合使用。嵌套列表可以把页面分成多个层次，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套,而且彼此可以互相嵌套。下面，将对列表的嵌套进行讲解。:D列表S5嵌套应用X+÷÷C127.0.0.1:8020/project2/example0.网络书城客服中心网络书城的支付方式。货到付款。财付通。支付宝。网银在畿网银在线支付步躲1 .选择您要使用的银行；2 .显示您的应付息价，点击"付款"3 .确认您在银行的预留值息.；4 .输入您的网银账号、登录密码和验证玛；5 .支付成功，提示"已完成付ST.（2）、教师通过PPT对“列表嵌套”在网页中的常见效果进行展示。（3）、教师对“列表嵌套”进行讲解并通过代码进行演示。（4）、教师指出“列表嵌套”时需要注意的问题，并给予解答。（5）、学生练习，教师巡视，对疑难问题进行解答。讲解“创建超链接”（1） 教师和学生互动：教师打开360导航网址http:（2）、教师针对超链接的作用以及基本语法格式进行讲解，并进行演示说明。（3）、教师展用PPT对“创建超链接”进行讲解，并使用代码进行实时演示。（4）、学生练习，教师巡视，对疑难问题进行解答。讲解“内部书签”（1）、教师和学生互动：如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。那么如何提高信息的检索速度呢？HTML5语言提供了一种特殊的链接一一锚点链接，用户能够快速定位到目标内容。（2）、教师针对“锚点链接”的作用及创建方法进行讲解，并进行演示说明。GCQ12700.1y.t：含O武汉的名胜古迹Riilifta三ll三3USStntfIlIW除也于三3»诩二年（公元22坤）.银比瓦在的IE楂于1985外形再扑典渣.是IK仅市的际吉在策.量为天下江山一IrZ55W.与期雪岳醐t,江西王周拜杯力一S三大名恰”代停人r-三,人己ImI去,比用空余It喂.黄一去不复也.白云千铁空，密.川历历汉IB您，芳三1IW日当关何处是，电渡江上侵入纪Be力干古电.更使!«名声大阳.而李S的与史能中轨第一卷上歌笛f迁*表长沙.国口长安不见事1«中次王备江城五月骞丽二更是为武汉江城的美号HS了（3）、教师对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。（4）、学生练习，教师巡视，对疑难问题进行解答。阶段小结>小结重点：UI标签、Ol标签、dl标签、列表的嵌套应用、超链接标签。>答疑教师询问学生对于知识点还有什么不理解的地方。针对学生不理解的知识点给与解释。
