教与学 | HTML5+CSS3+JavaScript（教学大纲）

Posted 2021-03-30 书圈

教学大纲

 

课程名称	html5+CSS3+javascript
课程编码	1123013	课程类型	专业课
课程性质	必修课	适用范围	电商、经济、管理、金融等专业
学分数	3	先修课程	计算机应用基础
学时数	72	实验/实践学时	18
课外学时	无	考核方式	考试 平时30% + 实验10% + 期末60%
制订单位		制订日期
执笔者		审核者

一、    课程的性质、目的与任务

《HTML5+CSS3+JavaScript》是专业中一门综合性很强的基础课程，主要内容包括三个模块，第一部分讲解HTML5中新添加的元素、重要的API的使用方法和应用技巧。第二部分讲述CSS3相关内容，包括选择器、盒样式、背景和动画的实现过程和方法。第三部分介绍JavaScript语言的内容，包括基础语法、函数、重要对象、DOM和事件的应用方式。笔者针对每个模块重要、实用的部分进行讲解，通过功能描述，实现代码，页面效果，源码分析等形式多方面展示各知识点的特性及功能，并将其与实际应用紧密联系，希望学生能够通过学习进一步深化对知识点的理解；同时，每个章节均提供了丰富的示例代码。

本课程的目的与任务是使学生通过本课程的学习，从HTML5新增元素使用的方法的入手，由浅入深学习页面开发的各种相关知识，学会页面开发的相关关键技术，能够掌握常见的页面内容的研发技能，同时通过实践学习页面开发三种语言的基本功能与应用，以梳理知识脉络和要点的方式，让学生掌握前端页面开发的相关思想。本课程除要求学生掌握页面开发的基础知识和理论，重点要求学生学会分析问题的思想和方法，为更深入地学习和今后的实践打下良好的基础。

二、教学目标与教学基本要求

1. 拥抱HTML5

了解构建HTML 5页面的环境搭建步骤，理解并掌握HTML 5页面的基本特征，能够使用样式美化HTML5页面。

2. HTML5中新增交互元素

了解HTML 5中新交互元素的使用方法，理解details元素的使用，熟练menu元素的用法。

3.   HTML5中的重要元素

    熟练并掌握文档元素的使用方法，了解脚本和文本层次元素的使用方法，理解元素公共属性的使用方法。

4.   HTML5中的表单

掌握表单中新增input元素类型的使用，了解表单新元素的使用方法，熟悉表单中新增属性的使用过程。

5.   HTML5中的文件

掌握选择上传文件的使用方法，了解并理解文件读取与拖放的过程，熟悉文件读取时的错误与异常的处理。

6.   HTML5中的视频和音频

掌握多媒体元素基本属性的使用方法，掌握并理解多媒体元素常用方法的使用，熟悉多媒体元素重要事件的应用过程。

7.   HTML5绘图基础

理解并掌握画布元素的基础知识，掌握画布使用路径和操作图形的方法，理解并掌握画布绘制图像和文字的过程。

8.   HTML5中的数据存储

理解Web Storage的基本概念，掌握Web Storage中对象的功能，掌握Web Storage API的使用方法。

9.   HTML5中的离线应用

掌握cache manifest 文件的创建和功能，理解applicationCache 对象的基础概念，掌握applicationCache 对象中API的应用。

10.其他应用API

掌握Web Sockets API的使用方法，了解Web Workers API的实现方式。

11.HTML5中元素的拖放

熟悉并理解元素拖放的原理和实现，掌握dataTransfer对象的使用方法，能编写一个简单的元素拖放示例。

12.CSS3的概念

了解CSS3基本概念，掌握CSS3的语法和使用，掌握CSS3的模块结构和应用。

13.选择器

了解CSS3中选择器的基本概念，掌握CSS3中各属性选择器的使用方法，掌握CSS3中各结构性伪类选择器的使用方法。

14.选择器在页面的应用

理解并掌握使用伪元素选择器插入文字的方法，了解使用伪元素选择器插入图片的方法，熟悉使用伪元素选择器显示有序编号的方法。

15.文字相关的样式

理解文本阴影的实现方法和作用，掌握文本阴影各个属性值对应功能和实现方法，理解并掌握文本换行的各类方法。

16.盒相关样式

理解并掌握盒子类型基础知识，掌握盒子内容溢出显示处理的方法，了解盒子阴影实现的原理和过程。

17.背景和边框样式

理解并掌握背景相关样式的原理和用法，掌握圆角边框的使用方法，了解和掌握图片边框的原理和用法。

18.CSS3中的变形处理

理解和掌握transform属性中各变形函数的使用方法，掌握复合变形的原理和实现方法，了解transform-origin属性的使用方法。

19.CSS3中的动画属性

理解并掌握transition属性的原理和实现方法，掌握animation属性的原理和执行动画方法，了解并掌握在CSS3中自定义动画的过程。

20.布局相关样式

理解并掌握盒布局的原理和实现方法，了解并掌握盒布局中改变子元素排列方向和显示顺序的方法，理解盒布局中消除子元素空白区域的方法。

21.简介

理解并掌握JavaScript的功能，熟悉JavaScript的开发工具，能手动编写一个简单的JavaScript程序。

22.语法基础

理解并掌握变量和常量的定义方法，掌握数据类型和运算符的使用，熟练类型转换和代码注释的方法。

23.流程控制

理解并掌握流程控制的原理和组成，掌握选择结构的使用方法，熟练循环结构的使用方法。

24.初识函数

理解并掌握函数的原理和定义方法，理解并掌握函数的原理和定义方法，能编写一个实现简单功能的函数。

25.字符串对象

理解并掌握字符串获取的方法，了解字符串替换和分割的方法，掌握字符串查询和检索的方法。

26.数组对象

理解并掌握数组对象的定义和赋值,掌握数组对象中添加和删除元素方法,熟悉数据对象排序的方法和步骤。

27.日期对象

掌握日期对象的定义和取值方法,熟悉日期对象获取年月日的方法,能编写一个使用日期对象的示例。

28.数学对象

理解数学对象的功能和组成部分，熟悉数学对象中取整运算的方法，了解数学对象中生成随机数和三角函数的方法。

29.DOM基础

理解并掌握DOM对象的概念和组成，掌握DOM对象中获取和插入元素方法，了解DOM对象中复制和删除元素方法。

30.DOM进阶

理解DOM元素属性的操作方法，掌握DOM元素样式属性操作方法，熟悉查找DOM元素的方法。

31.事件基础

理解并掌握事件的概念和调用方式，了解鼠标和键盘事件的应用，熟练表单和页面事件的应用。

32.事件进阶

理解并掌握事件的处理机制和内部流程，掌握事件对象的使用方法，了解在事件中this对象的使用方法。

33.window对象

理解并掌握对象的常用方法，掌握对象中定时器方法的使用，了解对象中location对象的常用方法。

34.document对象

熟悉对象中的方法和属性，掌握对象中方法的应用场景，掌握对象中属性的使用过程。

 

三、教学方法

本课程教学方法以教师为主导的启发式讲授教学法为主，讨论（提问）式教学为辅，结合课外学习的教学方法。以学生动手为主，教师的启发式讲授教学法为辅，并结合讨论（提问）式教学，以及结合课外学习的教学方法。

1．教学形式以讲授方式为主，多媒体PPT为辅助的教学方法。

2．概念、定义和原理解释时，应通俗易懂，增加教学的直观性。

3．教学过程中注意各个知识点的关联性，使学生更好地理解课程内容。

4．对课程中关键性概念、设计思想方面的问题可辅以课堂讨论的形式。

5．为强化学生写代码能力，每章课后应安排作业，帮助学生学习和应用。

四、教学安排

模块	内容	章节	课时	重点/难点
第一个模块	基础篇	第1章拥抱HTML5	2	HTML5的特征和优势
		第2章HTML5中新增交互元素	2	details和menu的用法 新元素在浏览器中兼容性
		第3章HTML5中的重要元素	2	公共属性的使用方法
	重要元素篇	第4章HTML5中的表单	2	表单中新类型和属性的使用
		第5章HTML5中的文件	2	上传文件时读取文件属性 拖动文件的准备
		第6章HTML5中的视频和音频	3	视频播放过程中的事件处理 不同格式视频播放方法
		第7章HTML5绘图基础	3	画布绘制图片和文字 画布维持多个效果图形
	认识API篇	第8章HTML5中的数据存储	3	数据存储的格式和大小 获取全部的存储对象方法
		第9章HTML5中的离线应用	2	离线的流程 离线过程中的事件
		第10章其他应用API	2	workers的对象传递应用
		第11章HTML5中元素的拖放	2	文件的拖放上传实现
第二个模块	基础篇	第12章CSS3的概念	2	CSS3的核心优势和功能
		第13章选择器	2	各种伪类选择器的应用
		第14章选择器在页面的应用	2	伪类选择器实现各种效果过程
	进阶样式	第15章文字相关的样式	2	各类阴影特效的实现方法
		第16章盒相关样式	2	盒子内容溢出时处理方法
		第17章背景和边框样式	2	各类背景和边框效果实现方法
	动画与扩展	第18章CSS3中的变形处理	3	变形的原理 变形实现过程
		第19章CSS3中的动画属性	3	动画原理 自定义动画方法
		第20章布局相关样式	2	盒布局的效果实现过程 盒布局空白消除方法
第三个模块	基础知识	第21章简介	2	JavaScript的工作原理和核心功能
		第22章语法基础	2	类型转换时异常判断
		第23章流程控制	2	循环结构的实现原理 循环结构的种类和实现方法
		第24章初识函数	2	函数的功能 函数分类
	常用对象	第25章字符串对象	2	字符串检索 字符串分割与替换
		第26章数组对象	2	数组排序
		第27章日期对象	2	日期间差值推算
		第28章数学对象	2	取整方法 随机数生成和应用
	DOM与事件	第29章DOM基础	2	复制和插入元素实现
		第30章DOM进阶	2	元素属性的动态控制 查询元素方法
		第31章事件基础	2	事件原理和捕捉过程
		第32章事件进阶	2	事件执行机制 事件中this的指向
	扩展对象	第33章window对象	2	定时器的应用 页面历史查找和刷新
		第34章document对象	3	dom对象中重要方法的使用

 

五、课程要求

1.    做好课前预习，预习时以教材为主，了解相关的概念、定义、原理。预习中认真思考，以便带着问题主动地听课。

2.    课后要复习，有余力的学生复习时还应多动手编写代码，加强代码理解能力，认真整理课堂听课笔记。

3.    要求学生课外自主学习，学生课外阅读的参考资料应围绕本课程的知识点和技术需求进行展开。

4.    认真完成第章节所布置的作业。

六、考核内容及方式

本课程成绩由平时成绩和期末考核成绩组合而成，课程成绩以百分制计算，分配比例如下：

1.    平时成绩占30%，主要考查作业的完成程度，理论课和实验课的出勤率，实验课的考试结果。其中作业占10%，实验占15%，出勤率占5%。

2.    期末成绩占70%，采用考试的考核方式。考试采用闭卷形式，题型为选择题、正确/错误题、填空题、简答题，以及应用题。

七、持续改进

本课程根据学生作业、课堂讨论、平时考核情况和学生、教学督导等反馈，及时对教学中不足之处进行改进，并在下一轮课程教学中改进。

教学配套资源

教学课件

教学大纲

源代码

 

点击上图，查看图书详情

识别上图二维码，即可享折扣购买

精彩直播回顾，识别上方二维码，即可查看。