跨平台的移动Web开发实战：HTML5+CSS3

单元1跨平台的网站首页设计1
【教学导航】1
【实例探析】1
【任务1-1】探析携程旅行网的首页1
【知识疏理】8
【引导训练】20
【任务1-2】设计苏宁易购网的首页20
【任务描述】20
【任务实施】21
【网页浏览】26
【任务1-3】设计穷游网的首页27
【任务描述】27
【任务实施】27
【网页浏览】36
【同步训练】36
【任务1-4】设计同程旅游网的首页36
【任务描述】36
【任务实施】37
【网页浏览】40
【拓展训练】40
【任务1-5】设计酷狗音乐网的首页40
【任务描述】40
【任务实施】41
【单元小结】42
单元2文本新闻浏览网页设计43
【教学导航】43
【实例探析】43
【任务2-1】探析手机搜狐网的名站导航网页43
【知识疏理】50
【引导训练】60
【任务2-2】设计手机搜狐网的站内导航网页60
【任务描述】60
【任务实施】60
【网页浏览】66
【任务2-3】设计手机搜狐网的文本新闻网页67
【任务描述】67
【任务实施】67
【网页浏览】72
【同步训练】72
【任务2-4】设计新华网手机版的网址导航网页72
【任务描述】72
【任务实施】72
【网页浏览】76
【任务2-5】设计新华网手机版的文本新闻网页76
【任务描述】76
【任务实施】77
【网页浏览】81
【拓展训练】81
【任务2-6】设计新华网手机版的标题新闻及导航网页81
【任务描述】81
【操作提示】81
【单元小结】83
单元3旅游景点推荐网页设计84
【教学导航】84
【实例探析】84
【任务3-1】探析蚂蜂窝的推荐旅游目的地网页84
【知识疏理】91
【引导训练】95
【任务3-2】设计去哪儿旅行网的Touch版旅图网页95
【任务描述】95
【任务实施】96
【网页浏览】105
【同步训练】105
【任务3-3】设计携程旅行网的很好旅游景区网页105
【任务描述】105
【任务实施】106
【网页浏览】109
【拓展训练】109
【任务3-4】设计路趣网手机版的热点景点推荐网页109
【任务描述】109
【操作提示】110
【单元小结】113
单元4商品信息展示网页设计114
【教学导航】114
【实例探析】114
【任务4-1】探析手机麦包包网触屏版的热销商品网页114
【知识疏理】123
【引导训练】130
【任务4-2】设计苏宁易购触屏版的促销商品列表网页130
【任务描述】130
【任务实施】131
【网页浏览】137
【任务4-3】设计易购网的选用商品列表网页137
【任务描述】137
【任务实施】137
【网页浏览】140
【同步训练】141
【任务4-4】设计凡客诚品网触屏版的品牌墙网页141
【任务描述】141
【任务实施】141
【网页浏览】145
【拓展训练】145
【任务4-5】设计苏宁易购触屏版的家用电器精选商品导航网页145
【任务描述】145
【任务实施】146
【单元小结】148
单元5注册登录与留言网页设计149
【教学导航】149
【实例探析】149
【任务5-1】探析手机麦包包网的用户注册网页149
【知识疏理】154
【引导训练】158
【任务5-2】设计同程旅游无线网的会员登录网页158
【任务描述】158
【任务实施】159
【网页浏览】165
【任务5-3】设计去哪儿网的意见反馈网页165
【任务描述】165
【任务实施】165
【网页浏览】170
【同步训练】170
【任务5-4】设计掌上1号店的用户登录网页170
【任务描述】170
【任务实施】170
【网页浏览】175
【拓展训练】175
【任务5-5】设计手机搜狐网的留言反馈网页175
【任务描述】175
【任务实施】175
【任务5-6】设计易购网的个性化用户注册网页178
【任务描述】178
【操作提示】178
【单元小结】180
单元6音乐视频网页播放设计181
【教学导航】181
【实例探析】181
【任务6-1】探析基于HTML5的网页音乐播放器之一181
【任务6-2】探析基于HTML5的网页视频播放器之一189
【知识疏理】191
【引导训练】192
【任务6-3】设计基于HTML5的网页音乐播放器之二192
【任务描述】192
【任务实施】193
【任务6-4】设计基于HTML5的网页视频播放器之二194
【任务描述】194
【任务实施】194
【同步训练】198
【任务6-5】设计基于HTML5的网页音乐播放器之三198
【任务描述】198
【任务实施】198
【任务6-6】设计基于HTML5的网页音乐播放器之四199
【任务描述】199
【任务实施】199
【任务6-7】设计基于HTML5的网页视频播放器之三201
【任务描述】201
【任务实施】202
【拓展训练】203
【任务6-8】设计基于HTML5的网页音乐播放器之五204
【任务描述】204
【任务实施】204
【任务6-9】设计基于HTML5的网页视频播放器之四209
【任务描述】209
【操作提示】210
【任务6-10】设计基于HTML5的网页视频播放器之五210
【任务描述】210
【操作提示】211
【单元小结】212
单元7网页图形绘制与游戏设计213
【教学导航】213
【实例探析】213
【任务7-1】探析网页中菊花图形的绘制213
【任务7-2】探析网页中精美挂钟的绘制215
【知识疏理】218
【引导训练】225
【任务7-3】网页中绘制各种图形和文字225
【任务描述】225
【任务实施】226
【任务7-4】设计网页俄罗斯方块游戏231
【同步训练】241
【任务7-5】网页中绘制多种图形和图片241
【任务描述】241
【任务实施】241
【拓展训练】244
【任务7-6】网页中绘制多个五角星244
【任务描述】244
【操作提示】245
【任务7-7】设计html5版连连看网页游戏246
【任务描述】246
【操作提示】247
【单元小结】250
单元8复杂样式与网页特效设计251
【教学导航】251
【实例探析】251
【任务8-1】探析迷你音乐播放器面板制作251
【任务8-2】探析纯CSS3实现的焦点图切换效果254
【知识疏理】258
【引导训练】266
【任务8-3】网页中绘制阴阳图和五角星266
【任务描述】266
【任务实施】267
【任务8-4】网页中制作圆角按钮和圆角图片269
【任务描述】269
【任务实施】269
【任务8-5】设计网页中的圆形导航按钮272
【任务描述】272
【任务实施】273
【任务8-6】网页中实现图片拖拽操作275
【任务描述】275
【任务实施】275
【任务8-7】网页中实现仿Office风格的多级菜单278
【任务描述】278
【任务实施】278
【同步训练】281
【任务8-8】网页中绘制各种几何图形282
【任务描述】282
【任务实施】282
【任务8-9】网页中实现超酷导航菜单284
【任务描述】284
【任务实施】284
【任务8-10】网页中模仿苹果iPhone的搜索框聚焦变长效果287
【任务描述】287
【任务实施】287
【任务8-11】网页中实现拖动选择多张景点图片289
【任务描述】289
【任务实施】289
【拓展训练】292
【任务8-12】网页中实现相册效果292
【任务描述】292
【操作提示】293
【任务8-13】网页中实现带有字体图标效果的下拉导航菜单295
【任务描述】295
【操作提示】295
【单元小结】298
附录AHTML5的新特性简介299
附录BHTML5的常用标签及其属性、方法与事件304
附录CCSS的属性313
附录DCSS的选择器320
参考文献330

陈承欢，湖南铁道职业技术学院教务处处长，曾出版教材《办公软件应用任务驱动式教程(Windows 7+Office 2010)(第2版)》、《软件测试任务驱动式教程》、《JavaScript+jQuery网页设计实例教程》、《管理信息系统开发项目式教程(第3版)》、《网页设计与制作实用教程(第2版)(重量精品课程配套教材)(附光盘)》等。

从跨平台的移动Web开发实际应用的角度理解HTML5和CSS3的新元素和新功能，合理选取教学内容。本书设置了8个教学单元：跨平台的网站首页设计、文本新闻浏览网页设计、旅游景点推荐网页设计、商品信息展示网页设计、注册登录与留言网页设计、音乐视频网页播放设计、网页图形绘制与游戏设计、复杂样式与网页设计，将HTML5和CSS3的相关知识合理安排到各个教学单元。
充分调研HTML5、CSS3新技术的实际应用情况，优选了56个来自于真实网站或项目的典型教学案例，采用“任务驱动、精讲多练、理论实践一体化”的教学方法，改进和优化教学内容的组织方法和程序代码的分析方法，全方向促进基于HTML5+CSS3移动Web开发能力的提升。每个教学单元面向教学全过程设置“教学导航→实例探析→知识疏理→引导训练→同步训练→拓展训练→单元小结”7个教学环节。同时提供了丰富的配套教学资源。

定价：为出版社全国统一定价；

文轩价：为商品的销售价，是您最终决定是否购买商品的依据；受系统缓存影响，最终价格以商品放入购物车后显示的价格为准；

新广告法规定所有页面信息中不得出现绝对化用词和功能性用词。

本店非常支持新广告法，但为了不影响消费者正常购买，页面明显区域本店已在排查修改，对于不明显区域也将会逐步排查并修改，我们此郑重声明：本店所有页面上的绝对化用词与功能性用词在此声明全部失效，不作为赔付理由。涉及“教育部声明”中的商品，均不代表教育部指定、推荐的具体版本，仅代表该商品的内容为指定、推荐书目。因极限用词引起的任何形式的商品赔付，本店不接收且不妥协。希望消费者理解并欢迎联系客服帮助完善，也请职业打假人士高抬贵手。