随着Web前端开发在近年来迅速崛起，从Web前端开发企业实战的角度，以项目式的教学方式讲解HTML5、CSS3、响应式设计等新技术实用性更强 ；同时配备相应的微课资源。

本书围绕专题类、商业类、教育类、门户类等主流网站类型，采用项目引导、任务驱动的编写方式，全面、翔实地介绍了Web前端开发的流程及相关技术，包括HTML5、CSS3、JavaScript、响应式布局、开发网站等内容，并介绍CMS网站管理系统以及动态网站技术。全书共分为10个项目，项目的构建由易到难，逐层深入，让学生在模拟的工作情境下切实掌握网页设计与制作的方法和技能，提高动手能力和解决实际问题的能力。本书适合于高职高专院校计算机、电子商务及相关专业的学生学习使用，也可以作为网页设计与制作初学者和网页制作培训班学员的参考用书。

项目1网页制作基础知识1
1.1项目描述及分析1
1.2任务1优秀网站赏析2
1.3任务2网页基础知识4
1.3.1网页和网站的基本概念4
1.3.2网页的组成元素5
1.3.3网页相关名词7
1.3.4Web标准10
1.3.5响应式Web设计11
1.4任务3网站建设的一般流程12
1.4.1确定网站主题12
1.4.2规划网站结构12
1.4.3收集资料与素材14
1.4.4确定版面布局方式14
1.4.5制作网页17
1.4.6测试与发布网站18
1.4.7推广网站18
1.4.8网站的后期维护18
1.5网页制作入门18
1.5.1HTML5简介18
1.5.2CSS3简介19
1.5.3JavaScript简介19
1.5.4常见浏览器19
1.6网页制作常用开发工具简介21
1.6.1网页制作与编辑工具21
1.6.2页面设计与美化工具22
1.7知识链接22
1.7.1网页制作的基本原则22
1.7.2认识图像23
1.7.3常见的建站方式25
实训26
项目2制作简单网页27
2.1项目描述及分析27
2.2任务1进行网站功能设计29
2.3任务2设计网站首页原型29
2.3.1认识Photoshop29
2.3.2制作首页原型32
2.3.3首页原型的切片与导出33
2.4任务3网页的制作与上传35
2.4.1认识HBuilder35
2.4.2HBuilder入门37
2.4.3域名和空间的申请39
2.4.4网站文件的上传41
2.5知识链接42
2.5.1网页中的色彩42
2.5.2网页基本元素的标准和使用技巧44
实训45
项目3“太阳岛”旅游网站制作47
3.1项目描述及分析47
3.2任务1添加文本49
3.3任务2认识HTML51
3.3.1HTML文档基本格式51
3.3.2认识HTML标签52
3.3.3HTML常用标签54
3.4任务3编辑文本57
3.4.1全国免费电话文本设置57
3.4.2近期新动态行文本编辑58
3.5任务4认识CSS.59
3.5.1认识CSS样式表60
3.5.2创建并使用CSS样式优化网页源码63
3.6任务5设计网站子页66
3.7知识链接——CSS控制文本样式68
3.8拓展学习——旅游类网站的设计要点70
3.8.1旅游类网站的类型70
3.8.2旅游类网站的设计要点74
实训75
项目4“盟院合作”专题网站制作76
4.1项目描述及分析76
4.2任务1认识盒子模型77
4.3盒子模型相关属性78
4.3.1盒子边框属性78
4.3.2内边距属性81
4.3.3外边距属性82
4.3.4背景属性84
4.3.5盒子的宽与高86
4.4浮动与定位87
4.4.1元素的浮动87
4.4.2元素的定位95
4.5项目制作99
4.5.1页面布局及定义基础样式99
4.5.2页眉制作101
4.5.3“主体”模块制作104
4.5.4页脚制作109
4.6知识链接——补充CSS选择器111
4.7拓展学习——专题网站制
作的设计要点113
实训114
项目5“艾上乐品”服装网站制作116
5.1项目描述及分析116
5.2任务1列表标记及嵌套117
5.2.1列表标记117
5.2.2列表的嵌套121
5.3任务2CSS控制列表样式122
5.4任务3认识表格标记124
5.4.1表格标记124
5.4.2CSS控制表格样式126
5.5项目制作129
5.5.1页面布局及定义基础样式129
5.5.2制作“头部”导航模块130
5.5.3制作banner模块和“精品展示”模块131
5.5.4制作“版权信息”模块135
5.6知识链接——浏览器兼容性135
5.7拓展学习——流行时尚类网站的设计要点137
实训139
项目6影音网站制作141
6.1任务1了解HTML5多媒体的特性141
6.2任务2了解HTML5常用的多媒体格式142
6.2.1音频格式142
6.2.2视频格式142
6.3任务3HTML5多媒体的实现143
6.3.1audio标签143
6.3.2video标签144
6.3.3source标签144
6.4任务4HTML5表单的应用146
6.4.1认识表单146
6.4.2HTML5新增的表单属性147
6.4.3HTML5标签147
6.5任务5影音网站项目描述及分析148
6.6任务6添加多媒体文件150
6.6.1添加音频文件150
6.6.2添加视频文件153
6.6.3添加留言模块154
6.7知识链接——音频/视频DOM参考手册156
实训158
项目7“我要回家网”页面制作159
7.1项目描述及分析159
7.2任务1JavaScript概述161
7.2.1JavaScript简介161
7.2.2JavaScript引入方式163
7.2.3JavaScript基本语法165
7.2.4一个简单的JavaScript程序165
7.3任务2JavaScript语言基础166
7.3.1关键字和标识符166
7.3.2变量和数据类型167
7.3.3运算符和表达式171
7.4任务3程序流程控制178
7.4.1条件语句178
7.4.2循环语句185
7.4.3跳转语句189
7.5任务4函数191
7.5.1初识函数191
7.5.2函数的调用191
7.5.3函数中变量的作用域193
7.6任务5结构布局及样式定义194
7.6.1准备工作194
7.6.2制作思路分析195
7.6.3页面结构设计196
7.6.4基础样式定义196
7.6.5CSS/JS文件引入197
7.7任务6制作“头部”版块197
7.7.1“头部”版块效果分析197
7.7.2“头部”版块制作198
7.8任务7制作“导航”版块202
7.8.1“导航”版块效果分析202
7.8.2“导航”版块制作202
7.9任务8制作banner版块和“时间”版块204
7.9.1banner版块和“时间”版块效果分析204
7.9.2banner版块和“时间”版块制作205
7.10任务9制作“客运信息”版块207
7.10.1“客运信息”版块效果分析2077
10.2“客运信息”版块制作207
7.11任务10制作“底部”版块210
7.11.1“底部”版块效果分析210
7.11.2“底部”版块制作211
7.12拓展学习——业务类网站的设计要点212
7.12.1业务类网站的类型212
7.12.2业务类网站的设计要点213
实训214
项目8“延庆外国语学校”页面制作215
8.1项目描述及分析215
8.2任务1认识对象217
8.2.1什么是对象217
8.2.2对象的属性和方法218
8.2.3创建和删除对象218
8.2.4内置对象220
8.3任务2数组对象225
8.3.1初识数组225
8.3.2数组的常见操作226
8.3.3数组的常用属性和方法231
8.3.4二维数组234
8.4任务3BOM和DOM对象235
8.4.1BOM对象235
8.4.2DOM对象242
8.5任务4事件处理248
8.5.1什么是事件248
8.5.2事件处理程序的调用249
8.5.3鼠标事件251
8.5.4键盘事件252
8.5.5表单事件254
8.5.6页面事件256
8.6任务5布局及定义基础样式257
8.6.1准备工作258
8.6.2制作思路分析259
8.6.3页面结构设计260
8.6.4基础样式定义261
8.6.5CSS/JS文件引入261
8.7任务6制作“头部及导航”版块261
8.7.1“头部”版块效果分析261
8.7.2“头部”版块制作262
8.8任务7制作banner版块264
8.8.1banner版块效果分析264
8.8.2banner版块制作264
8.9任务8制作“学校简介”版块268
8.9.1“学校简介”版块效果分析268
8.9.2“学校简介”版块制作269
8.10任务9制作“课程特色”版块272
8.10.1“课程特色”版块效果分析272
8.10.2“课程特色”版块制作273
8.11任务10制作“页脚”版块279
8.11.1“页脚”版块效果分析279
8.11.2“页脚”版块制作279
8.12拓展学习——教育类网站的设计要点280
8.12.1教育类网站的类型280
8.12.2教育类网站的设计要点282
实训283
项目9网站动态化284
9.1项目描述及分析284
9.2任务1认识CMS286
9.2.1静态网页与动态网页286
9.2.2CMS287
9.3任务2静态页面模板导入288
9.3.1DedeCMS的安装和环境配置288
9.3.2静态页面模板导入295
9.3.3模板的相关概念297
9.4任务3DedeCMS常用标签298
9.4.1了解DedeCMS中的标签298
9.4.2DedeCMS中的常用标签298
9.5任务4首页动态化302
9.5.1网站栏目管理302
9.5.2首页动态化305
9.6任务5其他页面动态化313
9.6.1列表页（栏目页）动态化313
9.6.2内容页动态化315
9.7任务6生成静态页面319
9.8知识链接——数据备份与还原320
实训322
项目10响应式Web设计323
10.1项目描述及分析323
10.2任务1认识响应式布局325
10.2.1设计理念325
10.2.2响应式的实现326
10.3任务2响应式布局基础知识327
10.3.1响应式设计相关概念327
10.3.2响应式布局的实现330
10.4任务3响应式布局框架332
10.4.1常见的响应式布局框架332
10.4.2Bootstrap简介333
10.5任务4认识Bootstrap337
10.5.1相关概念337
10.5.2CSS布局339
10.5.3组件341
10.6任务5页面响应式布局346
10.6.1项目需求346
10.6.2头部响应式布局348
10.6.3主体部分响应式布局350
10.6.4页脚部分响应式布局353
10.6.5测试页面353
10.7知识链接——Bootstrap中的其他组件354
10.7.1表单354
10.7.2复选框和单选按钮355
10.7.3卡片356
实训357
参考文献358