《网页设计（HTML5+CSS3）》核心课程标准

《网页设计（HTML5+CSS3）》核心课程标准课程编码课程类别专业核心课计划学时128课程类型B类适用专业软件技术课程性质必修开课学期第一学期学分6先行课程开课单位信息工程系平行课程计算机应用基础考核类型考试后继课程JavaScript程序设计与jQuery框架一、课程性质与定位本课程是软件技术专业的核心课程，也是后续JavaScript程序设计与jQuery框架的基础课程，在Web前端开发中占有重要地位。通过本课程的课堂教学和实践教学，使学生能够掌握网页设计的两大基础，HTML和CSS，具备常见门户网站、电商网站的设计与制作能力，培养学生科学的思维方法，灵活运用知识的能力和自主学习的能力，为后续网站开发课程的学习、网页制作员工作的胜任打下坚实的基础。二、课程设计理念本课程强调对学生职业素养和Web前端编程能力的培养，按照理实一体、课内外互补、课堂教学与培优工程相结合的课程设计指导思想，以任务或项目为载体组织教学内容，采取讲练结合、微课教学、视频辅导、单元测试、赛练融合等多种教学形式和手段，突出学生的主体地位，在校内实训室完成所有教学环节，实现“教、学、做”的有机融合；通过班级讲授、团队学习、个体辅导、展示交流、技能大赛等手段，实现从模仿到应用到创新的高职学生递进式培养。三、课程目标（一）总体目标本课程涉及网页基础、HTML5标记、CSS3样式、网页布局等内容。通过本课程的学习，学生能够了解HTML5基本标签和CSS3常用样式，熟悉网页设计流程，掌握常见的网页布局效果，掌握一定的Web前端开发知识，学会制作各种企业、门户、电商类网站。同时通过教学过程中的实际开发过程的规范要求强化学生的职业道德意识和职业素质养成意识，为学生后续课程学习夯实基础。（二）具体目标1.能力目标了解Web前端程序员等相关职业岗位的工作职责；具有一定的网页设计与制作能力；具备良好的编程习惯和准确的语言表达能力；具有一定的科学思维方式和分析判断解决问题的能力；具有社会适应能力、沟通能力与自我学习能力；具有良好的职业道德与敬业精神，具有团队合作意识。2.知识目标认识网页和网站，了解相关概念；熟悉VisualStudioCode和Hbuilder的使用；熟练掌握HTML5基本标签；掌握常用H5表单控件并能熟练运用；理解CSS3样式规则及选择器，能合理使用CSS美化页面；理解CSS盒子模型、浮动和定位布局，并能应用到网页设计中；掌握HTML和CSS多媒体应用；掌握CSS3的变形、动画和转换；能达到“1+X”Web前端开发初级标准。四、课程教学内容及学时分配序号项目名称学习目标学习内容学时1认识网页和网站了解Web标准，了解网页和网站，明确HTML、CSS及JavaScript在其中的作用；熟悉常见的浏览器；熟悉DreamWeaver工具的基本操作，能使用DreamWeaver创建简单的网页。1.认识网页和网站2.网站制作流程3.网页设计规范4.HTML简介5.CSS简介6.JavaScript简介7.常用浏览器介绍8.Hbuilder工具的使用9.使用Hbuilder创建第一个页面42从零开始构建HTML页面了解HTML5发展历程，熟悉浏览器支持情况；理解HTML5基本语法，掌握新特性；掌握HTML文档基本格式，能够书写规范的HTML网页；掌握文本控制表标记、图像标记、超链接标记，能够制作简单网页。1.认识HTML和HTML52.认识标记3.HTML文档基本格式单4.标记属性5.HTML5文档头部相关标记6.标题和段落标记7.文本样式标记8.文本格式化标记9.特殊字符标记10.常用图片格式11.图像标记12.相对路径与绝对路径13.认识HTML5新标记123运用CSS技术设置网页样式掌握CSS样式规则，能够书写规范的CSS样式代码；掌握CSS文本样式属性，能够控制页面中的文本样式；掌握CSS选择器写法，可以快捷选择页面中的元素；理解CSS层叠性、继承性与优先级，学会高效控制网页元素；了解CSS3新增选择器。1.CSS样式规则2.引入CSS样式表3.CSS基础选择器4.字体样式属性5.文本外观属性6.CSS复合选择器7.CSS层叠性与继承性8.CSS优先级9.CSS3新增选择器164运用CSS盒子模型划分网页模块了解盒子模型的概念；掌握盒子模型相关属性，能够使用它们熟练地控制网页元素；理解块元素与行内元素的区别，能够对它们进行转换。1.认识盒子模型2.div标记3.盒子宽高4.边框属性5.内边距属性6.外边距属性7.阴影8.背景属性9.元素的类型10.span标记11.元素的转换165添加列表和超链接掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；掌握超链接标记的使用，能够使用超链接定义网页元素；掌握CSS伪类，会使用CSS伪类实现超链接特效。1.无序列表2.有序列表3.定义列表4.定义列表实现图文混排5.list-style复合属性6.超链接标记<a>7.链接伪类8.锚点链接86添加表格和表单掌握表格标记的应用，能创建表格并添加样式；理解表单的构成，可以快速创建表单；掌握表单相关标记，能够创建具有相应功能的表单控件；掌握表单样式的控制，能够美化表单界面。1.创建表格2.表格标记3.CSS美化表格4.表单构成5.创建表单6.表单属性7.input控件8.textarea控件9.select控件10.datalist控件11.CSS控制表单样式167运用浮动与定位布局网页掌握标记的浮动属性，能够为标记设置和清除浮动；掌握标记的定位属性，能够理解不同类型定位之间的差别；掌握div+css布局技巧，能够利用该技巧为网页布局。1.布局概述2.元素的浮动属性float3.清除浮动4.标记定位属性5.overflow属性6.Z-index标记层叠7.单列布局8.两列布局9.三列布局10.网页模块命名规范168网页多媒体掌握HTML5中视频的相关属性，能够添加视频；掌握音频相关属性，能够添加音频；理解过渡属性，能够常见过渡效果；掌握CSS3变形属性，能够制作2D、3D转换效果；掌握CSS3动画，能够熟练制作常见动画效果。1.<video>嵌入视频2.<audio>嵌入音频3.音视频兼容性4.控制视频宽高5.过渡属性6.变形7.动画属性89实战开发巩固贯通HTML、CSS基本知识的运用电商或门户网站首页1610证书模拟试题能独立完成“Web前端开发”初级证书对应理论和实操题1.理论试题2.实操试题16五、教学组织与教学方法（一）采用“任务驱动”教学模式，所有课程内容的安排均围绕学习任务的完成来展开。（二）主要采用的教学方法有以下几种：1.任务教学法。解决真实或虚拟企业项目开发中的实际问题，用任务牵引，采用项目组的形式，按照软件公司运作形式和项目开发流程，以学生为中心，全面完成任务分析、信息收集、计划制定、做出决策、实施计划、反馈控制、评估结果、拓展思考等教学全过程，达到通过学生自己的实践或行动来培养和提高职业能力的教学目标。2.分组教学法。根据学生实际情况，采用男生带女生、普高生带职高生、基础好带基础差的学生进行分组，小组间共同完成任务，培养学生的协作、团队意识。3.激励教学法。在教学过程中，通过各种激励手段，有意识地引导学生各种创新式思维，促进学生之间智力活动的相互感染，从而开拓进取，提高学习效率。如各个学习任务的制定，由易到难，学生经过努力完成开发后，会有逐步递增的成就感；以赛促学，以赛促教，赛证融通，以绩效考核形式管理学生学习过程和效果，增强其团队意识和荣誉感，培养以创新视角和思维解决问题的意识和习惯，效果显著。4.资源多样法。通过慕课、在线开发课、微课、培训机构优秀资源、学习网站等为学生提供各种各样的学习资源，线上教学与线下教学相结合，充分利用各种碎片化时间，提高学生学习效率、学习积极性和主动性，锻炼其自主学习能力。五、考核与评价考核主要由平时成绩、理论考试以及实训成绩组成。也可以证代考，取得证书视为课程成绩95分以上。（一）平时成绩平时成绩强调平时的出勤、课堂纪律、课堂表现和作业，教师通过签到、打卡、随机抽查、课后统计反馈等手段的实施监控学生的学习效果以及学习态度等。平时成绩占全部考试的50%。（二）理论考试理论考试采用传统的笔试方式，为了更好的达到考核的目的，我们采用第三方出题的形式来组织理论考试。理论考试占全部考试的30%。（三）实训成绩主要以综合案例或项目为主，采用机试+评价方式进行，由教师对学生项目的完成程度、质量，并综合其完成过程中的表现，随堂给出成绩。实训成绩占全部考试的20%。六、教学建议（一）教学条件课程应配有网络教学资源和实训室，不仅教师可以利用这些资源进行教学，学生也可以通过课程资源进行自主学习。课程网络教学资源应包括：课程标准、电子课件、电子教材、学习指南、在线测试、视频动画库、图片库、案例库等内容。丰富课程教学内容、教学方法和教学手段，方便学生开展自主学习。利用电子教案、教学课件、视频及网络教学软件等进行辅助教学，在线答疑等师生互动方式，能够提高教学效果；利用习题库、相关考试题库可进行教学知识和技能的自我测评。（二）师资要求为实现课程教学目标，教师应该熟悉Web前端工程师执业标准，具有较丰富的Web前端开发经验，熟练掌握HTML、CSS、JavaScript及相关框架等技术，能够应用这些技术设计和制作一个完整的网页，同时，还要求主讲教师具备较丰富的教学经验及课堂组织能力。具备较强的语言表达能力及教学组织能力。担任本课程实践教学指导教师应具有一定的软件企业前端开发经验，具有一定的教学经验并且需要有较强的责任心。（三）教学方法本课程是专业主干课程，实践性较强，在教学方法上，采用课堂理实一体化教学，课后自学，课堂讨论等教学形式。1.课堂理实一体化本课程属偏实践性课程，理论知识较易接受，在讲述的过程中教师应尽量联系实际，不要陷入知识的重复赘述之中，让学生尽量多地动手实践，在动手过程中加强记忆，逐步提高网页制作能力。2.课后自学为了培养学生的自学动手能力，每章都安排一些拓展案例，课上教师只给出自学提纲，不作详细讲解，课后学生自学完成。3.课堂讨论课堂讨论的目的是活跃学习气氛，开拓思路。教师应认真组织，安排重点发言，充分调动每一名同学的学习积极性，做好总结。4.习题课习题课以案例、项目练习为主，可适当安排分组完成，及时检查反馈。5.学习笔记教学中要求学生记录学习笔记，在记录过程中加强对标记、属性的记忆，笔记每单元检查一次，可辅以提问补充。（四）教学评价建议及标准本课程的评价要坚持过程性评价和总结性评价相结合，教师评价和学生评价和学生自评、互评相结合。在评价过程中，要重点考核学生的网页实际制作能力，重点关注学生学习态度、学习习惯、学习方法、职业能力的养成。教师可以根据需要灵活选择考核方式。由于本课程的实践性较强，考核要重在平时课堂表现及作业完成情况，课程成绩由平时成绩和期末成绩构成，平时成绩不低于50%，期末成绩不高于50%。（五）课程资源开发与利用建议1.学习包和教材，都是素材性的课程资源，但教材是知识的载体，而学习包是引导学生学习的载体。因此，要开发学习包，突出以学生为中心的学习过程，将本课程的教学内容与地区经济的发展密切结合，并体现学生职业生涯发展的需要。2.教学中学生的问题、困惑、见解、情感和体验等都是动态生成的课程资源，老师应重视这些教学过程中动态生成的课程资源，并主动性和创造性地运用，使以项目为主的教学充满生机与活力。3.本课程的实施必须依赖于一定的实训条件，如计算机机房，网络教学软件、VisalStudioCode、Hbuilder等必备的软件平台。4.本课程的实施，不仅应充分开发校内的课程资源，还应利用校外的课程资源，如相关企业的岗位实习和实践，尽量做到校企结合、工学结合。5.网络教学资源。充分开发和利用网络教学资源，为学生提供多样化的学习资源和形式，了解最新的技术策略和实施方法，培养学生自