《web前端技术》课程教学大纲.docx

1、web前端技术课程教学大纲附件3：web前端技术课程教学大纲 课程英文名称WEB front-end technology课程代码0509620003课程类别专业任选课程性质任选学分2总学时数32开课部门智能制造学院开课基层教学单位计算机系/教研室适用专业物联网工程开课学期5课程简介（限500字以内）前端开发课程是物联网工程专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。注：1.课程类别包括

2、公共必修课、公共限选课、公共任选课、专业核心课、专业必修课、专业限选课、专业任选课；课程性质包括必修、限选、任选。2.课程名相同，但课程编码不同，须另写大纲。一、课程教学目标 本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。掌握Java

3、Script脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。二、理论教学内容及要求 第一部分 第1章 Web前端开发技术综述1.教学要求了解Web起源理解Web特点理

4、解Web工作原理掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。了解Web前端开发职业需求掌握Web前端开发技术 开发工具 hbuilder理解HTML概念及在网页中的作用，理解HTML文档定义。CSS在Web页面设计中作用理解JavaScript在Web页面设计中作用了解HTML DOM、BOM及AJAX在页面设计中的作用2.教学内容Web前端开发技术综述WEB网站建立开发部署运行过程3.教学重点、难点 用图示说明 Web工作原理4.学时分配 2课时第二部分 第2章 HTML基础 第3章 格式化文本与段落1.教学要求理解HTML文档组成结构掌握HTML头部标记作用及标题标记

5、、元信息meta标记的语法掌握HTML主体标记作用掌握主体标记主要属性及其设置方法掌握标记类型语法及HTML属性语法掌握两种注释标记的使用方法及作用，重点掌握标记的使用。掌握HTML代码书写规范了解3种HTML文档类型和HTML5的DTD定义方法。掌握综合实例中所使用的标记语法掌握在添加文字信息的方法掌握标题字标记语法及对齐属性的设置方法掌握添加空格、特殊符号的方法掌握文本修饰标记的使用方法掌握段落p标记语法及align属性的设置掌握换行、水平分隔线、预格式化、块引用等标记的使用及属性怕设置2.教学内容HTML基础格式化文本与段落学会运用所学知识完成Web页面设计3.、教学重点、难点 完成综合

6、实例4、学时分配 2课时第三部分 第4章 列表 第5章 超链接与浮动框架1.教学要求了解列表的定义和常用列表的分类掌握无序列表基本语法学会使用列表type属性的改变列表的符号样式掌握有序列表基本语法学会使用列表type、start属性的改变列表的编号样式了解使用有序列表项value属性改变列表项编号理解列表的type与列表项type属性冲突时对列表项编号的影响掌握定义列表基本语法理解定义列表与无序、有序列表的外在表现上的差异掌握超链接基本语法及href、target、title等属性的设置方法理解超链接中路径的分类和应用场合掌握内链接、外链接的定义方法掌握创建HTTP文件下载链接的语法掌握FT

7、P站点访问链接的基本语法及创建方法掌握图像超链接的基本语法及创建方法掌握电子邮件链接的基本语法及创建方法掌握书签链接的基本语法及创建方法掌握浮动框架使用语法和使用方法。学会运用所学知识完成Web页面设计2.教学内容列表概述无序列表有序列表 定义列表超链接概述超链接语法、路径及分类超链接的应用学会运用所学知识完成Web页面设计3.、教学重点、难点 完成综合实例4、学时分配 2课时第四部分 第6章 图像与多媒体文件 第7章 CSS样式属性1.教学要求 掌握标记基本语法 会利用属性src、width、height、border、alt、hspace、vspace、align等来修饰图像掌握标记的语法

8、。 了解CSS基本概念了解传统HTML的缺点了解CSS的特点了解CSS的优势了解CSS编辑方法掌握CSS的基本语法掌握CSS选择器类型（包括标记选择器、类选择器、id选择器、伪类选择器、属性选择器等）掌握CSS选择器声明类型掌握CSS定义与引用方法（包括内联样式表(行内样式表)、内部样式表、外部样式表（链接外部样式表、导入外部样式表）等。）理解CSS的继承与层叠区别 学会运用所学知识完成Web页面设计2、教学内容 6图像与多媒体文件6.1 图像6.3音频、视频及Flash文件6.4 综合实例7 CSS基础7.1 CSS概念7.2 使用CSS控制Web页面7.3 CSS继承与层叠7.4 综合实例

9、3.、教学重点、难点使用CSS控制Web页面CSS继承与层叠完成综合实例4、学时分配 2课时第五部分 第8章 DIV与SPAN 第9章 CSS样式属性1.教学要求掌握div定义方法学会设置div图层的属性学会使用多个进行页面布局学会使用图层嵌套与图层层叠理解div标记与span标记的使用区别掌握CSS属性中绝对单位与相对单位掌握字体font-size、font-style、font-variant、font-weight、font-family等属性的设置方法掌握字体font复合属性的设置方法掌握letter-spacing、text-indent、text-decoration、text-t

10、ransform、text-align、vertical-align、line-height等排版样式属性的设置方法掌握颜色属性的设置方法掌握背景background-color、background-image、background-repeat、background-attachment、background-position等子属性的设置方法掌握背景复合属性background的设置方法掌握列表样式语法，学会使用list-style-type、list-style-image、list-style-position等属性美化列表的外观理解CSS盒模型结构学会设置边界margin、边框属性

11、border、填充属性padding及其子属性的设置方法3.教学内容8 DIV与SPAN8.1 div图层8.2 图层嵌套与层叠8.3 div标记与span标记8.4 综合实例9 CSS样式属性9.1 CSS属性中的单位9.2 CSS字体样式9.3 CSS文本样式9.4 CSS颜色与背景9.5 CSS列表样式9.6 CSS盒模型9.7 综合实例3.、教学重点、难点 CSS盒模型 行内元素与块元素的理解4、学时分配 2课时第六部分 第10章 DIV+CSS页面布局1.教学要求能够根据常规页面布局编写出DIV结构和定义出CSS样式学会使用DIV+CSS实现简单Web页面布局掌握一级水平导航菜单的设

12、计方法掌握二级水平导航菜单的设计方法4.教学内容10.1 页面布局设计10.2 导航菜单设计3. 教学重点、难点页面布局设计流式布局、相对定位与绝对定位行的理解4、学时分配 2课时第七部分 第11章 表格 第12章 表单1.教学要求熟悉常用表格的标记及作用掌握标记语法及所有表格标记的语法会利用绘制简易表格学会使用表格标题、标记定义表格标题和表头掌握表格边框及边框样式属性设置方法掌握表格宽度、高度的设置方法掌握表格的背景颜色和背景图像的设置方法掌握表格边框样式属性的设置方法掌握表格单元格间距、边距的设置方法掌握表格水平对齐属性的设置方法掌握表格行内容水平和垂直对齐的设置方法握单元格跨行属性row

13、span设置方法掌握单元格跨列属性colspan设置方法掌握表单标记的基本语法结构以及表单中包含其它标记掌握域和域标题标记的基本语法, 学会使用域和域标题标记设置表单分区掌握单行文本输入框的属性设置方法学会使用密码输入框设置用户密码掌握复选框checkbox设置及使用方法，学会使用checked属性将某项复选框设为预选项掌握单选按钮radio设置及使用方法，学会使用checked属性将某项单选按钮设为预选项掌握图像按钮的属性设置方法掌握submit按钮的属性设置方法掌握reset按钮的属性设置方法掌握普通按钮的设置方法学会使用file文件选择框浏览文件学会hidden隐藏框使用方法学会使用多行

14、文本输入框标记在网页中设置多行文本的输入方法掌握cols、rows、wrap等相关属性的设置多行文本区域大小掌握标记的基本语法及size、multiple、name等属性的设置方法学会使用标记设置列表项，学会使用selected属性必将某一选项设为预选项学会运用下拉列表框编写相关网页代码学会运用所学知识完成Web页面设计2. 教学内容11表格11.1 表格11.2 表格标记11.3 表格属性设置11.4 设置表格行的属性11.5 设置单元格的属性11.7综合实例12表单12.1 表单概述12.2 定义域和域标题12.3 表单信息输入12.4 多行文本输入框12.5 下拉列表框12.6 综合实例

15、3. 教学重点、难点表单的作用表格的行合并 列合并4. 学时分配2课时第八部分 第14章javascript 基础1.教学要求理解JavaScript在Web页面设计中作用及其特点了解JavaScript在HTML中放置的位置了解JavaScript语句类型、语句块标记理解JavaScript函数的作用和基本语法学会使用消息对话框实现页面交互学会使用注释给JS代码增加功能说明掌握标识符、变量命名的规范掌握JavaScript中的基本数据类型，分别是字符串型、数值型、布尔型、Null型、undefined、object型掌握变量的定义语法及使用方法掌握常用的转义字符使用方法,例如n、r、f、uh

16、hhh、”了解运算符和表达式的类型掌握算术、关系、逻辑、赋值、条件运算符的使用方法了解位、逗号、new、delet、typeof等运算符的使用方法掌握顺序结构程序的编写方法掌握if else分支结构程序的编写方法掌握ifelse if else if else多分支结构及switch多分支结构应用场合和编程方法了解循环结构类型及应用场合掌握for、while、do while、forin的使用方法理解break和continue语句在循环结构中的作用掌握常用系统函数使用方法，如eval()、escape()、unescape()、parseFloat()、parseInt()、isNaN()等

17、全局函数的使用方法，熟练使用对象的函数，如toString()、toFixed（n）、charAt(n)、indexOf()、lastIndexOf()、substring()等掌握自定义函数的使用方法，并学会编程学会使用return返回函数计算结果理解局部变量与全局变量使用区别2.教学内容14.1 JavaScript概述14.2 JavaScript程序14.3 标识符和变量14.4 运算符和表达式14.5 JavaScript程序控制结构14.6 JavaScript函数14.7 综合实例3.教学重点、难点 掌握常用系统函数使用方法 掌握自定义函数的使用方法，并学会编程4.学时分配 2课

18、时第九部分 第15章 JavaScript事件处理1教学要求理解JavaScript中事件的概念、事件基本类型掌握JavaScript中主要事件句柄掌握事件处理方法（定静态、动态指定）学会使用事件处理程序的返回值了解表单事件源和事件句柄掌握表单获得焦点、失去焦点事件、提交及重置事件、改变及选择事件处理程序的调用方法了解鼠标事件源和事件句柄掌握鼠标单击、双击、移动事件处理程序的调用方法了解键盘事件源和事件句柄掌握键盘事件处理程序的调用方法了解窗口事件源和事件句柄掌握窗口事件处理程序的调用方法2教学内容15.1 JavaScript事件概述15.2 表单事件15.3 鼠标事件15.4 键盘事件15

19、.5 窗口事件15.6综合实例3教学重点、难点 表单事件 鼠标事件 键盘事件4学时分配 4 课时第十部分 第16章 BOM与DOM模型1.教学要求掌握Array对象的使用方法掌握Date对象处理和日期相关的方法掌握Math对象处理算术方面的使用方法掌握Number对象的使用方法掌握String对象的使用方法了解Boolean对象的使用方法理解HTML DOM的节点树的基本概念熟悉DOM节点树与HTML文件的映射关系熟悉DOM节点类型掌握DOM节点的访问方法(通过对象的ID、Name、TagName访问节点)学会使用DOM节点操作方法操作HTML页面上的元素，掌握DOM中innerText和in

20、nerHTML两个属性的区别，并学会使用；学会获取并设置指定元素的属性 理解BOM概念及BOM所包含的对象掌握Window对象属性和常用方法，学会利用window对象进行简单编程理解Navigate对象属性和常用方法，学会利用Navigate对象进行简单编程理解Screen对象属性，学会利用Screen对象进行简单编程理解History对象属性和常用方法，学会利用History对象进行简单编程理解Location对象属性和常用方法，学会利用Location对象进行简单编学会运用所学知识完成Web页面设计2.教学内容16.1 常用对象16.2 HTML DOM16.3 BOM16.4综合实例3.

21、教学重点、难点 DOM节点的增删改查4.学时分配 4 课时第十一部分 第13章 HTML5基础与CSS3应用1.教学要求理解HTML5新增结构元素及页面元素了解HTML5废除的元素与属性了解浏览器支持与选择掌握HTML5页面结构组成元素掌握HTML5新增结构元素的语法及使用方法（header、nav、section、articale、footer、aside等）掌握hgroup标记语法及使用方法掌握figure标记与figcaption标记语法及使用方法掌握mark标记与time标记语法及使用方法掌握details标记与summary标记语法及使用方法掌握progress标记与meter标记语

22、法及使用方法掌握input标记与datalist标记语法及使用方法掌握HTML5新增的表单属性学会使用HTML5新增的表单元素学会使用HTML5新增的input类型掌握video标记及属性的设置方法掌握audio标记及属性的设置方法了解CSS3新特性了解CSS3浏览器兼容性及解决方法掌握CSS3边框属性语法及设置方法掌握CSS3转换transform属性语法及设置方法掌握CSS3 过渡transition属性语法及设置方法掌握CSS3动画animation语法及设置方法掌握CSS3多列属性语法及设置方法掌握 CSS3文本效果属性语法及设置方法学会运用所学知识完成Web页面设计2.教学内容13.

23、1 HTML5概述13.2 HTML5文档结构13.3 HTML5新增页面元素13.4 HTML5表单13.5 HTML5视频与音频13.6 CSS3基础应用13.7综合实例3.教学重点、难点HTML5文档结构 CSS3应用4.学时分配4课时第十二部分 第17章 HTML5高圾应用1. 教学要求掌握localStorage对象掌握sessionstorage对象学会使用浏览器端数据库IndexedDB来存储客户端数据掌握Canvas标记的语法及设置方法理解Canvas坐标的概念了解Canvas路径的常用方法，并学会使用绘制路径的方法掌握Canvas绘制线段的方法(moveTo()、lineTo

24、()掌握Canvas绘制文本的常用方法掌握Canvas渐变的语法及设置方法掌握Canvas绘制图像的方法学会设置元素为可拖放元素了解常用的拖放事件和事件属性了解dataTransfer对象的常用的属性掌握拖放操作实现步骤熟悉Web Worker的工作原理学会创建Web Worker文件学会创建Web Worker对象学会使用终止Web Worker2. 教学内容17.1 HTML5 Web Storage17.2 HTML5 Canvas画布17.3 HTML5拖放17.4 HTML5 Web Workers17.5综合实例3. 教学重点、难点 HTML5 canvas 画布 HTML5 拖放

25、 4. 学时分配 4课时三、实验内容及要求 单独实验大纲。四、教学环节学时分配汇总 内 容课堂讲授习题课实验课其它教学环节小计（一）第1章Web前端开发技术综述2（二） 第2章 HTML基础 第3章 格式化文本与段落2（三） 第4章 列表 第5章 超链接与浮动框架2（四）第6章 图像与多媒体文件 第7章 CSS样式属性2（五） 第8章 DIV与SPAN 第9章 CSS样式属性2（六） 第10章 DIV+CSS页面布局2（七） 第11章 表格 第12章 表单2（八）第14章javascript 基础2（九）第15章 JavaScript事件处理4（十）第16章 BOM与DOM模型4（十一）第13

26、章 HTML5基础与CSS3应用4（十二）第17章HTML5高级应用4总 计32 五、考核方式 课程的考核方式：课程为考查课，期末考试采用雨课堂上机考试的形式 。课程考核成绩评定及比例：成绩由平时成绩、实验成绩和期末考试成绩构成，平时成绩占30%、期末考试成绩占70%。平时成绩由考勤、作业和实验构成。 六、教学参考资料 （黑体，小四号字）（一）专著、论文集、报告1储久良.Web前端开发技术-HTML5、CSS3、JavaScript(第3版).北京:清华大学出版社,2018.72曾顺.精通Javascript+jQuery.北京:人民邮电出版社,2008.93陈婉凌.网页设计必学的实用编程技术 html5+css3+JavaScript.北京: 清华大学出版社,2014.94陈婉凌.HTML5+CSS3+jQuery Mobile 轻松构造APP与移动网站.北京:清华大学出版社,2015 （六）电子文献1 刘强 吴亮等 .Web前端攻城狮. 国家精品课程网-学堂在线七、说明 （黑体，小四号字）