移动设备html5页面布局.ppt

第2讲 移动设备HTML5页面布局
.
主要内容
HTML5新语义元素概述
常见移动应用布局
使用HTML5创建标准的移动Web页面
习题
1、HTML5新语义元素
（介绍信息）
>
<li><a href="/">ex2-1</a></li>
<li><a href="/">ex2-2</a></li>
<li>Contact information:
<a href="mailto:******@">
******@</a>
</li>
</ul>
</nav>
</footer>

定义和用法
<aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
<aside> 的内容可用作文章的侧栏。
典型的博客布局

<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
论坛帖子
报纸文章
博客条目
用户评论

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<hgroup>
<h1>这是主标题</h1>
<h2>这是副标题</h2>
</hgroup>
<p>The rest of the content...</p>

对于hgroup元素的用法，虽然没有严格的要求，但是适当的使用hgroup元素对于SEO有一定的好处，hgroup中建议使用h1-h6标签。
2、常见移动应用布局
三段式结构是一种最基本布局方式
单视图并不一定都有head或foot，所以Header、Footer使用虚线来表示。多数应用中还会有导航条（Navigatior），但一般情况下导航条会被计算为Header或Content的一部分，而不会独立存在。
3、使用HTML5创建标准的移动Web页面
从前图UI布局可以看出，主要区域包括header，正文article。
header标签包含标题和nav导航列表。
section标签包含全部article中文内容，每条article相当于列表的一项值。
请问，修改了那些地方？
课堂练习
利用HTML5创建一个简单的web页面，页面规划如下图：
header
section
导航
aside
<导航>
article
footer
课后作业
已给代码是一个人的简历的网页描述。
请修改代码，选择合适的布局方式，使其可在移动端正常浏览，并把其中的显示的内容修改为你个人的信息（正文）。
源代码见：resume_demo-原版
附录
我们来看一下流行的页面布局有哪些？
这些布局不局限于web，泛指所有移动应用的页面布局。
1，竖排列表
竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的，文字是横屏显示的，因此竖排列表可以包含比较多的信息。列表长度可以没有限制，通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。
2、 横排方块
横排方块是把并列元素横向显示的一种布局。我们常见的工具栏，TAB，Coverflow 等都采用这种布局。受屏幕宽度限制，它可显示的数量较少，但可通过左右滑动屏幕或点击箭头查看更多内容，不过这需要用户进行主动探索。它比较适合元素数量较少的情形，当需要展示更多的内容适，竖排列表则是更优的选择。
3，九宫格
九宫格是非常经典的设计，展示形式简单明了，用户接受度很广。当元素数量固定不变为8、9、12、16时，则适合采用九宫格。虽然它有时候给人设计老套的感觉，不过它的一些变体目前比较流行，比如METRO风格，一行两格的设计等。
4，TAB
采用TAB可以减少界面跳转的层级，可以将并列的信息通过横向或竖向TAB来表现。与传统的一级一级的架构方式对比，此种架构方式可以减少用户的点击次数，提高效率。当功能之间联系密切，用户需要频繁在各功能之间进行频繁时，TAB布局是首选。
5，多面板
多面版的布局常见于PAD终端