《Web前端开发技术》教学大纲.docx

1、Web前端开发技术教学大纲Web前端开发技术教学大纲学分：3.5学时：56(28时理论/28时上机)一、课程的性质、地位与任务Web前端开发技术（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Web前端开发与设计的基本原则

2、、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。本课程的教学目标是让学生理解H

3、TML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。三、课程内容（重点，难点）1Web前端开发技术综述1.1Web概述1.1.1了解Web起源1.1.2理解Web特点1.1.3理解Web工作原理1.1.4掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。1.2了解Web前端开发职业需求1.3Web前端开发技术1.3.1理解HTML概念及在网页中的作用，理解HTML文档定义。1

4、.3.2理解CSS在Web页面设计中作用1.3.3理解JavaScript在Web页面设计中作用1.3.4了解HTMLDOM、BOM及AJAX在页面设计中的作用1.3.5了解jQuery含义及基本用途1.4Web前端开发工具掌握EditPlus、AdobeDreamweaver、SublimeText、WebStorm、HBuilder等开发工具1.5浏览器工具熟悉常用五类浏览器安装与使用1.6熟悉综合实例2HTML基础2.1HTML文档结构2.1.1理解HTML文档组成结构2.2头部掌握HTML头部标记作用及标题标记、元信息meta标记的语法2.3主体2.3.1掌握HTML主体标记作用2.3

5、.2掌握主体标记主要属性及其设置方法2.4HTML基本语法掌握标记类型语法及HTML属性语法2.5注释掌握两种注释标记的使用方法及作用，重点掌握标记的使用。2.6HTML文档编写规范2.6.1掌握HTML代码书写规范2.6.2掌握HTML文档命名规则2.7HTML文档类型了解3种HTML文档类型和HTML5的DTD定义方法。2.8掌握综合实例中所使用的标记语法3格式化文本与段落3.1Web页面初步设计3.1.1掌握在添加文字信息的方法3.1.2掌握标题字标记语法及对齐属性的设置方法3.1.3掌握添加空格、特殊符号的方法3.2格式化文本标记3.2.1掌握文本修饰标记的使用方法3.2.2了解计算机

6、输出标记的使用方法3.2.3理解引用和术语标记的使用方法3.2.4掌握字体font标记的face、size、color属性语法3.3段落与排版标记3.4.1掌握段落p标记语法及align属性的设置3.4.2掌握换行、水平分隔线、拼音/音标注释ruby标记和rt/rp标记拼音/音标注释ruby标记和rt/rp标记、预格式化、块引用等标记的使用及属性怕设置3.4综合实例学会运用所学知识完成Web页面设计4列表4.1列表概述4.1.1了解列表的定义和常用列表的分类4.2无序列表4.2.1掌握无序列表基本语法4.2.2学会使用列表type属性的改变列表的符号样式4.3有序列表4.3.1掌握有序列表基本

7、语法4.3.2学会使用列表type、start属性的改变列表的编号样式4.3.3了解使用有序列表项value属性改变列表项编号4.3.4理解列表的type与列表项type属性冲突时对列表项编号的影响4.4列表嵌套4.4.1掌握无序列表与有序列表嵌套的方法4.5定义列表4.5.1掌握定义列表基本语法4.5.2理解定义列表与无序、有序列表的外在表现上的差异4.6综合实例学会运用所学知识完成Web页面设计5超链接与浮动框架5.1超链接概述5.2超链接语法、路径及分类5.2.1掌握超链接基本语法及href、target、title等属性的设置方法5.2.2理解超链接中路径的分类和应用场合5.2.3掌握

8、内链接、外链接的定义方法5.3超链接的应用5.3.1掌握创建HTTP文件下载链接的语法5.3.2掌握FTP站点访问链接的基本语法及创建方法5.3.3掌握图像超链接的基本语法及创建方法5.3.4掌握电子邮件链接的基本语法及创建方法5.3.5掌握书签链接的基本语法及创建方法5.4浮动框架掌握浮动框架使用语法和使用方法。5.5综合实例学会运用所学知识完成Web页面设计6图像与多媒体文件6.1图像6.1.1掌握标记基本语法6.1.2会利用属性src、width、height、border、alt、hspace、vspace、align等来修饰图像6.2滚动文字6.2.1掌握滚动文字标记的基本语法6.2

9、.2学会利用滚动文字标记的direction、behavior、loop、scrollamount、scrolldelay等属性来设置滚动文字的效果6.3音频、视频及Flash文件6.3.1掌握标记的语法。学会正确设置标记的src、loop、autostart、width、height等属性。6.4综合实例学会运用所学知识完成Web页面设计7CSS基础7.1CSS概念7.1.1了解CSS基本概念7.1.2了解传统HTML的缺点7.1.3了解CSS的特点7.1.4了解CSS的优势7.1.5了解CSS编辑方法7.2使用CSS控制Web页面7.2.1掌握CSS的基本语法7.2.2掌握CSS选择器类型

10、（包括标记选择器、类选择器、id选择器、伪类选择器、属性选择器等）7.2.3掌握CSS选择器声明类型7.2.4掌握CSS定义与引用方法（包括内联样式表(行内样式表)、内部样式表、外部样式表（链接外部样式表、导入外部样式表）等。）7.3CSS继承与层叠理解CSS的继承与层叠区别7.4综合实例学会运用所学知识完成Web页面设计8DIV与SPAN8.1div图层8.1.1掌握div定义方法8.1.2学会设置div图层的属性8.2图层嵌套与层叠8.2.1学会使用多个进行页面布局8.2.2学会使用图层嵌套与图层层叠8.3div标记与span标记理解div标记与span标记的使用区别8.4综合实例学会运用

11、所学知识完成Web页面设计9CSS样式属性9.1CSS属性中的单位掌握CSS属性中绝对单位与相对单位9.2CSS字体样式9.2.1掌握字体font-size、font-style、font-variant、font-weight、font-family等属性的设置方法9.2.2掌握字体font复合属性的设置方法9.3CSS文本样式掌握letter-spacing、text-indent、text-decoration、text-transform、text-align、vertical-align、line-height等排版样式属性的设置方法9.4CSS颜色与背景9.4.1掌握颜色属性的设置

12、方法9.4.2掌握背景background-color、background-image、background-repeat、background-attachment、background-position等子属性的设置方法9.4.3掌握背景复合属性background的设置方法9.5CSS列表样式掌握列表样式语法，学会使用list-style-type、list-style-image、list-style-position等属性美化列表的外观9.6CSS盒模型9.6.1理解CSS盒模型结构9.6.2学会设置边界margin、边框属性border、填充属性padding及其子属性的设置方法

13、9.7综合实例学会运用所学知识完成Web页面设计10DIV+CSS页面布局10.1页面布局设计能够根据常规页面布局编写出DIV结构和定义出CSS样式学会使用DIV+CSS实现简单Web页面布局10.2导航菜单设计10.2.1掌握一级水平导航菜单的设计方法10.2.2掌握二级水平导航菜单的设计方法11表格11.1表格熟悉常用表格的标记及作用11.2表格标记11.2.1掌握标记语法及所有表格标记的语法11.2.2会利用绘制简易表格11.2.3学会使用表格标题、标记定义表格标题和表头11.3表格属性设置11.3.1掌握表格边框及边框样式属性设置方法11.3.2掌握表格宽度、高度的设置方法11.3.3

14、掌握表格的背景颜色和背景图像的设置方法11.3.4掌握表格边框样式属性的设置方法11.3.5掌握表格单元格间距、边距的设置方法11.3.6掌握表格水平对齐属性的设置方法11.4设置表格行的属性11.4.1掌握表格行内容水平和垂直对齐的设置方法11.5设置单元格的属性11.5.1掌握单元格跨行属性rowspan设置方法11.5.2掌握单元格跨列属性colspan设置方法11.6表格嵌套学会运用表格嵌套技术实现一般网页布局11.7综合实例学会运用所学知识完成Web页面设计12表单12.1表单概述12.1.1掌握表单标记的基本语法结构以及表单中包含其它标记12.2定义域和域标题掌握域和域标题标记的基

15、本语法,学会使用域和域标题标记设置表单分区12.3表单信息输入12.3.1掌握单行文本输入框的属性设置方法12.3.2学会使用密码输入框设置用户密码12.3.3掌握复选框checkbox设置及使用方法，学会使用checked属性将某项复选框设为预选项12.3.4掌握单选按钮radio设置及使用方法，学会使用checked属性将某项单选按钮设为预选项12.3.5掌握图像按钮的属性设置方法12.3.6掌握submit按钮的属性设置方法12.3.7掌握reset按钮的属性设置方法12.3.8掌握普通按钮的设置方法12.3.9学会使用file文件选择框浏览文件12.3.10学会hidden隐藏框使用方

16、法12.4多行文本输入框12.4.1学会使用多行文本输入框标记在网页中设置多行文本的输入方法12.4.2掌握cols、rows、wrap等相关属性的设置多行文本区域大小12.5下拉列表框12.5.1掌握标记的基本语法及size、multiple、name等属性的设置方法12.5.2学会使用标记设置列表项，学会使用selected属性必将某一选项设为预选项12.5.3学会运用下拉列表框编写相关网页代码12.6综合实例学会运用所学知识完成Web页面设计13HTML5基础与CSS3应用13.1HTML5概述掌握元素、标记和属性相关概念。13.1.1HTML5的八个特点13.1.2HTML5的优势13

17、.1.3理解HTML5新增结构元素及页面元素13.1.4了解HTML5废除的元素与属性13.1.5了解浏览器支持与选择13.2HTML5文档结构13.2.1掌握HTML5页面结构组成元素13.2.2掌握HTML5新增结构元素的语法及使用方法（header、nav、section、articale、footer、aside等）13.3HTML5新增页面元素13.3.1掌握hgroup标记语法及使用方法13.3.2掌握figure标记与figcaption标记语法及使用方法13.3.3掌握mark标记与time标记语法及使用方法13.3.4掌握details标记与summary标记语法及使用方法1

18、3.3.5掌握progress标记与meter标记语法及使用方法13.3.6掌握input标记与datalist标记语法及使用方法13.4HTML5表单13.4.1掌握HTML5新增的表单属性13.4.2学会使用HTML5新增的表单元素13.4.3学会使用HTML5新增的input类型13.5HTML5视频与音频13.5.1掌握video标记及属性的设置方法13.5.2掌握audio标记及属性的设置方法13.6CSS3基础应用13.6.1了解CSS3新特性13.6.2了解CSS3浏览器兼容性及解决方法13.6.3掌握CSS3边框属性语法及设置方法13.6.4掌握CSS3转换transform属

19、性语法及设置方法13.6.5掌握CSS3过渡transition属性语法及设置方法13.6.6掌握CSS3动画animation语法及设置方法13.6.7掌握CSS3多列属性语法及设置方法13.6.8掌握CSS3文本效果属性语法及设置方法13.7综合实例学会运用所学知识完成Web页面设计14JavaScript基础14.1JavaScript概述14.1.1理解JavaScript在Web页面设计中作用及其特点14.1.2了解JavaScript在HTML中放置的位置14.2JavaScript程序14.2.1了解JavaScript语句类型、语句块标记14.2.2理解JavaScript函数

20、的作用和基本语法14.2.3学会使用消息对话框实现页面交互14.2.4学会使用注释给JS代码增加功能说明14.3标识符和变量14.3.1掌握标识符、变量命名的规范14.3.2掌握JavaScript中的基本数据类型，分别是字符串型、数值型、布尔型、Null型、undefined、object型14.3.3.掌握变量的定义语法及使用方法14.3.4.掌握常用的转义字符使用方法,例如n、r、f、uhhhh、”14.4运算符和表达式14.4.1了解运算符和表达式的类型14.4.2掌握算术、关系、逻辑、赋值、条件运算符的使用方法14.4.2了解位、逗号、new、delet、typeof等运算符的使用方

21、法14.5JavaScript程序控制结构14.5.1掌握顺序结构程序的编写方法14.5.2掌握ifelse分支结构程序的编写方法14.5.3掌握ifelseifelseifelse多分支结构及switch多分支结构应用场合和编程方法14.5.4了解循环结构类型及应用场合14.5.5掌握for、while、dowhile、forin的使用方法14.5.6理解break和continue语句在循环结构中的作用14.6JavaScript函数14.6.1掌握常用系统函数使用方法，如eval()、escape()、unescape()、parseFloat()、parseInt()、isNaN()等

22、全局函数的使用方法，熟练使用对象的函数，如toString()、toFixed（n）、charAt(n)、indexOf()、lastIndexOf()、substring()等14.6.2掌握自定义函数的使用方法，并学会编程14.6.3学会使用return返回函数计算结果14.6.4理解局部变量与全局变量使用区别14.7综合实例学会运用所学知识完成Web页面设计15JavaScript事件处理15.1JavaScript事件概述15.1.1理解JavaScript中事件的概念、事件基本类型15.1.2掌握JavaScript中主要事件句柄15.1.3掌握事件处理方法（定静态、动态指定）15.

23、1.4学会使用事件处理程序的返回值15.2表单事件15.2.1了解表单事件源和事件句柄15.2.2掌握表单获得焦点、失去焦点事件、提交及重置事件、改变及选择事件处理程序的调用方法15.3鼠标事件15.3.1了解鼠标事件源和事件句柄15.3.2掌握鼠标单击、双击、移动事件处理程序的调用方法15.4键盘事件15.4.1了解键盘事件源和事件句柄15.4.2掌握键盘事件处理程序的调用方法15.5窗口事件15.5.1了解窗口事件源和事件句柄15.5.2掌握窗口事件处理程序的调用方法15.6综合实例学会运用所学知识完成Web页面设计16BOM与DOM模型16.1常用对象16.1.1掌握Array对象的使用

24、方法16.1.2掌握Date对象处理和日期相关的方法16.1.3掌握Math对象处理算术方面的使用方法16.1.4掌握Number对象的使用方法16.1.5掌握String对象的使用方法16.1.5了解Boolean对象的使用方法16.2HTMLDOM16.2.1理解HTMLDOM的节点树的基本概念16.2.2熟悉DOM节点树与HTML文件的映射关系16.2.3熟悉DOM节点类型16.2.4掌握DOM节点的访问方法(通过对象的ID、Name、TagName访问节点)16.2.5学会使用DOM节点操作方法操作HTML页面上的元素，掌握DOM中innerText和innerHTML两个属性的区别，

25、并学会使用；学会获取并设置指定元素的属性16.3BOM16.3.1理解BOM概念及BOM所包含的对象16.3.2掌握Window对象属性和常用方法，学会利用window对象进行简单编程16.3.3理解Navigate对象属性和常用方法，学会利用Navigate对象进行简单编程16.3.4理解Screen对象属性，学会利用Screen对象进行简单编程16.3.5理解History对象属性和常用方法，学会利用History对象进行简单编程16.3.6理解Location对象属性和常用方法，学会利用Location对象进行简单编16.4综合实例学会运用所学知识完成Web页面设计17HTML5高级应用

26、17.1HTML5WebStorage17.1.1掌握localStorage对象17.1.2掌握sessionstorage对象17.1.3学会使用浏览器端数据库IndexedDB来存储客户端数据17.2HTML5Canvas画布17.2.1掌握Canvas标记的语法及设置方法17.2.2理解Canvas坐标的概念17.2.3了解Canvas路径的常用方法，并学会使用绘制路径的方法17.2.4掌握Canvas绘制线段的方法(moveTo()、lineTo()17.2.5掌握Canvas绘制文本的常用方法17.2.6掌握Canvas渐变的语法及设置方法17.2.7掌握Canvas绘制图像的方法

27、17.3HTML5拖放17.3.1学会设置元素为可拖放元素17.3.2了解常用的拖放事件和事件属性17.3.3了解dataTransfer对象的常用的属性17.3.4掌握拖放操作实现步骤17.4HTML5WebWorkers17.4.1熟悉WebWorker的工作原理17.4.2学会创建WebWorker文件17.4.3学会创建WebWorker对象17.4.4学会使用终止WebWorker17.5综合实例学会运用所学知识完成Web页面设计注：针对不同专业和不同的教学需要，建议该课程可设置为56、64、72课时或以上，可以在第13章、第14章、15章、16章和第17章中适当增加课时。具体建议如

28、下：(1)第13章可以设置6-8课时；(2)第14章可以调整为4-6课时，(3)第16章可调为4-8课时。(4)第17章可调为4-6课时。四、时间分配（以56学时为例）分段标识序号教学内容教学环节（学时）讲课习题实验上机课外小计1第1章WEB前端开发技术综述第2章HTML基础2242第3章格式化文本与段落第4章列表2243第5章超链接与浮动框架第6章图像与多媒体文件2244第7章CSS基础第8章DIV与SPAN2245第9章CSS样式属性第10章DIV+CSS页面布局2246第11章表格第12章表单2247第14章JavaScript基础-12248第14章JavaScript基础-22249

29、第15章JavaScript事件处理第16章BOM与DOM-122410第16章BOM与DOM-222411第13章HTML5基础与CSS3应用-122412第13章HTML5基础与CSS3应用-222413第13章HTML5基础与CSS3应用-3第17章HTML5高级应用-122414第17章HTML5高级应用-222415翻转课堂模式复习【计划外】000总计282856五、课程说明课程英文名称WebFrontEnddevelopmenttechnology/WebClientProgramming主要先修课程计算机科学技术导论、信息技术基础适用专业类别软件工程、计算机科学与技术、信息管理与信息系统、网络工程等相关专业主要教材（作者、教材名称、出版社）(1)储久良.We