教学的基本信息
1．适用对象
本教材适用于非计算机专业的《HTML5基础》《HTML5网页制作》《人机交互设计》等课程，或者计算机专业的《人机交互设计II》《人机交互设计III》《人机交互设计高级应用》等课程教学。
2．具备的知识和能力基础
本教材适用于HTML、CSS和JavaScript的零基础初学者以及具备基本的网页开发能力、了解HTML和CSS基本语法、需要进一步深入学习HTML5和CSS3新特性的前端页面开发人员。使用本教材的读者，需要具备最基本的计算机基础知识和计算机操作能力、同时也具备一定的网页基础知识理解能力。对于希望从事前端页面开发工作的所有学生均可使用本教材进行学习。
3．预期学习效果
学习本门课程之后，将为后续的课程奠定基本的Web页面开发基础能力。
通过学习，能熟练使用CSS、JavaScript、HTML5等技术完成网页设计和制作，熟悉DIV+CSS网页布局，能够快速搭建Web项目，实现页面动画效果、用户交互和数据更新等。能够熟练使用表单控件处理数据，为Java Web开发等后续课程打下良好基础。
第1章HTML基础1
1.1知识准备：认识HTML2
1.1.1HTML基本语法2
1.1.2HTML文档基本结构3
1.1.3第一个HTML页面4
1.1.4文本与标签4
1.1.5表格标签8
1.1.6表单元素9
1.2知识运用：咖啡商城——商品分类13
1.2.1项目说明13
1.2.2项目设计13
1.2.3项目实施14
1.3扩展应用15
1.3.1项目：介绍我的学校115
1.3.2项目：图书统计表17
1.3.3项目：个人信息统计表18
习题21
第2章HTML5新增元素和属性24
2.1知识准备：认识HTML525
2.1.1HTML的新版本25
2.1.2HTML5页面结构26
2.1.3HTML5主体结构元素26
2.1.4HTML5非主体结构元素29
2.1.5HTML5表单新功能30
2.1.6HTML5表单新的输入类型30
2.1.7HTML5表单的新属性32
2.2知识运用：咖啡商城——用户注册34
2.2.1项目说明34
2.2.2项目设计34
2.2.3项目实施35
2.3扩展应用37
2.3.1项目：新闻评论网37
2.3.2项目：订货人个人信息页39
习题41
第3章CSS基础43
3.1知识准备：认识CSS44
3.1.1为什么使用CSS44
3.1.2CSS语句格式44
3.1.3CSS选择符45
3.1.4字体属性50
3.1.5文本属性53
3.1.6边框54
3.1.7边框阴影57
3.1.8圆角边框57
3.1.9图形边框58
3.1.10背景59
3.2知识运用：咖啡商城——网站页脚62
3.2.1项目说明62
3.2.2项目设计62
3.2.3项目实施62
3.3扩展应用64
3.3.1项目：世界杯胜负榜64
3.3.2项目：介绍我的学校266
3.3.3项目：校训Logo68
习题70
第4章CSS布局72
4.1知识准备：盒子的定位73
4.1.1内边距和外边距73
4.1.2块级元素与行内元素75
4.1.3浮动定位76
4.1.4位置定位79
4.1.5弹性定位81
4.1.6隐藏与显示83
4.2知识运用：咖啡商城——商品分类页面美化86
4.2.1项目说明86
4.2.2项目设计87
4.2.3项目实施87
4.3扩展应用90
4.3.1项目：三个相框90
4.3.2项目：照片墙91
4.3.3项目：悬浮菜单93
习题95
第5章CSS3动画99
5.1知识准备：动画属性100
5.1.1Animation动画100
5.1.2Transition过渡102
5.2知识运用：咖啡商城——商品介绍103
5.2.1项目说明103
5.2.2项目设计104
5.2.3项目实施104
5.3扩展应用106
5.3.1项目：跑动的汽车106
5.3.2项目：页面切换效果108
习题111
第6章JavaScript基础112
6.1知识准备：JavaScript语法113
6.1.1HTML页面中嵌入JavaScript的方法114
6.1.2JavaScript的语法规则115
6.1.3第一个JavaScript程序117
6.1.4常用数据类型118
6.1.5变量120
6.1.6运算符121
6.1.7流程控制语句122
6.1.8函数125
6.1.9事件和事件处理126
6.2知识运用：咖啡商城——显示商品大图127
6.2.1项目说明127
6.2.2项目设计128
6.2.3项目实施128
6.3扩展应用129
6.3.1项目：点击我129
6.3.2项目：敏感的兔子131
习题133第7章JavaScript对象136
7.1知识准备：认识JavaScript对象137
7.1.1内置对象137
7.1.2浏览器对象模型145
7.2知识运用：咖啡商城——打开注册窗口151
7.2.1项目说明151
7.2.2项目设计152
7.2.3项目实施152
7.3扩展应用153
7.3.1项目：数字电子时钟153
7.3.2项目：打开新窗口154
习题156
第8章DOM文档对象模型158
8.1知识准备：认识DOM对象159
8.1.1HTML DOM Document对象159
8.1.2HTML DOM Event对象164
8.1.3HTML DOM Element对象165
8.1.4HTML DOM Attribute对象167
8.1.5事件绑定的方式167
8.1.6事件处理函数的执行顺序169
8.1.7事件冒泡和事件捕获170
8.2知识运用：咖啡商城——购物车171
8.2.1项目说明171
8.2.2项目设计172
8.2.3项目实施173
8.3扩展应用174
8.3.1项目：诗词鉴赏174
习题177
第9章Canvas画布180
9.1知识准备：认识Canvas181
9.1.1Canvas元素简介181
9.1.2绘图的步骤182
9.1.3绘制基本图形183
9.1.4绘制图像188
9.2知识运用：咖啡商城——商品详情190
9.2.1项目说明190
9.2.2项目设计191
9.2.3项目实施1919.3扩展应用193
9.3.1项目：来自星星的它193
9.3.2项目：放大镜197
9.3.3项目：跳动的心200
9.3.4项目：鼠标画板202
习题204
第10章本地存储207
10.1知识准备：Web Storage208
10.1.1Web Storage的常用属性和方法208
10.1.2sessionStorage208
10.1.3localStorage209
10.2知识运用：咖啡商城——注册/登录210
10.2.1项目说明210
10.2.2项目设计210
10.2.3项目实施210
10.3扩展应用211
10.3.1项目：简易购物车211
习题217
第11章响应式页面219
11.1知识准备：Bootstrap220
11.1.1Bootstrap到底是什么220
11.1.2如何开始使用Bootstrap221
11.1.3网格系统222
11.1.4表格226
11.1.5定制Bootstrap227
11.2知识运用：咖啡商城——我的订单229
11.2.1项目说明229
11.2.2项目设计230
11.2.3项目实施230
11.3扩展应用231
11.3.1项目：网格练习231
11.3.2项目：定制练习235
习题236
第12章jQuery基础240
12.1知识准备：什么是jQuery241
12.1.1向页面添加jQuery库241
12.1.2第一个jQuery程序242
12.1.3jQuery选择器242
12.1.4jQuery常用方法246
12.1.5jQuery对象与DOM对象249
12.1.6jQuery事件250
12.1.7jQuery动画254
12.1.8JSON256
12.1.9Ajax258
12.2知识运用：咖啡商城——图片轮播261
12.2.1项目说明261
12.2.2项目设计262
12.2.3项目实施262
12.3扩展应用263
12.3.1项目：咖啡商城——查看商品详情263
习题265
第13章手机端App开发268
13.1知识准备：开发工具HBuilder269
13.1.1飞速编码的极客工具269
13.1.2安装HBuilder269
13.1.3认识界面271
13.1.4新建项目272
13.1.5HTML5 Plus规范277
13.1.6HTML5+App278
13.1.7Hello mui示例278
13.1.8建立MUI项目281
13.1.9Hello H5+示例282
13.1.10建立H5+项目284
13.2知识运用：咖啡商城——移动APP290
13.2.1项目说明290
13.2.2项目设计292
13.2.3项目实施292
13.3扩展应用293
13.3.1项目：语音答题APP293
第14章咖啡商城——网站综合设计298
14.1项目背景299
14.2项目构思299
14.3UI设计301
14.4网页制作306
附录1学习知识点及能力要点315
1.1教材的知识要点及掌握程度315
1.2教材的能力要点及重要程度316
附录2RGB颜色对照表317
参考文献322
2016年6月，中国成为国际本科工程学位互认协议《华盛顿协议》的正式会员，这是中国工程教育国际化进程的重要里程碑。“回归工程”、培养学生的“大工程观”是当今国际工程教育的主流理念。《华盛顿协议》对毕业生提出的12条素质要求中，不仅要求工程知识、工程能力，还强调通用能力和品德伦理；在实践上，以学生为中心，以产出为导向，注重对目标达成的支撑及持续改进，与CDIO工程教育实质等效。
CDIO工程教育是近年来国际工程教育改革的最新成果，以“预期学习结果”集合来驱动课程内容、教学方法、教育文化的设计，重视营造工程教育文化，其注重工程能力培养和基于工程项目全生命周期的一体化设计思想，对于国内工程类和相关专业的建设具有重要的实施价值。
作为承载了教学改革思想的载体，融入CDIO工程教育理念的高品质教材，东软CDIO工程教育教材在注重理实结合的同时，也注重对学生八大能力的培养，即：技术知识与推理能力，开放式思维与创新，个人职业能力，沟通表达与团队合作，态度与习惯，责任，价值观，实践构思、设计、实现和运行对社会的贡献。
CDIO工程教育教材是 CDIO教育教学改革在教学实施过程中的集中体现，它不仅承载着课程和项目的教学内容，而且贯穿和体现了CDIO工程教育的理念、思想与方法，是在系统化理论的指导下，将知识、能力、素质培养进行一体化设计，有机融合在教材体系中。教材的编写以能力培养为主线，以案例教学为引导，以项目为载体，充分体现“做中学”和“学中做”的思想，具有以下优势：
（1）以能力培养为主线，培养学生专业知识学习能力和工程实践能力。
（2）以案例为驱动，在做案例的过程中学习新知识，充分体现了“做中学”。
（3）以项目为载体，基于工程化教育方法，按照分析、设计、实施、运行展开项目及知识点的讲解。
（4）围绕专业知识结构和能力体系设计教材，实现同一专业下不同教材紧密的关联性。
（5）内容编排循序渐进，符合人的认知规律。
（6）适应柔性化教学变革，构建一体化、立体化教学资源。
CDIO工程教育教材可供以应用型人才为培养目标的高等院校以及职业培训机构作为教材使用。
目前，CDIO工程教育教材的建设还处于探索阶段，是一项创造性的工作，尚需要通过改革的实践不断加以深化和持续改进，任重而道远。
