在作者近十余年的Web技术课程教学实践中,每逢在网上书店或者实体书店为新学期的课程选定教材时,面对琳琅满目的前端开发图书时,感激和期待便油然而生。感激有这么多技术大伽、一线教师、从业人员关注和研究这个领域,并不辞劳苦地分享各自的研究、开发实践和教学心得。与此同时,Web技术类的图书越多,难免我的期待越高,期望这次总应该能找到符合我们专业的教材,可当翻阅完了书架上所有相关图书时,难免丝丝失望和无奈,现有图书多以HTML5、CSS3、JavaScript技术罗列为主导,又或者以某个软件的功能模块为主导,多侧重于介绍Web技术孤立的知识和技术,没能融入前端开发工作过程任务间的衔接和工作情境,对初学者认识和实践中的误区没有给予指导解惑,而不是以培养学习者前端开发能力的为主导,不是以培养学习者透析前端开发模式为主导,同时现有教材也忽视了教师组织课堂教学的需要,没有开展教与学过程分析,没有兼顾好教学内容组织和教学过程组织,给教师教学设计和学生能力和知识的构建没有做好铺垫,教师不好用,学生不乐意学。由此感慨等一本符合自己课程需求的教材怎么会要这么久,难道真的要一万年吗?2016年10月26日~28日,工业和信息化职业教育教学指导委员会计算机专指委在大连召开数字媒体应用技术专业建设研讨会,研讨会由大连东软信息学院、东软电子出版社承办,研讨会非常成功,来自全国的数字媒体类参会人员交流的心得,提出了各自的期待和需求,出版社领导和编辑鼓励大家结合课程教学需求开发配套教材和资源,由此激发了我编著此本的决心和奢求。
我的期望在于,以学习者胜任前端工程师岗位工作任务为目标,循序渐进,掌握HTML5、CSS3、JavaScript、jQuery等技术综合应用,熟悉WebStorm开发环境,适应网页前端开发工作的规范化、模块化和组件化岗位要求。以任务导入激发学习者学习积极性,以工作过程必需的任务目标维持学习者的学习积极性,以核心知识帮助学习构建自己新的认知结构,任务实施以建立项目、编写HTML、编写CSS和浏览器测试为工作过程,详尽地的指导学习者的前端开发能力实践,以强化训练提升学生的知识和能力的迁移能力,期待这种设计和尝试,真正让教师好用,学生乐意学。
本书得到了广东省高职教育品牌专业项目的经费支持,企业一线的前端开发人员邱景生、杨起捷、黄亮等参与了项目任务设计和并给予了全程指导,刘琳、宁艳也提出了很多宝贵建议,全书由赵建保负责整体设计、主体编著和统稿,参与编著的人员有陆丽纯、邓梦佳、蒋国才、钟晓妮。大连东软电子出版社的领导和编辑卫杲旻、李卓超老师对本书的整体设计和编写提供了宝贵的建议和指导,在此表示衷心的感谢。本书涉及到的主要软件及资源有WebStorm、jQuery、Bootstrap等,请在学习前自行下载或购买这些软件,并根据软件向导完成安装。本书配套素材资源请按出版社指引下载。
由于IT发展迅猛,作者项目实践和知识视野有限,经验不够丰富,书中不足之处在所难免,垦请读者提出宝贵的意见和建议。联系方式(E-mail):mpcer@163.com
目录
任务1 搭建Web前端开发环境... 13
1.1 任务导入... 13
1.2 任务目标... 13
1.3 核心知识... 13
1.3.1 网页访问机制... 13
1.3.2 浏览器市场份额... 14
1.3.3 浏览器内核及渲染过程... 15
1.3.4 PHP
Web服务器组件... 16
1.3.5 Web服务器启动失败原因分析... 16
1.3.6 移动前端开发环境网络拓扑结构... 17
1.3.7
WebStorm优势... 17
1.3.8 EMMET语法... 17
1.4 任务实施... 18
1.4.1 操作系统版本及位数识别... 18
1.4.2
Chrome浏览器... 19
1.4.3 搭建Web服务器... 22
1.4.4
WebStorm.. 26
1.4.5 移动端测试环境... 32
1.5 强化训练... 33
任务2 编写网页模板... 34
2.1 任务导入... 34
2.2 任务目标... 34
2.3 核心知识... 35
2.3.1 Web标准... 35
2.3.2 Web项目结构... 35
2.3.3 通用规范... 36
2.3.4 HTML规范... 37
2.3.5 CSS命名规范... 39
2.3.6 JS规范... 44
2.3.7 图像规范... 45
2.3.8
DOCTYPE(文档类型)... 45
2.3.9 meta. 45
2.3.10
favicon. 46
2.3.11 CSS概述... 46
2.3.12 CSS 语法... 47
2.3.13 CSS存在方式... 47
2.3.14 CSS继承与优先级规则... 49
2.3.15 CSS3新增功能... 49
2.3.16 CSS3选择器类型... 50
2.3.17 链接JS. 52
2.3.18 HTML页面模板... 53
2.4 任务实施... 53
2.4.1 建立项目... 53
2.4.2 编写HTML文件... 54
2.4.3 编写CSS样式... 56
2.4.4 编写JS脚本... 60
2.4.5 浏览器测试... 61
2.5 强化训练... 62
任务3 文本排版... 63
3.1 任务导入... 63
3.2 任务目标... 63
3.3 核心知识... 64
3.3.1 元素默认样式属性值... 64
3.3.2 浏览器默认样式... 65
3.3.3 字体属性... 66
3.3.4 字族font-family. 66
3.3.5 字体大小font-size. 69
3.3.6 字体变形font-variant 71
3.3.7 字体样式font-style. 71
3.3.8 字体粗细font-weight 71
3.3.9 字体属性font 72
3.3.10 文本属性text 74
3.3.11 文本颜色color 75
3.3.12 颜色模式... 75
3.3.13 上标(sup)下标(sub) 77
3.3.14 文本效果text-decoration. 77
3.3.15 字母间距letter-spacing. 77
3.3.16 单词间距word-spacing. 77
3.3.17 空白white-space. 78
3.3.18 文本换行word-wrap. 78
3.3.19 文本换行word-break. 79
3.3.20 文本缩进text-indent 79
3.3.21 文本对齐text-align. 80
3.3.22 垂直对齐vertical-align. 80
3.3.23 文本阴影text-shadow.. 81
3.3.24 溢出文本text-overflow.. 83
3.3.25 文字方向direction. 84
3.3.26 行高line-height 84
3.4 任务实施... 87
3.4.1 建立项目... 87
3.4.2 编写HTML文件... 87
3.4.3 编写CSS样式... 88
3.4.4 浏览器测试... 90
3.5 强化训练... 90
任务4 Web字体图标... 90
4.1 任务导入... 90
4.2 任务目标... 91
4.3 核心知识... 91
4.3.1
Sprite图标的缺陷... 91
4.3.2 字体图标... 92
4.3.3 Font
Awesome. 92
4.3.4
Glyphicons 93
4.3.5 CSS
content 属性... 94
4.3.6 字体图标定义... 94
4.3.7 字体图标用法... 96
4.4 任务实施... 97
4.4.1 建立项目... 97
4.4.2 编写HTML文件... 97
4.4.3 编写CSS样式... 97
4.4.4 浏览器测试... 99
4.5 强化训练... 99
任务5 图片排版... 99
5.1 任务导入... 99
5.2 任务目标... 100
5.3 核心知识... 101
5.3.1 图片来源... 101
5.3.2 图像质量评价... 101
5.3.3 img标记... 103
5.3.4 网页图片4大格式... 103
5.3.5
figure与figcaption. 105
5.3.6 CSS控制图片大小... 106
5.3.7 CSS图片左右对齐... 106
5.3.8 CSS图片居中对齐... 106
5.3.9 CSS响应式图片... 106
5.3.10 CSS图像风格样式... 107
5.3.11 叠加式图片标题排版... 107
5.3.12 CSS精灵图... 109
5.3.13 图片阴影(box-shadow)... 110
5.3.14 CSS3的圆角(border-radius)... 111
5.4 任务实施... 112
5.4.1 建立项目... 112
5.4.2 编写HTML文件... 113
5.4.3 编写CSS样式... 114
5.4.4 浏览器测试... 117
5.5 强化训练... 117
任务6 列表排版... 118
6.1 任务导入... 118
6.2 任务目标... 119
6.3 核心知识... 119
6.3.1 HTML列表类型... 119
6.3.2 嵌套列表... 120
6.3.3 列表HTML结构... 120
6.3.4
list-style-type属性... 121
6.3.5
list-style-image属性... 122
6.3.6
list-style-position属性... 122
6.3.7 列表默认样式... 122
6.3.8 自定义列表符号... 123
6.4 任务实施... 124
6.4.1 建立项目... 124
6.4.2 编写HTML文件... 125
6.4.3 编写CSS样式... 127
6.4.4 浏览器测试... 128
6.5 强化训练... 128
任务7 表格排版... 129
7.1 任务导入... 129
7.2 任务目标... 130
7.3 核心知识... 130
7.3.1 表格HTML结构... 130
7.3.2 表格的层次结构... 131
7.3.3 行合并和列合并... 132
7.3.4 表格删除和隐藏... 133
7.3.5 边框border 134
7.3.6 表格边框合并与分离... 135
7.3.7 表格对齐... 136
7.3.8 条纹表格... 136
7.3.9 悬停表格... 136
7.4 任务实施... 137
7.4.1 建立项目... 137
7.4.2 编写HTML文件... 137
7.4.3 编写CSS样式... 138
7.4.4 浏览器测试... 139
7.5 强化训练... 140
任务8 表单排版... 141
8.1 任务导入... 141
8.2 任务目标... 141
8.3 核心知识... 142
8.3.1 表单工作原理... 142
8.3.2 form标签... 142
8.3.3 文本框(input)... 143
8.3.4 文本域(textarea)... 145
8.3.5 选择框(select)... 145
8.3.6 按钮... 146
8.3.7 HTML5表单结构... 146
8.3.8 表单控件大小... 147
8.4 任务实施... 148
8.4.1 建立项目... 148
8.4.2 编写HTML文件... 149
8.4.3 编写CSS样式... 151
8.4.4 编写JS脚本... 155
8.4.5 浏览器测试... 156
8.5 强化训练... 158
任务9 按钮... 158
9.1 任务导入... 158
9.2 任务目标... 159
9.3 核心知识... 159
9.3.1
button标签与属性... 159
9.3.2 按钮基础样式... 160
9.3.3 原始按钮外观... 160
9.3.4 按钮大小... 161
9.3.5 按钮状态... 162
9.3.6 CSS3 渐变Gradient 162
9.3.7 阴影box-shadow.. 166
9.3.8 圆角border-radius 166
9.4 任务实施... 167
9.4.1 建立项目... 167
9.4.2 编写HTML文件... 167
9.4.3 编写CSS样式... 168
9.4.4 浏览器测试... 170
9.5 强化训练... 170
任务10 选项卡Tab. 171
10.1 任务导入... 171
10.2 任务目标... 172
10.3 核心知识... 172
10.3.1 选项卡HTML模型... 172
10.3.2 重置无序列表ul属性... 173
10.3.3 浮动定位float 173
10.3.4 绝对定位absolute. 173
10.3.5 选项卡切换原理... 174
10.4 任务实施... 174
10.4.1 建立项目... 174
10.4.2 编写HTML文件... 175
10.4.3 编写CSS样式... 177
10.4.4 编写JS脚本... 179
10.4.5 浏览器测试... 179
10.5 强化训练... 180
任务11 轮播图排版... 181
11.1 任务导入... 181
11.2 任务目标... 182
11.3 核心知识... 182
11.3.1 轮播图结构模型... 182
11.3.2 轮播图HTML结构... 183
11.3.3 轮播的JS实现... 184
11.4 任务实施... 184
11.4.1 建立项目... 184
11.4.2 编写HTML文件... 184
11.4.3 编写CSS样式... 186
11.4.4 编写JS脚本... 188
11.4.5 浏览器测试... 190
11.5 强化训练... 190
任务12 下拉菜单... 190
12.1 任务导入... 190
12.2 任务目标... 191
12.3 核心知识... 191
12.3.1 全局导航... 191
12.3.2 多级下拉菜单结构... 191
12.3.3 导航菜单层次结构... 192
12.3.4
inlinke-block. 193
12.3.5 元素垂直居中... 193
12.3.6
box-shadow的理解... 193
12.3.7 绘制三角形图标... 194
12.3.8 超链接... 196
12.3.9 绝对地址和相对地址... 198
12.3.10 链接目标target 199
12.4 任务实施... 199
12.4.1 建立项目... 199
12.4.2 编写HTML文件... 200
12.4.3 编写CSS样式... 202
12.4.4 浏览器测试... 208
12.5 强化训练... 209
任务13 浮动布局... 209
13.1 任务导入... 209
13.2 任务目标... 210
13.3 核心知识... 210
13.3.1 盒子模型... 210
13.3.2 内边距padding. 213
13.3.3 外边距margin. 213
13.3.4 box-sizing. 216
13.3.5 显示类型display. 216
13.3.6 div嵌套... 217
13.3.7 id与class 217
13.3.8 标准文档流... 218
13.3.9 浮动float 218
13.3.10 清除clear 220
13.3.11 溢出(overflow)... 222
13.3.12
iframe(内联框架) 222
13.4 任务实施... 223
13.4.1 建立项目... 223
13.4.2 编写HTML文件... 223
13.4.3 编写CSS样式... 225
13.4.4 浏览器测试... 226
13.5 强化训练... 227
任务14 流式布局... 227
14.1 任务导入... 227
14.2 任务目标... 228
14.3 核心知识... 228
14.3.1 固定宽度布局... 228
14.3.2 流式布局... 229
14.4 任务实施... 229
14.4.1 建立项目... 229
14.4.2 编写HTML文件... 230
14.4.3 编写CSS样式... 232
14.4.4 浏览器测试... 233
14.5 强化训练... 234
任务15 弹性布局... 234
15.1 任务导入... 234
15.2 任务目标... 234
15.3 核心知识... 235
15.3.1 弹性布局... 235
15.3.2 弹性布局存在的问题... 235
15.4 任务实施... 235
15.4.1 建立项目... 235
15.4.2 编写HTML文件... 235
15.4.3 编写CSS样式... 237
15.4.4 浏览器测试... 238
15.5 强化训练... 239
任务16 定位布局... 240
16.1 任务导入... 240
16.2 任务目标... 240
16.3 核心知识... 241
16.3.1 定位(positioning)... 241
16.3.2 相对定位relative. 241
16.3.3 绝对定位absolute. 241
16.3.4 固定定位fixed. 242
16.3.5
z-index深度... 242
16.3.6 包含块... 243
16.4 任务实施... 243
16.4.1 建立项目... 243
16.4.2 编写HTML文件... 244
16.4.3 编写CSS样式... 247
16.4.4 浏览器测试... 249
16.5 强化训练... 249
任务17 CSS3多列布局... 249
17.1 任务导入... 249
17.2 任务目标... 250
17.3 核心知识... 251
17.3.1 多列布局原理... 251
17.3.2
columns属性... 251
17.3.3 列宽度column-width. 251
17.3.4 列数column-count 251
17.3.5 列间距column-gap. 252
17.3.6
column-rule. 252
17.3.7
column-span. 252
17.3.8 浏览器前缀... 253
17.4 任务实施... 253
17.4.1 建立项目... 253
17.4.2 编写HTML文件... 254
17.4.3 编写CSS样式... 255
17.4.4 浏览器测试... 257
17.5 强化训练... 257
任务18 响应式页面排版... 258
18.1 任务导入... 258
18.2 任务目标... 258
18.3 核心知识... 258
18.3.1 响应式布局概述... 258
18.3.2 响应式布局关键技术... 259
18.3.3 响应式布局技巧... 262
18.3.4 Viewport定义... 263
18.3.5 响应式设计流程... 263
18.4 任务实施... 264
18.4.1 建立项目... 264
18.4.2 编写HTML文件... 264
18.4.3 编写CSS样式... 266
18.4.4 浏览器测试... 271
18.5 强化训练... 272
任务19 前端框架BootStrap. 273
19.1 任务导入... 273
19.2 任务目标... 273
19.3 核心知识... 274
19.3.1
jQuery. 274
19.3.2
Bootstrap. 274
19.3.3 CDN.. 274
19.3.4
Bootstrap网络系统... 275
19.3.5
Bootstrap媒体查询... 276
19.4 任务实施... 277
19.4.1 下载BootStrap. 277
19.4.2 建立项目... 279
19.4.3 编写HTML文件... 279
19.4.4 编写CSS样式... 284
19.4.5 浏览器测试... 286
19.5 强化训练... 286