《Web前端开发技术》课程教学大纲

《Web前端开发技术》教学大纲适用范围：2020版本科人才培养方案课程代码：08130181课程性质：专业选修课程学分：2.5学分学时：40学时先修课程：信息处理技术、程序设计后续课程：移动应用开发新技术适用专业：物联网工程、软件工程、数据科学与大数据技术教材：《HTML5+CSS3从入门到精通》(标准版)，未来科技著，中国水利水电出版社，2018.06开课单位：计算机科学与技术学院一、课程的性质与任务课程性质：《Web前端开发技术》课程是物联网工程、软件工程和数据科学与大数据技术专业的一门专业必修课程，以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握html基本语法格式、HTML5新增元素、CSS基础知识、CSS3的相关知识，通过这门课程的教学，不仅培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想、web前端开发的主流框架使用，为进一步学习后续移动应用开发课程打下良好的基础。课程任务：本课程的主要任务是让学生熟悉W3C规范，理解HTML5、CSS3的语法规则，掌握常用的Web页面布局技术，理解并能够应用HTML5+CSS3进行页面排版布局，最终能够综合使用所学技术编写符合标准的Web页面。本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、开发工具的选用、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；能够熟练运用HTML5中的各种标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法；。二、课程的基本内容及要求（一）Web基础知识1．课程教学内容（1）web知识概述；（2）web开发工具的选用；（3）HTML文档基础知识；（4）HTML5简介。2．课程重点难点重点:HTML文档结构，开发工具的选用、HTML5的优点；难点:HTML基础语法格式、文档结构格式。3．课程教学要求（1）知道web工作原理、常用的web浏览器；（2）知道什么是HTML，各版本文档结构的不同点；（3）掌握HTML标记语法、元素的嵌套；（4）会熟练的使用开发工具编写html文档。（二）HTML常用标签和语法1．课程教学内容（1）HTML文本标记规则；（2）图像和超链接；（3）列表、表格和框架；（4）表单元素；（5）HTML5新增元素。2．课程重点难点重点:HTML文本标记的作用，标记规则，各个标签的语法格式；难点:行内元素与块级元素的区别，超链接的使用，相对路径与绝对路径，列表的嵌套，表格标签的语法与属性，HTML5新增表单元素。3．课程教学要求（1）掌握HTML文本标记的作用，牢记各个标签的语法格式；（2）掌握行内元素与块级元素的区别，了解他们之间的相互转换方法；（3）掌握超链接的相关知识，会制作三种不同形式的超链接；（4）掌握三种列表的语法规则，会用表格元素绘制表格；（5）掌握表单标签各个元素的用法，会使用HTML5新增的表单元素制作表单。（三）CSS语法基础1．课程教学内容（1）CSS语法概述；（2）CSS基础选择器；（3）CSS基本样式设置；（4）CSS背景样式；（5）CSS盒子模型（7）CSS浮动和定位。2．课程重点难点重点:CSS语法规则、基础选择器、基本样式设置、背景样式；难点:优先级、盒子模型、浮动和定位。3．课程教学要求（1）熟练掌握什么是CSS、它的主要作用，它与HTML之间的关系；（2）熟练掌握CSS样式表的三种方式，样式的优先级；（3）掌握CSS各种基础选择器的使用方法，会根据需求选择合适的选择器；（4）熟练掌握盒子模型的概念和属性、掌握浮动和定位的方法，会使用盒子模型进行排版布局；（5）会综合运用CSS知识对网页元素就行排版布局、美化修饰。（四）CSS3新增元素和动画1．课程教学内容（1）CSS3新增元素；（2）CSS3复杂选择器；（3）CSS3多列；（4）CSS3转换和过渡；（5）CSS3动画。2．课程重点难点重点:CSS3新增元素、多列；难点:CSS3复杂选择器、动画、2D和3D转换、过渡效果。3．课程教学要求（1）掌握CSS3中新增的元素和属性，了解复杂选择器的构成；（2）会选择合适的复杂选择器进行应用，会使用CSS3进行分列；（3）了解什么叫做过渡，知道过渡的属性、时间、延迟和相关函数；（4）了解CSS3动画的制作原理、动画类型，能够制作简单动画。（五）文档对象模型DOM1．课程教学内容（1）DHMTL概述；（2）DOM概述；（3）DOM中的节点信息；（4）通过HTML和CSS选取元素。2．课程重点难点重点:DHML概念、DOM概念；难点:DOM中的节点类型，选取元素。3．课程教学要求（1）理解DHML的概念，DOM的概念；（2）熟悉DOM中节点类型、节点信息；（3）掌握在DOM中选取元素的方法，并能够操作指定的元素。（六）音视频处理与CanVas绘图1．课程教学内容（1）web中音频和视频的插入；（2）Canvas概述；（3）Canvas基础绘图。2．课程重点难点重点:音视频的插入、属性的设置；难点:Canvas绘图。3．课程教学要求（1）掌握web页面中插入音视频的方法，能控制音视频的播放；（2）掌握Canvas绘图的原理；（3）会使用Canvas绘制简单的图形。三、课程学时分配教学章节理论实践（验）讨论、习题一、web基础知识6二、html常用标签与语法10三、CSS语法基础4四、CSS3新增元素与动画10五、文档对象模型DOM4六、音视频处理与Canvas绘图6总计40四、课程考核方式与要求考核方式：本课程主要以课程论文、作业评价、课堂讨论、阶段测验、期末上机考试等方式对学生进行考核评价。成绩为百分制，最终再折合成优秀、良好、中等、及格、不及格。考核基本要求：考核总成绩由期末上机考试成绩和过程性评价成绩组成。其中：期末上机考试成绩为100分（权重60%），试题类型为综合应用题，试卷中涉及到基本知识、基本理论、基本技能的知识分值不超过40%，综合应用知识不低于60%；课程论文、作业评价、课堂讨论、阶段测验等过程性评价成绩为100分（权重40%）；过程性评价和考试试题分值分配应与教学大纲各章节的学时基本成比例。五、课程资源库1.张树明.《Web前端设计基础—HTML5、CSS3、JavaScript》.清华大学出版社.2017.22.李晓斌.《移动互联网之路：HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通》.清华大学出版社.2016.93.莫振杰.《HTMLCSSJavaScript基础教程Web前端开发精品课》.人民邮电出版社.2017.84.[美]弗里曼，罗布森．深入浅出HTML5编程．东南大学出版社．2012.105.《计算机学报》、《软件学报》、《计算机应用》、《计算机工程》、《计算机工程与科学》、《计算机工程与应用》、《计算机工程与设计》、《计算机教育》、《IEEETransactionsonCloudComputing》、《Journalof