网页制作案例教程HTML5+CSS3课程设计_第1页
网页制作案例教程HTML5+CSS3课程设计_第2页
网页制作案例教程HTML5+CSS3课程设计_第3页
网页制作案例教程HTML5+CSS3课程设计_第4页
网页制作案例教程HTML5+CSS3课程设计_第5页
已阅读5页，还剩113页未读， 继续免费阅读

下载本文档

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

文档简介

《网页制作案例教程（HTML5+CSS3）》课程单元教学设计（2023~2024学年第2学期）课程名称：网页制作授课年级：2023年级授课学期：2023-2024学年第二学期教师姓名：某某老师2024年2月1日

目录13779项目1网页制作入门 项目1网页制作入门授课信息教学课题网页制作入门所属课程网页制作学时4学时任务目标教学任务随着互联网的不断发展，前端开发岗位受到越来越多的关注，网页制作是前端开发的基础课程。本项目将通过"航天任务"网页制作，介绍VSCode开发工具的安装和使用，对web基本概念、HTML5的基本结构和语法进行详细讲解。根据学习内容同学们制作"大赛获奖网页"页面。课堂案例课后实训教学目标素质目标1.自觉遵守中国软件行业基本公约；2.有良好的知识产权保护观念和意识，自觉抵制各种违反知识产权保护法规的行为；3.能自觉遵守企业规章制度与产品开发保密制度；4.遵守有关隐私信息的政策和规程，保护客户隐私。思政目标1.通过“航天任务”网页制作，激发同学们攀科技高峰的航天梦；2.通过制作“大赛获奖网页”的页面，介绍大赛，激励学生努力学习。能力目标1.会安装和使用Web开发工具；2.能够使用VSCode工具创建简单的网页。知识目标1.理解网页基本概念和Web标准；2.熟悉HTML5页面文档结构。教学重难点教学重点教学重点VSCode开发工具的使用，制作网页步骤。措施：通过上机操作加强学习和补充案例进行巩固。教学难点教学难点：HTML5页面基础。措施：通过上机操作加强学习和补充案例进行巩固。教学策略依据标准教学标准1.高等职业学校计算机应用技术专业教学标准；2.学校计算机应用技术专业人才培养方案；3.《Web前端开发》课程大纲；4.《Web前端开发》--1+X职业技能等级证书（初级）要求。行业标准1.GB/T8567-2006计算机软件文档编制规范。2.GB/T30971-2014软件工程用于互联网的推荐实践网站工程、网站管理和网站生存周期。教学策略教学方法讲授演示为主，案例教学法、分组讨论法、任务驱动法。教材选用教材《网页制作案例教程（HTML5+CSS3）》西安电子科技大学出版社，王淑敏主编。参考教材《Web前端开发实训案例教程（初级）》、《Web前端开发实训案例教程（中级）》1+x证书Web前端开发职业技能等级考试实训案例教程北京新奥时代科技有限责任公司编写，中国工信出版集团，电子工业出版社2019。活动安排教学环节教学内容教师活动学生活动设计意图与资源课前探索网页基本概念、VsCode的安装与使用、页面文档结构1.教师教学平台下发《初识HTML5》录课视频，下发测试题；2.学生了解航天飞行史。1.学生思考《网页制作》课程是做什么的；2.接收学习任务，自主观看视频，对网页制作有初步了解1.通过制作“航天飞行任务”网页，激发同学们勇攀科技高峰的梦想。2.教师借助信息化手段和资源，激发学生主动学习的意识，提高课堂效率；3.课前练习题可以预习新知，根据数据及时了解学生知识掌握情况，并及时调整教学内容。课堂教学项目引入（10min）引入案例：“航天飞行任务”网页1.引入案例：“航天飞行任务”页面；2.老师扮演客户，向学生询问项目进展，提出项目新需求。学生与客户沟通，了解客户需求，带着问题学习相关知识。1.能够与客户和主管及时沟通前端开发任务需求和项目进度状况；2.能及时收集用户反馈，提升前端开发成果的实用性、易用性。什么是网页，什么是网站。1.对新课进行讲解前，先让学生分组讨论；2.教师对上述问题进行解释。小组代表对以上问题发表见解、分享讨论结果。以学生为中心，启发学生思考通过小组讨论、分组汇报的方式调动学生的学习积极性。新知讲解与实训（15min）Web的基本概念：网页和网站（5min）教师总结网页、网站。学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式及细致讲解，使学生熟悉Web前端开发基本概念。Web的基本概念：浏览器、Web标准（5min）以提问和补充的方式学习浏览器、Web标准概念。学生跟随老师认真听讲并回答问题理解相关概念。Web的基本概念：URL地址（5min）以提问和补充的方式学习URL概念。学生跟随老师认真听讲并回答问题理解相关概念。新知讲解与实训（15min）HTML和HTML5：HTML发展历程（）1．教师展示PPT对“HTML语言”的概念及发展历史进行简单介绍。2.教师展示PPT对HTML从2.0版到3.2版、4.0版，再到1999年的4.01版的各个版本的区别与联系。3.教师展示PPT对HTML5的出现与发展进行讲解，并分析其优缺点。

学生自主提问，教师对疑难问题进行解答。学生了解HTML发展历程、HTML5及HTML5的优势HTML和HTML5：HTML5教师展示PPT指出HTML5增加了很多新功能和新特性。学生自主提问，教师对疑难问题进行解答。HTML和HTML5：HTML5优势教师展示PPT，针对HTML5的“解决了跨浏览器问题、新增了多个新特性、用户优先的原则、化繁为简的优势”优势分别进行讲解，并联系实际举例说明。学生自主提问，教师对疑难问题进行解答。总结评价（5min）总结该节课所讲的知识点。对学生概念理解存在的共性问题、易错问题进行总结；1.学生听讲并理解相关概念；2.自查是否出现共性问题多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息引入开发工具（5min）Web前端开发工具1.教师和学生互动：我们知道，创建文档可以使用word，创建数据表可以使用excel，那么创建HTML网页可以使用哪些工具呢？网页制作过程中，创建HMTL5网页源代码的工具很多，介绍Notepad++、WebStorm、Dreamweaver、VSCode。1.认真听讲；2.学生实际操作。通过教师的讲解，学生进行实际操作，在实践中掌握知识点新知讲解（15min）VSCode的下载和安装1.演示VSCode工具的下载和安装；2.演示VSCode工具的配置和使用。1.认真听讲；2.学生实际操作。通过讲解VSCode的使用，促使同学重视软件开发工具，并有意识的选择高效的开发工具实训练习（15min）学生安装配置VSCode1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。总结评价（10min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向。1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人。1.学生听讲并理解相关概念；2.自查是否出现共性问题多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息引入任务（3min）航天飞行任务通过播放“央视虎年春晚，神十三三位航天员在除夕零点钟声敲响时刻，与地面视频连线，共同迎接春节”视频，回顾2021年我国在航天航空方面的辉煌成就。2021年中国航天一次又一次挺进太空，完成了震惊世界的历史性壮举。学生观看视频回顾启发学生民族自豪感和爱国热情。动手实践（20min）“航天飞行任务”页面1.教师分析网页内容；2.通过编写第一个HTML页面；2.教师讲解第一个html网页。学生认真听讲并理解相关概念；通过案例讲解，使学生网页编程有初步的了解，引起学生的兴趣。实训练习（22min）学生动手编写第一个HTML页面1.教师巡回指导学生的实训情况2.对实训中的问题进行解答1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。课间休息总结评价（10min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向。1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人。1.学生听讲并理解相关概念；2.自查是否出现共性问题多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。动手探索（5min）HTML5默认文档结构引导学生分析默认网页的构成学生使用VSCode工具新建一个默认文档的网页，分组观察、讨论页面代码构成，以及每个部分的作用<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>熟悉HTML5文档基本结构，对后期写代码做铺垫。新知讲解（10min）HTML5文档基本格式1.教师分析默认文档结构，讲解HTML5文档的基本格式及构成标记。2.教师展示PPT对“HTML文档头部相关标记”进行讲解。3.教师分别对<title>标记、<meta/>标记、<link>标记及<style>标记的基本语法格式进行讲解，并进行代码演示。学生自主提问，教师对疑难问题进行解答。HTML5语法1.教师展示PPT对“HTML5语法”进行简单介绍；2.教师展示PPT，对“HTML5语法”规则进行分析，并与之前的各种版本进行对比分析；3.教师针对HTML5语法中的“标签不区分大小写、允许属性值不使用引号、允许部分属性值的属性省略”通过代码演示，并举例说明。新知讲解（15min）HTML标记1.教师展示PPT对“单标记与双标记”、“注释标记”的概念进行讲解，并指出“单标记与双标记”的不同；2.教师举例说明常见的单标记、双标记以及注释标记；3.教师通过代码对“单标记与双标记”、“注释标记”的使用方法进行演示。学生练习，教师巡视，对疑难问题进行解答。标记的属性1.教师和学生互动：在网页制作时，如果大家想要控制标记的样式，比如：希望标题文本的字体为“微软雅黑”且居中显示，或者段落文本中的某些名词颜色突出显示等问题。此时仅仅依靠HTML标记的默认显示样式已经不能满足需求了，需要使用“HTML标记的属性”进行控制。2.教师展示PPT对“标记的属性”进行讲解，并使用代码进行实时演示。注释1.教师和学生互动2.教师展示PPT对“注释”进行讲解，并使用代码进行实时演示。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向。1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人。1.学生听讲并理解相关概念；2.自查是否出现共性问题。多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课后实践如图，完成“大赛获奖”网页的主要内容部。教师通过学习通下发课后任务。学生按照要求编写程序，并提交答案。通过拓展任务强化课堂内容；通过制作“大赛获奖网页”的页面，介绍职业技能大赛，激励学生努力学习。反思与改进

项目2添加网页内容授课信息教学课题添加网页内容所属课程网页制作学时8学时任务目标教学任务文本、图像、超链接是网页中的重要元素，使用列表页面布局更整齐，列表也是常见的网页元素。本项目通过在页面上面添加文本、图像和列表等元素，制作了“念奴娇·赤壁怀古”诗词网页，并通过在页面上面添加超链接元素，实现不同页面之间的跳转。根据学习内容同学们完成制作写作背景介绍网页。课堂案例课后实训教学目标素质目标1.自觉遵守中国软件行业基本公约；2.有良好的知识产权保护观念和意识，自觉抵制各种违反知识产权保护法规的行为；3.能自觉遵守企业规章制度与产品开发保密制度；4.遵守有关隐私信息的政策和规程，保护客户隐私。思政目标通过“念奴娇·赤壁怀古”诗词网页制作，感受作者博大的胸襟和豪迈的气概。能力目标1.会使用标题、段落、图像、列表标记制作简单的网页；2.能够通过在页面上面添加超链接元素，实现不同页面之间的跳转。知识目标1.掌握标题、段落等文本标记的使用；2.了解文本格式化标记，会输入特殊字符；3.掌握图像标记，会在网页中插入图像，设置图像属性；4.熟悉超链接标记，知道超链接分类；5.熟悉列表标记，能够定义列表，了解列表嵌套。教学重难点教学重点教学重点：标题标记、段落标记、超链接标记和列表标记措施：通过上机操作加强学习和补充案例进行巩固。教学难点教学难点：定义列表措施：通过上机操作加强学习和补充案例进行巩固。活动安排教学环节教学内容教师活动学生活动设计意图与资源课前探索标题、段落、文本格式化、图像等标记的使用1.教师教学平台下发《文本和图像》录课视频，下发测试题；2.引导学生思考：一篇结构清晰的文章通常都有标题和段落，那么如何使用HTML5语言创建网页中的标题和段落呢？3.引导学生思考：在网站中，我们可以看到绚丽多彩的图片。那么，目前网页上的图片怎么添加呢？1.接收学习任务，自主观看视频，对网页中使用文本和图像有初步了解；2.学生上网准备“念奴娇·赤壁怀古”相关资料，准备做诗词网页。1.通过“念奴娇·赤壁怀古”诗词网页制作，感受作者博大的胸襟和豪迈的气概。2.教师借助信息化手段和资源，激发学生主动学习的意识，提高课堂效率；3.课前练习题可以预习新知，根据数据及时了解学生知识掌握情况，并及时调整教学内容。课堂教学项目引入（10min）引入案例：“念奴娇·赤壁怀古”诗词网页制作（5min）1.引入案例：“念奴娇·赤壁怀古”诗词页面2.老师扮演客户，向学生询问项目进展，提出项目新需求学生与客户沟通，了解客户需求，带着问题学习相关知识。1.能够与客户和主管及时沟通前端开发任务需求和项目进度状况；2.能及时收集用户反馈，提升前端开发成果的实用性、易用性。引入什么是文本标记和图像标记？（5min）1.教师抛出问题：在浏览网页时，我们可以看到图文并茂的页面。那么，这些页面是如何实现的呢？引导学生积极参与课堂介绍和讨论；3.教师对上述问题进行解释。分享讨论结果。请小组代表对以上问题发表见解。通过过观察页面，讨论分析文本和图像分布。新知讲解与实训（20min）标题标记（10min）1.教师展示标题样式，文档结构；2．教师和学生分析标题格式；<hn属性名=“属性值”>标题文本</hn>3.教师演示标题标记的使用。学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速掌握标题及常用属性，会使用标题标记及常用属性。标题标记中属性（10min）1.教师抛出问题：在word文档中标题不一定都是左对齐的，可以通过文字的对齐方式改变标题在文档中的位置。在网页中如何实现？2.教师演示标题标记常用属性align的使用。实训练习（10min）实现案例：“念奴娇·赤壁怀古”诗词网页中的标题效果1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向。1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人。1.学生听讲并理解相关概念；2.自查是否出现共性问题多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。 课间休息引入段落标记、换行及水平线标记（5min）段落标记、换行及水平线标记1.抛出问题：在网页中展现一篇新闻，除了上述学到的标题外，还有什么元素？2.对抛出的问题进行解答1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解（10min）段落标记及常用属性1.教师展示段落样式；2.教师和学生分析格式<p属性名="属性值">段落文本</p>3.教师演示段落标记及属性的使用学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速掌握标题及常用属性，会使用标题标记及常用属性。实训练习（5min）实现案例：“念奴娇·赤壁怀古”诗词网页中的段落效果1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。新知讲解（15min）换行标记（5min）1.教师展示换行样式；2.讲解换行标记；<br/>标记用来进行换行，不产生一个新段落；3.教师讲解演示换行标记的使用。学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速掌握换行标记，会使用换行标记。水平线标记（10min）1.教师展示水平线样式；2.讲解水平线标记；<hr属性名="属性值"/>；3.教师讲解演示水平线标及常用属性的使用。学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速掌握水平线标记及常用属性，会使用水平线标记及常用属性。实训练习（8min）实现案例：“念奴娇·赤壁怀古”诗词网页中的换行和水平线效果1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（2min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息新知讲解及实训（15min）文本格式化标记（8min）1.教师展示文本特殊样式，引入文本格式化标记；2.讲解文本格式化标记；3.教师讲解演示水平线标及常用属性的使用。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速了解文本格式化标记。特殊字符（7min）1.以版权符号为例引入特殊字符；特殊字符指普通键盘上不存在的符号2.讲解演示常用特殊字符；1.教师展示文本特殊样式；2.讲解文本格式化标记；3.展示w3school网站上其它特殊字符。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉特殊字符，会在网页中插入特殊字符。分组讨论（5min）引入图像格式1.教师抛出问题：在网站中，我们可以看到绚丽多彩的图片。那么，目前网页上常用的图像格式有哪些呢，请结合它们的优缺点进行说明；1.对上述问题进行解释：简而言之，在网页中小图片或网页基本元素如图标、按钮等考虑GIF或PNG-8，半透明图像考虑PNG-24，类似照片的图像则考虑JPG。分享讨论结果；请小组代表对以上问题发表见解。以学生为中心，启发学生思考通过小组讨论、分组汇报的方式调动学生的学习积极性。新知讲解（15min）常用图像格式（2min）1.教师带领学生查看网页中的图像，总结网页中常用的图像格式；2.教师展示PPT对GIF、JPG和PNG三种常用的图像格式进行讲解，比较三种格式的异同，并指出其优缺点；3.提问学生，三种图像的使用场合。学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速了解常见图像格式。图像标记（13min）1.教师和学生互动：在网页中随处可见各种各样的图像，比如：广告图、推广图、轮播图等。大家在网页中都见过哪些图片呢？然后，教师使用PPT展示网页中各式各样的图片效果；2.教师展示PPT对“图像标记”及其属性进行讲解，并使用代码进行实时演示。<imgsrc=“图像url”属性名=“属性值”/>学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速掌握图像标记，会使用图像标记，制作图文并茂的网页。实训练习（8min）实现案例：“念奴娇·赤壁怀古”诗词网页中的图像效果1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（2min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息引入图像地址（5min）问题引入图像地址1.教师抛出问题：上节课案例中，我们在如何在网页中找到图片的？思考下为什么这样做？2.对抛出的问题进行解答1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（5min）绝对路径1.教师通过文件夹的层级关系对“路径”进行讲解，并指出网页中的路径通常分为“相对路径与绝对路径”两种；2.教师展示PPT对“绝对路径”进行讲解，并举例说明。学生练习，教师对疑难问题进行解答。了解绝对路径新知讲解与实训（10min）相对路径：图片与html文件在同一个文件夹。教师展示PPT对“相对路径”进行讲解，并对“图片与html文件在同一个文件夹”情况进行演示。学生练习，教师对疑难问题进行解答。以学生为中心，通过图文结合的方式，让学生能够快速掌握图像路径，会使用图像路径引入不同位置的图片。新知讲解与实训（10min）相对路径：图像文件位于html文件的下一级文件夹。教师展示PPT对“相对路径”进行讲解，并对“图像文件位于html文件的下一级文件夹”情况进行演示。学生练习，教师对疑难问题进行解答。以学生为中心，通过图文结合的方式，让学生能够快速掌握图像路径，会使用图像路径引入不同位置的图片。新知讲解与实训（10min）相对路径：图像文件位于html文件的上一级文件夹。教师展示PPT对“相对路径”进行讲解，并对“图像文件位于html文件的上一级文件夹”情况进行演示。学生练习，教师对疑难问题进行解答。以学生为中心，通过图文结合的方式，让学生能够快速掌握图像路径，会使用图像路径引入不同位置的图片。实训练习（5min）实现案例：“念奴娇·赤壁怀古”诗词网页中的图像在不同位置引入刀网页中1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。课间休息课堂教学项目引入（10min）引入案例：“念奴娇·赤壁怀古”诗词网页实现页面跳转（5min）1.引入案例：“念奴娇·赤壁怀古”诗词页面实现页面跳转2.老师扮演客户，向学生询问项目进展，提出项目新需求学生与客户沟通，了解客户需求，带着问题学习相关知识。1.能够与客户和主管及时沟通前端开发任务需求和项目进度状况；2.能及时收集用户反馈，提升前端开发成果的实用性、易用性。引入什么是超链接？（5min）1.教师抛出问题：当我们打开一个网站时，例如许昌职业技术学院官网“/”，通过点击页面中的导航或者带有链接地址的文字就可以跳转到不同的页面，那么如何实现网站中的页面跳转呢？2.教师对上述问题进行解释。分享讨论结果。请小组代表对以上问题发表见解。以学生为中心，启发学生思考通过小组讨论、分组汇报的方式调动学生的学习积极性。新知讲解（20min）超链接标记（10min）讲解创建超链接：1.教师和学生互动：教师打开360导航网址/，点击页面中的导航文字，就可以跳转到相应的页面，这就是通过给文字创建超链接来实现的。2.教师针对超链接的作用以及基本语法格式进行讲解，并进行演示说明。<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>3.教师展示PPT对“创建超链接”进行讲解，并使用代码进行实时演示。学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速掌握超链接标记，会使用超链接标记实现页面的跳转。超链接常用属性（10min）1.讲解超链接常用属性；在上面的语法中，<a>标记是一个行内标记，用于定义超链接，href和target为其常用属性，具体解释如下：引入超链接⚫href：用于指定链接目标的url地址，当为<a>标记应用href属性时，它就具有了超链接的功能。⚫target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。2.演示超链接的常用属性。学生跟随老师认真听讲并回答问题理解相关概念。以学生为中心，通过图文结合的方式，让学生能够快速掌握超链接标记的常用属性，会使用超链接标记常用属性。实训练习（10min）实现案例：“念奴娇·赤壁怀古”诗词网页与作者生平页面跳转1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。 课间休息引入锚点链接（5min）引入锚点链接1.教师和学生互动：如果网页内容较多，页面过长，浏览网页时就需要不断地拖动滚动条，来查看所需要的内容，这样效率较低且不方便。那么如何提高信息的检索速度呢？2.对抛出的问题进行解答。1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（10min）锚点链接1.教师针对“锚点链接”的作用及创建方法进行讲解，并进行演示说明。2.教师对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。认真学习并思考教师提出的问题，找到解决方法；认真观看教师操作演示，领会关键操作步骤。以学生为中心，通过图文结合的方式，让学生能够快速掌握锚点链接，在网页中会使用锚点链接。实训练习（10min）在案例：“念奴娇·赤壁怀古”诗词网页中添加锚点链接1.教师巡回指导学生的实训情况2.对实训中的问题进行解答1.提出问题；2.按照教师的解答修改问题；通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。分组讨论（5min）为了使网页更易读，经常将网页信息以列表的形式呈现，例如，微博热搜，淘宝首页商品分类、排列有序，呈现为列表的形式。实，在HTML5中，提供了3种常用的列表，分别为无序列表、有序列表和定义列表。那么，请举例说明什么是“无序列表”和“有序列表”？它们之间有什么区别？教师对上述问题进行解释：⚫无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。⚫有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列，例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。1.学生思考问题并讨论；2.小组代表对以上问题发表见解。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（15min）列表标记——ul元素1.教师展示PPT对“无序列表”的概念进行讲解，并列举网页中常见的例子进行说明。2.教师展示PPT，对“无序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>3.教师指出定义“无序列表”时需要注意的问题，并给与解答。学生练习，教师巡视，对疑难问题进行解答以学生为中心，通过图文结合的方式，让学生能够快速掌握无序列表及相关属性，会使用无序列表。课间休息新知讲解与实训（15min）列表标记——ol元素1.教师展示PPT对“有序列表”的概念进行讲解，并列举网页中常见的例子进行说明。2.教师展示PPT，对“有序列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>3.教师指出定义“有序列表”时需要注意的问题，并给与解答。学生练习，教师巡视，对疑难问题进行解答以学生为中心，通过图文结合的方式，让学生能够快速掌握有序列表及相关属性，会使用有序列表。新知讲解与实训（15min）列表标记——dl元素1.教师展示PPT对“自定义列表”的概念进行讲解，并列举网页中常见的例子进行说明。2.教师展示PPT，对“自定义列表的基本语法格式”及常用属性值进行讲解，并进行代码演示。<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd><dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd></dl>3.教师指出定义“自定义列表”时需要注意的问题，并给与解答。学生练习，教师巡视，对疑难问题进行解答以学生为中心，通过图文结合的方式，让学生能够快速掌握无序列表及相关属性，会使用无序列表。实训练习（10min）实现案例：“念奴娇·赤壁怀古”诗词网页中的列表效果1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课后实践如图，制作“写作背景”网页下面我们通过制作”写作背景”网页，实现单击“返回主页”超链接时，跳转到“念奴娇·赤壁怀古”网页。教师通过学习通下发课后任务。学生按照要求编写程序，并提交答案。通过拓展任务强化课堂内容。反思与改进

项目3CSS基础授课信息教学课题CSS基础所属课程网页制作学时6学时任务目标教学任务通过前面的学习和实践，我们已经认识了HTML标记，虽然早期的HTML中带有一些用于设置样式的标记和属性，但是它们远远不能满足网页设计的要求。CSS的出现解决了这个问题，它提供了丰富的样式属性，能够精确定义页面样式，并且能够使样式与内容进行分离。本项目通过制作“药王-孙思邈”网页使同学们理解CSS的规则，掌握CSS引入方式，运用基本CSS选择器设置网页样式。根据学习内容同学们完成“故宫”网页制作。。课堂案例课后实训教学目标素质目标1.自觉遵守中国软件行业基本公约；2.有良好的知识产权保护观念和意识，自觉抵制各种违反知识产权保护法规的行为；3.能自觉遵守企业规章制度与产品开发保密制度；4.遵守有关隐私信息的政策和规程，保护客户隐私。思政目标1.通过“药王-孙思邈”页面制作，激发学生向伟大的历史人物学习，树立正确的人生观，价值观，不断的积极进取、努力奋斗。2.通过“故宫”网页制作，使同学们对我国古代建筑有一定的认识，感受中国悠久的历史文化，提升民族自豪感。能力目标1.能够根据实际情况选择合适的选择器和引入方式定义CSS样式；2.能够解决页面中优先级、继承性和层叠性问题。知识目标1.了解CSS标准及发展历史；2.掌握CSS样式规则及引入方式；3.熟悉CSS基本选择器；4.理解CSS的优先级、继承性和层叠性。教学重难点教学重点教学重点：样式规则、引入方式和基础选择器。措施：通过上机操作加强学习和补充案例进行巩固。教学难点教学难点：CSS层叠性与继承性、CSS优先级。措施：通过上机操作加强学习和补充案例进行巩固。活动安排教学环节教学内容教师活动学生活动设计意图与资源课前探索CSS的发展史、CSS样式规则、CSS样式表引入方式以及CSS基础选择器、优先级1.教师教学平台下发《CSS入门》录课视频，下发测试题；2.学生思考，在网页设计中，运用CSS3技术能够让原有的网站变得趣味盎然，很多站点都为自己的页面添加了各种炫酷的CSS3效果。但是CSS3技术是怎样发展起来的？哪些浏览器能够很好的兼容CSS3呢？1.接收学习任务，自主观看视频，对网页中使用文本和图像有初步了解；2.学生上网准备“药王-孙思邈”相关资料。1.通过制作“药王-孙思邈”网页，激发学生向伟大的历史人物学习，树立正确的人生观，价值观，不断的积极进取、努力奋斗。2.教师借助信息化手段和资源，激发学生主动学习的意识，提高课堂效率；3.课前练习题可以预习新知，根据数据及时了解学生知识掌握情况，并及时调整教学内容。课堂教学项目引入（10min）引入案例：“药王-孙思邈”网页（5min）1.引入案例：“药王-孙思邈”页面。2.老师扮演客户，向学生询问项目进展，提出项目新需求3.学生与客户沟通，了解客户需求，带着问题学习相关知识学生与客户沟通，了解客户需求，带着问题学习相关知识。1.能够与客户和主管及时沟通前端开发任务需求和项目进度状况；2.能及时收集用户反馈，提升前端开发成果的实用性、易用性。引入什么是CSS，以及CSS都有哪些作用？CSS里面都有什么？（5min）1.制作网页的时候，我们经常需要使用CSS制作更多的字体选择、更方便的样式效果、更绚丽的图形动画。那么，请同学们讨论下：什么是“CSS”，以及CSS都有哪些作用，有什么？3.教师对上述问题进行解释：⚫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的支持较好。小组代表对以上问题发表见解。以学生为中心，启发学生思考通过小组讨论、分组汇报的方式调动学生的学习积极性。新知讲解（10min）CSS概述、CSS样式规则1.教师展示PPT对“CSS样式规则”的具体格式进行讲解，并使用代码进行演示；2．教师和学生分析CSS样式规则：选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}3.教师演示CSS样式的使用。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉CSS样式规则新知讲解（25min）CSS引入方式：“行内式”、“内嵌式”1.教师展示PPT对“HTML文档中引入CSS样式表”进行说明，并指出“引入CSS样式表”的三种方式。2.教师对“行内式”、“内嵌式”及“外链式”引入CSS样式表进行讲解并通过代码进行演示。3.教师指出“行内式”、“内嵌式”及“外链式”的基础语法格式及其优缺点。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握引入CSS样式得两种方式“行内式”、“内嵌式”及“外链式”的格式，会使用“行内式”、“内嵌式”及“外链式”引入CSS样式。课间休息实训练习（20min）学生动手实现“行内式”、“内嵌式”及“外链式”3种CSS引入样式表1.教师巡回指导学生的实训情况2.对实训中的问题进行解答1.提出问题；2.按照教师的解答修改问题；通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。分组讨论（5min）什么是CSS基础选择器？都有哪些分类？1.分组讨论（5min）什么是CSS基础选择器？都有哪些分类？2.教师对上述问题进行解释：CSS基础选择器有：“标记选择器”、“类选择器”、“id选择器”及“通配符选择器”小组代表对以上问题发表见解。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（15min）CSS基础选择器：标记选择器1.教师展示PPT对“CSS选择器”的概念及用法进行讲解；2.教师对“标记选择器”的基本语法格式进行详细讲解并通过代码进行演示。标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握标记选择器，在网页中会使用标记选择器引入样式。课间休息新知讲解与实训（10min）CSS基础选择器：类选择器教师对“类选择器”的基本语法格式进行详细讲解并通过代码进行演示。.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握类选择器，在网页中会使用类选择器引入样式。新知讲解与实训（10min）CSS基础选择器：id选择器教师对“id选择器”的基本语法格式进行详细讲解并通过代码进行演示。#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握id选择器，在网页中会使用id选择器引入样式。实训练习（20min）使用三种选择器结合实现案例：“药王-孙思邈”网页的样式效果1.教师巡回指导学生的实训情况；2.对实训中的问题进行解答。1.提出问题；2.按照教师的解答修改问题；通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息新知讲解与实训（10min）CSS基础选择器：通配符选择器教师对“通配符选择器”的基本语法格式进行详细讲解并通过代码进行演示。*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握通配符选择器，在网页中会使用通配符选择器引入样式。新知讲解与实训（15min）后代选择器教师对“后代选择器”的基本语法格式进行详细讲解并通过代码进行演示。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握交集选择器，在网页中会使用后代选择器引入样式。新知讲解与实训（15min）并集选择器教师对“类选择器”的基本语法格式进行详细讲解并通过代码进行演示。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握并集选择器，在网页中会使用并集选择器引入样式。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息引入任务（2min）药王-孙思邈我们古代有很多伟大的人物，他们不计个人得失，一辈子默默奉献，以造福民众为己任，把自己的一生奉献给人民。是我们学习的榜样，下面我们制作“药王-孙思邈”网页，介绍一位这样古代医学家。学生观看视频回顾启发学生民族自豪感和爱国热情。教师演示（17min）“药王-孙思邈”页面1.教师分析网页内容；2.通过vscode页面创建网页；学生认真听讲并理解相关概念；通过案例讲解，使学生网页编程有初步的了解，引起学生的兴趣。实训练习（20min）学生动手编写第一个HTML页面1.教师巡回指导学生的实训情况2.对实训中的问题进行解答1.提出问题；2.按照教师的解答修改问题。通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（10min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向。1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人。1.学生听讲并理解相关概念；2.自查是否出现共性问题多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息引入选择器的优先级（5min）问题引入选择器优先级、继承及层叠1.抛出问题：在网页中针对同一标记如果前后使用不同的选择器设置相同样式属性不同属性值，该样式在页面中该如何显示？2.对抛出的问题进行解答。1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（15min）选择器的优先级教师对选择器的优先级进行详细讲解并通过代码进行演示。选择器的优先级从低到高排序为：标记样式<类（class）样式<id样式<行内样式<!Important。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速理解选择器的优先级。新知讲解与实训（10min）样式继承教师对样式继承进行详细讲解并通过代码进行演示。继承性是指子元素可以继承父元素的属性。但是并不是所有的属性都可以继承，不可继承的属性：display、border、padding、margin、background、height、width、overflow、position、left、right、top、bottom、z-index、float、clear等。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握样式的继承。新知讲解与实训（10min）样式层叠教师对样式层叠进行详细讲解并通过代码进行演示。CSS层叠是指多种CSS样式的叠加，CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速理解样式层叠。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课后实践如图，制作“故宫”网页。教师通过学习通下发课后任务。学生按照要求编写程序，并提交答案。通过拓展任务强化课堂内容。反思与改进

项目4设置文本字体样式授课信息教学课题设置文本字体样式所属课程网页制作学时6学时任务目标教学任务网页中的文本在设置样式之前，看起来有些呆板、拥挤，还需要设置文字大小，颜色、粗细、行距、首行缩进等样式。CSS提供了字体样式属性、文本外观属性等用来设置文本样式，本次课将通过制作预防电信诈骗网页学习设置CSS字体样式属性、文本外观属性、服务器字体、CSS3新增样式。根据学习内容同学们制作HTML标记介绍网页。课堂案例课后实训教学目标素质目标1.自觉遵守中国软件行业基本公约；2.有良好的知识产权保护观念和意识，自觉抵制各种违反知识产权保护法规的行为；3.能自觉遵守企业规章制度与产品开发保密制度；4.遵守有关隐私信息的政策和规程，保护客户隐私。思政目标通过预防电信诈骗网页制作，使同学们了解诈骗手段，增强安全意识。能力目标会根据网页需求灵活设置文本字体样式。知识目标1.熟悉CSS字体属性，能够运用相应的属性定义字体样式；2.熟悉CSS文本属性，能够运用相应的属性定义文本样式；3.会设置文字阴影效果；4.了解特殊字体的使用。教学重难点教学重点教学重点：常用的字体属性、文本属性措施：通过上机操作加强学习和补充案例进行巩固。教学难点教学难点：文字阴影和特殊字体措施：通过上机操作加强学习和补充案例进行巩固。活动安排教学环节教学内容教师活动学生活动设计意图与资源课前探索CSS字体样式属性、文本外观属性、CSS3新增文本样式1.教师教学平台下发《设置文本字体样式》录课视频，下发测试题；2.学生思考：在平时浏览网页时，经常会见到网页上面有各种酷炫的文字等效果，这些如何实现呢？1.接收学习任务，自主观看视频，对网页中使用文本和图像有初步了解；2.学生上网准备“预防电信诈骗”网页相关资料。1.通过制作“预防电信诈骗”网页，提醒同学们提高警惕，谨防上当受骗。2.教师借助信息化手段和资源，激发学生主动学习的意识，提高课堂效率；3.课前练习题可以预习新知，根据数据及时了解学生知识掌握情况，并及时调整教学内容。课堂教学项目引入（10min）引入案例：“预防电信诈骗”网页（5min）1.引入案例：“预防电信诈骗”页面。2.老师扮演客户，向学生询问项目进展，提出项目新需求3.学生与客户沟通，了解客户需求，带着问题学习相关知识学生与客户沟通，了解客户需求，带着问题学习相关知识。1.能够与客户和主管及时沟通前端开发任务需求和项目进度状况；2.能及时收集用户反馈，提升前端开发成果的实用性、易用性。引入CSS如何对文字进行美化？如何实现CSS嵌套（5min）1.浏览网页时，我们可以看到字号大小不同，字体颜色各异以及不同形态的字体效果。那么，CSS字体样式中的哪些属性可以设置网页中的字体效果呢？请分别列举。3.教师对上述问题进行解释：CSS字体样式属性主要包括：⚫font-size:字号大小；⚫font-family:字体；⚫font-weight:字体粗细；⚫font-variant:变体；⚫font-style:字体风格；⚫font:综合设置字体样式；小组代表对以上问题发表见解。以学生为中心，启发学生思考通过小组讨论、分组汇报的方式调动学生的学习积极性。新知讲解与实训（15min）CSS字体样式属性：文本大小、字体、粗细1.教师和学生互动：浏览网页的时候，我们经常看到一些特殊的字体效果，比如：控制字体的字号、将字体进行加粗，或者设置字体倾斜等。为了更方便的控制网页中各种各样的字体，CSS提供了一系列的字体样式属性。2.教师展示PPT对“网页中常见的字体效果”进行展示及说明；教师分别对“font-size、font-family、font-weight”进行讲解，并进行代码演示；3.教师分别对使用CSS设置字体样式时需要注意的问题进行说明。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉设置CSS字体样式，会使用font-size、font-family、font-weight属性设置字体样式。新知讲解（15min）CSS字体样式属性：文本是否斜体、文本是否为小型的大写字母、文本样式综合设置1.教师展示PPT对“网页中常见的字体效果”进行展示及说明；教师分别对“font-variant、font-style及font综合设置属性”进行讲解，并进行代码演示。2.教师分别对使用CSS设置字体样式时需要注意的问题进行说明。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉设置CSS字体样式，会使用font-variant、font-style及font综合设置字体样式。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。 课间休息引入文本外观属性（5min）引入文本外观属性1.抛出问题：除了设置文字的样式，对于一段文字，我们通常还会设置什么样式？2.对抛出的问题进行解答。使用CSS不仅可以设置一些特殊的字体效果，还可以设置一些段落文本的外观显示效果，比如：设置文本颜色、字间距、行间距、文本装饰效果等。使用HTML只能进行简单的控制，但是效果并不理想，为此CSS提供了一系列的文本外观样式属性。1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（20min）CSS文本外观属性：颜色的3种表现的方式、文本颜色1.教师展示PPT对“网页中常见的文本外观效果”进行展示及说明；2.教师对“color”等文本外观属性进行讲解，并进行代码演示。3.教师分别对使用CSS设置文本外观时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速了解颜色的3中表现方式，掌握文本颜色的设置，在网页中会使用文本颜色设置样式。新知讲解与实训（17min）CSS文本外观属性：文本对齐方式、行高、文本内容缩进。1.教师对“text-align、line-height、text-indent”等文本外观属性进行讲解，并进行代码演示。2.教师分别对使用CSS设置文本外观时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握文本对齐方式、行高、文本内容缩进，在网页中会使用文本对齐方式、行高、文本内容缩进设置样式。总结评价（3min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息新知讲解与实训（25min）CSS文本外观属性：文本大小写转换、文本装饰种类、段落间距1.教师对“text-transform、text-decoration、margin”等文本外观属性进行讲解，并进行代码演示。2.教师分别对使用CSS设置文本外观时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握文本大小写转换、文本装饰种类、段落间距，在网页中会使用文本大小写转换、文本装饰种类、段落间距设置样式。新知讲解与实训（15min）CSS文本外观属性：空白符的处理方式、单词之间的间隙、字符之间的间隙1.教师对“white-space、word-spacing、letter-spacing”等文本外观属性进行讲解，并进行代码演示。2.教师分别对使用CSS设置文本外观时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉空白符的处理方式、单词之间的间隙、字符之间的间隙。新知讲解与实训（15min）CSS3新增文本样式1.教师对CSS3新增文本样式：text-shadow进行讲解，并进行代码演示。2.教师分别对使用CSS设置CSS3新增文本样式时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉新增的文本样式text-shadow。课间休息新知讲解与实训（15min）使用服务器字体。1.教师对CSS3服务器字体进行讲解，并进行代码演示。2.教师分别对使用服务器字体时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速了解服务器字体。案例演示（30min）制作“预防电信诈骗”网页教师分析网页结构进行总体布局插入内容设置样式1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤。通过教师提问和演示，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。课间休息实训练习（40min）制作“预防电信诈骗”网页1.教师巡回指导学生的实训情况2.对实训中的问题进行解答1.提出问题；2.按照教师的解答修改问题；通过师生单独的互动，督促学生端正学习的态度，养成认真、严谨、踏实的学习态度。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息引入超链接（5min）问题引入超链接样式1.抛出问题：在网页里面有很多超链接，这些超链接有默认的样式，是否可以修改默认样式？2.对抛出的问题进行解答。1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（15min）超链接样式：未访问、已点击的超链接样式1.教师对未访问、已点击的超链接样式进行讲解，并进行代码演示。2.教师分别对使用CSS设置文本外观时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握未访问、已点击的超链接样式，能够在页面中使用未访问、已点击的超链接样式。新知讲解与实训（20min）超链接样式：鼠标悬浮在超链接、鼠标点击时刻的超链接的样式1.教师对鼠标悬浮在超链接、鼠标点击时刻的超链接的样式进行代码演示。2.教师分别对使用CSS设置CSS3新增文本样式时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让学生能够快速掌握鼠标悬浮在超链接、鼠标点击时刻的超链接的样式，能够在页面中使用鼠标悬浮在超链接、鼠标点击时刻的超链接的样式。总结评价（10min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课后实践如图，制作“标记介绍”网页网页。教师通过学习通下发课后任务。学生按照要求编写程序，并提交答案。通过拓展任务强化课堂内容。反思与改进

项目5盒子模型授课信息教学课题盒子模型所属课程网页制作学时8学时任务目标教学任务网页内容包含不同的模块，每一个模块可以看作一个盒子。盒子模型（boxmodel）是网页布局的基础，用来设计和布局网页。本项目通过制作“四有青年”网页将对盒子模型的概念和相关属性进行详细讲解。根据所学内容同学们完成制作“媒体播放器按钮”网页。课堂案例课后实训教学目标素质目标1.自觉遵守中国软件行业基本公约；2.有良好的知识产权保护观念和意识，自觉抵制各种违反知识产权保护法规的行为；3.能自觉遵守企业规章制度与产品开发保密制度；4.遵守有关隐私信息的政策和规程，保护客户隐私。思政目标通过“四有青年”页面制作，让学生了解四有青年的具体含义，努力提升自己水平与素质，积极为国家做贡献；通过“媒体播放器按钮”的页面制作，激发同学们学习HTML5代码的热情，能将所学到的知识应用到具体的生活中来。能力目标能够使用盒子模型进行简单的页面布局。知识目标1.熟悉盒子模型及其常用的属性；2.理解行内元素、块元素和行内块元素，能够在各类元素间进行转换；3.熟悉盒子的新增样式，能够使用新增样式；4.熟悉表格标记，能够创建简单表格；5.熟悉HTML5新增文档结构元素。教学重难点教学重点教学重点：盒子模型、<div>标记、盒子模型相关属性措施：通过上机操作加强学习和补充案例进行巩固。教学难点教学难点：背景属性、CSS3渐变属性措施：通过上机操作加强学习和补充案例进行巩固。活动安排教学环节教学内容教师活动学生活动设计意图与资源项目引入（10min）引入案例：“四有青年”网页（5min）1.引入案例：“四有青年”页面；2.老师扮演客户，向学生询问项目进展，提出项目新需求；3.学生与客户沟通，了解客户需求，带着问题学习相关知识。学生与客户沟通，了解客户需求，带着问题学习相关知识。1.能够与客户和主管及时沟通前端开发任务需求和项目进度状况；2.能及时收集用户反馈，提升前端开发成果的实用性、易用性。引入什么是“盒子模型”，以及如何理解“CSS盒子模型”？（5min）1.随着信息化的迅速发展，手机已经成为人们日常生活中的必需品。一个完整的手机盒子通常包含手机、填充泡沫和盛装手机的纸盒。其实，在CSS中也存在着盒子模型，利用CSS盒子模型能够更好的对网页进行排版。那么，如何理解“CSS盒子模型”呢？3.教师对上述问题进行解释：小组代表对以上问题发表见解。以学生为中心，启发学生思考通过小组讨论、分组汇报的方式调动学生的学习积极性。新知讲解（5min）认识盒子模型1.教师展示PPT对“CSS盒子模型”的概念进行讲解，并以生活中常见的快递盒子的构成进行演示；2.教师展示PPT，对CSS盒子模型的构成元素进行具体讲解。3.教师使用CSS盒子模型控制网页中的元素，并进行代码演示。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉设置CSS字体样式，会使用font-size、font-family、font-weight属性设置字体样式。新知讲解与实训（10min）盒子模型：内容1.教师展示PPT对盒子模型中内容进行展示及说明；1.教师对盒子模型内容content进行讲解，并进行代码演示。2.教师分别对使用盒子模型内容时需要注意的问题进行说明。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉设置盒子模型的内容，会设置盒子模型内容的大小。新知讲解与实训（15min）盒子模型：边框1.教师展示PPT对盒子模型中边框进行展示及说明；2.教师对盒子模型边框border进行讲解，并进行代码演示。3.教师分别对使用盒子模型边框时需要注意的问题进行说明；4.教师给出要求，在原来的盒子上添加边框，观察盒子的大小1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉设置盒子模型的边框，会设置盒子模型边框。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。 课间休息引入内边距、外边距（5min）问题引入盒子内边距、外边距1.抛出问题：除了设置盒子的边框外，观察现实生活中的盒子，我们通常还会设置什么样式？2.对抛出的问题进行解答。内边距、外边距1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（20min）盒子模型：内边距（15min）1.教师展示PPT对盒子模型中内边距进行展示及说明；2.教师对盒子模型内边距padding进行讲解，并进行代码演示。3.教师分别对使用盒子模型内边距时需要注意的问题进行说明；4.教师给出要求，在原来的盒子上添加内边距，观察盒子的大小1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉设置盒子模型的内边距，会设置盒子模型内边距。控制盒子大小：自动内减（5min）教师对自动内减的方式进行讲解，并进行代码演示。1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉自动内减，会设置盒子模型自动内减。新知讲解与实训（15min）盒子模型：外边距1.教师展示PPT对盒子外边距进行展示及说明；2.教师对盒子外边距进行讲解，并进行代码演示。3.教师分别对使用盒子外边距时需要注意的问题进行说明；4.教师给出要求，分别给上下、左右盒子上添外边距1.学生跟随老师认真听讲并回答问题理解相关概念；2.学生及时练习。以学生为中心，通过图文结合的方式，让学生能够快速熟悉设置盒子外边距，会设置上下、左右盒子的外边距。总结评价（5min）1.分析学生个人编程时遇到到问题；2.总结易错点和难点；3.存在问题及改进方向；1.对学生概念理解存在的共性问题、易错问题进行总结；2.评价成绩优异的个人；1.学生听讲并理解相关概念；2.自查是否出现共性问题；多元化评价贯穿整个教学过程，让学生养成自学能力，规范操作编写代码。课间休息引入盒子背景属性（5min）问题引入盒子背景属性1.抛出问题：在网页设计中，元素的背景起着关键的作用，它直接决定了网站的风格。其实，我们除了可以为背景设置不同的颜色，还可以设置哪些相关属性？2.对抛出的问题进行解答。通过元素的背景属性可以为元素设置背景色、背景图像、平铺方式、定位方式、背景图片大小、背景显示区域等样式。1.学生思考问题并回答；2.按照教师的解答思考如何实现。引导学生主动思考问题，加强学生的主观能动性。新知讲解与实训（15min）盒子背景属性：背景颜色、背景图像1.教师对“background-color、background-image”等盒子背景属性进行讲解，并进行代码演示。2.教师分别对使用CSS设置盒子背景时需要注意的问题进行说明。1.认真学习并思考教师提出的问题，找到解决方法；2.认真观看教师操作演示，领会关键操作步骤，学生练习。以学生为中心，通过图文结合的方式，让

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论