《Web前端开发-网页设计与制作》课程标准

《Web前端开发》/《网页设计与制作》课程标准（2024年修订）**学院二〇二*年*月——《Web前端开发》/《网页设计与制作》课程标准1课程概述1.1课程名称课程名称：《Web前端开发》/《网页设计与制作》1.2学时与适用对象课程总计66学时，理论课时25.5，实践课时40.5，后续课程为《Web程序设计与开发》《PHP网站开发》等相关课程。本标准适用于计算机应用技术、数字媒体应用技术、网络技术、软件技术等计算机大类专业。1.3课程定位《Web前端开发》/《网页设计与制作》课程是计算机应用技术专业的一门专业基本技能课程，课程内容以HTML5和CSS3行业规范加以约束。根据IT产业生产一线对高等职业院校高技能岗位人才的要求，将HTML5、CSS3和Bootstrap框架的知识点颗粒化，映射在各个案例中。课程素质目标：“树立职业理想，培养良好职业道德（责任感）和行为规范，提高审美和人文素养”。课程知识和技能目标：“掌握HTML语言、CSS样式表，具备网页设计、开发、调试和维护等能力”。2课程目标2.1总体目标本课程依据1+X证书“Web前端开发”职业技能初级和中级证书考核标准，以思政教育和科技创新为引领，引入典型企业案例，按照由易到难循序渐进的结构顺序设计学习内容。围绕新一代信息技术行业发展带来的Web前端开发高端技能人才需求，培养具有良好职业道德和人文素养的科技创新人才。要求学生能够掌握Web前端开发工具Dreamweaver或HBuilderX的使用、HTML标记语言的运用，以及灵活运用CSS控制页面各类元素。通过分析、演练具体的商业案例，达到能独立自主的完成整个站点的规划与制作。根据课程面对的工作任务和职业能力要求，本课程总体教学目标如下表所示：课程总体教学目标与职业能力对应表工作领域工作任务职业能力学习项目网页设计与制作任务1Web前端工程师职业前景与开发流程能认识有关网站的相关概念和构成元素Web前端职业前景与重要理念任务2Dreamweaver和HBuilderX使用方法能使用Dreamweaver或HBuilderX制作简单网页构建与简单控制HTML5页面任务3HTML5入门知识能看懂HTML语言含义；能使用常见的HTML元素构建网页任务4初识CSS能使用简单的CSS规则美化页面CSS3基础入门任务5CSS3初级选择器掌握初级选择器的使用方法任务6CSS3高级选择器掌握高级选择器的使用方法任务7使用CSS控制页面文本能熟练使用CSS各种属性灵活控制页面文本元素实现Web前端排版与美化任务8使用CSS控制超链接能熟练掌握超链接各种伪类状态下的控制方法任务9使用CSS控制图像文本能熟练使用CSS各种属性灵活控制页面图像元素任务10浮动与定位能熟练掌握浮动、定位和列表元素的使用方法浮动、定位和列表任务11列表能熟练运用定位实现页面元素灵活排版任务12表单元素及其控制能熟练掌握表单的控制方法HTML5增强型表单与简易表格任务13表格元素及其控制能熟练掌握表格的控制方法任务14CSSSprite技术能熟练掌握CSSSprite技术CSS3与HTML5的高级应用任务15CSS3渐变与动画掌握CSS3有关渐变的实现方法；掌握CSS3动画设计的方法；任务16HTML5Canvas初步掌握HTML5绘图的方法任务17PC端页面布局规划与实现掌握PC端页面的设计与实现能力PC端典型页面的设计与实现任务18“响应式”页面的设计与实现能熟练使用响应式实现多设备间页面的布局实现多设备响应式页面的实现任务19初识Bootstrap框架能够初步掌握Bootstrap框架基本知识使用Bootstrap框架创建页面任务20使用Bootstrap框架搭建简单页面能够使用框架搭建简单页面任务21WebApp开发基础了解WebApp开发基本概念WebApp类页面的设计与实现任务22WebApp页面的设计与实现能够独立完成整个站点的规划与制作2.2分项目标（1）知识目标①了解Web前端发展脉络、趋势及应用前景。②掌握HTML语言的常用标签、文档设置、网页布局、文本编辑、超链接的创建和管理、图像的运用、多媒体的运用、模板和库的使用、表单的使用、动态行为的使用。③掌握CSS的运用，学会使用CSS控制页面文本、图像，以及各类元素。④掌握Dreamweaver或HBuilderX工具的使用。（2）技能目标①具备基本的HTML编程和CSS样式布局能力。②能熟练运用Dreamweaver或HBuilderX进行网站规划、管理、发布的相关技术及网页制作的操作技能；能实现网页的交互和特殊效果；能独立设计并实现站点的界面设计。③具备依据文档编写规范的、准确的和易读的程序代码的能力。④积极参与各种技术交流，具备前端开发新知识、新技能的学习能力。（3）方法目标①能够达到独立分析页面结构的能力。②能够达到使用HTML5和CSS3构建页面结构的能力。（4）素质目标①培养学生的沟通能力和团队协作精神，具有良好的职业道德。②尊重他人劳动成果，遵守《中华人民共和国知识产权法》，培养学生诚实守信的品德。③培养学生思维策略能力、人际沟通与合作能力、自我学习与自我提高能力、分析和解决问题能力等职业核心能力。④培养学生具备一定的艺术鉴赏能力，树立正确的审美观，Web页面制作符合中华传统审美。3教学内容与要求《Web前端开发》/《网页设计与制作》课程教学内容全面体现了工作过程结构的完整性和要素的全面性。在各项目中，包含了若干工作任务，并为每个任务设计了训练内容。全部教学均在教学一体化实训室进行，采用边讲边练、学做合一的方式开展。其具体的学习项目教学内容与能力要求如下。教学内容与要求安排表序号教学内容（工作任务或教学单元或模块）知识内容与要求（必备的知识）技能内容与要求（应具备的技能）参考课时1任务1Web前端工程师职业前景与开发流程入门知识开发环境能练认知网站基本概念22任务2Dreamweaver和HBuilderX使用方法站点、DIV元素能使用DW或HBuilderX完成站点管理23任务3HTML5入门知识文档结构、列表、表格、多媒体、新增结构元素能熟练编写符合HTML5文档结构的基本页面24任务4初识CSSCSS入门能掌握CSS的基本书写规范能掌握常见CSS属性25任务5CSS3初级选择器选择器掌握初级选择器的使用方法26任务6CSS3高级选择器选择器掌握高级选择器的使用方法27任务7使用CSS控制页面文本各类CSS属性能熟练使用CSS各种属性灵活控制页面文本元素28任务8使用CSS控制超链接文本、超链接能熟练掌握超链接各种伪类状态下的控制方法29任务9使用CSS控制图像文本有关图像的基础操作能熟练使用CSS各种属性灵活控制页面图像元素210任务10浮动、定位和列表浮动、定位能熟练掌握浮动、定位的使用方法411任务11列表列表能熟练运用定位实现页面元素灵活排版212任务12表单元素及其控制表单能熟练掌握表单的控制方法213任务13表格元素及其控制表格能熟练掌握表格的控制方法214任务14CSSSprite技术CSSSprite技术能熟练掌握CSSSprite技术315任务15CSS3渐变与动画CSS3渐变与动画掌握CSS3有关渐变的实现方法；掌握CSS3动画设计的方法；216任务16HTML5Canvas了解HTML5绘图。初步掌握HTML5绘图的方法117任务17PC端页面布局规划与实现页面规划掌握PC端页面的设计与实现能力818任务18“响应式”页面的设计与实现响应式布局能熟练使用响应式实现多设备间页面的布局实现819任务19Bootstrap框架Bootstrap框架初步掌握Bootstrap框架基本知识420任务20使用Bootstrap框架搭建简单页面Bootstrap框架能够使用框架搭建简单页面221任务21WebApp开发基础WebApp了解WebApp开发基本概念322任务22WebApp页面的设计与实现WebApp能够独立完成整个站点的规划与制作7合计=SUM(ABOVE)664教学设计根据工作任务与职业能力分析，为使学生会做Web前端工作，本课程设计了11个学习项目，在项目的教学实施中，进一步分解成22个学习型工作任务。教学设计表学习项目编号学习项目名称学习型工作任务参考课时项目11Web前端职业前景与重要理念任务1Web前端工程师职业前景与开发流程2项目22HTML5页面的构建与简单控制任务2Dreamweaver和HBuilderX使用方法2任务3HTML5入门知识2项目33CSS3基础入门任务4初识CSS2任务5CSS3初级选择器2任务6CSS3高级选择器2项目44实现Web前端排版与美化任务7使用CSS控制页面文本2任务8使用CSS控制超链接2任务9使用CSS控制图像文本2项目55浮动、定位与列表任务10浮动与定位4任务11列表2项目66HTML5增强型表单与简易表格任务12表单元素及其控制2任务13表格元素及其控制2项目77CSS3与HTML5的高级应用任务14CSSSprite技术3任务15CSS3渐变与动画2任务16HTML5Canvas1项目88PC端典型页面的设计与实现任务17PC端页面布局规划与实现8项目99多设备响应式页面的实现任务18“响应式”页面的设计与实现8项目1010使用Bootstrap框架创建页面任务19初识Bootstrap框架4任务20使用Bootstrap框架搭建简单页面2项目1111WebApp类页面的设计与实现任务21WebApp开发基础3任务22WebApp页面的设计与实现7合计=SUM(ABOVE)665教学方法与手段5.1教学方法《Web前端开发》/《网页设计与制作》课程实行信息化教学、启发式教学、研讨式教学、案例式教学和任务式教学等多种教学方法，鼓励学生独立思考，激发学生学习的主动性，培养学生的科学精神和创新意识。理论教学在讲清概念的基础上，强化应用训练。（1）信息化教学结合智慧课堂等信息化手段，全面开展、全程开展信息化教学，实现形成性过程化考核评价模式。（2）启发式教学对于设计类课程有意识地应用启发式教学。例如：通过分析具体的范例，启发学生思考其后的设计思想；通过介绍教师自己构思的经验和体会，启发学生思考如何拓宽自己的思维空间等。在讲述某些方案后，启发学生去思考与之互补的方案以及折中方案。（3）研讨式教学对于知识性的课程往往采用研讨式教学方法。在讲述后提出一定的问题，让学生上网自己寻找资料，进行研讨式组内发言和小组代表发言，通过讨论、辩论、相互评价和教师总结等形式，使学生在过程中加深对知识的理解和认识，提高对实际问题的分析判断能力，增强对技术的运用能力和口头表达能力。（4）案例式教学在前期制作类课程多使用案例式教学方法。由老师在介绍了必须的预备知识之后，拿出一个典型案例进行分析，介绍构思形成过程，同时演示制作技巧，最后让学生作模仿性设计练习。（5）任务式教学在制作类课程多使用任务式教学方法。由于学生已经掌握一定的分析方法，具备一定的设计基础，所以由老师提出任务，帮助同学分析解决任务的要点，提供大致思路，以学生为主进行创作性设计练习。5.2教学手段教学中突出“项目教学”、“实景教学”、“典型案例教学”、“团队协作”、“作品展示”、“竞赛展示”等教学方法。高等职业教育应该培养具有大量专业技术知识和操作技能兼备的高级应用型人才。为此，改变传统的教学方法，引入先进的教学理念，强化技能训练，实现了与专业岗位的无缝连接。5.2.1项目驱动模式在全面跟踪岗位需求和“1+X”职业标准的基础上，进行课程设计，将教学内容分解为11个项目，教学内容与企业的要求接轨，实现了与企业岗位的顺利对接。5.2.2实行“工学结合”，采用实际“工作情景”教学模式1）确定课程设计的工作领域与工作任务：课程组通过与国内有名的专业机构和企业专家交流，了解行业基本工作流程、职业岗位设置及对应工作任务等情况。确定课程对应的职业岗位，依据职业岗位对应的工作任务，分解出职业岗位技能要求。2）课程项目的选取与分解：本课程依据涉及的工作领域及工作任务，选取具有综合性、可扩展性，给学生以足够的发挥空间的企业真实项目。在确定了课程项目具体内容之后，对项目进行分解，研究设计完整项目的子项目，以及每个子项目对应的子任务以及子任务所需的知识内容。本课程将整个岗位需求划分为11个项目,又根据具体的岗位工作任务制定能力目标和子任务。3）项目递进学习：项目的学习情景由易到难，从单一到复杂逐层递进。对于每一个情景又都进行知识学习、能力目标、工作任务、教学形式的设计。针对每一个情景又进一步的设计对应的任务，对每一项任务设计能力目标、相关知识、训练方法等。4）任务的完成过程：学生拿到任务后首先对任务内容进行分析；在教师的指导下制定完成计划；确认工作方法和工具；开始实施任务；任务完成后根据任务标准检查任务完成情况；最后，依据检查结果对任务内容进行改进。整个过程中教师进行相关知识讲解与辅导作用。5.2.3典型案例教学本课程因为技术性、应用性强，在课程教学中，坚持让学生从事实际项目出发。选取具有针对性与实用性的案例，精心选择实际工作中具有代表性的类型项目，包括CSS控制文本、CSS控制图像、浮动、定位、列表、Sprite技术，以及响应式布局等。教师在讲解每种项目都时拿出一个典型案例进行分析，同时演示制作技巧，最后让学生作模仿性设计练习。6考核与评价6.1考核与评价方法《Web前端开发》/《网页设计与制作》课程考核方式采用形成性课内过程考核。在平时的训练中，学生必须完成每个项目设定的任务，完成全部项目任务后方可参与成绩评定。课程考核成绩分为优秀、合格和不合格三个档次。形成性课内过程考核情况占100%，如果不合格要求重修。课程整体成绩表考核类型成绩权重课程整体成绩形成性课内过程考核1001100职业技能认证00形成性课内过程考核按照每个项目的学习和完成情况进行考核，考核成绩则是项目考核成绩的累计。专业核心技能课程不再安排期末集中考试。在每个项目进行考核时从知技能和态度三个方面进行考核。态度方面考核关注学生的学习状态、出勤、日常整理等方面。占10%。知识方面考核根据课堂问答和小组讨论发言等情况，以及理论研究报告的完成情况，占30%。技能方面考核主要根据教师要求的单元授课的作业完成情况，主要是实际作品制作，占60%。课程考核成绩表教学内容成绩权重项目成绩项目成绩权重课程考核成绩项目1Web前端职业前景与重要理念知识1000．61000.05100技能1000．3态度1000．1项目2HTML5页面的构建与简单控制知识1000．31000.05技能1000．6态度1000．1项目3CSS3基础入门知识1000．31000.1技能1000．6态度1000．1项目4实现Web前端排版与美化知识1000．31000.1技能1000．6态度1000．1项目5浮动、定位与列表知识1000．31000.1技能1000．6态度1000．1项目6HTML5增强型表单与简易表格知识1000．61000.1技能1000．3态度1000．1项目7CSS3与HTML5的高级应用知识1000．61000.1技能1000．3态度1000．1项目8PC端典型页面的设计与实现知识1000．61000.1技能1000．3态度1000．1项目9多设备响应式页面的实现知识1000．61000.1技能1000．3态度1000．1项目10使用Bootstrap框架创建页面知识1000．61000.1技能1000．3态度1000．1项目11WebApp类页面的设计与实现知识1000．61000.1技能1000．3态度1000．16.2考核实施方案对《Web前端开发》/《网页设计与制作》课程的考核主要是通过对基于工作过程的11个项目模块的考核实施的，而各个分项模块的考核是在各个项目理论学习过程中随堂进行。其具体课程考核内容及评分标准见下表：课程考核实施方案项目名称考核内容考核方式备注项目1Web前端职业前景与重要理念知识1.了解Web前端工程师行业前景；2.认识网页构成的基本要素，掌握相关专业术语；3.掌握“表现与结构相分离”的重要思想理念；4.熟悉Web前端开发的工作流程；课堂讨论课堂提问理论报告技能1.了解常用的开发软件，能够简单创建一个HTML5页面。设计成果态度1.是否明确学习任务，培养学习兴趣。2.认真深入探究的科学精神。3.团队协同作战能力。学习过程项目2HTML5页面的构建与简单控制知识1.掌握Dreamweaver的基本使用方法；2.掌握站点的相关概念，及其基本操作；3.掌握HTML5文档结构，认识HTML5中常见的标签含义；课堂讨论课堂提问理论报告技能1.能够使用Dreamweaver创建简单的HTML5网页，并实现简单的控制。设计成果态度1.是否明确学习任务，培养学习兴趣。2.培养认真深入探究的科学精神。3.培养团队协同作战能力。学习过程项目3CSS3基础入门知识1.了解CSS的基本概念；2.掌握CSS的基本语法格式，及其引入方法；3.掌握CSS盒模型的相关概念；课堂讨论课堂提问理论报告技能1.掌握各种CSS选择器使用方法；2.能够使用CSS的基本知识，完成简单页面的排版。设计成果态度1.是否明确学习任务，培养学习兴趣。2.培养认真深入探究的科学精神。3.培养团队协同作战能力。学习过程项目4实现Web前端排版与美化知识掌握网页中文本元素和图像元素的编辑方法课堂讨论课堂提问理论报告技能1.掌握有关字体和文本的CSS知识，能够实现文字版面的基本排版；2.掌握CSS样式中有关伪类的知识，能够使用伪类实现简易动态效果；3.掌握有关图像的CSS知识，能够制作图文混排效果；4.掌握有关表格的CSS知识，能够实现常见表格外观的美化；设计成果态度1.是否明确学习任务，培养学习兴趣。2.培养认真深入探究的科学精神。3.培养团队协同作战能力。学习过程项目5浮动、定位与列表知识1.理解浮动的基本概念和原理，掌握创建浮动和清除浮动的方法；2.重点掌握相对定位和绝对定位的使用方法；3.认知列表元素；课堂讨论课堂提问理论报告技能1.掌握纵向导航和横向导航的实现方法；2.掌握图文混合列表的实现方法。设计成果态度1.是否明确学习任务，培养学习兴趣。2.培养认真深入探究的科学精神。3.培养团队协同作战能力。学习过程项目6HTML5增强型表单与简易表格知识1.了解表单的基本概念；2.掌握CSS控制表单外观的处理思路；3.了解表格的基本知识；课堂讨论课堂提问理论报告技能1.掌握常用表单的使用方法；2.掌握细线表格、隔行换色表格的实现方法。设计成果态度1.是否明确学习任务，培养学习兴趣。2.培养认真深入探究的科学精神。3.培养团队协同作战能力。学习过程项目7CSS3与HTML5的高级应用知识1.掌握CSSSprite技术的原理，及其使用方法；2.了解HTML5绘图。课堂讨论课堂提问理论报告技能1.掌握CSS3有关渐变的实现方法；2.掌握CSS3动画设计的方法；设计成果态度1.是否明确学习任务，培养学习兴趣。2.培养认真深入探究的科学精神。3.培养团队协同作战能力学习过程项目8PC端典型页面的设计与实现知识切片并输出的基本知识课堂讨论课堂提问理论报告技能1.巩固导航和图文列表的实现方法；2.体会从效果图到Web页面的整个工作过程。设计成果态度1.是否明确学习任务，培养学习兴趣。2.培养认真深入探究的科学精神。3.培养团队协同作战能力。学习过程项目9多设备响应式页面的实现知识1.了解响应式布局