Web前端开发-HTML5 开发

◆ ◆

个人介绍

Web前端开发-HTML5 开发

主讲教师：王淑敏

教师团队：共4位

王淑敏
黑马程序员
张媛
赵占峰

第1期

第2期

第3期

第4期

第5期

第6期

第7期

第3期

2021-09-01 08:00 至 2022-01-20 08:00

学校：	许昌职业技术学院
开课院系：	信息工程学院
学分：	5
课时：	96

课程介绍

       《ＨＴＭＬ５开发》 课程是面向计算机相关专业的一门前端开发项目实战课程，涉及HTML5、CSS3、JavaScript基础、响应式Web设计、Bootstrap等技术，从Web开发实际应用的角度阐述HTML5和CSS3的新特性和新功能。通过本课程的学习，读者能够熟练使用HTML5+CSS3+JavaScript进用行响应式Web开发，能够了解响应式 Web设计神器——Bootstrap在实际开发中的运用。
      本课程3个学分，计划96学时，其中：讲课学时：40 ，上机学时：56。
      本课程共有8个项目，14个任务，教学内容和进度如下：
      项目1 HTML5常用的元素和属性（24学时）
      项目2 HTML5表单的应用（6学时）
      项目3  CSS3新增的选择器（6学时）
      项目4 CSS3新增的属性（24学时）
      项目5 HTML5画布（6学时）
      项目6 HTML5画布（6学时）
      项目7响应式Web设计（12学时）
      项目8 响应式设计神器—Bootstrap（18学时）
      
      课程选用教材是黑马程序员的培训教材《Web开发项目教程（HTML5+CSS3+Bootstrap）》，人民邮电出版社。
      参考资料：刘万辉等编《网页设计与制作(HTML+CSS+JavaScript)》，十二五”职业教育国家规划教材；《Web前端开发（初级）》，工业和信息化部教育与考试中心编 电子工业出版社。 菜鸟教程：https://www.runoob.com/，中国大学MOOC HTML5网页前端设计等。

教师团队

王淑敏

职称：副教授

单位：许昌职业技术学院

部门：信息工程学院

黑马程序员

职称：高级讲师

单位：传智播客教育科技股份有限公司

张媛

职称：教师

单位：许昌职业技术学院

部门：信息工程学院

赵占峰

职称：教师

单位：许昌职业技术学院

部门：信息工程学院

教学方法与手段

　　本课程以职业能力培养为本位，以学生为中心，“教、学、做”一体化，采用任务驱动、项目导等多种教学方法，精心挑选实际应用较多并且学生能理解的项目任务。

　　本课程实行在线教学和课堂教学相结合的混合教学模式，基于翻转课堂的理念组织教学。老师下发任务→学生观看视频（知识准备）→老师组织选人和抢答等教学活动，并根据课题活动情况进行总结→老师分析讲解任务（视频）→学生实训（任务实施）→在线章节测验，在教学实施过程中关注学生理论知识提升和职业素质的养成，通过在线互动，实现师生、学生之间的问题交流。

教学效果

　　本课程以项目任务为载体：以任务实施的过程为主线，基于工程教育模式（CDIO）进行开发，突出了计算机办公软件使用的实践性和工作性，以项目实施贯穿始终。
　基于工作过程的结构：本课程设计了一个“项目引导+能力目标+知识目标+项目任务+项目实训”的学习结构，每项任务的实施完全模拟了实际的工作过程。
　　注重实用性的教学内容：学习内容即为实际工作的内容，将所学与所用结合，以所学为所用，以所用悟所学。
　　“教、学、做”一体化：每项任务在实施过程中安排了大量的“互动练习”和项目实训，促使学生学练结合，提高学生的主动参与意识和创新意识，培养发现问题、解决问题和综合应用各种知识的能力。

考核方式

　　课程采取过程性考核和阶段考核相结合、线上考核与线下考核相结合的多元化的考核方式，从多个方面评价学生的成绩。

　　过程考核主要是对学生线上学习情况进行考核，占总成绩的60%，其中签到（20%）、课堂互动（课程资源浏览、讨论、抢答、投票、问卷等）（10%）、章节测验（15%）、作业（20%）、课堂视频（35%）等。

　　本课程实践性强，阶段考核主要是项目考核，占总成绩的40%。

　　同时鼓励学生1+X认证考试，学习本课程之后，学生可以考工信部“web前端开发”职业技能等级证书。

教学进度表

教材与参考资料

使用教材：黑马程序员的培训教材《Web开发项目教程（HTML5+CSS3+Bootstrap）》，人民邮电出版社。

参考资料：刘万辉等编《网页设计与制作(HTML+CSS+JavaScript)》，十二五”职业教育国家规划教材；
　　　　　《HTML5移动Web开发》．中国铁道出版社，黑马程序员；
　　　　　《Web前端开发（初级）》，工业和信息化部教育与考试中心编电子工业出版社。

网上资料：HTML5网页前端设计， https://www.icourse163.org/course/preview/QTC-1207478805/?tid=1207834204；
　　　　　 HTML5网页设计，https://www.icourse163.org/course/ZZSLXX-1002124017。
　　　　　w3school在线教程：https://www.w3school.com.cn；
　　　　　菜鸟教程：https://www.runoob.com/；
　　　　　jQuery官网:https://jquery.com/。

课程标准

课程评价

教学资源

课程章节资源

课程章节	\| 文件类型		\| 修改时间	\| 大小	\| 备注
1.1 HTML5介绍（0.5学时）		文档 .pdf	2021-08-13	666.60KB
		文档 .pdf	2021-09-04	183.38KB
		视频 .mp4	2021-09-07	38.42MB
1.2 HTML5新增的常用元素（11.5学时）		附件 .${file.extension}	2021-08-26	--
		附件 .${file.extension}	2021-08-26	--
		附件 .${file.extension}	2021-08-26	--
		附件 .${file.extension}	2021-08-26	--
		附件 .${file.extension}	2021-08-26	--
		附件 .${file.extension}	2021-08-26	--
		附件 .${file.extension}	2021-08-26	--
		附件 .${file.extension}	2021-08-26	--
1.2.1 文档结构元素（5.5学时）		视频 .mp4	2021-08-12	46.38MB
		视频 .mp4	2021-08-12	44.73MB
		视频 .mp4	2021-08-12	36.78MB
		视频 .mp4	2021-08-12	39.66MB
1.2.2 文本格式化元素（3学时）		视频 .mp4	2021-08-12	31.90MB
		视频 .mp4	2021-08-12	40.87MB
		视频 .mp4	2021-08-12	40.24MB
		文档 .pdf	2021-08-13	1.25MB
1.2.3 页面增强元素（2.5学时）		视频 .mp4	2021-08-12	45.37MB
		视频 .mp4	2021-08-13	47.58MB
		文档 .pdf	2021-08-13	1.25MB
		视频 .mp4	2021-09-13	40.53MB
1.2.4 HTML5废弃的元素（0.5学时）		视频 .mp4	2021-08-26	39.99MB
		文档 .pdf	2021-08-26	763.64KB
1.3 HTML5多媒体元素（6学时）		文档 .pdf	2021-09-17	1.01MB
		作业 .work	2021-09-18	--
1.3.1 HTML5音频和视频（1学时）		视频 .mp4	2021-08-13	41.78MB
		文档 .pdf	2021-08-23	1.01MB
		视频 .mp4	2021-09-17	40.99MB
		视频 .mp4	2021-09-17	43.71MB
1.3.2 案例-视频播放器项目制作(2学时)		视频 .mp4	2021-09-17	28.41MB
		文档 .pdf	2021-09-17	616.79KB
		视频 .mp4	2021-09-18	29.34MB
1.3.3 案例-音频播放器项目制作（1学时）		视频 .mp4	2021-08-12	36.28MB
		视频 .mp4	2021-08-12	19.75MB
		视频 .mp4	2021-08-12	42.16MB
		视频 .mp4	2021-08-12	21.15MB
1.3.4 补充-音频播放器知识准备		文档 .pdf	2021-08-12	1.19MB
		文档 .pdf	2021-08-12	230.79KB
		视频 .mp4	2021-09-18	28.18MB
		视频 .mp4	2021-09-18	38.26MB
		视频 .mp4	2021-09-18	30.96MB
		作业 .work	2021-09-18	--
1.3.5 补充-视频播放器知识准备		文档 .pdf	2021-08-12	227.86KB
		作业 .work	2021-08-12	--
		文档 .pdf	2021-08-23	1.06MB
		视频 .mp4	2021-09-18	60.62MB
		视频 .mp4	2021-09-18	45.19MB
		视频 .mp4	2021-09-18	37.56MB
1.4 阶段综合实训-制作曹魏文化网（6学时）		视频 .mp4	2021-08-26	35.82MB
		视频 .mp4	2021-08-26	47.89MB
		视频 .mp4	2021-08-26	77.72MB
		文档 .pdf	2021-08-26	518.86KB
		视频 .mp4	2021-09-28	48.81MB
		视频 .mp4	2021-09-28	55.78MB
		视频 .mp4	2021-09-28	78.01MB
1.5 补充-制作电子杂志页面		文档 .pdf	2021-08-12	1.37MB
		文档 .pdf	2021-08-12	228.67KB
		视频 .mp4	2021-08-23	88.08MB
		视频 .mp4	2021-08-23	34.30MB
		视频 .mp4	2021-08-23	34.84MB
		视频 .mp4	2021-08-23	62.54MB
1.6 课外实训-体验制作移动版旅游网站旅游网		文档 .pdf	2021-08-12	1.12MB
		视频 .mp4	2021-08-12	33.33MB
		视频 .mp4	2021-08-12	64.73MB
		视频 .mp4	2021-08-12	50.41MB
		视频 .mp4	2021-08-12	123.82MB
		视频 .mp4	2021-08-12	74.02MB
		视频 .mp4	2021-08-12	46.14MB
		视频 .mp4	2021-08-12	210.71MB
2.1 HTML5原有的表单元素及表单控件		视频 .mp4	2021-08-13	48.37MB
		视频 .mp4	2021-08-13	47.50MB
		视频 .mp4	2021-08-13	52.49MB
		视频 .mp4	2021-08-13	35.02MB
2.2 HTML5表单新增的元素		视频 .mp4	2021-08-13	43.88MB
		视频 .mp4	2021-08-13	46.68MB
2.3 HTML5表单控件新增的属性		视频 .mp4	2021-08-13	44.11MB
		视频 .mp4	2021-08-13	40.54MB
		视频 .mp4	2021-08-13	42.87MB
		视频 .mp4	2021-08-13	43.58MB
2.4 补充案例-制作移动版登录和注册页面		文档 .pdf	2021-08-12	1.83MB
		文档 .pdf	2021-08-12	226.01KB
		作业 .work	2021-08-12	--
		视频 .mp4	2021-10-09	67.01MB
		视频 .mp4	2021-10-09	31.57MB
		视频 .mp4	2021-10-09	12.23MB
		视频 .mp4	2021-10-09	174.11MB
		视频 .mp4	2021-10-09	68.68MB
		视频 .mp4	2021-10-09	12.27MB
		视频 .mp4	2021-10-09	75.92MB
		视频 .mp4	2021-10-09	33.64MB
3.1 CSS3介绍		文档 .pdf	2021-08-25	863.68KB
		视频 .mp4	2021-09-04	37.80MB
3.2 新增的属性选择器		视频 .mp4	2021-08-25	114.87MB
		文档 .pdf	2021-08-25	885.63KB
		视频 .mp4	2021-08-26	51.75MB
3.3 新增的伪类选择器		视频 .mp4	2021-08-26	43.81MB
		视频 .mp4	2021-08-26	58.14MB
		视频 .mp4	2021-08-26	56.73MB
3.4 新增的伪元素选择器		视频 .mp4	2021-08-26	52.23MB
4.1 新增背景属性		视频 .mp4	2021-08-26	44.33MB
		视频 .mp4	2021-08-26	41.16MB
		视频 .mp4	2021-08-26	37.94MB
		视频 .mp4	2021-08-26	42.13MB
4.2 制作黑马书城网页		文档 .pdf	2021-08-12	1.36MB
		视频 .mp4	2021-08-12	24.71MB
		视频 .mp4	2021-08-12	38.74MB
		视频 .mp4	2021-08-12	49.39MB
		视频 .mp4	2021-08-12	13.21MB
		视频 .mp4	2021-08-12	104.54MB
		文档 .pdf	2021-08-12	226.38KB
		视频 .mp4	2021-08-26	89.21MB
4.3 新增文本属性		视频 .mp4	2021-08-26	52.59MB
		视频 .mp4	2021-08-26	31.67MB
4.4 制作软文推广页面		文档 .pdf	2021-08-12	1.42MB
		视频 .mp4	2021-08-12	57.58MB
		视频 .mp4	2021-08-12	35.07MB
		视频 .mp4	2021-08-12	67.99MB
		视频 .mp4	2021-08-12	73.95MB
		视频 .mp4	2021-08-12	70.15MB
		视频 .mp4	2021-08-12	124.15MB
		文档 .pdf	2021-08-12	225.31KB
4.5 新增盒模型属性		视频 .mp4	2021-08-26	59.52MB
		视频 .mp4	2021-08-26	47.84MB
		视频 .mp4	2021-08-26	38.16MB
4.6 制作手机邮箱导航页面		文档 .pdf	2021-08-12	986.67KB
		视频 .mp4	2021-08-12	53.13MB
		视频 .mp4	2021-08-12	81.35MB
		视频 .mp4	2021-08-12	211.18MB
		文档 .pdf	2021-08-12	226.48KB
		作业 .work	2021-08-12	--
4.7 制作多肉商城网页		文档 .pdf	2021-08-12	1.64MB
		视频 .mp4	2021-08-12	29.09MB
		视频 .mp4	2021-08-12	32.42MB
		视频 .mp4	2021-08-12	111.98MB
		视频 .mp4	2021-08-12	128.71MB
		视频 .mp4	2021-08-12	128.71MB
		文档 .pdf	2021-08-12	228.47KB
		作业 .work	2021-08-12	--
5.1 网页涂鸦		文档 .pdf	2021-08-12	1.78MB
		视频 .mp4	2021-08-12	69.83MB
		视频 .mp4	2021-08-12	47.24MB
		视频 .mp4	2021-08-12	91.66MB
		视频 .mp4	2021-08-12	67.35MB
		视频 .mp4	2021-08-12	44.03MB
		视频 .mp4	2021-08-12	35.58MB
		文档 .pdf	2021-08-12	233.31KB
		作业 .work	2021-08-12	--
5.2 直播回放		视频 .mp4	2021-08-12	42.97MB
		视频 .mp4	2021-08-12	84.63MB
6.1 第一个响应式网站知识准备（2学时）		文档 .pdf	2021-08-12	1.15MB
		文档 .pdf	2021-08-12	226.02KB
		视频 .mp4	2021-08-12	20.74MB
		视频 .mp4	2021-08-12	28.48MB
		视频 .mp4	2021-08-12	46.84MB
		视频 .mp4	2021-08-12	23.56MB
6.2 第一个响应式网站项目实现（4学时）		视频 .mp4	2021-08-12	43.15MB
		视频 .mp4	2021-08-12	87.33MB
		视频 .mp4	2021-08-12	50.72MB
		作业 .work	2021-08-12	--
6.3 社交网站个人信息页面知识准备（2学时）		文档 .pdf	2021-08-12	1.18MB
		视频 .mp4	2021-08-12	51.37MB
		视频 .mp4	2021-08-12	125.53MB
		视频 .mp4	2021-08-12	74.72MB
		文档 .pdf	2021-08-12	223.27KB
6.4 社交网站个人信息页面项目实现（4学时		视频 .mp4	2021-08-12	21.11MB
		视频 .mp4	2021-08-12	24.43MB
		视频 .mp4	2021-08-12	33.88MB
		视频 .mp4	2021-08-12	20.73MB
		作业 .work	2021-08-12	--
7.1 餐饮类网站首页知识准备1（2学时）		文档 .pdf	2021-08-12	3.16MB
		视频 .mp4	2021-08-12	27.56MB
		视频 .mp4	2021-08-12	33.70MB
		视频 .mp4	2021-08-12	37.61MB
		视频 .mp4	2021-08-12	108.16MB
		文档 .pdf	2021-08-12	223.02KB
7.2 餐饮类网站首页头部导航（4学时）		视频 .mp4	2021-08-12	23.00MB
		视频 .mp4	2021-08-12	25.28MB
		视频 .mp4	2021-08-12	22.55MB
		作业 .work	2021-08-12	--
7.3 餐饮类网站搜索模块制作（3学时）		文档 .pdf	2021-08-12	1.11MB
		视频 .mp4	2021-08-12	127.87MB
		视频 .mp4	2021-08-12	72.87MB
		视频 .mp4	2021-08-12	17.47MB
		视频 .mp4	2021-08-12	33.89MB
		作业 .work	2021-08-12	--
		文档 .pdf	2021-08-12	224.34KB
7.4 餐饮类网站热卖商品模块制作（3学时）		文档 .pdf	2021-08-12	856.25KB
		视频 .mp4	2021-08-12	20.38MB
		视频 .mp4	2021-08-12	66.29MB
		作业 .work	2021-08-12	--
7.5 餐饮类网站特色推荐模块制作（3学时）		文档 .pdf	2021-08-12	997.71KB
		视频 .mp4	2021-08-12	42.99MB
		视频 .mp4	2021-08-12	48.91MB
		视频 .mp4	2021-08-12	25.21MB
		视频 .mp4	2021-08-12	30.52MB
		视频 .mp4	2021-08-12	13.48MB
		作业 .work	2021-08-12	--
7.6 餐饮网站轮播广告模块（3）		文档 .pdf	2021-08-12	863.02KB
		视频 .mp4	2021-08-12	31.44MB
		视频 .mp4	2021-08-12	76.74MB
		作业 .work	2021-08-12	--
8.1 宠物领养中心网站首页		附件 .${file.extension}	2021-08-12	--
		文档 .pdf	2021-08-12	716.84KB
8.2 Bootstrap制作响应式简历		文档 .pdf	2021-08-12	588.26KB