Web前端技术基础
主讲教师:张振球
教师团队:共10位
本课程是一门实践性和概念性都很强的面向实际应用的课程。本课程主要介绍Web前端开发技术,主要包括HTML5、CSS3、JavaScript等知识,每个知识点都以案例教学为引导,以培养能力为目的,充分体现了“做中学”和“学中做”的思想。web前端开发近年来得到了飞速的发展,前端领域也非常广泛,彼此之间的特点也相当明显。例如很多平台:PC端、手机端、平板端。前端技术已经有了自己的体系结构,各种前端框架发展非常好,这些框架的基础都离不开Web前端技术基础。
通过本课程的学习,学生学习了Web前端技术基础的概念及开发方法,开发过程。学生能熟练安装和配置前端开发环境,熟练使用HTML5、CSS3、JavaScript以及jQuery常用命令,熟练掌握vscode等编译器的使用方法。理解Web开发基础知识,掌握Web程序设计的基本原理与方法,具备基本的Web前端网页开发能力,并掌握前端程序调试方法。课程通过真实项目引导教学,以任务式展开教学,完成理论知识的学习和应用,实现理论与实践结合。以实际项目作为教学载体,由易到难,由简到繁,逐层深入,步步递进,展开教学。面对诸多挑战,只有掌握了最基础的、最重要的、最实用的技术,才能为后面的前端框架技术做准备,成为当下需要的技术型人才。
02Html CSS JavaScript的技术关系.mp4
HTML网页的基本结构(1).mp4
CSS样式应用.mp4
ch1-2-1 JS引用讲解.mp4
ch1-2-2 JS引用讲解-演示.mp4
ch01 web前端技术概述(1).pptx
1-1.mp3
02Html CSS JavaScript的技术关系.mp4
01企业网站开发流程(0).mp4
ch01-web前端开发入门(2).ppt
知识点1-1.mp4
课堂讨论
1-2(2).mp4
1-3(4).mp4
1-1(4).mp4
03 浏览器网页请求全过程.mp4
1-3.mp4
1-3(2).mp4
ch1-2-3 前端编码经验分享-讲解.mp4
ch1-2-4 综合案例演示.mp4
网页搭建.pptx
经贸学校前端分析.mp4
知识点1-3.mp4
课堂讨论
1-4-1.mp4
1-4-2.mp4
1-4-3.mp4
1-4.mp4
1-4-1.html
1-4-2.html
1-4-3.html
1-4.html
ch01 WEB前端开发入门.xls
2-1.mp3
ch02-html文档基本结构.pptx
知识点2-1.mp4
2-1(1).mp4
2-2.mp3
知识点2-1(1).mp4
images(1).rar
2-1(2).mp4
2-1.html
2-3.mp4
知识点2-3.mp4
2-2.mp4
ch02HTML文档基本结构.xls
ch03-HTML文字.段落与列表.ppt
3-1.mp3
知识点3-1.mp4
3-1(6).mp4
3-1(1).mp4
3-2.mp3
知识点3-1(1).mp4
3-1(2).mp4
3-3.mp3
知识点3-1(2).mp4
3-2(2).mp4
3-1(3).mp4
3-4.mp3
知识点3-1(3).mp4
3-3(3).mp4
3-4(1).mp4
知识点3-1(4).mp4
3-5.mp3
知识点3-1(5).mp4
3-6.mp3
3-2.mp4
3-2(1).mp4
知识点3-2(1).mp4
3-5.mp4
3-3.mp4
知识点3-3.mp4
3-6.mp4
知识点3-3(1).mp4
知识点3-3(2).mp4
3-7.mp4
3-3(2).mp4
知识点3-3(3).mp4
3-8.mp4
3-4.mp4
知识点3-4.mp4
3-9.mp4
3-10.mp4
3-11.mp4
ch03HTML文字、段落、列表
ch04-HTML超链接.ppt
4-1.mp3
ch04-HTML超链接.ppt
知识点4-1.mp4
4-1(1).mp4
4-2.mp3
知识点4-1(1).mp4
4-1(2).mp4
4-2.mp4
4-3.mp3
知识点4-2(1).mp4
4-2(2).mp4
知识点4-2.mp4
ch04HTML超链接
ch05-HTML图像—5.1.ppt
5-1.mp3
5.1 img元素(2).mp4
ch05-HTML图像—5.2.ppt
5.2 内联元素与块元素(3).mp4
第5章 章节测试.docx
ch06-HTML表格—6.1.ppt
6-1.mp3
6.1 表格元素(2).mp4
ch06-HTML表格—6.2.ppt
6-2.mp3
6.2 rowspan和colspan属性(2).mp4
第6章 章节测试(1).docx
表单元素2(视频来自B站UP主村长教编程).mp4
表单的作用(视频来自B站UP主博学谷).mp4
什么是HTML表单(视频来自B站UP主起点编程).mp4
表单元素1(视频来自B站UP主村长教编程).mp4
课前导入
7-1.mp3
ch07-HTML表单—7.1.ppt
7-2.mp3
ch07-HTML表单—7.2.ppt
7-3.mp3
7.2.3 单选框(radio)(1).mp4
7.2.4 复选框(checkbox)(1).mp4
ch07-HTML表单—7.3.ppt
7-4.mp3
ch07-HTML表单—7.4.ppt
7.4 select元素.mp4
7-5.mp3
ch07-HTML表单—7.5.ppt
7-6.mp3
ch07-HTML表单—7.6.ppt
7-7.mp3
HTML5新增的表单元素和属性——color类型 search类型(视频来自B站UP主图难于易).mp4
HTML5新增的表单元素和属性——date类型(视频来自B站UP主图难于易).mp4
HTML5新增的表单元素和属性——email类型(视频来自B站UP主图难于易).mp4
HTML5新增的表单元素和属性——number类型(视频来自B站UP主图难于易).mp4
HTML5新增的表单元素和属性——URL类型(视频来自B站UP主图难于易).mp4
ch07-HTML表单—7.7.ppt
7-8.mp3
ch07-HTML表单—7.8.ppt
制作用户信息反馈表.mp4
表单注册案例 视频1(视频来自B站UP主图难于易)(1).mp4
表单注册案例 视频2(视频来自B站UP主图难于易).mp4
表单综合案例(节选自 HTML5+CSS3网页设计与制作 黑马程序员编著)(1).docx
第7章 章节测试.docx
ch08-HTML多媒体—8.1.ppt
ch08-HTML多媒体—8.2.ppt
8.2 audio元素(1).mp4
ch08-HTML多媒体—8.3.ppt
ch08-HTML多媒体—8.4.ppt
ch08-HTML多媒体—8.5.ppt
第8章 章节测试.docx
ch09-HTML5布局—9.1(1).ppt
ch09-HTML5布局—9.2.ppt
第9章 章节测试.docx
10-1.mp3
10-1 CSS 规则.pptx
10-1 CSS 规则(1).mp4
10-2.mp3
10-2 CSS 选择器(1).pptx
10-2 CSS 选择器.mp4
10-1.mp4
10-3.mp3
10-3 将 CSS 与 HTML 联系起来.pptx
10-3 将 CSS 与 HTML 联系起来(1).mp4
10-4.mp3
10-4 盒子模型.pptx
10-4 盒子模型(1).mp4
10-2.mp4
10-3.mp4
10-4.mp4
10 CSS初识 章节测试
10-5.mp3
10-6.mp3
10-7.mp3
10-8.mp3
11-1.mp3
11-1 CSS 字体(font-family).ppt
11-1 CSS 字体(font-family).mp4
11-2.mp3
11-2 CSS 文本属性.ppt
11-2-1 CSS 文本属性.mp4
11-2-2 案例仿百度.mp4
11-1.mp4
11-3 CSS3 新增的文本属性.ppt
11-3 CSS3 新增的文本属性.mp4
11-2.mp4
11 CSS文本样式章节测试
12-1 图片的边框.ppt
12-1 图片的边框.mp4
12-1.mp4
12-2 图片的大小.ppt
12-2 图片的大小.mp4
12-2.mp4
12-3.mp4
12-3 图片的对齐方式.ppt
12-3 图片的对齐方式.mp4
12-4.mp4
12-4 背景图像.ppt
12-4 背景图像.mp4
12-5.mp4
12 CSS设置图片效果章节测试
ch13-CSS布局与定位.pptx
13-1.mp3
13-2.mp3
13-3.mp3
13-4.mp3
13-5.mp3
13-6.mp3
章节内容概览ch14(7).mp4
章节内容概览ch14(4).pptx
ch14-CSS列表new1.mp4
ch14-CSS列表(2).pptx
14-1.mp4
14-2.mp4
14-3.mp4
14-4.mp4
14-5.mp4
教材例题演示
教材例题演示
教材例题演示
教材例题演示
教材例题演示
ch14-CSS表格.mp4
ch14-CSS表格.pptx
课堂讨论
ch14 CSS超链接.mp4
ch14-CSS超链接.pptx
垂直导航栏的制作过程.mp4
水平导航栏的制作过程.mp4
ch14CSS列表、表格与超链接单元测验
ch14CSS列表、表格与超链接单元测验
CSS过渡.mp4
ch15-1 CSS过渡.pptx
15-1.mp4
教材例题演示
CSS变换.mp4
ch15-2 CSS变换.pptx
15-2.mp4
教材例题演示
CSS动画.mp4
ch15-3 CSS动画.pptx
15-3.mp4
教材例题演示
CSS 过渡、变换和动画
ch16-HTML+CSS综合案例(一).pptx
Chapter16教学视频.mp4
ch17-HTML+CSS综合案例(二).pptx
CHapter17教学视频.mp4
ch18-JavaScript基础.pptx
ch18.0.pptx
18.1.mp4
ch18.1.pptx
18-1.mp4
18-2.mp4
18-3.mp4
18.2.mp4
ch18.2.pptx
18-4-Boolean.mp4
18-4-String.mp4
18-4-Undefined.mp4
18.3.mp4
ch18.3.pptx
18.4.mp4
ch18.4.pptx
18-4.mp4
18-5.mp4
ch18.5.pptx
18-6.mp4
ch18.6.pptx
18-x.mp4
ch18JavaScript 基础
ch19-JavaScript内置对象.pptx
19-1.mp3
ch19.pptx
19.1.mp4
ch19.1-2(1).pptx
19-1.mp4
19.3.mp4
ch19.3.pptx
19-2.mp4
19-3.mp4
19-4.mp4
19.4.5.mp4
ch19.4.pptx
19-5.mp4
19-6.mp4
ch19JavaScript 内置对象
ch20-window对象.pptx
ch20-window对象(1).pptx
20.12.mp4
ch20.1.2.pptx
20-1.mp4
20-2.mp4
20.3.mp4
ch20-window对象(2).pptx
20-3.mp4
20-4.mp4
ch20window 对象
ch21-DOM基础.pptx
ch21.0.pptx
21.1.mp4
ch21.1.pptx
21.2.mp4
ch21.2.pptx
21-1.mp4
21-2.mp4
21-3.mp4
21.3.mp4
ch21.3.pptx
21-4.mp4
21-5.mp4
21.4-5.mp4
ch21.4-5.pptx
21-6.mp4
21-7.mp4
21.6-7.mp4
ch21-DOM基础 - 副本.pptx
21-8.mp4
21-9.mp4
ch21DOM 基础
ch22-jQuery基础.pptx
ch22.0.pptx
21.1-2.mp4
ch22.1-2.pptx
22-1.mp4
22-3.mp4
ch22.3.pptx
22-2.mp4
22-3(2).mp4
22-4.mp4
22-4-5(1).mp4
ch22.4-5.pptx
22-678.mp4
ch22.6-7-8.pptx
22-5.mp4
22-6.mp4
22-7(完整).mp4
ch22jQuery 基础
ch23-HTML+CSS+JavaScript综合案例(一).pptx
Chapter23教学视频.mp4
ch24-HTML+CSS+JavaScript综合案例(二).pptx
Chapter24教学视频(1).mp4
B1-1 Web技术基础.pptx
B1-2 HTTP协议基础.pptx
B1-3 前端开发工具介绍.pptx
B2-1HTML文档结构与基本标签.pptx
image.png
image-1.png
image-2.png
image-3.png
image-4.png
image-5.png
HTML文档结构与基本标签
HTML文档结构与基本标签
图像、列表和表格
图像、列表和表格
图像、列表和表格
图像、列表和表格
B2-2-1图像.pdf
B2-2-2 列表.pdf
B2-2-3 表格.pdf
H2-2 作业.pdf
H3-1表单1作业.pdf
B3-1 表单1-3提交按钮.pdf
B3-1 表单1-4下拉菜单.pdf
B3-1 表单1-2文本框.pdf
B3-1 表单1-1基本结构.pdf
WEB HTML基础小综合网站.rar
H3-2表单进阶作业.pdf
B3-2表单进阶3表单验证和提交处理.pdf
B3-2表单进阶2文件上传和隐藏域.pdf
B3-2表单进阶1单复选按钮.pdf
B3-3多媒体及语义标签1多媒体标签.pdf
B3-3多媒体及语义标签2语义标签.pdf
H3-3多媒体及语义标签作业.pdf
B3-4-1 H5新增语义化标签.pdf
B3-4-2 H5新增表单元素.pdf
B3-4-3 H5新增API介绍.pdf
H3-4 H5新增标签与API作业.pdf
E4-1-1 CSS 基本语法和选择器.pdf
B4-1-1 CSS 基本语法和选择器.pdf
security_IMG_20240428_113201778.jpg
E4-2-2 CSS盒子模型.pdf
B4-2-2 CSS盒子模型.pdf
E4-2-1 CSS文本样式.pdf
B4-2-1 CSS文本样式.pdf
E4-3-1 浮动和定位.pdf
B4-3-1 浮动和定位.pdf
B5-1-1布局技巧与实战.pdf
本课程的教学效果主要在课程教学效果、技术支持服务以及课程示范引领三个方面体现。
一、课程教学效果
1. 课程评价:学生、同行、督导、后续课教师、用人单位均对本课程持续好评,教学满意度连续3年位居学校前列,2021年课程团队评为学校教学创新团队,并获得学校教学大赛一等奖。从事Web前端开发等工作的实习生受到徐州格雷软件、徐州中矿微星、苏州盛派网络等用人单位的好评。
2. 改革成效:教学目标达成度高,学生Web前端开发技能水平显著提高,学生设计、创意、沟通表达等综合能力显著提升。2022年获金砖国家技能发展与技术创新大赛Web技术赛项二等奖。近三年来,师生获各类Web技术设计大赛一、二等奖17人次,发表论文8篇,授权专利2件。
二、技术支持服务
数字化教学资源的应用覆盖整个教学过程,其中,线上部分:页面浏览量724860次,课程活动数163个,章节任务点306个,单元测试19份,章节拓展资料249个,课堂活动163个,作业19次,题库264题,考试4次。学生参与度100%。开展三级管理机制,确保课程有序进行,起到良好的督学、促学效果。
三、课程示范引领
围绕本课程建设,进行了基于教学工坊的软件技术专业人才培养模式的创新与实践,2019年11月受邀在世界职业教育大会分享课程建设经验,该案例被评为大会优秀案例。教学资源及模式被省内外20余所中高职院校引用。
根据社会在职人员学习方式多样化的需求,发挥在线学习平台的优势,充分利用课程平台,为社会学习者提供在线学习、测评等服务,解决了在职人员学习提升的工学矛盾,实现了在职人员“碎片化的学习”。目前社会学习者用户数量达36人。本课程教学评价采用综合评价、增值评价、企业评价三个方面对学生成绩进行评价,理论考试与实践考核相结合,理论考试重点考核与实践能力紧密相关的知识,重点评价学生的职业能力。形成以“综合评价”为主,充分统筹线上、线下成绩,结合“增值评价”和“企业评价”的创新评价方式,既考核学生学习过程,又突出学生能力发展。组织高年级学生对在学课程学生的增值表现进行评价,促进高年级学生温故知新,低年级学生先学一步,助力全程,全方位育人。
1. 综合评价(占总成绩70%):横向考察学生过程表现,线上成绩占30%,线下成绩占40%。
(1) 线上成绩由章节任务点、章节测验、线上作业、讨论区、分组任务和签到构成。
(2) 线下成绩由随堂测验、期中测试和期末测试构成。
2. 增值评价(占总成绩10%):借鉴NIIT中ISAS等教学评价模式,纵向考察学生进步发展,包括考察学生审美与设计能力、客户沟通与需求分析能力、网站开发创新能力、产品展示与表达能力等综合素养。评价过程中,组织高年级学生参与增值表现评价。
3. 企业评价(占总成绩20%):组织企业专家参与学生项目作品评价工作,对学生的Web设计能力、展示与表达能力进行测评,并把测评结果作为对课程教学质量评价的重要依据。
京ICP备10040544号-2
京公网安备 11010802021885号