Web前端设计教学大纲
适用专业：计算机科学与技术、软件工程、物联网
课程类别：专业基础课
课程学时：建议68学时
一、课程性质
《Web前端设计基础》课程是计算机科学与技术、软件工程、物联网工程专业的一门专业基础课程，以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML5、CSS3以及JavaScript脚本语言的相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习后续课程打下良好的基础。
二、课程教学目标与基本要求
本课程的教学目标是让学生理解HTML5、CSS3以及JavaScript脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过项目实训，培养学生具备设计实现Web客户端页面的初步能力。
本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；能够熟练运用HTML5中的文字、链接、列表、表格、表单、图像、多媒体等标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法；掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编写客户端脚本程序。
三、课程内容
其中标记★为难点
第1章Web技术概述
1.1Internet概述
1.1.1理解TCP/IP
1.1.2理解主机和IP地址
1.1.3理解域名和DNS
1.2Web概述
1.2.1了解Web历史
1.2.2★掌握Web体系结构
1.2.3理解基本Web技术
1.2.4了解Web服务器
1.3超文本与标记语言
1.3.1掌握超文本与超媒体
1.3.2掌握标记语言
1.4Web标准
1.4.1★掌握Web标准体系
1.4.2了解采用Web标准的优势
1.5浏览器
1.5.1了解浏览器的发展史
1.5.2了解浏览器的内核
1.5.3了解常用浏览器
1.5.4掌握标准浏览器
1.6Web开发工具
1.6.1掌握JetBrainsWebStorm
1.6.2掌握测试和调试环境
第2章初识HTML5
2.1HTML5基础
2.1.1掌握HTML5文档结构
2.1.2掌握元素与标签
2.1.3掌握属性
2.1.4掌握语法规则
2.2WebStorm基础
2.2.1掌握WebStorm基本操作
2.2.2了解WebStorm快捷键
2.3文档结构元素
2.3.1掌握html标签
2.3.2掌握head标签
2.3.3掌握body标签
2.4头部元素
2.4.1掌握title标签
2.4.2★掌握meta标签
2.5为叮叮书店首页添加元信息
第3章HTML5内容结构与文本
3.1HTML5结构标签
3.1.1掌握header标签
3.1.2掌握main标签
3.1.3掌握nav标签
3.1.4掌握article标签
3.1.5掌握section标签
3.1.6掌握aside标签
3.1.7掌握footer标签
3.1.8理解details和summary标签
3.1.9★掌握div标签
3.1.10理解span标签
3.2HTML5基础标签
3.2.1掌握标题
3.2.2掌握段落
3.2.3掌握换行符
3.2.4理解注释
3.3HTML5格式化标签
3.3.1理解文本格式化标签
3.3.2理解引用和术语定义标签
3.3.3理解HTML5新增格式标签
3.4HTML5列表
3.4.1掌握无序列表
3.4.2掌握有序列表
3.4.3掌握定义列表
3.5掌握叮叮书店首页内容结构的建立
3.5.1分析设计页面内容结构
3.5.2用HTML5结构标签确定页面内容结构
3.5.3填加文本内容
3.5.4在浏览器中预览
第4章HTML5超连接
4.1a标签
4.1.1掌握href属性
4.1.2掌握target属性
4.1.3掌握使用id属性
4.2HTML5字符集与颜色
4.2.1理解HTML5字符集
4.2.2掌握HTML5字符实体
4.2.3掌握HTML5颜色
4.3.4了解HTML5颜色名
4.3掌握叮叮书店首页超连接的使用
第5章HTML5多媒体
5.1HTML5图像
5.1.1掌握img标签
5.1.2了解map标签和area标签
5.1.3理解figure标签和figcaption标签
5.2HTML5音视频
5.2.1掌握HTML5视频
5.2.2掌握HTML5音频
5.3了解embed标签
5.4掌握叮叮书店首页图像的使用
第6章HTML5表格
6.1表格结构和表格标签
6.1.1理解表格结构
6.1.2掌握表格标签
6.2常用表格标签
6.2.1掌握table标签
6.2.2掌握tr标签
6.2.3掌握td标签
6.2.4理解col标签
6.2.5了解thead、tbody和tfoot标签
6.3掌握叮叮书店购物车页面的建立
第7章HTML5表单
7.1表单的基本知识
7.1.1掌握什么是表单
7.1.2掌握form标签
7.2表单域
7.2.1掌握input标签
7.2.2掌握textarea标签
7.2.3掌握label标签
7.2.4理解fieldset标签
7.2.5掌握select标签
7.2.6掌握option标签
7.2.7了解optgroup标签
7.2.8掌握button标签
7.2.9理解datalist标签
7.2.10理解output标签
7.3掌握叮叮书店联系我们页面的建立
7.4掌握为叮叮书店首页添加站内搜索
第8章CSS基础
8.1了解CSS概述
8.2掌握CSS语法
8.3掌握CSS常用选择器
8.4★掌握CSS3选择器
8.5CSS属性
8.5.1掌握CSS属性
8.5.2掌握CSS属性值和单位
8.5.3掌握CSS3属性值和单位
8.6掌握使用CSS
8.7掌握媒体查询
8.8★了解层叠样式
8.9了解使用Chrome开发者工具检查编辑页面及样式
第9章页面布局定位
9.1CSS盒模型
9.1.1理解CSS盒模型概述
9.1.2掌握CSS内边距
9.1.3掌握CSS边框
9.1.4掌握CSS3边框
9.1.5掌握CSS外边距
9.1.6理解CSS轮廓
9.2CSS布局
9.2.1★掌握盒模型显示类型
9.2.2★掌握CSS3伸缩盒布局
9.2.3理解CSS浮动
9.2.4掌握可见与溢出
9.3CSS定位
9.3.1掌握position属性
9.3.2掌握z-index属性
9.4基本布局模板
9.4.1掌握固定（液态）布局
9.4.2★掌握弹性伸缩布局（响应式Web设计）
9.5掌握叮叮书店首页布局样式设计
第10章元素外观属性
10.1背景
10.1.1掌握CSS背景
10.1.2掌握CSS3背景
10.1.3掌握CSS3透明度
10.2字体
10.2.1掌握指定字体
10.2.2掌握指定大小
10.2.3理解字体风格
10.2.4理解字体粗细
10.2.5★掌握CSS3服务器端字体
10.3文本与修饰
10.3.1掌握文本
10.3.2掌握修饰
10.4CSS3文本效果
10.4.1掌握阴影
10.4.2理解换行
10.5掌握CSS3多列
10.6掌握列表
10.7理解尺寸
10.8表格
10.8.1理解表格属性
10.8.2掌握表格边框控制
10.8.3理解改善表格显示效果
10.8.4叮叮书店购物车页面表格样式设计
10.9掌握叮叮书店首页外观样式设计
10.9.1文本
10.9.2背景
10.9.3其他细节
第11章伪类和伪元素
11.1CSS伪类
11.1.1掌握超连接伪类
11.1.2★理解结构性伪类
11.1.3掌握子元素伪类
11.1.4掌握UI元素状态伪类
11.2理解CSS伪元素
11.3★掌握CSS内容
第12章CSS3变换、过渡和动画
12.1掌握变换
12.2★掌握过渡
12.3掌握动画
12.4掌握叮叮书店首页超链接、伪类和动画样式设计
第13章默认样式和页面内容样式设计
13.1默认样式
13.1.1了解HTML默认样式
13.1.2了解浏览器默认样式
13.2页面内容样式设计
13.2.1掌握导航菜单
13.2.2掌握图文混排
第14章网站制作流程与发布
14.1了解网站制作流程
14.2了解模板
14.3掌握基于模板建立叮叮书店其他页面
14.3.1书籍分类（category.html）
14.3.2特刊降价（specials.html）
14.3.3联系我们（contact.html）
14.3.4关于我们（about.html）
14.3.5详细内容（details.html）
14.3.6购物车（cart.html）
14.4网站发布
14.4.1了解Tomcat服务器安装使用
14.4.2了解发布
第15章JavaScript和ECMAScript基础
15.1JavaScript简介
15.1.1了解JavaScript历史
15.1.2理解JavaScript组成
15.1.3掌握JavaScript使用
15.1.4掌握JavaScript消息框
15.1.5了解开发者工具Console
15.2ECMAScript基础
15.2.1掌握ECMAScript语法基础
15.2.2掌握ECMAScript变量
15.2.3了解ECMAScript关键字和保留字
15.2.4掌握ECMAScript基本数据类型
15.2.5掌握ECMAScript类型转换
15.3掌握ECMAScript运算符
15.3.1一元运算符
15.3.2算术运算符
15.3.3关系运算符
15.3.4逻辑运算符
15.3.5其他运算符
第16章算法和ECMAScript语句
16.1了解算法
16.1.1算法的概念
16.1.2简单算法举例
16.1.3算法特性
16.1.4算法与程序
16.2掌握ECMAScript语句
16.2.1条件语句
16.2.2循环语句
16.2.3break和continue语句
16.3了解使用WebStorm和GoogleChrome调试JavaScript脚本程序
16.4掌握使用Sources调试JavaScript脚本程序
第17章行为与对象
17.1行为
17.1.1掌握ECMAScript函数
17.1.2掌握ECMAScript闭包
17.1.2★掌握HTML事件
17.2ECMAScript对象
17.2.1理解对象
17.2.2★理解使用对象
17.2.3掌握ECMAScript引用类型
17.2.4掌握ECMAScript对象类型
17.3了解错误处理
17.4内置对象和本地对象
17.4.1掌握Math对象
17.4.2★理解Global全局对象
17.4.3掌握Array对象
17.4.4掌握Date对象
17.5掌握叮叮书店首页显示日期和时间
第18章DOM
18.1DOM概述
18.1.1了解DOM简介
18.1.2掌握节点的节点树
18.2DOM对象
18.2.1理解Node对象
18.2.2★理解HTMLElement对象
18.2.3理解HTMLDocument对象
18.2.4掌握访问节点
18.3DOM与CSS
18.3.1理解Style对象
18.3.2理解CurrentStyle对象
18.3.3理解StyleSheet对象
18.4掌握叮叮书店首页图片轮播广告的实现
第19章HTMLDOM对象和RegExp对象
19.1HTMLDOM对象
19.1.1掌握Document对象
19.1.2掌握Image对象
19.1.3掌握Anchor对象
19.1.4★掌握Event对象
19.1.5掌握Checkbox和Radio对象
19.1.6理解FileUpload对象
19.1.7掌握Text和Password对象
19.1.8理解Textarea对象
19.1.9掌握Select和Option对象
19.1.10掌握Submit、Reset和Button对象
19.1.11掌握Form对象
19.1.12了解一个小游戏——剪子石头布
19.2理解RegExp对象
19.3掌握叮叮书店联系我们页面表单数据验证
第20章HTML5DOM
20.1canvas对象
20.1.1掌握canvas基础
20.1.2掌握使用路径
20.1.3掌握绘制文本
20.1.4掌握绘制图像
20.2★掌握HTML5拖放
20.3HTML5数据存储
20.3.1了解sessionStorage对象
20.3.2了解localStorage对象
20.4掌握叮叮书店书籍分类页面拖放图书到购物车
第21章BOM
21.1BOM对象
21.1.1掌握window对象
21.1.2掌握navigator对象
21.1.3理解screen对象
21.1.4理解location对象
21.1.5理解history对象
21.2★理解元素大小与位置
21.3掌握叮叮书店首页浮动广告
第22章Ajax与JSON
22.1掌握Ajax
22.2XMLHttpRequest对象
22.1.1掌握创建XMLHttpRequest对象
22.1.2★掌握XMLHttpRequest请求
22.1.3★掌握XMLHttpRequest响应
22.3JSON
22.3.1掌握JSON语法
22.3.2掌握JSON使用
第23章jQuery入门
23.1jQuery基础
23.1.1了解添加jQuery库
23.1.2了解jQuery语法
23.2了解特效和动画
23.3了解HTML操作
23.4了解AJAX函数
23.5了解叮叮书店试读页面的建立
四、学时分配
教学周次
教学内容
教学环节（学时）
讲课
习题
实验
上机
课外
小计
1
第1章Web技术概述
2
2
2
2
第2章初识HTML5
2
2
2
3
第3章HTML5内容结构与文本
2
2
4
4
第4章HTML5超连接
第5章HTML5多媒体
2
2
2
5
第6章HTML5表格
第7章HTML5表单
2
2
4
6
第8章CSS基础
2
2
2
7
第9章页面布局定位
2
2
2
8
第9章页面布局定位
2
2
4
9
第10章元素外观属性
2
2
4
10
第11章伪类和伪元素
2
2
2
11
第12章CSS3变换、过渡和动画
2
2
4
12
第13章页面内容样式设计
第14章网站制作流程与发布
2
2
2
13
第15章ECMAScript基础
第16章ECMAScript语句
2
2
2
14
第17章行为与对象
2
2
4
15
第18章DOM
第19章HTMLDOM对象
2
2
4
16
第20章HTML5DOM
2
2
4
17
第21章BOM
第22章Ajax与JSON
2
2
2
总计
34
18
16
68
五、实验安排
本课程需要安排实验课，以引导学生正确运用所学知识解决实际问题，实验方法和步骤参见教材。
序号
教学周次
实验名称
类型
学时
1
3
HTML5内容结构和文本
综合
2
2
4
HTML5超连接和多媒体
综合
2
3
5
HTML5表格和表单
综合
2
4
8
CSS3布局与定位
综合
2
5
9
CSS3元素外观样式设计
综合
2
6
11
CSS3动画
综合
2
7
14
行为与对象及DOM
综合
2
8
15
HTMLDOM表单数据验证
综合
2
9
16
HTML5DOM
综合
2
六、考核方式及要求
考核方式为考查，成绩为百分制，再折合成优秀、良好、中等、及格、不及格。
总成绩=平时成绩（45%）+课堂实验（25%）+实验测试（30%）
平时过程考核标准细则
预习作业（20%）
把预习记录和预习思考题及课下作业写在固定笔记本上，每学期批阅4次，每次满分5分。评分标准：
预习记录和预习思考题及课下作业完整并正确。（5分）。
预习记录和预习思考题及课下作业完整但有个别错误。（4分）。
预习记录和预习思考题及课下作业完整但错误较多。（3分）。
预习记录和预习思考题及课下作业不完整但正确。（未完成作业）（2分）
预习记录和预习思考题及课下作业不完整并且有错误。（未完成作业）（1分）
未及时交作业或复制抄袭。（0分）
特别说明：如果多人预习作业完全一样，先批阅的按正常评分标准给分，后续批阅的依次降2分，一直到零分。
学习状态（10%）
出勤：病事假以请假条为准，没有请假条一律视为旷课，没有急特殊情况请假条不允许后补，缺勤一次扣2.5分。请假超过4次以上，超过部分不能参加平时过程考核，旷课超过4次以上视为放弃课程考核。
学习状态：学习状态差如迟到、早退、上课吃零食、睡觉、玩游戏等每发现一次扣2分。
平时测试（15%）
平时测试共3次，每次5分，按卷面分记载。
课堂实验（25%）
课堂实验从所有实验中选取5次记入考核成绩，每次满分5分。评分标准：
完成实验、代码正确，能够在标准浏览器正确显示。（5分）。
完成实验、代码不正确，能够在标准浏览器正确显示。（4分）。
完成实验、代码不正确，不能够在标准浏览器正确显示。（3分）。
未完成实验、代码正确。（2分）。
未完成实验、代码不正确。（1分）。
未提交实验。（0分）
复制抄袭：发现抄袭或复制者，第一次记为最低等，也就是零分，第二次直接在期末总成绩中扣减20分。
实验测试
在规定时间内（90分钟）完成一个指定形式主页的建立。评分标准如下：
评分项
分值30分
文档结构
3分
内容填充
3分
标准布局
4分
导航菜单
2分
内容样式
6分
脚本代码
8分
整体效果
4分
七、教材
扫描，优惠购书
作者：张树明
定价：79.50元
ISBN：6
出版日期：.04.01
本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识，对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解，内容翔实，结构合理，语言精练，表达简明，实用性强，易于自学。
全书共分23章。第1章介绍了Web技术的基本概念、Web体系结构、超文本与标记语言、Web标准的组成和常用浏览器；第2～7章重点介绍了Web标准的结构推荐标准HTML5的常用元素的标签语句及应用；第8～13章介绍了Web标准的表现推荐标准CSS3的常用属性及应用；第14章介绍了网站制作流程与发布过程；第15～22章介绍了Web标准的行为标准ECMA-的ECMAScript基础和JavaScript脚本语言；第23章介绍了JavaScript框架jQuery的入门知识。扫描每章提供的
