页面结构和移动设备的布局

2015-3-8 22:35| 发布者: 蚂蚁大喇叭| 查看: 7965| 评论: 3|来自: 蚂蚁HTML5社区

摘要: 移动Web应用程序需要另外一种更好的页面体验。HTML5正好可以满足移动Web应用的需要,而且Android Browser及iOS Safari都良好地支持Webkit,也就可以使用CSS3等功能实现原生应用程序的UI界面
本站源码等资源来源于社区网友上传、网络等。仅供学习交流和研究使用,请勿商用。如有侵犯您的版权,请联系我们,本站将立即删除,联系QQ:791577401。

移动设备HTML5页面布局

智能手机和平板电脑的Web应用与传统桌面电脑的应用相比,存在以下几点区别:

硬件的配置。传统的PC及笔记本电脑硬件配置都相对强大,各种浏览嚣对硬件的要求已经无须太多的限定。而智能手机和平板电脑,受限于体积超小,特别是智能手机,其CPU性能相比普通电脑要低很多,内置的游览器就不得不考虑硬件因素,因此智能手机和平板电脑的Web浏览嚣功能相对有限。

屏幕的大小。桌面电脑经过多年的发展,现在显示嚣的屏幕分辨率已经能够达到1024x768及更高的1280x1024等。因此我们访问的同站,依然可以根据实际需求开发各种Web应用。但智能手机无法将普通网页全屏显示在智能手机上,就算通过屏幕放大缩小也可访问传统的网页,也由于用户体验不佳,很难得到实际的应用。

因此移动Web应用程序需要另外一种更好的页面体验。HTML5正好可以满足移动Web应用的需要,而且Android BrowseriOS Safari都良好地支持Webkit,也就可以使用CSS3等功能实现原生应用程序的UI界面,

如图2-3所示的是一个在iphone土的应用程序Ul界面.

上图2-3所示是iPhone常见的UI布局方式,如果使用HTML语义来分析,主要分为三个部分,第一部分是header部分,包括标题及一些操作按钮;第二部分是中间article部分,此部分是正文区域,主要显示详细的内容:第三部分是footer部分,此部分采用nav导航的特性,显示各种可选的导航菜单。

2.4所显示的软件界面,右图这套布局基本上同图2-3的布局一致,但在header部分比图2-3多了一个搜索框。左图这套布局则有些变化,其header部分也包含了nav导航清单,同时比图2-3缺少footer页脚部分。

上述是三套iPhone常用的界面布局。如果在移动Web浏览器下,依然可以实现同样的效果,而且作为Web应用界面布局,圈2-4中右图布局比其余两种布局更简洁。

使用HTML5创建标准的移动Web页面

从图2-4中的右图UI布局可以看出,其区域主要包括header及正文article内容。header标签内包括标题和nav导航列表。section标签则包含全部aricle正文内容,每条article相当于列表的一项值,根据分析可以得出布局代码如代码2-1所示。

代码2-1  2-4左图的Web页面布局
  1. <DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>使用HTHL5创建一个标准的移动Web页面</title>
  6. <head>
  7. <body>
  8. <!--自定义页头信息 -->
  9. <header>
  10. <div class="title">HTHL5移动开发指南</div>
  11. <!--定义导航目录 -->
  12. <nav>
  13. <ul>
  14. <li>前言</li>
  15. <li>目录</li>
  16. <li>附录</li>
  17. </ul>
  18. </nav>
  19. <header>
  20. <!--定义主体内容 -->
  21. <section>
  22. <article>
  23. <h1>web技术的发展</h1>
  24. </article>
  25. <article>
  26. <h1>HTML5的发展状况</hl>
  27. </article>
  28. <article>
  29. <h1>'移动设备页面布局</h1>
  30. <article>
  31. </section>
  32. </body>
  33. </html>
复制代码
iPhoneSafari下运行效果如图2-5所示。

我们主要只是展示HTML5新元素在智能手机上的应用,没有添加任何css样式美化网页,因此网页看上去更像一些纯文字组成的页面。

分析图2-4的界面布局情况,其区域主要包括header部分、article部分及footer部分。我们仍然采用刚才代码2-1的大部分代码,但在其中增加footer标签,并且将header标签内的导航栏移到footer标签下。如代码2-2所示。
代码2-2  2-4右图的Web页面布局

  1. <!DOCTYE html>
  2. <html>
  3. <head>
  4.     <meta charset = "utf-8">
  5.     <title>使用HTML5创建一个标准的移动WEB页面 - 布局DEMO</title>
  6. </header>
  7. <body>
  8. <!--定义页头信息 -->
  9.   <header>
  10.     <div class="title" >HTHL5移动开发</div>
  11.     <header>
  12. <!--定义主题内容 -->   
  13. <section>
  14.     <article>
  15.     <h1>web技术的发展</h1>
  16.     </article>
  17. <article>
  18. <h1>HTML5的发展状况</h1>
  19. </article>
  20. <article>
  21. <hl>移动设备页面布局</h1>
  22. </article>
  23. <section>
  24. <!-- 定义底部信息,该代码此地方主要显示导航栏 -->
  25. <footer>
  26. <!--定义导航目录 -->
  27. <nav>
  28. <ul>
  29. <li>前言</li>
  30. <li>目录</li>
  31. <li>附录</li>
  32. </ul>
  33. <nav>
  34. </footer>
  35. </body>
  36. </header>
复制代码

代码2-2iPhoneSafari下的运行效果如图2-6所示

论坛里有网友分享更多关于本篇文章的案例》》 探讨一下,你不了解的html5!


扫描关注蚂蚁HTML5社区官方微信

无语
2

惊吓

期待
1

很赞

差劲

刚表态过的朋友 (3 人)

相关阅读

发表评论

最新评论

引用 YABN456 2019-4-20 00:07
先搜藏
引用 sodikpfhspohi 2018-7-23 23:17
xuia先搜藏了,感觉后面还是用得到
引用 gzg555888 2017-3-4 10:36
比较简单,没有说的实际核心

查看全部评论(3)

热门教程

【教程下载】HTML5移动应用开发入门经典
【教程下载】HTML5移动应用开发入门经典
【HTML5开发教程下载】HTML5移动应用开发入门经典,总共24章,每章一个小时学习时间,
【教程下载】HTML5与CSS3权威指南
【教程下载】HTML5与CSS3权威指南
《HTML 5与CSS 3权威指南》内容系统而全面,详尽地讲解了html 5和css 3的所有新功能和
【教程下载】HTML5游戏开发(全)
【教程下载】HTML5游戏开发(全)
【HTML5游戏开发(全)】本书分为9章。 学习如何绘制游戏对象、绘制动画、加入音频等
关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 蚂蚁开源 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|Zzfriend

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

返回顶部