网页设计与网页布局是前端开发的核心工作，是Web界面与后端数据的纽带。本教材以前端工程师岗位工作任务为起点，循序渐进，以HTML5、CSS3、JavaScript及jQuery为技术支撑，以WebStorm为开发环境，将网页前端开发过程的任务规范化、模块化和组件化。教材设计了文本排版、Web字体图标、图片排版、列表排版、表格排版、表单排版、按钮、选项卡、轮播图排版、下拉菜单、浮动布局、流式布局、弹性布局、定位布局、CSS3多列布局、响应式页面排版、前端框架Bootstrap等十余个工作任务，在具体工作任务中，按“任务导入→任务目标→核心知识→任务实施→强化训练”5步来组织教学内容和设计教学过程，注重梳理强关联的知识和技能，提炼设计模式，直达网页设计和布局的核心和工作机制，兼顾教师项目教学组织和学生自主学习的双重需求，以期提升学习者对前端技术的理解力和应用能力，以便更好地适应前端项目需求的千变万化。
1.适用对象
教材主要面向职业院校的数字媒体应用技术专业、数字媒体艺术设计专业、视觉传达、计算机应用、教育技术学、新闻学、传播学等专业，作为《网站建设》《网页设计与制作》《Web前端开发》等课程的教材和参考资料，也可供企业信息化培训和培训机构Web技术相关模块作为培训教材使用。
2.预期效果
以学习者胜任前端工程师岗位工作任务为目标，循序渐进，掌握HTML5、CSS3、JavaScript、jQuery等技术综合应用，熟悉WebStorm开发环境，适应网页前端开发工作的规范化、模块化和组件化岗位要求。
任务1搭建Web前端开发环境1
1.1任务导入1
1.2任务目标1
1.3核心知识2
1.3.1网页访问机制2
1.3.2浏览器市场份额3
1.3.3浏览器内核及渲染过程3
1.3.4PHP Web服务器组件4
1.3.5Web服务器启动失败原因分析4
1.3.6移动前端开发环境网络拓扑结构5
1.3.7WebStorm优势5
1.3.8EMMET语法5
1.4任务实施7
1.4.1操作系统版本及位数识别7
1.4.2Chrome浏览器7
1.4.3搭建Web服务器10
1.4.4WebStorm13
1.4.5移动端测试环境18
1.5强化训练18
任务2编写网页模板19
2.1任务导入19
2.2任务目标20
2.3核心知识20
2.3.1Web标准20
2.3.2Web项目结构21
2.3.3通用规范21
2.3.4HTML规范23
2.3.5CSS命名规范24
2.3.6JS规范31
2.3.7图像规范32
2.3.8DOCTYPE（文档类型）32
2.3.9meta32
2.3.10favicon33
2.3.11CSS概述34
2.3.12CSS语法34
2.3.13CSS存在方式35
2.3.14CSS继承与优先级规则36
2.3.15CSS3新增功能37
2.3.16CSS3选择器类型37
2.3.17链接JS39
2.3.18HTML页面模板40
2.4任务实施41
2.4.1建立项目41
2.4.2编写HTML文件41
2.4.3编写CSS样式43
2.4.4编写JS脚本49
2.4.5浏览器测试49
2.5强化训练50
任务3文本排版51
3.1任务导入51
3.2任务目标52
3.3核心知识52
3.3.1元素默认样式属性值52
3.3.2浏览器默认样式53
3.3.3字体属性55
3.3.4字族（fontfamily）55
3.3.5字体大小（fontsize）59
3.3.6字体变形（fontvariant）60
3.3.7字体样式（fontstyle）60
3.3.8字体粗细（fontweight）61
3.3.9字体属性（font）61
3.3.10文本属性（text）64
3.3.11文本颜色（color）64
3.3.12颜色模式65
3.3.13上标(sup)下标(sub)66
3.3.14文本效果（textdecoration）66
3.3.15字母间距（letterspacing）67
3.3.16单词间距（wordspacing）67
3.3.17空白（whitespace）67
3.3.18文本换行（wordwrap）68
3.3.19文本换行（wordbreak）69
3.3.20文本缩进（textindent）69
3.3.21文本对齐（textalign）70
3.3.22垂直对齐（verticalalign）70
3.3.23文本阴影（textshadow）71
3.3.24溢出文本（textoverflow）73
3.3.25文字方向（direction）74
3.3.26行高（lineheight）75
3.4任务实施76
3.4.1建立项目76
3.4.2编写HTML文件77
3.4.3编写CSS样式78
3.4.4浏览器测试79
3.5强化训练80
任务4Web字体图标81
4.1任务导入81
4.2任务目标82
4.3核心知识82
4.3.1Sprite图标的缺陷82
4.3.2字体图标83
4.3.3Font Awesome83
4.3.4Glyphicons83
4.3.5CSS content属性84
4.3.6字体图标定义84
4.3.7字体图标用法87
4.4任务实施87
4.4.1建立项目87
4.4.2编写HTML文件88
4.4.3编写CSS样式88
4.4.4浏览器测试90
4.5强化训练90
任务5图片排版91
5.1任务导入91
5.2任务目标92
5.3核心知识92
5.3.1图片来源92
5.3.2图像质量评价92
5.3.3img标记94
5.3.4网页图片4大格式95
5.3.5figure与figcaption97
5.3.6CSS控制图片大小97
5.3.7CSS图片左右对齐98
5.3.8CSS图片居中对齐98
5.3.9CSS响应式图片98
5.3.10CSS图像风格样式99
5.3.11叠加式图片标题排版99
5.3.12CSS精灵图101
5.3.13图片阴影（boxshadow）103
5.3.14CSS3的圆角（borderradius）103
5.4任务实施104
5.4.1建立项目104
5.4.2编写HTML文件105
5.4.3编写CSS样式107
5.4.4浏览器测试109
5.5强化训练110
任务6列表排版111
6.1任务导入111
6.2任务目标112
6.3核心知识112
6.3.1HTML列表类型112
6.3.2嵌套列表113
6.3.3列表HTML结构113
6.3.4liststyletype属性114
6.3.5liststyleimage属性114
6.3.6liststyleposition属性115
6.3.7列表默认样式115
6.3.8自定义列表符号116
6.4任务实施117
6.4.1建立项目117
6.4.2编写HTML文件117
6.4.3编写CSS样式120
6.4.4浏览器测试121
6.5强化训练122任务7表格排版123
7.1任务导入123
7.2任务目标124
7.3核心知识124
7.3.1表格HTML结构124
7.3.2表格的层次结构125
7.3.3行合并和列合并126
7.3.4表格删除和隐藏128
7.3.5边框（border）128
7.3.6表格边框合并与分离130
7.3.7表格对齐131
7.3.8条纹表格131
7.3.9悬停表格131
7.4任务实施131
7.4.1建立项目131
7.4.2编写HTML文件132
7.4.3编写CSS样式133
7.4.4浏览器测试135
7.5强化训练136
任务8表单排版137
8.1任务导入137
8.2任务目标138
8.3核心知识138
8.3.1表单工作原理138
8.3.2form标签138
8.3.3文本框（input）139
8.3.4文本域（textarea）143
8.3.5选择框（select）143
8.3.6按钮144
8.3.7HTML5表单结构144
8.3.8表单控件大小145
8.4任务实施146
8.4.1建立项目146
8.4.2编写HTML文件147
8.4.3编写CSS样式150
8.4.4编写JS脚本154
8.4.5浏览器测试155
8.5强化训练156
任务9按钮157
9.1任务导入157
9.2任务目标157
9.3核心知识158
9.3.1button标签与属性158
9.3.2按钮基础样式159
9.3.3原始按钮外观160
9.3.4按钮大小160
9.3.5按钮状态161
9.3.6CSS3渐变Gradient162
9.3.7阴影（boxshadow）165
9.3.8圆角(borderradius)166
9.4任务实施167
9.4.1建立项目167
9.4.2编写HTML文件167
9.4.3编写CSS样式168
9.4.4浏览器测试170
9.5强化训练171
任务10选项卡Tab172
10.1任务导入172
10.2任务目标173
10.3核心知识174
10.3.1选项卡HTML模型174
10.3.2重置无序列表ul属性174
10.3.3浮动定位（float）175
10.3.4绝对定位（absolute）175
10.3.5选项卡切换原理175
10.4任务实施176
10.4.1建立项目176
10.4.2编写HTML文件176
10.4.3编写CSS样式178
10.4.4编写JS脚本181
10.4.5浏览器测试181
10.5强化训练182
任务11轮播图排版183
11.1任务导入183
11.2任务目标184
11.3核心知识184
11.3.1轮播图结构模型184
11.3.2轮播图HTML结构185
11.3.3轮播的JS实现186
11.4任务实施186
11.4.1建立项目186
11.4.2编写HTML文件187
11.4.3编写CSS样式189
11.4.4编写JS脚本192
11.4.5浏览器测试194
11.5强化训练194
任务12下拉菜单195
12.1任务导入195
12.2任务目标195
12.3核心知识196
12.3.1全局导航196
12.3.2多级下拉菜单结构196
12.3.3导航菜单层次结构196
12.3.4inlinkeblock197
12.3.5元素垂直居中198
12.3.6boxshadow的理解198
12.3.7绘制三角形图标198
12.3.8超链接201
12.3.9绝对地址和相对地址203
12.3.10链接目标target204
12.4任务实施204
12.4.1建立项目204
12.4.2编写HTML文件204
12.4.3编写CSS样式207
12.4.4浏览器测试215
12.5强化训练215
任务13浮动布局216
13.1任务导入216
13.2任务目标217
13.3核心知识217
13.3.1盒子模型217
13.3.2内边距（padding）219
13.3.3外边距（margin）219
13.3.4boxsizing222
13.3.5显示类型（display）222
13.3.6嵌套（div）222
13.3.7id与class223
13.3.8标准文档流224
13.3.9浮动（float）224
13.3.10清除（clear）226
13.3.11溢出（overflow）228
13.3.12内联框架(iframe)228
13.4任务实施229
13.4.1建立项目229
13.4.2编写HTML文件229
13.4.3编写CSS样式231
13.4.4浏览器测试233
13.5强化训练234
任务14流式布局235
14.1任务导入235
14.2任务目标236
14.3核心知识236
14.3.1固定宽度布局236
14.3.2流式布局236
14.4任务实施237
14.4.1建立项目237
14.4.2编写HTML文件237
14.4.3编写CSS样式239
14.4.4浏览器测试241
14.5强化训练242
任务15弹性布局243
15.1任务导入243
15.2任务目标243
15.3核心知识244
15.3.1弹性布局244
15.3.2弹性布局存在的问题244
15.4任务实施244
15.4.1建立项目244
15.4.2编写HTML文件245
15.4.3编写CSS样式247
15.4.4浏览器测试249
15.5强化训练249
任务16定位布局250
16.1任务导入250
16.2任务目标251
16.3核心知识251
16.3.1定位（positioning）251
16.3.2相对定位（relative）251
16.3.3绝对定位（absolute）252
16.3.4固定定位（fixed）253
16.3.5深度（zindex）253
16.3.6包含块253
16.4任务实施253
16.4.1建立项目253
16.4.2编写HTML文件254
16.4.3编写CSS样式258
16.4.4浏览器测试260
16.5强化训练261
任务17CSS3多列布局262
17.1任务导入262
17.2任务目标263
17.3核心知识263
17.3.1多列布局原理263
17.3.2属性（columns）263
17.3.3列宽度（columnwidth）264
17.3.4列数（columncount）264
17.3.5列间距（columngap）264
17.3.6columnrule264
17.3.7columnspan265
17.3.8浏览器前缀265
17.4任务实施266
17.4.1建立项目266
17.4.2编写HTML文件266
17.4.3编写CSS样式267
17.4.4浏览器测试269
17.5强化训练270
任务18响应式页面排版271
18.1任务导入271
18.2任务目标271
18.3核心知识272
18.3.1响应式布局概述272
18.3.2响应式布局关键技术272
18.3.3响应式布局技巧275
18.3.4Viewport定义276
18.3.5响应式设计流程276
18.4任务实施277
18.4.1建立项目277
18.4.2编写HTML文件278
18.4.3编写CSS样式280
18.4.4浏览器测试285
18.5强化训练286
任务19前端框架Bootstrap288
19.1任务导入288
19.2任务目标289
19.3核心知识289
19.3.1Query289
19.3.2Bootstrap289
19.3.3CDN290
19.3.4Bootstrap网络系统290
19.3.5Bootstrap媒体查询291
19.4任务实施293
19.4.1下载Bootstrap293
19.4.2建立项目295
19.4.3编写HTML文件295
19.4.4编写CSS样式301
19.4.5浏览器测试302
19.5强化训练303
参考文献304
本教材以任务导入激发学习者学习积极性，以工作过程必需的任务目标维持学习者的学习积极性，以核心知识帮助学习构建自己新的认知结构，任务实施以建立项目、编写HTML、编写CSS和浏览器测试为工作过程，详尽地指导学习者的前端开发实践，以强化训练提升学生的知识和能力的迁移能力，期待这种设计和尝试，真正让教师好用，学生乐意学。
