工业和信息化“十三五”人才培养规划教材

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)

Web前端设计
分享 推荐 6 收藏 109 阅读 21.3K
黑马程序员 (作者) 978-7-115-43934-5

关于本书的内容有任何问题,请联系 范博涛

1. 本书采用纯项目式教学,通过18个项目,带领读者实际动手操作,打破以往的知识结构,以完成项目为目标,让读者学习后留下的是项目经验而非孤零零的知识点;
2. 本书与市场上销售的其他前端教材最大的区别在于,本书引入了一个重要概念——响应式Web设计(也叫响应式布局或响应式页面)。响应式Web设计是随着移动互联网的发展孕育而生的重要技术,其核心思想是制作一个网站可供多种不同终端同时使用;
3. Bootstrap开发工具的引入。Bootstrap是一种简洁、直观、强悍的Web前端开发框架,它包含了HTML、CSS、Javascript以及jQuery的,各种元素、组件和插件,主要用于开发响应式布局页面和移动设备优先的Web项目。
4. 选用本书作为教材,可提供教学资源,包括8 个精美教学PPT、13 个教材补充项目、1000 道测试题、长达40 小时的教学视频等。
¥42.00 ¥35.70 (8.5 折)
立即购买 申请样书 在线试读
教学资源仅供教师教学使用,转载或另作他用版权方有权追究法律责任。

内容摘要

内容提要

Web前端开发在近年来迅速崛起,本书从Web开发实际应用的角度,以项目式的教学方式讲解HTML5、CSS3、响应式设计等新技术。本书共分为8个单元,把Web开发项目按文本、图文、表单、画布、音频视频、响应式进行分类教学。最后通过Bootstrap工具开发来整合HTML5、CSS3和响应式开发的知识,进行快捷开发。本书优选了18个项目,从【项目描述】→【前导知识】→【项目分析】→【代码实现】→【项目总结】几个方面进行了全方面的讲解,让读者可以真正做到既学到知识又熟练应用。
本书配套教学PPT、题库、教学视频、源代码、教学案例、教学设计等资源。
本书既可作为高等院校本、专科相关专业的网页设计与制作课程的教材,也可作为网页平面设计的培训教材,是一本适合网页制作、网站开发、网页编程等行业人员阅读与参考的读物。

目录

单元1 响应式和HTML5+CSS3初体验 1
【教学导航】 2
响应式Web设计简介 2
【项目1-1】使用HTML5+CSS3
 绘制HTML5的logo 4
【项目描述】 4
【前导知识】 4
HTML5的新特性 4
HTML5的基本语法 5
CSS3的新特性 6
如何在HTML中引入样式表 6
CSS3与浏览器 7
【项目分析】 7
【代码实现】 7
【项目总结】 12
【项目1-2】构建移动版旅游网站
 页面 13
【项目描述】 13
【前导知识】 14
HTML5语义化结构标签 14
CSS选择器 15
盒子模型 17
CSS的浮动与定位 18
【项目分析】 21
【代码实现】 22
【项目总结】 28

单元2 文本类网页设计 29
【教学导航】 30
【项目2-1】电子杂志页面 30
【项目描述】 30
【前导知识】 31
HTML5中常用的文本标签 31
CSS的字体样式属性 31
多列布局 33
【项目分析】 34
【代码实现】 35
【项目总结】 37
【项目2-2】软文推广页面 38
【项目描述】 38
【前导知识】 38
CSS的文本外观属性 38
CSS的层叠性、继承性和重要性 40
CSS的优先级 41
Web字体图标-font-awesome的应用 42
【项目分析】 44
【代码实现】 45
【项目总结】 49
【项目2-3】手机邮箱导航页面 49
【项目描述】 49
【前导知识】 49
CSS链接属性 49
CSS导航栏 50
【项目分析】 50
【代码实现】 51
【项目总结】 55

单元3 图文展示网页设计 56
【教学导航】 57
【项目3-1】黑马书城 57
【项目描述】 57
【前导知识】 58
HTML5常用图像标签 58
CSS背景设置 59
CSS阴影和渐变 59
【项目分析】 63
【代码实现】 64
【项目总结】 68
【项目3-2】多肉植物商城 68
【项目描述】 68
【前导知识】 68
CSS3的圆角边框 68
CSS3的过渡(CSS3 transition) 70
CSS3变形(CSS3 transform) 72
【项目分析】 76
【代码实现】 78
【项目总结】 83
【项目3-3】摇晃的桃子 83
【项目描述】 83
【前导知识】 83
CSS3动画(CSS3 animations) 83
CSS精灵技术(CSS Sprites) 85
【项目分析】 87
【代码实现】 88
【项目总结】 91

单元4 HTML5表单的应用 93
【教学导航】 94
【项目4-1】移动版登录页面 94
【项目描述】 94
【前导知识】 95
介绍表单 95
HTML5 <input>标签 96
【项目分析】 99
【代码实现】 100
【项目总结】 102
【项目4-2】用户注册页面 103
【项目描述】 103
【前导知识】 104
其他表单标签 104
HTML5表单验证 108
【项目分析】 109
【代码实现】 110
【项目总结】 114

单元5 HTML5画布 115
【教学导航】 116
【项目5-1】网页涂鸦板 116
【项目描述】 116
【前导知识】 116
JavaScript的那些事 116
初识canvas 123
【项目分析】 125
【代码实现】 126
【项目总结】 127
【项目5-2】发红包才能看的
 照片 128
【项目描述】 128
【前导知识】 129
canvas绘制矩形和清除矩形 129
canvas绘制圆形 130
canvas 绘制图片 131
canvas中的其他方法 132
【项目分析】 133
【代码实现】 134
【项目总结】 137

单元6 音频与视频 138
【教学导航】 139
【项目6-1】视频播放器 139
【项目描述】 139
【前导知识】 139
<video>标签的使用 139
HTML DOM Video对象 143
JavaScript运算符和if条件语句 145
【项目分析】 147
【代码实现】 149
【项目总结】 150
【项目6-2】HTML5 Web
 钢琴 151
【项目描述】 151
【前导知识】 151
<audio>标签的使用 151
HTML DOM Audio对象 153
JavaScript循环语句 155
【项目分析】 156
【代码实现】 157
【项目总结】 160
【项目6-3】音乐播放器 160
【项目描述】 160
【项目分析】 161
【代码实现】 162
【项目总结】 168

单元7 响应式Web设计 169
【教学导航】 170
【项目7-1】第 一个响应式
 网站 170
【项目描述】 170
【前导知识】 171
关于视口 171
媒体查询 172
百分比布局 175
【项目分析】 176
【代码实现】 177
【项目总结】 187
【项目7-2】社交网站个人信息
 页面 187
【项目描述】 187
【前导知识】 188
响应式栅格系统 188
弹性盒布局 190
【项目分析】 196
【代码实现】 197
【项目总结】 205

单元8 响应式设计
Bootstrap 206
【教学导航】 207
【项目8】Bootstrap餐饮类网站
 首页 207
【项目描述】 207
【任务1-完成网页header部分】 208
【任务2-完成网页搜索模块】 219
【任务3-完成热卖商品模块】 229
【任务4-完成特色推荐模块】 235
【任务5-完成轮播广告模块】 243
【任务6-整合所有模块,完成footer
部分】 250
附录1 HTML5新增标签和废除
标签 264
附录2 CSS3新增属性 267
附录3 CSS3中需要加浏览器
私有前缀的属性 281

读者评论

  • 本书配套视频、PPT、教学设计、教学大纲资源的试看链接:

    http://yuanxiao.boxuegu.com/textbook/app/#/book/details/13f0addc6cbc4619ae0e5a8b3a10eb84

    置顶 范博涛发表于 2018/6/11 16:15:19
  • 精美资源大放送!

    资源一:

    教材配套资源已经出炉,包括精美PPT、教学大纲、教学设计、源码、课后习题答案等,现成资源,现领现用,助您备课一臂之力!

    1.png

    3.png

    如果您已经合作了这本教材,添加码大牛老师(QQ:2011168841)即可免费领走全部资源!

    如果您对这本教材感兴趣,添加码大牛老师(QQ:2011168841),即有机会获取精美配套资源(仅限高校计算机教师)

    资源二:

    每周总结一份资源案例包,共享给900多所高校的计算机教师,您也可以免费领取,欢迎添加码大牛老师(QQ:2011168841),回复“资源案例包”,即可免费全部资源案例包(仅限高校计算机教师)

    QQ图片20170315164151.png

      资源持续更新中……

    传智教育发表于 2017/4/3 14:46:42

我要评论

作者介绍

黑马程序员,传智播客旗下高端IT教育品牌,成立于2006年,它是由中国Java培训第一人张孝祥老师发起,联合全球最大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今,我们一直坚守着“为千万人少走弯路而著书,为中华软件之崛起而讲课”的办学理念。

推荐用户

同系列书

购买本书用户

相关图书

人邮微信
本地服务
人邮微信
教师服务
二维码
读者服务
读者服务
返回顶部
返回顶部