《Web前端开发》教学大纲(本科)

《Web前端开发》教学大纲

课程英文名

学分

课程类别

适用专业

执笔人

2.5

Front-end Development of Web

总学时 40

选修

课程代码

C0809Y06

理论学时 20

先修课程

开课学院

实验/实践学时 20

多媒体技术

信息工程学院

2020 年12 月

专业课 课程性质

计算机科学与技术

审定人

制定时间

注：课程类别是指公共基础课/学科基础课/专业课；课程性质是指必修/限选/任选。

一、课程地位与课程目标

（一）课程地位

Web前端开发是计算机科学与技术专业及相关专业学生的选修课。随着IT技术的发展，用户对技术与艺术结合的要求越来越高，在界面设计、视觉设计、交互设计、用户体验等方面提出了越来越高的要求和标准。这门课程的任务就是要培养出比美工更懂技术、比技术更懂交互的复合型人才——前端开发工程师。课程内容主要有HTML、CSS、JavaScript、HTML5以及主流的JS库（JQuery、Angular、bootstrap、JsCharts、HighCharts）与JS游戏开发包。

（二）课程目标

课程目标

1.熟悉HTML标记语言的基本元素和标签，包括图像、超链接、表格、表单、框架等标签，通过上机实践掌握这些标签的使用格式和各种属性，能做到灵活运用，设计好网页的基本架构。

2.了解CSS的发展历史和基本结构，掌握CSS选择器的各种类型及其属性，熟练利用CSS+DIV的对网页布局。

毕业要求4、5

3.了解JavaScript语言的发展历史，熟悉 JavaScript的基本语法，掌握JavaScript各种对象的定义和使用，理解和掌握JavaScript中BOM和DOM两种对象模型的意义和使用，能够熟练利用JavaScript技术实现网页客户端的灵活交互功能、音视频的播放、图像界面的生成、客户端数据处理等。

4．了解HTML5的新特性、新功能，理解和掌握HTML5在Canvas绘图、多媒体播放、Web存储、Web Worker以及本地数据库中的应用，能够利用这些新技术丰富网站的功能，是交互跟人性化。

5．了解jQuery优势、特点和开发环境的搭建，熟悉jQuery的基本操作、插件使用和事件处理方法，掌握1

毕业要求

毕业要求4、5

目标分类

记忆

理解

应用

记忆

理解

应用

记忆

理解

应用

毕业要求4、5

毕业要求2、4、5 记忆

理解

应用

毕业要求4、5 记忆

理解

jQuery的基本选择器、过滤选择器、表单选择器的正确使用方法以及jQuery动画效果、数组和对象的操作，精通jQuery的文档处理、节点遍历等方法。能够熟练利用jQuery技术动态修改页面内容、页面的样式，添加动态效果，获取DOM的元素内容。

6.了解JavaScript包含的各种游戏开发包，熟悉和掌握LimeJS、melonJS、gameQuery、EntityJS、FlashJS、、Gamvas Web、EaseJS等其中一种开发包的使用方法。

毕业要求4、5

应用

记忆

理解

应用

二、课程目标达成的途径与方法

课程目标 教学环节

讲授第1、2、3章

课程目标1

完成课后习题与实验

讲授第4、5章

完成课后习题与实验

讲授第6、7、8章

课程目标3

完成课后习题与实验

课程目标4

课程目标5

讲授第9、10章

完成课后习题与实验

讲授第11、12章

完成课后习题与实验

对应内容

第1章 HTML语言基础

第2章 表格与框架

第3章 表单

课程目标2

第4章 CSS语言基础

第5章 CSS页面布局

第6章 JavaScript语言基础

第7章 JavaScript对象

第8章 BOM与DOM编程

第9章 HTML5基础

第10章 HTML5进阶

第11章 jQuery基础

第12章 jQuery进阶

三、课程目标与相关毕业要求的对应关系

课程目标

课程目标1

课程目标2

课程目标3

课程目标4

课程目标5

课程目标对毕业要求的支撑程度（H、M、L）

毕业要求2 毕业要求4 毕业要求5

M

M

M

H

H

H

M

M

M

M

M

四、课程主要内容与基本要求

1. 概论

了解WEB前端工程师的职业需求；了解WEB前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX；了解WEB前端开发工具；了解WEB前端浏览工具。

2

2. HTML

掌握如下内容：HTML文档结构：head、title、meta、body； HTML基本语法：标记、属性、注释；格式化文字与段落：font、p、b、br、hr、center、blockquote；列表：ul、ol、li；超链接：a、href；图像与多媒体文件：img、src、width、height、alter、border、文字特效（滚动、背景）、背景音乐与其他多媒体文件；表单（包括form、各种input）；表格、框架等。

3. CSS与DIV

掌握如下内容：CSS基本语法、样式表的使用（外部、内部、内联）、选择器（元素、类、ID、属性、后代、子元素、相邻兄弟）、对齐、尺寸、分类、多级菜单导航、透明图片、使用@media对手机浏览页面布局。

4. JavaScript

掌握如下内容：标识符和变量、运算符和表达式、控制结构、函数、事件分析（表单事件、鼠标事件、键盘事件）、DOM、BOM等。

5. HTML5

掌握如下内容：HTML5语法特征、文档结构、表单元素，Canvas绘图、多媒体播放、Web存储、本地数据库实现、Web Worker应用等。

6. 前端开发库（工具包）

了解前端开发库：JQuery、Angular、bootstrap、JsCharts、HighCharts。

了解JS游戏开发包：LimeJS、melonJS、gameQuery、EntityJS、FlashJS、、Gamvas

Web、、CreateJS、QuarkJS、ImpactJS、GameJS、、Egret、Cocos2d-x、NodeJS、EaseJS，掌握其中的任意2种，其中1种由老师教，另外一种由学生自学并掌握。

五、课程学时安排

序号 教学内容

HTML语言基础

1

表格与框架

表单

8

学时数 学生任务

制作自我介绍页面和个人信息注册页面。要有自己的logo和banner图

对应课程目标

课程目标1

2

CSS语言基础

CSS页面布局

8

模仿任意企业网站首页，需要有菜单导航、广告图片、资讯、版权、课程目标2

手机和PC采用不同的布局等。

个人信息注册页面加入表单验证功能；

课程目标3

制作一个游戏，如 五子棋、象棋、挖雷等。

利用HTML5新功能实现购物网站商品详情页面整体框架结构、商品切换、商品详情页面放大、购物车拖曳等

JavaScript语言基础

3

JavaScript对象

BOM与DOM编程

10

4

HTML5基础

HTML5进阶

6

课程目标4

3

jQuery基础

5

jQuery进阶

8

利用jQuery实现菜单折叠、表单验证、二级级联、表格操作和报表统计功能

课程目标5

六、实践环节及基本要求

序号

1

2

实验项目名称

HTML语言基础

表单、表格与框架

学时

2

2

2

2

基本要求

熟悉HTML各种标签元素的基本用法

掌握表单、表格和框架元素的使用

掌握CSS样式的格式、引用方式

掌握页面的样式统一和布局方法

掌握JS的基本语学生任务

做一个个人简历

完善个人简历

给个人网站写一个CSS文件

整体布局和局部布局

设计后台登录和购物车商品展示

实验

性质

验证性

验证性

验证性

验证性

实验

类别

必做

必做

必做

必做

必做

3 CSS样式基础

4 CSS+DIV页面布局

5 JavaScript语言基础

2

法、数据类型、分支语句、循环语句、函数等的使用掌握JS各种

对象验证性

必做

验证性

6 JavaScript对象

2

的属性和方法的引用

实现页面的图片轮播、热门随机推荐、页面动态效果

7 BOM与DOM编程

2

掌握BOM、DOM两种模型的使用

掌握HTML5的新功能

掌握jQuery的基必做

实现三级菜单级联、表单验证 验证性

实现商品详情页、重构商品添加页面、商品切换、放大和拖曳功能。

验证性

必做

验证性

必做

8 HTML5基础与进阶

2

9 jQuery基础与进阶

2

本操作、事件处理、文档处理、动画效果等功能。

实现菜单折叠、表单验证、二级级联、表格操作和报表统计等功能

设计一个购物网站10 或者设计一个Web游戏

2

Web前端的开发知识点综合应用

必做

设计一个购物网站或Web游戏

设计性

注：1.实验性质指演示性、验证性、设计性、综合性等；2.实验类别指必做、选做等。

4

七、考核方式、成绩评定

考核内容

过程考核

考核方式

含到课率、课堂讨论发言、平时作业等

评定标准（依据）

点名记录

讨论发言记录

作业批改成绩

操作成绩

论文和验收成绩

占总成绩比例

10%

实验考核

期末考核

考核类别

操作验收

论文+验收

考查

40%

50%

成绩登记方式 百分制

八、课程目标达成度评价方法

课程目标 教学环节

讲授

课程目标1

实验 实验成绩C10

目标达成度1=（A1+B1）/（A10+ B10+ C10）

讲授

课程目标2

实验

作业A20

期末验收B20

实验成绩C20

成绩评定

作业A10

期末验收B10

目标达成度2=（A2+B2）/（A20+ B20+ C20）

讲授

课程目标3

实验

作业A30

期末考试B30

实验成绩C30

作业A40

期末考试B40

实验 实验成绩C40

目标达成度3=（A3+B3+C3）/（A30+B30+C30）

讲授

课程目标4

目标达成度4=（A4+B4+C4）/（A40+B40+C40）

讲授

课程目标5

实验二

作业A50

期末考试B50

实验成绩C50

目标达成度5=（A5+B5+C5）/（C50+B50+C50）

5

九、推荐教材与主要参考书

（一）推荐教材：

青软实训，《Web前端设计与开发——HTML、CSS、JavaScript+HTML5+jQuery》、清华大学出版社，2022年1月第2次印刷

2. 聂常红，《Web前端开发技术》，人民邮电出版社，2022年4月。

（二）主要参考书：

1.胡军，刘伯成，刘晓强，《Web前端开发案例教程——HTML+CSS+JavaScript》，人民邮电出版社，2015年5月

2.党建，《Web前端开发最佳实践》，机械工业出版社，2015 年1月。

6