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

《Web前端技术》教学大纲

课程编号英文名称：Front-endDevelopmentofWeb

学分：2.5

学时：总学时48学时，其中理论16学时，实践32学时

先修课程：计算机导论

课程类别：专业拓展课

授课对象：大数据管理与应用专业学生

教学单位：商学院

修读学期：第4学期

一、课程描述和目标

《Web前端技术》是一门大数据管理与应用专业学生的专业拓展课程。

通过本课程，让学生学习有关Web前端技术所需的知识，学习Web前端常用的开发和调试工具，能用HTML技术设计Web页面，能用CSS对Web页面进行布局和美化，能用JavaScript实现Web页面的动态效果和交互功能，能设计和开发满足不同行业需求的Web前端应用。

课程目标1：学习Web前端技术所需的基础知识，包括HTML、CSS、JavaScript，培养Web前端技术的基本能力，包括代码编写、代码调试、页面优化。

课程目标2：能熟练使用Web前端技术的编辑工具软件，调试工具软件和发布工具软件。

课程目标3：能设计与开发满足不同行业需求的Web前端应用。

二、课程目标对毕业要求的支撑关系

毕业要求指标点

课程目标

权重

指标点1-3人文科学素养

课程目标1

M

指标点2-1大数据管理基础理论

课程目标2

M

指标点2-2理论知识整合学习能力

课程目标3

L

指标点2-3学科视野

课程目标2

L

指标点3-3专业知识与素养

课程目标3

M

三、教学内容、基本要求与学时分配

序号

教学内容

基本要求及重、难点（含德育要求）

学时

教学方式

对应课程目标

1

Web前端技术基础：

Web网站基本概念

Web网站工作原理

Web网站规范

Web前端技术工具

理解Web网站的概念和规范，理解Web网站工作原理，学会使用Web前端技术工具

德育要求：爱岗敬业

2

讲授式

演示式

课程目标1课程目标2

2

HTML模块：

HTML简介与结构

HTML文字、段落、图像、超链接、列表、表格、DIV、SPAN

HTML表单

理解HTML基本概念和规范，具备HTML代码编写能力，能应用HTML知识制作结构合理代码规范的Web前端应用。

德育要求：家国情怀

2

讲授式

演示式

练习式

课程目标1

课程目标2

3

CSS模块：

CSS简介与基本语法

CSS在HTML中的使用方法

CSS基本选择器

CSS复合选择器

CSS盒子模型

CSS定位

CSS页面布局

理解CSS基本概念和规范，具备CSS代码编写能力，理解CSS在Web开发中的作用，能够应用HTML与CSS知识设计和开发出结构合理、代码规范、样式美观的Web前端应用。

德育要求：工匠精神

4

讲授式

演示式

练习式

课程目标2

课程目标3

4

JavaScript模块：

JavaScript简介

JavaScript语法

JavaScript对象

浏览器对象

HTMLDOM对象

JQuery应用

Web应用部署

理解JavaScript基本概念和规范，具备JavaScript代码编写能力，了解在浏览器环境中调试JavaScript的方法，能应用HTML、CSS和JavaScript知识设计和开发出结构合理、代码规范、样式美观、具有动态效果的Web前端应用。了解Web前端应用部署方法。

德育要求：职业素养

4

讲授式

演示式

练习式

课程目标2

课程目标3

5

案例项目模块：

首页与商品详情

购物车管理

登录与册

订单管理与个人中心

浏览器调试技术

了解功能模块的设计与实现，掌握前浏览器和后端Java调试技术，掌握应用MVC模式进行Web开发。

德育要求：创新意识、团队协作

4

讲授式

演示式

练习式

课程目标3

合计

16

序号

实验项目

实验内容与要求

学时

类型

对应课程目标

1

HTML表单应用

实验要求：必修。

实验内容：计一个问卷调查Web页面，调查内容三选一（手机使用习惯，微博使用习惯，游戏娱乐习惯）。具体要求：包含表单的下列元素text，radio，checkbox，select，textarea，submit，reset，具体调查内容自定义

4

设计

课程目标1

课程目标2

2

CSS基础应用

实验要求：必修。

实验内容：完成7个局部Web页面的CSS样式代码编写，给出HTML代码和样式要求，学生完成CSS代码编写。

4

设计

课程目标1

课程目标2

3

CSS综合应用

实验要求：必修。

实验内容：完成2个完成页面的布局，给出HTML代码和Web页面效果图，学生完成页面布局的CSS代码编写。

Web页面1固定宽度居中2列型布局，要求综合使用CSS页面布局技术；Web页面2自适应宽度2列型布局，要求综合使用CSS页面布局技术。

8

设计

课程目标2

课程目标3

4

JavaScript应用