构建跨平台APP:响应式UI设计入门.pdf

构建跨平台APP:响应式UI设计入门.pdf
 

书籍描述

内容简介
《构建跨平台APP:响应式UI设计入门》分为3篇共11章,第1篇是响应式设计基础,我们首先介绍清楚到底什么是响应式设计,然后介绍分解响应式设计页面,包括页面中的元素、页面的布局、导航栏、多媒体等;第二篇是响应式设计框架,详细介绍了目前使用最广泛的Bootstap框架,包括它的各种样式设计和特效设计;最后一篇是实战,用一个Bootstrap贴吧和HTML5扁平化公司主页,实践前面所学的内容。

编辑推荐
《构建跨平台APP:响应式UI设计入门》技术新颖、内容精练、结构清晰、注重实战,适合广大网页设计或移动设计初学人员学习,同时也非常适合大中专院校师生学习阅读,也可作为高等院校计算机及相关专业的教材使用。

目录
第1章传说中的响应式设计
1.1支持跨平台设备的响应式设计
1.1.1什么样的设计是响应式的
1.1.2响应式设计坚守的4大原则
1.2响应式设计与其他页面设计的对比
1.2.1固定布局
1.2.2流式布局
1.3实战:创建一个响应式网页
1.3.1设置HTML文档的Meta标签
1.3.2设计HTML文档结构
1.3.3使用CSS3媒介查询
1.3.4运行第一个响应式页面
1.4小结
第2章响应式网页中的元素
2.1文字
2.2表单
2.2.1自定义Radiobox
2.2.2自定义Checkbox动画
2.2.3美化输入框
2.2.4下拉框
2.3框架
2.3.1传统的iFrame框架
2.3.2响应式的iFrame框架
2.4实战:实现一个响应式登录表单
2.4.1设置登录表单的HTML结构
2.4.2设计登录表单的通用样式
2.4.3使用CSS3媒介查询实现响应式登录表单
2.5小结
第3章响应式布局
3.1布局切换
3.2侧边栏
3.3宽高等比例变化
3.4列表
3.4.1定义列表分级菜单
3.4.2列表切换效果
3.5表格
3.5.1简单自适应表格
3.5.2翻转滚动表格
3.5.3隐藏表格栏目
3.6实战:响应式商品展示列表
3.7小结
第4章响应式导航
4.1响应式导航菜单设计五大原则
4.1.1按照优先级显示内容
4.1.2用创造力来处理有限的空间
4.1.3下拉菜单
4.1.4给导航菜单换位置
4.1.5放弃导航菜单
4.2导航类型
4.2.1单层导航
4.2.2多层导航
4.2.3面包屑导航
4.3页码设计
4.4小结
第5章响应式多媒体
5.1图标的响应式
5.2图像
5.2.1可适配的图像
5.2.2图像网格
5,3视频
5.3.1内嵌视频响应式的难点
5.3.2从其他网站中手动嵌入视频
5.4响应式图表
5.4.1一款响应式图表库
5.4.2带Tooltip提示的线形图
5.4.3简单的饼图
5.5小结
第6章Bootstrap入门
6.1初次接触Bootstrap
6.1.1Bootstrap的优势
6.1.2下载Bootstrap
6.2在网站中引入Bootstrap
6.3调用Bootstrap的样式
6.4调用Bootstrap的组件
6.5调用Bootstrap的js特效
6.6实战:一个Bootstrap实现的响应式页面V1.0
6.7小结
第7章Bootstrap的样式设计
7.1字体
7.1.1标题
7.1.2全局字体和段落
7.2表格
7.2.1基本用法
7.2.2表格的附加样式
7.2.3为表格行或单元格添加状态标识
7.2.4响应式表格
7.3表单
7.4按钮
7.4.1按钮的基本样式
7.4.2调节按钮大小
7.4.3块级按钮
7.4.4为按钮设置不可点击样式
7.5图片
7.5.1图片类
7.5.2响应式图片
7.6Bootstrap工具类
7.6.1响应式工具
7.6.2工具类
7.7实战:Bootstrap响应式页面V2.0
7.8小结
第8章Bootstrap的组件设计
8.1下拉菜单
8.2按钮组
8.2.1垂直排列的按钮组
8.2.2两端对齐的按钮组
8.2.3嵌套按钮组
8.3input控件组
8.3.1最常见的搜索框
8.3.2带提示的搜索框
8.4导航
8.4.1胶囊式导航
8.4.2面包屑导航
8.4.3头部导航
8.5列表组
8.6分页
8.6.1普通的分页
8.6.2上一页/下一页
8.7标签
8.8面板
8.9进度条
8.10缩略图
8.11实战:Bootstrap响应式页面V3.0
8.12小结
第9章Bootstrap的特效设计
9.1模态对话框
9.2标签页切换
9.3TbOtip
9.4弹出框
9.5折叠
9.6幻灯片
9.7实战:Bootstrap响应式页面V4.0
9.8小结
第10章使用Bootstrap实现一个百度贴吧后台
10.1确定后台管理的需求
10.2设计页面布局
10.2.1引入Bootstrap3框架
10.2.2实现页面布局代码
10.3设计导航栏
10.3.1构建导航的整体架构
10.3.2设计标题和导航链接
10.3.3实现搜索框和通知系统
10.3.4实现管理员的登录信息
10.3.5构建响应式导航
10.4设计左侧边栏
10.5设计主功能部分
10.5.1主功能的头部
10.5.2主功能的帖子列表
10.6小结
第11章使用HTML5设计扁平化的公司主页
11.1响应式设计的关键
11.2导航栏的设计
11.2.1列表的实现
11,2.2弹出式菜单的实现
11.3主功能部分的设计
11.3.1什么是视差滚动效果
11.3.2视差效果的实现
11.3.3图文列表的实现
11.4小结
附录CSS3选择器使用一览
fl.l标签选择器
fl.2类选择器
fl.3id选择器
fl.4通配符选择器
fl.5子元素选择器
fl.6后代元素选择器
fl.7相邻元素选择器
fl.8属性选择器
fl.9组选择器
fl.10复合选择器
fl.ll结构化伪类
fl.12目标伪类:target
fl.13状态伪类
fl.14否定伪类:not(S)

文摘
版权页:



插图:



网站已经有很多现成的图表库来帮我们解决响应式的问题,那我们就不用重复造轮子了,毕竟图表可是个大工程。本节我们介绍的就是一款Java Script图形图表库ECharts。
5.4.1 一款响应式图表库
从直观上来看,图形和图表要比文本更具表现力和说服力,是展示数据最有效的方式。图表是数据图形化的表示,通过形象的图表来展示数据,例如柱状图、折线图、饼图等不同的图表展示形式。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和项目的可靠性;同时,用户从图表中可以直观地获取数据信息、查看趋势以及数据对比等。
在本小节中,给大家介绍一款Java Script图形图表库,即ECharts,可以帮助开发者实现各种功能的图表。ECharts是一款基于Canvas的图表库,提供直观、生动、可交互、可个性化定制的数据可视化图表。ECharts创新的拖曳重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力,提供商业产品常用图表库,底层创建了坐标系、图例、提示、工具箱等基础组件,并在此基础上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图,地图和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现。

购买书籍

当当网购书 京东购书 卓越购书

PDF电子书下载地址

相关书籍

搜索更多