高等院校课程设计案例精编HTML5+CSS3+JAVASCRIPT网页设计经典课堂/杨艳等

目录

Chapter / 01
HTML5 入门**
1.1 认识HTML5 2
1.1.1 HTML 发展历程 2
1.1.2 HTML5 和H5 的区别 2
1.2 新的特性 3
1.2.1 兼容性 3
1.2.2 化繁为简 3
1.2.3 通用访问 4
1.2.4 标准改进 4
1.3 为何使用HTML5 4
1.3.1 页面的交互性能更强大 5
1.3.2 字符集和DO CTYPE 的改进 6
1.3.3 HTML5 的优势 6
1.4 元素的分类 8
1.4.1 结构性元素 8
1.4.2 级块性元素 9
1.4.3 行内语义性元素 9
1.4.4 交互性元素 9
1.5 新增元素 10
1.6 新增属性 16
1.6.1 表单相关属性 16
1.6.2 其他相关属性 16
1.7 课堂练习 17
强化训练 18
Chapter / 02
在页面中绘图
2.1 canvas 入门 20
2.1.1 canvas 含义 20
2.1.2 canvas 坐标 20
2.2 使用canvas 21
2.2.1 在页面中加入canvas 21
2.2.2 绘制矩形和五角形 22
2.2.3 检测浏览器是否支持 25
2.3 绘制曲线路径 26
2.3.1 绘制路径的方法 26
2.3.2 描边样式的使用 27
2.3.3 填充和曲线的绘制方法 28
2.4 绘制图像 30
2.4.1 使用canvas 插入图片 30
2.4.2 渐变颜色的使用 31
2.4.3 变形图形的设置方法 33
2.4.4 组合图形的绘制方法 34
2.4.5 使用canvas 绘制文字 35
2.5 课堂练习 37
强化训练 39
Chapter / 03
制作新型的表单
3.1 新的表单元素 42
3.1.1 datalist 元素 42
3.1.2 keygen 元素 42
3.1.3 output 元素 43
3.2 新的表单属性 44
3.2.1 form 属性 44
3.2.2 formaction 属性 45
3.2.3 placeholder 属性 45
3.2.4 list 属性 46
3.2.5 min 和max 属性 46
3.2.6 novalidate 属性 47
3.2.7 multiple 属性 47
3.2.8 step 属性 48
3.3 表单的输入型控件 48
3.3.1 Input 类型E-mail 48
3.3.2 Input 类型url 49
3.3.3 Input 类型number 49
3.3.4 Input 类型range 50
3.3.5 Input 类型Date Pickers 50
3.3.6 Input 类型color 51
3.4 制作一个表单 52
3.5 课堂练习 54
强化训练 56
Chapter / 04
地理位置请求
4.1 关于地理位置信息 58
4.1.1 经度和纬度坐标 58
4.1.2 IP 地址定位数据 58
4.1.3 GPS 和Wi-Fi 地理定位数据 58
4.1.4 用户自定义的地理定位 59
4.2 浏览器对Geolocation 的支持 59
Contents
Contents
4.2.1 GeolocationAPI 概述 59
4.2.2 Geolocation 的浏览器支持情况 62
4.3 隐私处理 62
4.3.1 应用隐私保护机制 62
4.3.2 处理位置信息 62
4.4 使用Geolocation API 63
4.4.1 检测浏览器是否支持 63
4.4.2 位置请求 64
4.5 在地图上显示位置 66
4.6 课堂练习 69
强化训练 71
Chapter / 05
拖曳上传的应用
5.1 拖放API 74
5.1.1 实现拖放API 的过程 74
5.1.2 dataTransfer 对象的属性与方法 74
5.2 拖放API 的应用 75
5.2.1 拖放应用 75
5.2.2 拖放列表 76
5.3 课堂练习 78
强化训练 80
Chapter / 06
CSS3 选择器
6.1 CSS 选择器 82
6.1.1 三大基础选择器 82
6.1.2 集体选择器 85
6.1.3 属性选择器 86
6.2 CSS3 入门 88
6.2.1 CSS3 与之前版本的异同点 88
6.2.2 CSS3 新增的长度单位 88
6.2.3 CSS3 新增结构性伪类 90
6.2.4 CSS3 新增UI 元素状态伪类 95
6.2.5 CSS3 新增属性 97
6.3 课堂练习 101
强化训练 102
Chapter / 07
CSS3 设计动画
7.1 过渡基础 104 Contents
7.1.1 过渡属性 104
7.1.2 浏览器支持情况 104
7.2 实现过渡 105
7.2.1 单项属性过渡 105
7.2.2 多项属性过渡 105
7.2.3 利用过渡设计电脑桌面 107
7.3 实现动画 108
7.3.1 浏览器支持情况 108
7.3.2 动画属性 109
7.3.3 实现动画效果 111
7.4 课堂练习 112
强化训练 114
Chapter / 08
多彩的样式设计
8.1 设置多彩的文本样式 116
8.1.1 设置文本阴影 116
8.1.2 设置文本溢出 124
8.1.3 给文本换行 125
8.1.4 把单词拆分 127
8.1.5 设置圆角边框 128
8.1.6 设置盒子阴影 128
8.2 页面中多彩颜色的设置 130
8.2.1 使用HSL 颜色值 130
8.2.2 使用HSLA 颜色值 134
8.3 课堂练习 135
强化训练 137
Chapter / 09
CSS3 用户的交互界面
9.1 自适应显示效果 140
9.1.1 多媒体查询语法 140
9.1.2 多媒体查询方法 140
9.1.3 自适应的导航栏 142
9.2 用户界面简介 146
9.2.1 让用户自调尺寸 146
9.2.2 调整方框的大小 147
9.2.3 修饰外形轮廓样式 150
9.2.4 界面的多列布局 151
9.3 课堂练习 153
强化训练 154
Chapter / 10
弹性盒子模型
10.1 盒子模型 156
10.1.1 盒子简介 156
10.1.2 外边距设置 156
10.1.3 外边距合并 158
10.1.4 内边距设置 161
10.2 弹性盒子 161
10.2.1 弹性盒子基础 161
10.2.2 对父级容器的设置 162
10.2.3 对子级内容的设置 170
10.3 课堂练习 174
强化训练 176
Chapter / 11
颜色渐变和图形转换
11.1 渐变 178
11.1.1 浏览器支持 178
11.1.2 线性渐变 179
11.1.3 径向渐变 180
11.2 2D 转换 181
11.2.1 移动translate() 181
11.2.2 旋转rotate() 182
11.2.3 缩放scale() 183
11.2.4 倾斜skew() 185
11.3 3D 转换 186
11.3.1 rotateX() 方法 186
11.3.2 rotateY() 方法 188
11.3.3 转换属性 188
11.3.4 3D 转换方法 192
11.4 课堂练习 192
强化训练 194
Chapter / 12
JavaScript 入门必学
12.1 JavaScript 入门 196
12.1.1 JavaScript 的发展 196
12.1.2 JavaScript 的特点 196
12.1.3 JavaScript 应用方向 197
12.1.4 JavaScript 的用法 197
12.2 JavaScript 的基本语法 199
12.2.1 数据类型 200
12.2.2 常量和变量 202
12.2.3 运算符和表达式 203
12.2.4 基本语句 209
12.3 JavaScript 事件分析 213
12.3.1 事件类型 214
12.3.2 事件句柄 217
12.3.3 事件处理 218 Contents
12.4 课堂练习 219
强化训练 220
Chapter / 13
特效应用
13.1 JavaScript 函数 222
13.1.1 JavaScript 函数定义 222
13.1.2 JavaScript 函数参数 224
13.1.3 JavaScript 函数调用方法 227
13.2 JavaScript 应用表单 228
13.2.1 按钮对象 228
13.2.2 复选框对象 229
13.2.3 列表框对象 230
13.3 JavaScript 事件分析 231
13.3.1 轮播图效果 231
13.3.2 字体闪烁效果 235
13.3.3 鼠标滑过效果 235
13.4 JavaScript 特效制作 237
13.4.1 显示网页停留时间 237
13.4.2 制作定时关闭窗口 238
13.5 课堂练习 239
强化训练 240
Chapter / 14
综合实践应用
14.1 制作一颗流星 242
14.1.1 分析流星的尾部 242
14.1.2 绘制一颗流行 242
14.2 制作一场流星雨 244
14.2.1 制作流星星 244
14.2.2 鼠标移动的效果 246
参考文献 251