HTML5网页前端设计第3版教学大纲（60课时）

HTML5网页前端设计第2版教学大纲（60课时版）课程名称:HTML5网页前端设计一、课程概况课程编号：20211201001开课部门：XX系学分：X学分学时：60学时（其中理论学时：36学时上机学时：24学时）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计、JavaScript与jQuery开发与设计、数据库应用、移动互联开发应用等适用专业：信息技术及其计算机相关专业二、课程描述HTML5网页前端设计是计算机专业一门重要的专业方向课程，它是为培养我们社会主义现代化建设所需要的高质量专业人才服务。HTML5网页前端设计是学习Web前端开发的必修课程。本课程介绍了开发Web前端网页应具备的基础知识，包括HTML5、CSS3、JavaScript技术入门以及HTML5拖放、表单、画布、音频和视频、Web存储的应用API、HTML5字符集和符号、基于Vue3.x的入门开发等知识。通过理论教学和上机练习训练学生编写程序的熟练度和规范性；在项目经验的积累方面，通过完成项目案例，增加对实际软件项目开发的经验。三、课程目标知识目标：了解Web原理基础和前端新技术的由来，掌握HTML5+CSS3+JavaScript基础知识以及各类HTML5API如拖放、表单、画布、音频和视频、Web存储的应用，了解HTML5字符集和符号的使用，掌握Vue3.x的入门开发技巧。技能目标：能综合应用HTML5、CSS3与JavaScript技术开发Web网站，能够在开发过程中熟练掌握HTML5新增文档结构元素的使用、CSS各类选择器的使用和样式的表达，提高开发者网页前端实战项目分析能力以及强化综合应用能力。四、教学要求一、严格按照课表规定的时间、地点上课，不迟到、不早退。二、根据大纲要求，认真备课完成教案与讲稿编写等各项课前准备工作；授课过程力求内容充实、概念准确、思路清晰、详略得当、逻辑性强、重难点突出，力戒平铺直叙、照本宣科，三、重视对学生的学习方法指导和课堂教学效果信息的反馈，实现教与学的双向互动；四、做好考核内容设计，并严格按照大纲要求做好出勤率统计、作业评价。五、学生根据课程大纲要求制定本门课程学习计划，加强学业管理，严格自我要求，提升自主学习能力，主动适应课程学习要求。参与课堂教学活动不迟到、不早退，无正当理由不请假，上课认真听讲，不做任何与课堂教学无关事宜，不使用手机，积极与授课教师进行教学互动，同时利用课余时间做好预习、复习、课外书籍阅读等工作，主动与同学开展合作学习，认真完成任课教师布置的课程作业。五、课程内容第1章绪论：HTML5入门介绍。第2章HTML5基础：HTML5基本结构、HTML5保留的常用标签、HTML5新增的常用标签。第3章CSS基础：CSS样式表、CSS选择器、CSS常用样式、CSS定位。第4章JavaScript基础：JavaScript变量、基本数据类型、JavaScript对象类型、JavaScript运算符、JavaScript条件语句、JavaScript函数、JavaScriptDOM。第5章HTML5拖放API：掌握HTML5元素拖放功能第6章HTML5表单API：HTML表单基础、HTML5表单新增输入类型、HTML5表单新增元素标签、HTML5表单新增属性。第7章HTML5画布API：HTML5画布创建，绘制路径、矩形、图片和文本，颜色和样式设置，保存与恢复技术，变形与剪裁。第8章HTML5媒体API：HTML5音频的应用、HTML5视频的应用、HTML5媒体API的其他通用功能。第9章HTML5Web存储API：localStorage和sessionStorage存储，存储、读取数据、数据遍历，删除指定数据，清空所有数据。第10章HTML5字符集与符号：HTML5常用字符集，实体名称和数字编码（数学符号、带圈符号、货币符号、卡牌符号、杂项符号），HTML5Emoji系列。第11章CSS3技术：CSS3边框和背景效果、CSS3文本和字体效果、CSS3变形与动画效果、CSS3多列。第12章综合应用设计实例：综合应用HTML5、CSS3与JavaScript相关知识开发网页。六、实验环节本课程建议课内上机24个学时，针对每章节知识点进行基础项目案例开发训练。教师可根据实际情况从教材中每章节末尾的阶段案例作为上机的具体内容。具体安排见下表。章节上机课时实验内容第1章绪论0无第2章HTML5基础2实验1：第一个Web页面第3章CSS基础2实验2：导航栏菜单的设计与实现第4章JavaScript基础2实验3：数字时钟的设计与实现第5章HTML5拖放API2实验4：仿回收站效果的设计与实现第6章HTML5表单API2实验5：用户注册页面的设计与实现第7章HTML5画布API2实验6：手绘时钟的设计与实现第8章HTML5媒体API2实验7：在线教学视频的设计与实现第9章HTML5Web存储API2实验8：网页主题设置的设计与实现第10章HTML5字符集与符号2实验9：简易Emoji查询器的设计与实现第11章CSS3技术2实验10：特殊字体效果的设计与实现第12章前端综合应用·基于HTML5+CSS3的高校网站的设计与实现4实验11：基于HTML5+CSS3的高校网站的设计与实现（与实验12二选一，另一个可作为期末作业）第13章前端框架实战·基于Vue3.x的秒表程序的设计与实现4实验12：基于Vue3.x的秒表程序的设计与实现（与实验11二选一，另一个可作为期末作业）上机实验环节可以巩固学生对理论知识的理解，提高学生的实践操作能力和解决问题的逻辑思维能力，课后还可布置思考题培养学生的创新思维能力。根据学生在上机课的参与度、表现、操作熟练程度以及项目源代码等内容综合评定上机实践成绩，建议按总成绩的10%录入课程总分。七、建议学时章节理论课时上机课时第1章绪论20第2章HTML5基础22第3章CSS基础42第4章JavaScript基础42第5章HTML5拖放API22第6章HTML5表单API42第7章HTML5画布API42第8章HTML5媒体API42第9章HTML5Web存储API22第10章HTML5字符集与符号22第11章CSS3技术42第12章前端综合应用·基于HTML5+CSS3的高校网站的设计与实现04第13章前端框架实战·基于Vue3.x的秒表程序的设计与实现24理论和上机学时：3624课程总学时：60注：其中第12章和第13章的上机课时可二选一，另一个可作为阶段作业或期末作业。八、考核方式及要求为实现课程教学目标，本门课程考核方式及要求为：采取期末考试和平时成绩相结合的方式。平时成绩（占40%）：考勤（10%）+课后作业（20%）+上机实践（10%）期末考试（占60%）：为闭卷考试，卷面成绩为100分；或期末实战项目作业，总成绩为100分。最终成绩=平时成绩*40%+期末考试*60%。九、建议教材及教学参考书周文洁.《HTML5网页前端设计第3版-微课视频版》.清华大学出版社.2025.ISBN：9787302695318学习参考资料周文洁.《JavaScript与jQuery网页前端开发与设计·第2版》.清华大学出版社.2024.ISBN：9787302663