《Web前端开发》教学大纲
课程英文名Front-end Development of Web课程代码C0809Y06学分  2.5总学时40 理论学时20 实验/实践学时20 课程类别专业课课程性质选修先修课程多媒体技术
适用专业计算机科学与技术开课学院信息工程学院
执笔人审定人制定时间2020 年12月
注：课程类别是指公共基础课/学科基础课/专业课；课程性质是指必修/限选/任选。
一、课程地位与课程目标
（一）课程地位
Web前端开发是计算机科学与技术专业及相关专业学生的选修课。随着IT技术的发展，用户对技术与艺术结合的要求越来越高，在界面设计、视觉设计、交互设计、用户体验等方面提出了越来越高的要求和标准。这门课程的任务就是要培养出比美工更懂技术、比技术更懂交互的复合型人才——前端开发工程师。课程内容主要有HTML、CSS、JavaScript、HTML5以及主流的JS库（JQuery、Angular、bootstrap、JsCharts、HighCharts）与JS游戏开发包。
（二）课程目标
课程目标毕业要求目标分类
1.熟悉HTML标记语言的基本元素和标签，包括图像、超链接、表格、表单、框架等标签，通过上机实践掌握这些标签的使用格式和各种属性，能做到灵活运用，设计好网页的基本架构。毕业要求4、5 记忆
理解
应用
2.了解CSS的发展历史和基本结构，掌握CSS选择器的
各种类型及其属性，熟练利用CSS+DIV的对网页布局。毕业要求4、5 记忆理解应用
3.了解JavaScript语言的发展历史，熟悉 JavaScript 的基本语法，掌握JavaScript各种对象的定义和使用，理解和掌握JavaScript中BOM和DOM两种对象模型的意义和使用，能够熟练利用JavaScript技术实现网页客户端的灵活交互功能、音视频的播放、图像界面的生成、客户端数据处理等。毕业要求4、5 记忆
理解
应用
4．了解HTML5的新特性、新功能，理解和掌握HTML5在Canvas绘图、多媒体播放、Web存储、Web Worker以及本地数据库中的应用，能够利用这些新技术丰富网站的功能，是交互跟人性化。毕业要求2、4、5 记忆
理解
应用
5．了解jQuery优势、特点和开发环境的搭建，熟悉jQuery的基本操作、插件使用和事件处理方法，掌握毕业要求4、5 记忆
理解
jQuery的基本选择器、过滤选择器、表单选择器的正确
使用方法以及jQuery动画效果、数组和对象的操作，精
通jQuery的文档处理、节点遍历等方法。能够熟练利用
jQuery技术动态修改页面内容、页面的样式，添加动态
效果，获取DOM的元素内容。
应用
6.了解JavaScript包含的各种游戏开发包，熟悉和掌握LimeJS、melonJS、gameQuery、EntityJS、FlashJS、Famo.us、Gamvas Web、EaseJS等其中一种开发包的使用方法。毕业要求4、5 记忆
理解
应用
二、课程目标达成的途径与方法
课程目标教学环节对应内容
课程目标1讲授第1、2、3章
完成课后习题与实验
第1章HTML语言基础
第2章表格与框架
第3章表单
课程目标2
讲授第4、5章
完成课后习题与实验第4章CSS语言基础第5章CSS页面布局
课程目标3讲授第6、7、8章
完成课后习题与实验
第6章JavaScript语言基础
第7章JavaScript对象
第8章BOM与DOM编程
课程目标4
讲授第9、10章
完成课后习题与实验第9章HTML5基础第10章HTML5进阶
课程目标5
讲授第11、12章
完成课后习题与实验第11章jQuery基础第12章jQuery进阶
三、课程目标与相关毕业要求的对应关系
课程目标对毕业要求的支撑程度（H、M、L）课程目标
毕业要求2 毕业要求4 毕业要求5 课程目标1M M
课程目标2M M
课程目标3H M
课程目标4M H M
课程目标5H M
四、课程主要内容与基本要求
1. 概论
了解WEB前端工程师的职业需求；了解WEB前端开发技术：HTML、CSS、JavaScript、DOM、BOM、AJAX；了解WEB前端开发工具；了解WEB前端浏览工具。
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、Famo.us、Gamvas Web、Kivi.JS、CreateJS、QuarkJS、ImpactJS、GameJS、Easystar.js、Egret、Cocos2d-x、NodeJS、EaseJS，掌握其中的任意2种，其中1种由老师教，另外一种由学生自学并掌握。
五、课程学时安排
5
jQuery基础
jQuery进阶8
利用jQuery实现菜单
折叠、表单验证、二级
级联、表格操作和报表
统计功能
课程目标5 六、实践环节及基本要求
序号实验项目名称
学
时
基本要求学生任务
实验
性质
实验
类别
1 HTML语言基础
2 熟悉HTML各种标
签元素的基本用法
做一个个人简历验证性
web前端开发技术第三版pdf
必做
2表单、表格与框架  2 掌握表单、表格和
框架元素的使用完善个人简历验证性
必做
3 CSS样式基础  2 掌握CSS样式的格
式、引用方式
给个人网站写一个CSS文件验证性
必做
4 CSS+DIV页面布局  2 掌握页面的样式统
一和布局方法
整体布局和局部布局验证性
必做
5 JavaScript语言基础  2 掌握JS的基本语
法、数据类型、分
支语句、循环语句、
函数等的使用
设计后台登录和购物车商品
展示
验证性
必做
6 JavaScript对象  2 掌握JS各种对象
的属性和方法的引
用
实现页面的图片轮播、热门随
机推荐、页面动态效果
验证性
必做
7 BOM与DOM编程  2 掌握BOM、DOM
两种模型的使用
实现三级菜单级联、表单验证验证性
必做
8 HTML5基础与进阶  2 掌握HTML5的新
功能
实现商品详情页、重构商品添
加页面、商品切换、放大和拖
曳功能。
验证性
必做
9 jQuery基础与进阶  2 掌握jQuery的基
本操作、事件处理、
文档处理、动画效
果等功能。
实现菜单折叠、表单验证、二
级级联、表格操作和报表统计
等功能
验证性
必做
10 设计一个购物网站
或者设计一个Web
游戏
2
Web前端的开发知
识点综合应用
设计一个购物网站或Web游
戏
设计性
必做
注：1.实验性质指演示性、验证性、设计性、综合性等；2.实验类别指必做、选做等。
七、考核方式、成绩评定
考核内容考核方式评定标准（依据）占总成绩比例
过程考核含到课率、课堂讨论发言、平时
作业等
点名记录
讨论发言记录
作业批改成绩
10%
实验考核操作验收操作成绩
40%
期末考核论文+验收论文和验收成绩50%
考核类别考查
成绩登记方式百分制
八、课程目标达成度评价方法
课程目标教学环节成绩评定
作业A10
讲授
期末验收B10
实验实验成绩C10课程目标1
目标达成度1=（A1+B1）/（A10+ B10+ C10）
作业A20
讲授
期末验收B20
实验实验成绩C20课程目标2
目标达成度2=（A2+B2）/（A20+ B20+ C20）
作业A30
讲授
期末考试B30
实验实验成绩C30课程目标3
目标达成度3=（A3+B3+C3）/（A30+B30+C30）
作业A40
讲授
期末考试B40
实验实验成绩C40课程目标4
目标达成度4=（A4+B4+C4）/（A40+B40+C40）
作业A50
讲授
期末考试B50
实验二实验成绩C50课程目标5
目标达成度5=（A5+B5+C5）/（C50+B50+C50）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。