《网页制作案例教程（HTML5+CSS3）》
课程单元教学设计
（2023~2024学年第2学期）
课程名称：网页制作
授课年级：2023年级
授课学期：2023-2024学年第二学期
教师姓名：某某老师
2024年2月1日
目录
TOCo1-3hz፷9项目1网页制作入门 3
16008项目2添加网页内容 13
4463项目3CSS基础 29
981项目4设置文本字体样式 39
5314项目5盒子模型 47
27986项目6元素的浮动和定位 58
13962项目7多媒体元素 69
17246项目8表单的应用 76
32731项目9CSS高级选择器 86
3108项目10CSS3过渡、变形和动画效果 92
8698项目11制作“河南特色文化旅游”网页综合实例 106
PAGE
PAGE64
项目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.教师对上述问题进行解释。
小组代表对以上问题发表见解、分享讨论结果。
以学生为中心，启发
到此这篇html5+css3网页设计基础教程（html5+css3网页设计基础教程电子书）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/23158.html