PowerPoint 演示文稿

Size: px

Start display at page:

Download "PowerPoint 演示文稿"

尘曰张廖
5 years ago
Views:

1 响应式 Web 设计 : 升级改造你的网站钟远薪东莞职业技术学院图书馆 2015 年 7 月 8 日

2 响应式 Web 设计 : 概念技术原理与价值

4 概念响应式 Web 设计 (Responsive Web Design) 是 2010 年提出的网页设计模式, 旨在使网页能自动适应用户的操作行为及不同接入设备以达到良好的布局和内容显示效果无论用户使用 PC 平板电脑或手机, 无论屏幕是横向还是竖向, 无论是全屏显示还是非全屏显示, 无论是鼠标键盘操作还是触屏操作, 都能自动调整图层布局图片尺寸等, 使内容获得恰当的呈现和交互方式

5 技术原理 CSS 媒体查询 CSS Media Queries 字体缩放 em 自适应图片 Flexible Images 网页缩放 Viewport 弹性网格布局 Fluid Grids

6 技术原理 CSS 媒体查询 : 响应式 Web 设计最关键的技术, 简单地说就是返回浏览器的大小等属性, 并指定样式覆盖, screen and (max-width: 600px) { /* 当屏幕尺寸小于 600px 时, 应用下面的 CSS 样式 */.class { background: #ccc; } } 宽度最常用, 此外还有横屏或树屏 (orientation) 长宽比 (aspect-ratio) 等

7 技术原理弹性网格布局 : 栅格化布局, 将网页划分为一系列的网格, 结合 CSS 媒体查询, screen and (max-device-width: 800px) {.div1{ width: 70%; }.div2{ width: 30%; } screen and (max-device-width: 400px) {.div1{ width: 100%; }.div2{ width: 100%; } }

8 技术原理自适应图片 : 图片有时会比手机屏幕宽, 这样会将页面容器撑开, 图片被切掉一部分不给 img 标签设置宽度和高度, 并将最大宽度设置成 100% img{max-width:100%} 图片处理还有其他许多方法, 例如指定多个源图, 再通过媒体查询设置 ; 新的 CSS 会实现响应式图片的原生语法 image-set: background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); 许多框架直接指定图片的属性即可, 如 Bootstrap 的 class= img-responsive

9 技术原理网页缩放 : 手机访问网页时默认会对网页进行缩放, 尽可能多地在屏幕上展示整个页面的内容, 若整个网页都被缩小到手机的屏幕大小, 效果可想而知所以, 响应式的第一步是, 指定网页不缩放 <meta name="viewport" content="width=device-width, initial-scale=1"> 表示使用设备宽度 ( 即设备的屏幕宽度 ) 并且缩放指定为 1 也就是不缩放

10 技术原理字体缩放 : 不使用像素 (px), 而使用相对大小 (%,em,rem) 来使字体更有弹性 html { font-size: 100%; } <p style="font-size:2em;"> Hello! </p> 首先指定整个文档字体为浏览器字体的 100% 大小, 然后指定段落的文字相对于父元素为为 2 倍大小

11 价值多屏合一微软淘宝知乎等知名网站, 都已采用响应式 Web 设计 Drupal Wordpress 等 CMS 平台新版本支持响应式访问最近两三年最热门的 Web 应用技术之一

12 小技术给图书馆带来的重要改变?

13 当前图书馆移动服务存在的问题全新开发, 对接困难变化过多, 疲于升级内容多版本, 维护成本高粘性低, 品牌弱

14 重要价值图书馆移动服务的新方向

15 可行性高技术门槛低, 容易实现仅为用户界面更新, 很少涉及到业务逻辑的变更为什么? 兼容性强一套系统服务多种终端, 不再需要开发多套系统不再需要多次分发内容, 极大降低信息维护成本为用户提供与接入终端无关的一致性体验契合技术发展趋势使图书馆服务从关注技术转向服务本质使图书馆服务更易于与第三方服务的交互与融合

16 应用现状 JSTOR SciFinder Oxford Journal 等 14 个数据库提供了响应式访问麻省理工学院等近 10 家世界知名高校图书馆网站已经采用响应式 Web 设计技术

17 应用现状云南大学图书馆网站

18 应用现状暨南大学南校区图书馆网站

19 应用现状上海图书馆网站 Beta 版

20 应用模式升级图书馆网站促使应用数据库提供响应式支持开发更具体验性和交互性的平台

21 升级改造你的图书馆网站

22 升级途径购买第三方服务 : 云适配 : 将现有 PC 版网页应用适配成 HTML5 移动版本, 一行代码适配技术委托第三方设计开发自主设计开发 : 重新设计界面, 充分考虑多种设备下的显示内容布局和操作方式选择一个成熟的第三方框架减少开发时间 : 成熟的布局样例 UI 组件脚本

推荐框架 Bootstrap:Twitter, 最流行, 无处不在, 文档全, 功能丰富, 庞大 http://www.bootcss.

com/ Semantic UI: 语义化样式逻辑清晰, 应用性革命性最强, 最有前景 http://www.semantic-ui.

23 推荐框架 Bootstrap:Twitter, 最流行, 无处不在, 文档全, 功能丰富, 庞大 Foundation: 号称是世界上最先进的响应式前端框架, 提供多种 UI 组件 Semantic UI: 语义化样式逻辑清晰, 应用性革命性最强, 最有前景 PureCSS: 纯 CSS, 轻量模块化, 提供一套极简的样式, 便于你从零开始 Uikit:Wordpress, 简洁提供了强大灵活的自定义机制此外, 还有细分的 CSS 框架脚本框架导航框架图像框架等如何选择? 流行规模文档更新适用

24 一个简单的例子

25 一个简单的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> 我是一个网页 </title> </head> <body> <div style="background-color:#39f;"> <img src="logo.png" border="0"> </div> <div style="height:10px;"></div> <div style="width:960px;"> <div style="background-color:#fc0; width:300px; float:left;"> <p> 分类一 </p><p> 分类二 </p><p> 分类三 </p> </div> <div> <p align="center"> 东莞职业技术学院图书馆 </p> <p align="center"><img src="1.jpg" border="0"></p> </div> </div> </body> </html>

26 一个简单的例子

png" border="0" class="img-responsive"> </div> <div style="height:10px"></div> <div class="row"> <div style="background-color:#fc0;" class="col-xs-12 col-sm-3"> <p> 分类一 </p><p> 分类二

27 一个简单的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="bootstrap.css" rel="stylesheet"> <script src="jquery.js"></script><script src="bootstrap.js"></script> </head> <body> <div style="background-color:#39f;" class= row"> <img src="logo.png" border="0" class="img-responsive"> </div> <div style="height:10px"></div> <div class="row"> <div style="background-color:#fc0;" class="col-xs-12 col-sm-3"> <p> 分类一 </p><p> 分类二 </p><p> 分类三 </p> </div> <div class="col-xs-12 col-sm-9"> <p align="center"> 东莞职业技术学院图书馆 </p> </body> </html> </div> </div> 去掉宽度浮动等属性 <p align="center"><img src="1.jpg" border="0" class="img-responsive"></p>

28 一个简单的例子

29 一个简单的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="bootstrap.css" rel="stylesheet"> <script src="jquery.js"></script><script src="bootstrap.js"></script> </head> <body> <div style="background-color:#39f;" class= row"> <img src="logo.png" border="0" class="img-responsive"> </div> <div style="height:10px"></div> <div class="row"> <div style="background-color:#fc0;" class="col-xs-12 col-sm-3 hidden-xs"> <p> 分类一 </p><p> 分类二 </p><p> 分类三 </p> </div> <div class="col-xs-12 col-sm-9"> <p align="center"> 东莞职业技术学院图书馆 </p> <p align="center"><img src="1.jpg" border="0" class="img-responsive"></p> </div> </div> </body> </html>

30 一个简单的例子

31 结语一项简单的技术很酷的技术有用的技术有待解决的问题 : 性能 : 低端设备网络环境等, 会影响到体验性深度交互 : 设备的本地功能调用仍不理想业界支持 : 尚未得到数据库相关业务系统的广泛支持

32 结语一项技术的价值, 并不取决于它有多复杂, 而是取决于它解决什么问题大道至简, 简单的技术, 往往会带来革命性的改变

33 结语响应式 Web 设计, 升级改造你的网站, 值得你去尝试!

34 谢谢! yuanxinz@gmail.com QQ : 地址 : 东莞市松山湖科技产业园区大学路 3 号

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05