《Web前端开发》课程标准.docx

《《Web前端开发》课程标准.docx》由会员分享，可在线阅读，更多相关《《Web前端开发》课程标准.docx（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web前端开发课程标准一、课程基本信息表1课程信息表课程名称Web刖端开发授课单位工程科技学院课程编码1019350课程类别（模块）职业核心技术模块前导课程计算机基础、图形图像处理后续课程网站开发与管理总学时90课程类型理论课是口总学分5实践课是口考核性质考试理论+实践是口理实一体化是,适用专业计算机应用二、课程定位和课程设计（一）课程性质与作用本课程是计算机应用技术专业的职业核心技术模块课程之一，是 基于工作过程系统化的课程，是一门实践性和应用性都很强的课程。 为计算机应用技术专业学生将来从事职场的web前端开发岗位的发 展打下良好基础，并为该专业后续网站开发与管理的学习打下网页前 端设计基

2、础。（二）课程基本理念本课程的设计“以能力为本位、以职业实践为主线、以工程引导,教学重点难点重点：HTML标签；难点:HTML属性教学方法自主探究、任务驱动备注教学成果工程二：CSS基础任务1 CSS盒模型课时：4知识目标技能目标素养目标1 .掌握CSS基本语法2 .掌握把CSS样式表 应用到网页的方法3 . 了解CSS盒模型4 .掌握使用CSS样式 设置内边距、外边距和 边框的方法能够掌握并使用盒模型技术让学生了解CSS盒模型的重 要性，培养学生的职业素质和道德 规范；做事认真负责，一丝不苟， 每一条语句都经过周密思考，培养 学生的软件工匠精神。教学重点难点重点：CSS基本语法难点：CSS盒

3、模型教学方法任务驱动自主探究备注任务2 CSS属性课时：12知识目标技能目标素养目标1 .掌握使用CSS属性 设置背景、文本、列表、 表格、表单和链接的方 法2 . 了解CSS定位的基 本概念3 .掌握CSS浮动的设1.能够熟练使用 CSS技术对页面元素 进行格式化2.能够正确使用CSS 定位技术对页面元素 进行绝对定位和相对 定位在学习的过程中，培养学生的 担当精神，弘扬奋斗的精神，培养 学生的职业素质和道德规范；教学重点难点置4.掌握CSS绝对定位 和相对定位的方法教学重点难点重点：CSS常用属性难点：CSS浮动、定位教学方法任务驱动自主探究备注任务3 DIV+CSS搭建网页框架课时：6知

4、识目标技能目标素养目标1 . 了解块级元素、行内 元素的区别；2 .掌握DIV+CSS进行 网页框架搭建的方法能够利用DIV+CSS技 术进行网页框架搭建通过DIV+CSS框架搭建，引 导学生了解职业生涯规划的重 要性，培养学生做事有条理， 有规划，培养学生的软件工匠 精神。教学重点难点重点：块级元素、行内元素的特点难点：DIV+CSS搭建网页框架教学方法任务驱动自主探究备注工程三：HTML5技术任务1 HTML5新增结构化标签课时：2知识目标技能目标素养目标1 .了解HTML5中新增 的文档结构标签。2 .掌握网页布局的方 法。能够综合运用HTML5 新增的结构化标签进 行网页布局设计，学

5、会自主发现、自主探 索的学习方法，学会 正确评价作品。1 .充分认识人生规划的意义 与重要性，引导学生做好人生规 划。2 .引导学生追求技术创新，服 务国家技术开展。重点：HTML5新增文档结构标签难点：利用HTML5新增的结构化标签进行网页布局设计。教学方法任务驱动、主动探究备注任务2浮动及媒体元素的插入课时：2知识目标技能目标素养目标1 .了解float属性的 应用。2 .掌握网页中音视频 的插入方法。1 .能够理解元素浮动引起 “塌陷”的原因及解决方法。2 .能够利用audio和video 标签在网页中插入音视频。通过素材案例引领，激发学 生的爱国热情。教学重点难点教学重点：1.元素浮动

6、引起“塌陷”的原因及解决方法。2. audio 和 video 标签。教学难点：元素浮动引起“塌陷”的原因及解决方法。教学方法任务驱动、主动探究备注任务3 HTML5表单课时：4知识目标技能目标素养目标1 .掌握创立表单的 HTML标记。2 .掌握表单的CSS样 式控制。能够设计制作表单页 面。通过利用HTML表单元素制作 当前热点“华为事件”的调查问卷 页面，激发学生的科技报国的理想 信念，并勉励同学们要开阔眼界、 提升境界、放眼未来做一个有大格 局大情怀的时代新青年。教学重点难点重点：创立表单的HTML标记。难点：表单的CSS样式控制。教学方法任务驱动自主探究备注任务4： HTML5表单验

7、证课时：6知识目标技能目标素养目标1 .掌握HTML5表单控 件新增的属性。2 .掌握表单验证的设 置方法。能够对表单页面设置验证属 性，增强其平安性。引导学生树立平安保密意 识，遵守行业规范，提倡健 康的网络道德准那么和交流活 动。教学重点难点重点：HTML5表单控件新增的属性。难点：表单验证设置中正那么表达式的定义方法。教学方法任务驱动法、实践演示法。备注工程四CSS3技术任务1 CSS3边框与背景课时：4知识目标技能目标素养目标1 .掌握CSS3新增的 边框属性2 .掌握CSS3新增的 背景属性能够使用CSS3新增的 边框属性创立美化边 框。树立正确的技能观，努力提高 自己的技能，为社会

8、和人民造福； 加深学生对专业知识技能学习的 认可度与专注度。教学重点难点重点：CSS3新增的边框属性难点：CSS3新增的背景属性教学方法任务驱动式自主探究备注任务2 CSS3文本与多列课时：4知识目标技能目标素养目标1 .掌握CSS3文本属 性的应用2 .掌握CSS3字体效 果的应用3 .掌握CSS3多列1 .能够使用CSS3技术 实现各种文字特效；2 .能够使用CSS3多列 实现仿报纸排版效 果。培养学生在设计前台界面时 的审美能力；提高学生综合运用所 学知识的能力。教学重点难点重点：text-shadow属性的应用难点：CSS3多列属性教学方法任务驱动自主探究备注任务3 CSS3变形课时：

9、8知识目标技能目标素养目标1 .掌握 transform 属 性能够实现的变形类 型；2 .掌握平移、旋转、 缩放、翻转四种变形属 性能够利用CSS3变形属 性和方法实现图形的 变换培养学生的计算思维、数字化 创新与开展、信息社会责任； 软件行业规划解析，培养学生 的软件工匠精神。教学重点难点重点：Transform属性实现平移、旋转、缩放、翻转变 形难点：3D转换教学方法任务驱动自主探究备注任务4 CSS3动画课时：8知识目标技能目标素养目标1 .掌握CSS3中的 transition 过渡动画 效果的应用2 .掌握CSS3中的 animation动画效果 的应用能够使用CSS3的变形 与动

10、画属性实现炫酷 的动画效果。培养学生的创新思维，融会贯 通的能力；培养学生的软件工 匠精神。教学重点难点重点：CSS3中的transition过渡动画效果的应用难点：CSS3中的animation动画效果的应用教学方法任务驱动自主探究备注注：在“工程/任务设计”中，要增加课程思政的案例，课程思政元素的融入应不少于每门课程总学时的20%o五、课程实施（一）教材选用或编写1 .推荐教材Web前端开发（初级）工业和信息化教育与考试中心主编中国 工信出版集团.教学参考资料职教云平台的资源库课程资源.教材编写体例建议教材编写应遵循“适用、实用、够用”的原那么1）适用：教材要以讲解HTML、CSS jav

11、ascript jQuery技术 为主，符合课程能力要求及本课程的培养目标；2）实用：教材应以真实工程为载体，按照实际开发过程组织编 写内容，强调理论与实践结合的工程化教材，便于实现“理实一体” 教学，符合高职学生培养要求。3）够用：教材应选择难度适宜，内容符合本课程标准要求的教 材。（二）教学方法与手段建议教学方法：在本课程教学中，教学方法的选取应强调突出现代高 等职业教育的特色，把现德育思想和课程的具体内容相结合，创造性 的开展教学，根据学情分析和教学内容特征，本课程选择采用工程教 学法、任务驱动法、案例教学、工程实践等方式组织教学，学习活动 组织表达讲练结合、自主学习、过程性考核等教学方

12、法，引导学生积 极思考，主动学习，乐于实践，提高学生的学习兴趣，培养学生分析 问题和解决问题的综合能力。教学手段：选择采用网络教学平台实现混合式教学。（三）教学评价、考核要求本课程考核关注评价的多元性，实施过程考核和期末考核相结合 的方式进行，同时引入激励加分方式进行考评，在考核方式中引入加 分项，使学生加强自我认知，获得自我实现感，增强学习动力。总之, 课程考核将坚持平时考核与期末考核相结合、单项考核与多元考核相 结合的原那么，既强调学生对实际技能的掌握程度，也追求学生个体素 质能力的培养。过程考核：主要考核学生学习态度和能力、参与度，解决实际问 题的能力，对新技术的接受能力，与同学协作的能

13、力，对应用环境的 适应能力，使用信息技术的责任心和道德规范等方面的评价。主要从 出勤、工程任务完成情况和阶段考核三个方面评价。期末考核：主要考核学生完成课程学习后的综合评价，以考核、 展示、发布、交流等多种形式，通过设计创作作品，充分发挥学生的 主动性和创造力，对学生运用Web前端开发设计前端页面的综合能 力、创新精神和实践能力进行评价。学期教学评价二过程评价50% +期末考核50%（四）课程资源开发与利用考核 方式过程考核（工程考核）50%期末考核 50%出勤工程任务考核阶段考核20分50分30分100分考核 实施由任课老师监督 实施由学生和任课老 师共同实施完成每一模块结束后 由任课老师进

14、行 综合考核教务处组织实施考核标 准出勤0. 5分/次，旷课扣1分/次每个任务根据难 易程度设置分 值，共计50分。每一个大工程完 成后进行一次综 合考核。以实际制作 的作品进行 考核1 .学习资料资源编写实践指导书2 .信息化教学资源通过制作完善多媒体课件、操作视频、多媒体素材等进行网络课 程的开发与利用。六、其他说明以就业为导向”，打破了传统的按照知识体系教授课程的模式，以学 生日后在从事Web前端开发行业中所需的实际技能为目标，进行基于 工作工程和工作任务的课程开发与设计，既保证满足从事网站前端开 发所必须的专业知识、专业技能，又保持原有知识体系的完整性，既 培养了学生的职业能力，同时也

15、为学生的可持续开展奠定了基础。（三）课程设计思路本课程是以“基于工作过程”为指导，通过对Web前端开发所涉 及到的岗位群进行工作任务和职业能力分析，以工程引导，以就业为 导向，以培养学生的职业技能为目标、以学生为主体、以工程为载体, 将知识、理论和实践一体化的课程设计思路。在宏观教学设计上突破 以知识点的层次递进为体系的传统模式，而是将职业工作过程系统 化，以工作过程为参照系，按照工作过程来序化知识，培养学生规范、 高效率、高质量地应用能力，使学生既学习岗位知识又培养学生职业 素质，锻炼学生的方法能力与社会能力。每个工程的学习以“做”为中心，教和学都围绕着做，在做中学, 在学中做，做到“教、学

16、、做” 一体化，到达理论与实践的统一，同 时注重培养学生的自主学习能力和职业素养的提升。本课程课程思政内容及单元的知识、技能按照相应的专项能力在 实际职业工作中出现的频度、内容的难度和要求掌握的程度进行排 序，如下所示：课程思政内容：1 .信息社会责任;.树立正确的技能观;2 .软件工匠精神培养。三、课程目标本着以工程引导，以就业为导向，以培养学生的职业技能为目标、 以学生为主体、以工程为载体，将知识、理论和实践一体化的课程设 计思路。根据1+X认证Web前端开发的职业技能等级认证标准， 确定本课程的知识目标、能力目标和素质目标。(一)工作任务目标(1)掌握web知识，掌握HTML常用标签的语

17、法及使用。(2)掌握CSS语法，CSS盒模型。(3)掌握使用DIV标签与CSS进行网页布局的方法与技巧。(4)掌握HTML5新增元素、CSS3新特性知识；(二)职业能力目标(1)能够熟练使用前端设计软件进行网页制作。(2)能够熟练使用HTML标签编写制作网页。(3)能够熟练使用DIV+CSS进行网页布局。(4)具有设计与制作CSS网页特效的能力。(5)能够建立“内容”与“表现”相别离的网页。(6)能够使用CSS和脚本语言实现网页交互效果。(三)素质目标.职业态度和素质要求(1)培养学生良好的心理品质和职业道德素养；(2)提升学生对社会主义核心价值观的领悟程度；(3)培养学生具有良好的沟通能力、

18、团队协作能力；(4)培养学生具有出色的执行能力和组织能力；(5)培养学生具有自主学习能力和知识应用能力；(6)培养学生能够严守商业秘密的个人品质；(7)培养学生具有一定的知识创新能力。1 .思政育人目标(1)将习近平新时代中国特色社会理论、社会主义核心价值观 和中华优秀传统文化教育内容融入到本课程的教学要求中，注重“术 道结合”；(2)培养学生高度的信息社会责任感。在现实世界和虚拟空间 中都能遵守相关法律法规，信守信息社会的道德与伦理准那么；具备较 强的信息平安意识与防护能力，能有效维护信息活动中个人、他人的 合法权益和公共信息平安；关注信息技术创新所带来的社会问题，对 信息技术创新所产生的新

19、观念和新事物，能从社会开展、职业开展的 视角进行理性的判断和负责的行动。(3)借鉴国内成功实践案例的优秀经验，剖析本行业领军人物 的奋斗故事，激发学生对社会主义核心价值观的认同感，培养学生诚 实、守信、坚忍不拔的性格，提高学生在沟通表达、自我学习和团队 协作方面的能力；(4)树立正确的技能观，努力提高自己的技能，为社会和人民 造福，绝不利用自己的技能去从事危害公众利益的活动，包括构造虚 假信息和不良内容、黑客行为和攻击网站等，提倡健康的网络道德准 那么和交流活动，鼓励学生利用自己的所学的专业知识，积极参与社会 科学普及活和应用推广活动；(5)培养学生的软件工匠精神，在潜移默化中培育社会主义核

20、心价值观，提高综合职业素养，树立社会主义职业精神。2 .工程/任务的思政目标(1)工程1/任务1：培养学生对前端设计师工作岗位及工作过程 进行感性认知。通过欣赏各种类型的网站，培养学生的审美观；通过 欣赏政府部门的网站，引导学生树立爱国意识；(2)工程1/任务2：理解并敬重工匠精神，在学习中努力发扬 工匠精神。(3)工程1/任务3：通过介绍Web相关知识，剖析本行业领军 人物的奋斗故事，激发学生对社会主义核心价值观的认同感，培养学 生老实、守信、坚忍不拔的性格；(4)工程1/任务4：通过制作庆祝建党100周年的新闻活动页 面，激发学生的爱国热情；(5)工程2/任务1：让学生了解CSS盒模型的重

21、要性，培养学 生的职业素质和道德规范；做事认真负责，一丝不苟，每一条语句都 经过周密思考，培养学生的软件工匠精神。(6)工程2/任务2：在学习的过程中，培养学生的担当精神，弘扬奋斗的精神，培养学生的职业素质和道德规范;(7)工程2/任务3：通过DIV+CSS框架搭建，引导学生了解职 业生涯规划的重要性，培养学生做事有条理，有规划，培养学生的软件工匠精神。(8)工程3/任务1：通过网页布局引导学生充分认识人生规划 的意义与重要性，引导学生做好人生规划。同时引导学生追求技 术创新，服务国家技术开展。(9)工程3/任务2：通过素材案例引领，激发学生的爱国热情。(10)工程3/任务3：通过利用HTML

22、表单元素制作当前热点“华 为事件”的调查问卷页面，激发学生的科技报国的理想信念，并 勉励同学们要开阔眼界、提升境界、放眼未来做一个有大格局大 情怀的时代新青年。(11)工程3/任务4：引导学生树立平安保密意识，遵守行业 规范，提倡健康的网络道德准那么和交流活动。(12)工程4/任务L树立正确的技能观，努力提高自己的技能, 为社会和人民造福；加深学生对专业知识技能学习的认可度与专注 度。(13)工程4/任务2：培养学生在设计前台界面时的审美能力； 提高学生综合运用所学知识的能力。(14)工程4/任务3：培养学生的计算思维、数字化 创新与开展、 信息社会责任；软件行业规划解析，培养学生的软件工匠精

23、神。(15)工程4/任务4：培养学生的创新思维，融会贯通的能力； 培养学生的软件工匠精神。U!1、课程内容与要求高职院校主要以培养高技能人才为办学定位思想，结合我校具体情况，以现代职教理念为指导，以培养应用型人才为目标，通过采用 工程教学法，通过六个工程渐进式教学，培养学生扎实、系统的web 前台页面开发能力。最终培养的人才应该具有扎实的基本功，一定的 相关专业知识，较强的应用和开发能力，较高的职业素养，以及获取 知识的能力，独立思考的能力和创新能力。基于工程的实施工程，进行工程的任务分解，为每个工程确定技 能点与知识点。表1课程教学内容、地点、学时安排总表序 号工程任务学习成果授课地点授课

24、教师学时/ 实践 学时1工程1Web页面制作基础任务1岗位任知作品机房宋丽萍2/1任务2网站制作流程介绍机房宋丽萍2/1任务3 Web相关知识机房宋丽萍4/2任务4 HTML基础机房宋丽萍20/102工程2CSS基础任务1 CSS盒模型作品机房宋丽萍4/2任务2 CSS属性机房宋丽萍12/6任务3 DIV+CSS搭建网页框架机房宋丽萍6/33工程3HTML5技术任务1HTML5新增结构化标签作品机房宋丽萍2/1任务2.浮动及媒体元素的插入机房宋丽萍2/1任务3 HTML5表单机房宋丽萍4/2任务4 HTML5表单表单验证机房宋丽萍6/3注：学时设置应与2021版人才培养方案保持一致。4工程4C

25、SS3技术任务1 CSS3边框与背景作品机房宋丽萍4/2任务2 CSS3文本与多列机房宋丽萍4/2任务3 CSS3变形机房宋丽萍8/4任务4 CSS3动画机房宋丽萍8/4表2教学内容与教学实施安排表工程一：Web页面制作基础任务1 ：岗位任知课时：2知识目标技能目标素养目标1. 了解网站制作的相 关岗位。2. 了解网站制作相关 岗位所需技能。3. 了解网页的基本构 成元素4. 了解网页的技术构 成5. 理解网站、网页的概 念6. 掌握HTML文档的基 本结构1 .能够了解网页制 作相关岗位及岗位 所需技能；2 .能够了解网页的 基本构成元素和技 术构成3 .能够正确理解网 站、网页的概念及 w

26、eb站点的工作原 理4 .能够熟练编写 HTML文档的基本结 构培养学生对前端设计师工 作岗位及工作过程进行感性认 知。通过欣赏各种类型的网站， 培养学生的审美观；通过欣赏政 府部门的网站，引导学生树立爱 国意识；教学重点难点重点：L网站制作相关岗位所需技能。2.网站、网页的概念；难点：HTML文档的基本结构教学方法案例教学法备注（如上课地点、授课老师等需特殊注明的）任务2：网站制作流程介绍课时：2知识目标技能目标素养目标1 . 了解网站制作的工作流程2 .了解网站开发的工作环境1 .能够了解网站制 作的工作流程2 .能够了解网站开 发的工作环境3 .会写网站筹划书理解并敬重工匠精神，在学习

27、中努力发扬工匠精神。教学重点难点重点：网站制作的工作流程难点：网站筹划书的编写教学方法自主探究、任务驱动备注（如上课地点、授课老师等需特殊注明的）任务3. Web相关知识学时：4知识目标技能目标素养目标1 .了解Web的由来及 其与Internet的关 系；2 . 了解Web的相关概 念。1 .能够了解Web前 端开发所需要掌握 的内容；2 .能够安装与使用 开发软件。通过介绍Web相关知识，剖析 本行业领军人物的奋斗故事，激发 学生对社会主义核心价值观的认 同感，培养学生老实、守信、坚忍 不拔的性格；教学重点难点重点：web的相关概念难点:HBuiIder的使用教学方法自主探究、任务驱动备注任务4. HTML基础课时:20知识目标技能目标素养目标1 . 了解HTML的历史；2 .精通HTML的结构3 .精通HTML的元素和属性能够熟练使用HTML标签编写网页通过制作庆祝建党100周年 的新闻活动页面，激发学生的爱国 热情；