- 第1章 HTML语言基础
任务驱动
学习路线
本章目标
1.1 Internet起源
1.2 HTML概述
1.2.1 HTML发展过程
1.2.2 HTML文档结构
1.2.3 编写HTML文件的注意事项
1.2.4 文档类型声明和语言版本
1.3 HEAD元素
1.3.1 title元素
1.3.2 meta元素
1.4 文本元素
1.4.1 标题标签
- 1.4.2 文本修饰标签
1.4.3 特殊字符
1.5 文档结构元素
1.5.1 段落标签
1.5.2 换行标签
1.5.3 水平线标签
1.6 列表元素
1.6.1 有序列表
1.6.2 无序列表
1.6.2 定义列表
1.7 div与span标签
1.8 URL简介
1.9 图像标签
1.10 超链接标签
1.10.1 文本链接与锚点链接
- 1.10.2 图片链接与图片热区链接
1.10.3 其他超链接
1.10.4 超链接的target属性
1.11 贯穿任务实现
1.11.1 实现【任务1-1】
1.11.2 实现【任务1-2】
1.11.3 实现【任务1-3】
1.11.4 实现【任务1-4】
本章总结
小结
Q&A
章节练习
习题
上机
第2章 表格与框架
- 任务驱动
学习路线
本章目标
2.1 表格
2.1.1 表格的组成
2.1.2 表格的基本属性
2.1.3 单元格标签
2.1.4 行标签
2.1.5 表格的行分组
2.1.6 表格的列分组
2.1.7 表格的嵌套
2.2 框架
2.2.1 框架集的基本结构
2.2.2 框架集的属性
2.2.3 框架的属性
- 2.2.4 框架集的嵌套
2.2.5 内联框架
2.2.6 框架之间的链接
2.3 贯穿任务实现
2.3.1 实现【任务2-1】
2.3.2 实现【任务2-2】
本章总结
小结
Q&A
章节练习
习题
上机
第3章 表单
任务驱动
学习路线
- 本章目标
3.1 表单概述
3.2 表单标签
3.3 表单域
3.3.1 单行文本框
3.3.2 密码框
3.3.3 单选按钮
3.3.4 复选框
3.3.5 文件选择框
3.3.6 隐藏域
3.3.7 多行文本框
3.3.8 列表选择框
3.4 按钮控件
3.5 表单分组
3.6 贯穿任务实现
- 3.6.1 实现【任务3-1】
3.6.2 实现【任务3-2】
本章总结
小结
Q&A
章节练习
习题
上机
第4章 CSS语言基础
任务驱动
学习路线
本章目标
4.1 CSS概述
4.1.1 CSS发展史
4.1.2 CSS基本语法结构
- 4.2 CSS的使用
4.2.1 内嵌样式
4.2.2 内部样式表
4.2.3 外部样式表
4.2.4 样式表的优先级
4.3 CSS选择器
4.3.1 基本选择器
4.3.2 组合选择器
4.3.3 属性选择器
4.4 CSS样式属性
4.4.1 文本属性
4.4.2 字体属性
4.4.3 背景属性
4.4.4 表格属性
4.4.5 列表属性
- 4.4.6 分类属性
4.5 伪类与伪元素
4.5.1 伪类
4.5.2 伪元素
4.6 贯穿任务实现
4.6.1 实现【任务4-1】
4.6.2 实现【任务4-2】
本章总结
小结
Q&A
章节练习
习题
上机
第5章 CSS页面布局
任务驱动
-
学习路线
本章目标
5.1 盒子模型
5.2 内容区content
5.3 边框border
5.3.1 边框宽度
5.3.2 边框样式
5.3.3 圆角边框
5.3.4 边框阴影
5.3.5 图像边框
5.4 内边距padding
5.5 外边距margin
5.5.1 外边距的基本用法
5.5.2 外边距合并
5.6 DIV+CSS页面布局
-
5.7 贯穿任务实现
5.7.1 实现【任务5-1】
5.7.2 实现【任务5-2】
本章总结
小结
Q&A
章节练习
习题
上机
第6章 JavaScript语言基础
任务驱动
学习路线
本章目标
6.1 JavaScript简介
6.1.1 JavaScript发展史
- 6.1.2 JavaScript特点及规范
6.2 JavaScript使用形式
6.3 基本语法
6.3.1 标识符
6.3.2 关键字
6.3.3 数据类型
6.3.4 变量
6.3.5 注释
6.4 运算符
6.4.1 赋值运算符
6.4.2 算术运算符
6.4.3 比较运算符
6.4.4 逻辑运算符
6.4.5 三元运算符
6.5 流程控制
- 6.5.1 分支结构
6.5.2 循环结构
6.5.3 转移语句
6.5.4 with语句
6.6 函数
6.6.1 预定义函数
6.6.2 自定义函数
6.7 贯穿任务实现
6.7.1 实现【任务6-1】
6.7.2 实现【任务6-2】
本章总结
小结
Q&A
章节练习
习题
- 上机
第7章 JavaScript对象
任务驱动
学习路线
本章目标
7.1 JavaScript对象
7.2 Array数组对象
7.2.1 数组对象的创建
7.2.2 数组对象的属性
7.2.3 数组对象的常用方法
7.2.4 二维数组
7.3 String字符串对象
7.3.1 字符串的创建
7.3.2 字符串对象的常用方法
7.4 Date日期对象
- 7.4.1 Date对象的创建
7.4.2 Date对象的常用方法
7.5 Math数学对象
7.5.1 Math对象的属性
7.5.2 Math对象的方法
7.6 RegExp正则表达式对象
7.6.1 RegExp对象的创建
7.6.2 RegExp对象的方法
7.6.3 String与RegExp
7.7 自定义对象
7.7.1 原始方式
7.7.2 构造函数方式
7.7.3 原型方式
7.7.4 混合方式
7.7.5 JSON方式
- 7.8 贯穿任务实现
7.8.1 实现【任务7-1】
7.8.2 实现【任务7-2】
本章总结
小结
Q&A
章节练习
习题
上机
第8章 BOM与DOM编程
任务驱动
学习路线
本章目标
8.1 BOM和DOM模型
8.1.1 BOM模型
- 8.1.2 DOM模型
8.1.3 事件机制
8.2 window对象
8.2.1 window对象的属性
8.2.2 window对象的方法
8.3 location对象
8.4 history对象
8.5 navigator对象
8.6 document对象
8.6.1 document对象的属性
8.6.2 document对象的方法
8.7 Form对象
8.8 Table对象
8.9 DOM节点
8.10 事件处理
- 8.10.1 事件流和事件对象
8.10.2 鼠标事件
8.10.3 键盘事件
8.10.4 文档事件
8.10.5 表单及表单元素事件
8.11 贯穿任务实现
8.11.1 实现【任务8-1】
8.11.2 实现【任务8-2】
8.11.3 实现【任务8-3】
本章总结
小结
Q&A
章节练习
习题
上机
- 第9章 HTML 5基础
任务驱动
学习路线
本章目标
9.1 HTML 5概述
9.1.1 HTML 5发展史
9.1.2 HTML 5优势
9.2 HTML 5语法特征
9.2.1 HTML 5标记方式
9.2.2 HTML 5语法差异
9.3 HTML 5文档结构
9.3.1 HTML 5文档结构元素
9.3.2 HTML 5其他标签
9.3.3 HTML 5拖放API
9.4 HTML 5表单元素
- 9.4.1 HTML 5表单属性
9.4.2 新增的input标签
9.4.3 自定义表单验证
9.5 贯穿任务实现
9.5.1 实现【任务9-1】
9.5.2 实现【任务9-2】
9.5.3 实现【任务9-3】
本章总结
小结
Q&A
章节练习
习题
上机
第10章 HTML 5进阶
任务驱动
- 学习路线
本章目标
10.1 Canvas绘图
10.1.1 Canvas标签
10.1.2 CanvasRenderingContext2D对象
10.1.3 绘制图形
10.1.4 绘制图像
10.1.5 绘制文字
10.1.6 绘制路径
10.1.7 绘制圆弧
10.1.8 绘制渐变图形
10.1.9 图形坐标变换
10.2 多媒体播放
10.2.1 HTML 5的多媒体支持
10.2.2 HTML 5多媒体API
- 10.3 Web存储
10.3.1 Storage接口
10.3.2 Session Storage
10.3.3 Local Storage
10.4 本地数据库
10.4.1 SQLite数据库
10.4.2 IndexedDB数据库
10.5 Web Worker
10.5.1 Worker基本应用
10.5.2 Worker线程嵌套
10.6 贯穿任务实现
10.6.1 实现【任务10-1】
10.6.2 实现【任务10-2】
10.6.3 实现【任务10-3】
本章总结
- 小结
Q&A
章节练习
习题
上机
第11章 jQuery基础
任务驱动
学习路线
本章目标
11.1 jQuery概述
11.1.1 jQuery优势
11.1.2 搭建jQuery开发环境
11.1.3 DOM对象和jQuery对象
11.2 jQuery选择器
11.2.1 基本选择器
- 11.2.2 层次选择器
11.2.3 过滤选择器
11.2.4 表单选择器
11.3 jQuery基本操作
11.3.1 属性操作
11.3.2 样式操作
11.3.3 内容操作
11.4 jQuery事件处理
11.4.1 页面加载事件
11.4.2 事件绑定
11.4.3 解除事件绑定
11.4.4 事件对象
11.5 贯穿任务实现
11.5.1 实现【任务11-1】
11.5.2 实现【任务11-2】
- 11.5.3 实现【任务11-3】
本章总结
小结
Q&A
章节练习
习题
上机
第12章 jQuery进阶
任务驱动
学习路线
本章目标
12.1 jQuery文档处理
12.1.1 创建节点
12.1.2 插入节点
12.1.3 复制节点
- 12.1.4 删除节点
12.1.5 包裹节点
12.2 遍历节点
12.2.1 祖先遍历
12.2.2 后代遍历
12.2.3 同胞遍历
12.2.4 节点过滤
12.3 jQuery动画效果
12.4 数组和对象操作
12.5 jQuery插件
12.5.1 插件的基本原理
12.5.2 表格插件的实现
12.5.3 图表插件的实现
12.6 贯穿任务实现
12.6.1 实现【任务12-1】
- 12.6.2 实现【任务12-2】
12.6.3 实现【任务12-3】
本章总结
小结
Q&A
章节练习
习题
上机
附录A HTML 5新增和弃用标签
A.1 HTML 5新增的标签
A.2 HTML 5弃用标签
附录B HTML 5浏览器支持情况
附录C JSON语法
C.1 JSON简介
C.2 JSON基本结构
- C.3 JSON复杂结构
C.4 JSON解析方法
附录D 常用的校验正则表达式
附录E IE 11开发人员工具
E.1 开发人员工具简介
E.2 使用F12工具
学习路线
1.项目简介
“Q- Walking Fashion E&S漫步时尚广场”项目是一个基于购物、美食和娱乐为一体的综合性电子商务平台，系统由前台和后台两大部分组成：
● 前台功能主要包括：网站首页、用户注册与登录、购物模块、餐饮模块和影视模块；
● 后台功能主要包括：后台管理首页、商品管理模块、餐饮管理模块、影视管理模块和报表统计。
2.贯穿项目模块
“Q- Walking Fashion E&S漫步时尚广场”贯穿项目的实现穿插到《Web前端设计与开发》的所有章节中，每个章节的任务均是在前一章节的基础上进行实现，对项目逐步进行迭代、升级，最终形成一个完整的项目，并将Web前端课程重点技能点进行强化应用。
其中：
- ● 本教材中的贯穿项目实现并完成了前台的购物模块、用户注册和后台的管理首页、购物管理模块；
- ● 课后上机中的贯穿项目对前台的餐饮模块、用户登录和后台的餐饮管理模块进行练习强化；
- ● 本教材配套的实验手册中的贯穿项目实现并完成了前台网站的首页、影视模块以及后台的影视管理模块。
这三部分贯穿项目是并行的，并且项目的模块之间做到了对应一致，以便学生以教材为参照，经历“学习掌握——练习强化——复习巩固”的三个过程，并最终完成一个完整的大项目，确保并增强学生的动手实践能力。
3.基础章节任务实现
| 章 |
目标 |
贯穿任务实现 |
第1章
HTML语言基础 |
购物列表页面导航栏和展示区 |
【任务1-1】实现购物列表页面中的菜单导航栏
【任务1-2】实现购物列表页面中的左侧导航栏
【任务1-3】实现购物列表页面中的商品展示区
【任务1-4】实现购物列表页面中的版权区域 |
第2章
表格与框架 |
购物模块首页和后台管理页面 |
【任务2-1】实现购物模块首页的设计
【任务2-2】实现后台管理页面 |
第3章
表单 |
用户注册和商品添加 |
【任务3-1】实现用户注册页面
【任务3-2】实现后台管理模块-商品添加页面 |
第4章
CSS语言基础 |
CSS美化设计购物列表页面 |
【任务4-1】使用CSS样式美化购物列表页面中的菜单导航栏
【任务4-2】使用CSS样式美化购物列表页面中的商品展示区 |
第5章
CSS页面布局 |
购物列表的整体和局部布局 |
【任务5-1】使用CSS样式实现购物列表页面的整体布局
【任务5-2】使用CSS样式实现购物列表页面的左侧导航栏部分 |
第6章
JavaScript语言基础 |
后台模拟登陆和商品动态展示 |
【任务6-1】实现后台模拟登录
【任务6-2】实现购物列表页面的商品展示模块 |
第7章
JavaScript对象 |
图片轮播和热门随机推荐 |
【任务7-1】实现购物导航页面中的图片轮播效果
【任务7-2】实现购物列表页面中的热门随机推荐 |
第8章
BOM与DOM编程 |
三级菜单级联、表单验证 |
【任务8-1】实现注册页面中的省市区三级菜单级联
【任务8-2】实现注册页面中的表单验证
【任务8-3】在后台管理模块中，实现商品列表中的全选和反选效果 |
第9章
HTML 5基础 |
实现商品详情页面、重构商品添加页面 |
【任务9-1】实现商品详情页面的框架结构
【任务9-2】商品详情页面的整体实现
【任务9-3】使用HTML 5对后台中的商品添加页面进行重构 |
第10章
HTML 5进阶 |
商品切换、放大及拖拽特效 |
【任务10-1】实现商品详情页面中的商品切换效果
【任务10-2】实现商品详情页面中的放大镜效果
【任务10-3】实现购物列表中的购物车拖拽效果 |
第11章
jQuery基础 |
菜单折叠、表单验证等功能 |
【任务11-1】实现后台模块中的左侧树形菜单的折叠效果
【任务11-2】实现后台模块中的添加商品页面的表单验证功能
【任务11-3】实现后台模块中的商品列表页面的全选和反选效果 |
第12章
jQuery进阶 |
二级级联、表格操作和报表统计 |
【任务12-1】通过自定义插件实现商品类型的二级级联效果
【任务12-2】在后台商品列表页面中，实现表格行的添加与删除效果
【任务12-3】实现后台管理模块中报表统计功能 |
青软实训遵循教学与学习规律，精心打造《Web前端设计与开发》一书的配套资源，为了快速了解这套资源包。
精心设计，统一制作，上课使用，按照上课时讲解步骤播放采用动画。老师不再为制作PPT而烦恼，免费提供PDF版，可编辑版请与客服联系。
免费提供书中的示例源代码，贯穿项目的素材资源包请与客服联系。
