《web前端技术》课程教学大纲.docx
- 文档编号:10048768
- 上传时间:2023-02-08
- 格式:DOCX
- 页数:21
- 大小:21.82KB
《web前端技术》课程教学大纲.docx
《《web前端技术》课程教学大纲.docx》由会员分享,可在线阅读,更多相关《《web前端技术》课程教学大纲.docx(21页珍藏版)》请在冰豆网上搜索。
《web前端技术》课程教学大纲
附件3:
《web前端技术》课程教学大纲
课程英文名称
WEBfront-endtechnology
课程代码
0509620003
课程类别
专业任选
课程性质
任选
学分
2
总学时数
32
开课部门
智能制造学院
开课基层教学单位
计算机系/教研室
适用专业
物联网工程
开课学期
5
课程简介(限500字以内)
《前端开发课程》是物联网工程专业的一门专业课程,也是其他计算机相关专业的普及型课程,通过对Web前端三大主流开发技术学习和研究,让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识,通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。
※注:
1.课程类别包括公共必修课、公共限选课、公共任选课、专业核心课、专业必修课、专业限选课、专业任选课;课程性质包括必修、限选、任选。
2.课程名相同,但课程编码不同,须另写大纲。
一、课程教学目标
本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。
掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能;并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页;掌握使用DIV+CSS结合技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识,HTML中JavaScript程序的嵌入方法,理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序;掌握综合网站设计和发布的基本流程和方法。
本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法,掌握常用的Web页面布局技术,理解并熟练应用JavaScript常用的对象的属性与方法,熟练地使用DOM技术编写页面交互的客户端程序,通过项目实训,培养学生Web页面布局和页面交互设计初步能力。
二、理论教学内容及要求
第一部分第1章Web前端开发技术综述
1.教学要求
了解Web起源
理解Web特点
理解Web工作原理
掌握Web相关概念,掌握URL构成、Web服务器、超链接基本概念。
了解Web前端开发职业需求
掌握Web前端开发技术开发工具hbuilder
理解HTML概念及在网页中的作用,理解HTML文档定义。
CSS在Web页面设计中作用
理解JavaScript在Web页面设计中作用
了解HTMLDOM、BOM及AJAX在页面设计中的作用
2.教学内容
Web前端开发技术综述
WEB网站建立开发部署运行过程
3.教学重点、难点
用图示说明Web工作原理
4.学时分配
2课时
第二部分第2章HTML基础第3章格式化文本与段落
1.教学要求
理解HTML文档组成结构
掌握HTML头部标记作用及标题标记、元信息meta标记的语法
掌握HTML主体标记作用
掌握主体标记主要属性及其设置方法
掌握标记类型语法及HTML属性语法
掌握两种注释标记的使用方法及作用,重点掌握
---->标记的使用。
掌握HTML代码书写规范
了解3种HTML文档类型和HTML5的DTD定义方法。
掌握综合实例中所使用的标记语法
掌握在
添加文字信息的方法掌握标题字标记语法及对齐属性的设置方法
掌握添加空格、特殊符号的方法
掌握文本修饰标记的使用方法
掌握段落p标记语法及align属性的设置
掌握换行、水平分隔线、预格式化、块引用等标记的使用及属性怕设置
2.教学内容
HTML基础
格式化文本与段落
学会运用所学知识完成Web页面设计
3.、教学重点、难点
完成综合实例
4、学时分配
2课时
第三部分第4章列表第5章超链接与浮动框架
1.教学要求
了解列表的定义和常用列表的分类
掌握无序列表基本语法
学会使用列表type属性的改变列表的符号样式
掌握有序列表基本语法
学会使用列表type、start属性的改变列表的编号样式
了解使用有序列表项value属性改变列表项编号
理解列表的type与列表项type属性冲突时对列表项编号的影响
掌握定义列表基本语法
理解定义列表与无序、有序列表的外在表现上的差异
掌握超链接基本语法及href、target、title等属性的设置方法
理解超链接中路径的分类和应用场合
掌握内链接、外链接的定义方法
掌握创建HTTP文件下载链接的语法
掌握FTP站点访问链接的基本语法及创建方法
掌握图像超链接的基本语法及创建方法
掌握电子邮件链接的基本语法及创建方法
掌握书签链接的基本语法及创建方法
掌握浮动框架使用语法和使用方法。
学会运用所学知识完成Web页面设计
2.教学内容
列表概述
无序列表
有序列表
定义列表
超链接概述
超链接语法、路径及分类
超链接的应用
学会运用所学知识完成Web页面设计
3.、教学重点、难点
完成综合实例
4、学时分配
2课时
第四部分第6章图像与多媒体文件第7章CSS样式属性
1.教学要求
掌握标记基本语法
会利用属性src、width、height、border、alt、hspace、vspace、align等来修饰图像
掌握
了解CSS基本概念
了解传统HTML的缺点
了解CSS的特点
了解CSS的优势
了解CSS编辑方法
掌握CSS的基本语法
掌握CSS选择器类型(包括标记选择器、类选择器、id选择器、伪类选择器、属性选择器等)
掌握CSS选择器声明类型
掌握CSS定义与引用方法(包括内联样式表(行内样式表)、内部样式表、外部样式表(链接外部样式表、导入外部样式表)等。
)
理解CSS的继承与层叠区别
学会运用所学知识完成Web页面设计
2、教学内容
6 图像与多媒体文件
6.1图像
6.3音频、视频及Flash文件
6.4综合实例
7CSS基础
7.1CSS概念
7.2使用CSS控制Web页面
7.3CSS继承与层叠
7.4综合实例
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-transform、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、边框属性border、填充属性padding及其子属性的设置方法
3.教学内容
8DIV与SPAN
8.1div图层
8.2图层嵌套与层叠
8.3div标记与span标记
8.4综合实例
9CSS样式属性
9.1CSS属性中的单位
9.2CSS字体样式
9.3CSS文本样式
9.4CSS颜色与背景
9.5CSS列表样式
9.6CSS盒模型
9.7综合实例
3.、教学重点、难点
CSS盒模型
行内元素与块元素的理解
4、学时分配
2课时
第六部分第10章DIV+CSS页面布局
1.教学要求
能够根据常规页面布局编写出DIV结构和定义出CSS样式
学会使用DIV+CSS实现简单Web页面布局
掌握一级水平导航菜单的设计方法
掌握二级水平导航菜单的设计方法
4.教学内容
10.1页面布局设计
10.2导航菜单设计
3.教学重点、难点
页面布局设计
流式布局、相对定位与绝对定位行的理解
4、学时分配
2课时
第七部分第11章表格第12章表单
1.教学要求
熟悉常用表格的标记及作用
掌握
绘制简易表格 学会使用表格标题 标记定义表格标题和表头 | 掌握表格边框及边框样式属性设置方法 掌握表格宽度、高度的设置方法 掌握表格的背景颜色和背景图像的设置方法 掌握表格边框样式属性的设置方法 掌握表格单元格间距、边距的设置方法 掌握表格水平对齐属性的设置方法 掌握表格行内容水平和垂直对齐的设置方法 握单元格跨行属性rowspan设置方法 掌握单元格跨列属性colspan设置方法 掌握表单标记的基本语法结构以及表单中包含其它标记 掌握域和域标题标记的基本语法,学会使用域和域标题标记设置表单分区 掌握单行文本输入框的属性设置方法 学会使用密码输入框设置用户密码 掌握复选框checkbox设置及使用方法,学会使用checked属性将某项复选框设为预选项 掌握单选按钮radio设置及使用方法,学会使用checked属性将某项单选按钮设为预选项 掌握图像按钮的属性设置方法 掌握submit按钮的属性设置方法 掌握reset按钮的属性设置方法 掌握普通按钮的设置方法 学会使用file文件选择框浏览文件 学会hidden隐藏框使用方法 学会使用多行文本输入框标记在网页中设置多行文本的输入方法 掌握cols、rows、wrap等相关属性的设置多行文本区域大小 掌握标记的基本语法及size、multiple、name等属性的设置方法 学会使用 学会运用下拉列表框编写相关网页代码 学会运用所学知识完成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综合实例 3.教学重点、难点 表单的作用 表格的行合并列合并 4.学时分配 2课时 第八部分第14章javascript基础 1.教学要求 理解JavaScript在Web页面设计中作用及其特点 了解JavaScript在HTML中放置的位置 了解JavaScript语句类型、语句块标记 理解JavaScript函数的作用和基本语法 学会使用消息对话框实现页面交互 学会使用注释给JS代码增加功能说明 掌握标识符、变量命名的规范 掌握JavaScript中的基本数据类型,分别是字符串型、数值型、布尔型、Null型、undefined、object型 掌握变量的定义语法及使用方法 掌握常用的转义字符使用方法,例如\n、\r、\f、\uhhhh、\\、\” 了解运算符和表达式的类型 掌握算术、关系、逻辑、赋值、条件运算符的使用方法 了解位、逗号、new、delet、typeof等运算符的使用方法 掌握顺序结构程序的编写方法 掌握if…else分支结构程序的编写方法 掌握if…elseif…elseif…else多分支结构及switch多分支结构应用场合和编程方法 了解循环结构类型及应用场合 掌握for、while、do…while、for…in的使用方法 理解break和continue语句在循环结构中的作用 掌握常用系统函数使用方法,如eval()、escape()、unescape()、parseFloat()、parseInt()、isNaN()等全局函数的使用方法,熟练使用对象的函数,如toString()、toFixed(n)、charAt(n)、indexOf()、lastIndexOf()、substring()等 掌握自定义函数的使用方法,并学会编程 学会使用return返回函数计算结果 理解局部变量与全局变量使用区别 2.教学内容 14.1JavaScript概述 14.2JavaScript程序 14.3标识符和变量 14.4运算符和表达式 14.5JavaScript程序控制结构 14.6JavaScript函数 14.7综合实例 3.教学重点、难点 掌握常用系统函数使用方法 掌握自定义函数的使用方法,并学会编程 4.学时分配 2课时 第九部分第15章JavaScript事件处理 1.教学要求 理解JavaScript中事件的概念、事件基本类型 掌握JavaScript中主要事件句柄 掌握事件处理方法(定静态、动态指定) 学会使用事件处理程序的返回值 了解表单事件源和事件句柄 掌握表单获得焦点、失去焦点事件、提交及重置事件、改变及选择事件处理程序的调用方法 了解鼠标事件源和事件句柄 掌握鼠标单击、双击、移动事件处理程序的调用方法 了解键盘事件源和事件句柄 掌握键盘事件处理程序的调用方法 了解窗口事件源和事件句柄 掌握窗口事件处理程序的调用方法 2.教学内容 15.1JavaScript事件概述 15.2表单事件 15.3鼠标事件 15.4键盘事件 15.5窗口事件 15.6 综合实例 3.教学重点、难点 表单事件 鼠标事件 键盘事件 4.学时分配 4课时 第十部分第16章BOM与DOM模型 1.教学要求 掌握Array对象的使用方法 掌握Date对象处理和日期相关的方法 掌握Math对象处理算术方面的使用方法 掌握Number对象的使用方法 掌握String对象的使用方法 了解Boolean对象的使用方法 理解HTMLDOM的节点树的基本概念 熟悉DOM节点树与HTML文件的映射关系 熟悉DOM节点类型 掌握DOM节点的访问方法(通过对象的ID、Name、TagName访问节点) 学会使用DOM节点操作方法操作HTML页面上的元素,掌握DOM中innerText和innerHTML两个属性的区别,并学会使用;学会获取并设置指定元素的属性 理解BOM概念及BOM所包含的对象 掌握Window对象属性和常用方法,学会利用window对象进行简单编程 理解Navigate对象属性和常用方法,学会利用Navigate对象进行简单编程 理解Screen对象属性,学会利用Screen对象进行简单编程 理解History对象属性和常用方法,学会利用History对象进行简单编程 理解Location对象属性和常用方法,学会利用Location对象进行简单编 学会运用所学知识完成Web页面设计 2.教学内容 16.1常用对象 16.2HTMLDOM 16.3BOM 16.4 综合实例 3.教学重点、难点 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标记语法及使用方法 掌握input标记与datalist标记语法及使用方法 掌握HTML5新增的表单属性 学会使用HTML5新增的表单元素 学会使用HTML5新增的input类型 掌握video标记及属性的设置方法 掌握audio标记及属性的设置方法 了解CSS3新特性 了解CSS3浏览器兼容性及解决方法 掌握CSS3边框属性语法及设置方法 掌握CSS3转换transform属性语法及设置方法 掌握CSS3过渡transition属性语法及设置方法 掌握CSS3动画animation语法及设置方法 掌握CSS3多列属性语法及设置方法 掌握CSS3文本效果属性语法及设置方法 学会运用所学知识完成Web页面设计 2.教学内容 13.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()) 掌握Canvas绘制文本的常用方法 掌握Canvas渐变的语法及设置方法 掌握Canvas绘制图像的方法 学会设置元素为可拖放元素 了解常用的拖放事件和事件属性 了解dataTransfer对象的常用的属性 掌握拖放操作实现步骤 熟悉WebWorker的工作原理 学会创建WebWorker文件 学会创建WebWorker对象 学会使用终止WebWorker 2.教学内容 17.1 HTML5WebStorage 17.2 HTML5Canvas画布 17.3 HTML5 拖放 17.4 HTML5WebWorkers 17.5 综合实例 3.教学重点、难点 HTML5canvas画布 HTML5拖放 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章HTML5基础与CSS3应用 4 (十二)第17章 HTML5高级应用 4 总计 32 五、考核方式 课程的考核方式: 课程为考查课,期末考试采用雨课堂上机考试的形式。 课程考核成绩评定及比例: 成绩由平时成绩、实验成绩和期末考试成绩构成,平时成绩占30%、期末考试成绩占70%。 平时成绩由考勤、作业和实验构成。 六、教学参考资料(黑体,小四号字) (一)专著、论文集、报告 [1]储久良.Web前端开发技术-HTML5、CSS3、JavaScript(第3版).北京: 清华大学出版社,2018.7 [2]曾顺.精通Javascript+jQuery.北京: 人民邮电出版社,2008.9 [3]陈婉凌.网页设计必学的实用编程技术html5+css3+JavaScript.北京: 清华大学出版社,2014.9 [4]陈婉凌.HTML5+CSS3+jQueryMobile轻松构造APP与移动网站.北京: 清华大学出版社,2015 (六)电子文献 [1]刘强吴亮等.Web前端攻城狮.国家精品课程网-学堂在线 七、说明(黑体,小四号字)
![]()
关于本文
copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1 |