第2讲 移动设备HTML5页面布局

1、HTML5移动移动Web开发开发广州大学华软软件学院广州大学华软软件学院第第2讲讲 移动设备移动设备HTML5页面布局页面布局HTML5移动移动Web开发开发第第2页页主要内容主要内容HTML5新语义元素概述新语义元素概述常见移动应用布局常见移动应用布局使用使用HTML5创建标准的移动创建标准的移动Web页面页面习题习题HTML5移动移动Web开发开发第第3页页1、HTML5新语义元素新语义元素 1.header定义文档的页眉（介绍信息）定义文档的页眉（介绍信息） 2.footer定义末尾部分定义末尾部分 3.nav构建导航构建导航 4.aside定义一个页面的区域定义一个页面的区域 5.ar

2、ticle描述文档中一块独立的文档内容描述文档中一块独立的文档内容 6.section定义文档中的节定义文档中的节 7.hgroup定义为对网页或区段的标题元素进行组合定义为对网页或区段的标题元素进行组合 等等HTML5移动移动Web开发开发第第4页页1.header定义文档的页眉（介绍信息）定义文档的页眉（介绍信息） Welcome to my homepage My name is Donald Duck Welcome to my homepage My name is Donald Duck HTML5移动移动Web开发开发第第5页页运行效果示意图运行效果示意图HTML5移动移动Web

3、开发开发第第6页页2.footer定义末尾部分定义末尾部分定义和用法定义和用法 标签定义文档或节的页脚。标签定义文档或节的页脚。 元素应当含有其包含元素的信息。元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。链接、联系信息等等。1. 可以在一个文档中使用多个可以在一个文档中使用多个 元素。元素。HTML5移动移动Web开发开发第第7页页2.footer定义末尾部分定义末尾部分HTML5移动移动Web开发开发第第8页页2.footer定义末尾部分定义末尾部分 提示和注释提示和注释 提示：提示： 元素内的联系信息

4、应该位于元素内的联系信息应该位于 标签中。标签中。 全局属性全局属性 标签支持标签支持 HTML 中的全局属性。中的全局属性。 事件属性事件属性 标签支持标签支持 HTML 中的事件属性。中的事件属性。HTML5移动移动Web开发开发第第9页页下面的全局属性可用于任何下面的全局属性可用于任何 HTML 元素元素HTML5移动移动Web开发开发第第10页页 Posted by: zxf Contact information: HTML5移动移动Web开发开发第第11页页3.nav构建导航构建导航HTML5移动移动Web开发开发第第12页页 ex2-1 ex2-2 Contact informa

5、tion: HTML5移动移动Web开发开发第第13页页 ex2-1 ex2-2 Contact information: HTML5移动移动Web开发开发第第14页页HTML5移动移动Web开发开发第第15页页HTML5移动移动Web开发开发第第16页页4.aside定义一个页面的区域定义一个页面的区域定义和用法定义和用法 标签定义其所处内容之外的内容。标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。的内容应该与附近的内容相关。1. 的内容可用作文章的侧栏。的内容可用作文章的侧栏。HTML5移动移动Web开发开发第第17页页典型的博客布局典型的博客布局HTML5移动移动

6、Web开发开发第第18页页5.article描述独立的文档内容描述独立的文档内容 标签规定独立的自包含内容。标签规定独立的自包含内容。 一篇文章应有其自身的意义，应该有可能独立于站点一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。的其余部分对其进行分发。 元素的潜在来源：元素的潜在来源： 论坛帖子论坛帖子 报纸文章报纸文章 博客条目博客条目 用户评论用户评论HTML5移动移动Web开发开发第第19页页6.section定义文档中的节定义文档中的节 标签定义文档中的节（标签定义文档中的节（section、区、区段）。比如章节、页眉、页脚或文档中的其他部分。段）。比如章节、页

7、眉、页脚或文档中的其他部分。HTML5移动移动Web开发开发第第20页页HTML5移动移动Web开发开发第第21页页7.hgroupHTML5移动移动Web开发开发第第22页页 这是主标题这是主标题 这是副标题这是副标题 The rest of the content.HTML5移动移动Web开发开发第第23页页7.hgroup 对于对于hgroup元素的用法，虽然没有严格的要求，元素的用法，虽然没有严格的要求，但是适当的使用但是适当的使用hgroup元素对于元素对于SEO有一定的好有一定的好处，处，hgroup中建议使用中建议使用h1-h6标签。标签。HTML5移动移动Web开发开发第第24

8、页页2、常见移动应用布局、常见移动应用布局HTML5移动移动Web开发开发第第25页页HTML5移动移动Web开发开发第第26页页HTML5移动移动Web开发开发第第27页页三段式结构是一种最基本布局方式三段式结构是一种最基本布局方式 单视图并不一定都有单视图并不一定都有head或或foot，所，所以以Header、Footer使用虚线来表示。使用虚线来表示。多数应用中还会有导航条多数应用中还会有导航条（Navigatior），但一般情况下导航），但一般情况下导航条会被计算为条会被计算为Header或或Content的一的一部分，而不会独立存在。部分，而不会独立存在。HTML5移动移动Web开

9、发开发第第28页页3、使用、使用HTML5创建标准的移动创建标准的移动Web页面页面从前图从前图UI布局可以看出，主要区域包括布局可以看出，主要区域包括header，正文正文article。header标签包含标题和标签包含标题和nav导航列表。导航列表。section标签包含全部标签包含全部article中文内容，每条中文内容，每条article相当于列表的一项值。相当于列表的一项值。HTML5移动移动Web开发开发第第29页页HTML5移动移动Web开发开发第第30页页请问，修改了请问，修改了那些地方？那些地方？HTML5移动移动Web开发开发第第31页页HTML5移动移动Web开发开发第

10、第32页页课堂练习课堂练习 利用利用HTML5创建一个简创建一个简单的单的web页面，页面规页面，页面规划如下图：划如下图：headersection导航asidearticlefooterHTML5移动移动Web开发开发第第33页页课后作业课后作业 已给代码是一个人的简历的网页描述。已给代码是一个人的简历的网页描述。 请修改代码，请修改代码，选择合适的布局方式选择合适的布局方式，使其可在移动，使其可在移动端正常浏览，并把其中的显示的内容修改为你个人端正常浏览，并把其中的显示的内容修改为你个人的信息（正文）。的信息（正文）。 源代码见：源代码见：resume_demo-原版原版HTML5移动移

11、动Web开发开发第第34页页附录附录 我们来看一下流行的页面布局有哪些？我们来看一下流行的页面布局有哪些？ 这些布局不局限于这些布局不局限于web，泛指所有移动应用的页面，泛指所有移动应用的页面布局。布局。HTML5移动移动Web开发开发第第35页页1，竖排列表，竖排列表 竖排列表是最常用的布局之一。手机屏幕一般是列竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的，文字是横屏显示的，因此竖排列表表竖屏显示的，文字是横屏显示的，因此竖排列表可以包含比较多的信息。列表长度可以没有限制，可以包含比较多的信息。列表长度可以没有限制，通过上下滑动可以查看更多内容。竖排列表在视觉通过上下滑动可以查

12、看更多内容。竖排列表在视觉上整齐美观，用户接受度很高，常用于并列元素的上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。展示，包括目录、分类、内容等。HTML5移动移动Web开发开发第第36页页HTML5移动移动Web开发开发第第37页页2、 横排方块横排方块横排方块是把并列元素横向显示的一种布局。我们常见的工横排方块是把并列元素横向显示的一种布局。我们常见的工具栏，具栏，TAB，Coverflow 等都采用这种布局。受屏幕宽度限等都采用这种布局。受屏幕宽度限制，它可显示的数量较少，但可通过左右滑动屏幕或点击箭制，它可显示的数量较少，但可通过左右滑动屏幕或点击箭头查看更

13、多内容，不过这需要用户进行主动探索。它比较适头查看更多内容，不过这需要用户进行主动探索。它比较适合元素数量较少的情形，当需要展示更多的内容适，竖排列合元素数量较少的情形，当需要展示更多的内容适，竖排列表则是更优的选择。表则是更优的选择。HTML5移动移动Web开发开发第第38页页HTML5移动移动Web开发开发第第39页页3，九宫格，九宫格九宫格是非常经典的设计，展示形式简单明了，用户接受度九宫格是非常经典的设计，展示形式简单明了，用户接受度很广。当元素数量固定不变为很广。当元素数量固定不变为8、9、12、16时，则适合采时，则适合采用九宫格。虽然它有时候给人设计老套的感觉，不过它的一用九宫格

14、。虽然它有时候给人设计老套的感觉，不过它的一些变体目前比较流行，比如些变体目前比较流行，比如METRO风格，一行两格的设计风格，一行两格的设计等。等。HTML5移动移动Web开发开发第第40页页HTML5移动移动Web开发开发第第41页页4，TAB采用采用TAB可以减少界面跳转的层级，可以将并列的信息通过可以减少界面跳转的层级，可以将并列的信息通过横向或竖向横向或竖向TAB来表现。与传统的一级一级的架构方式对比，来表现。与传统的一级一级的架构方式对比，此种架构方式可以减少用户的点击次数，提高效率。当功能此种架构方式可以减少用户的点击次数，提高效率。当功能之间联系密切，用户需要频繁在各功能之间进

15、行频繁时，之间联系密切，用户需要频繁在各功能之间进行频繁时，TAB布局是首选。布局是首选。HTML5移动移动Web开发开发第第42页页HTML5移动移动Web开发开发第第43页页5，多面板，多面板 多面版的布局常见于多面版的布局常见于PAD终端，手机上也会用到。终端，手机上也会用到。多面版很像竖屏排列的多面版很像竖屏排列的TAB，可以展示更多的信息，可以展示更多的信息量，操作效率较高，适合分类和内容都比较多的情量，操作效率较高，适合分类和内容都比较多的情形。它的不足是界面比较拥挤。形。它的不足是界面比较拥挤。HTML5移动移动Web开发开发第第44页页HTML5移动移动Web开发开发第第45页

16、页 6，手风琴，手风琴手风琴布局常见于两级结构的内容。用户点击分类可展开显手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容，在不用的时候，内容是隐藏的。因此它可承载示二级内容，在不用的时候，内容是隐藏的。因此它可承载比较多的信息，同时保持界面简洁。手风琴可以减少界面跳比较多的信息，同时保持界面简洁。手风琴可以减少界面跳转，与树形结构相比，手风琴减少点击次数，提高操作效率。转，与树形结构相比，手风琴减少点击次数，提高操作效率。手风琴在浏览器上很常见，很多浏览器的导航、历史、下载手风琴在浏览器上很常见，很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。管理等页面均采用了手风

17、琴的设计。HTML5移动移动Web开发开发第第46页页HTML5移动移动Web开发开发第第47页页7，弹出框，弹出框弹出框很常见，也属于布局设计的一种。弹出框把内容隐藏，弹出框很常见，也属于布局设计的一种。弹出框把内容隐藏，仅在需要的时候才弹出，以节省屏幕空间。弹出框可在原有仅在需要的时候才弹出，以节省屏幕空间。弹出框可在原有界面上进行操作，不必跳出界面，体验比较连贯。弹出框在界面上进行操作，不必跳出界面，体验比较连贯。弹出框在安卓系统上的使用很普遍，比菜单、单选框、多选框等，在安卓系统上的使用很普遍，比菜单、单选框、多选框等，在IOS系统上使用相对少些。系统上使用相对少些。HTML5移动移动

18、Web开发开发第第48页页HTML5移动移动Web开发开发第第49页页8，抽屉，抽屉/侧边栏侧边栏 抽屉也是将内容先藏起来，在需要时再展开。弹出抽屉也是将内容先藏起来，在需要时再展开。弹出框一般是完成设置或完成某个任务，而抽屉展示的框一般是完成设置或完成某个任务，而抽屉展示的一般是具体内容。抽屉在交互体验上更加自然，和一般是具体内容。抽屉在交互体验上更加自然，和原界面融合较好。抽屉栏一般从顶部或底部拉出，原界面融合较好。抽屉栏一般从顶部或底部拉出，若是从左右两侧拉出的，我们一般称为侧边栏。若是从左右两侧拉出的，我们一般称为侧边栏。Path和一些浏览器的书签，均采用了侧边栏的设计。和一些浏览器的

19、书签，均采用了侧边栏的设计。HTML5移动移动Web开发开发第第50页页HTML5移动移动Web开发开发第第51页页9，标签，标签 在搜索界面和分类界面时，会采用标签的方式来展在搜索界面和分类界面时，会采用标签的方式来展现。标签方式比较动感的，增加了应用的趣味性，现。标签方式比较动感的，增加了应用的趣味性，但使用场景较有限。但使用场景较有限。HTML5移动移动Web开发开发第第52页页HTML5移动移动Web开发开发第第53页页例例 分别运行分别运行 有什么不同？有什么不同？ modernizr，请自行查资料了解。，请自行查资料了解。HTML5移动移动Web开发开发第第54页页例例 分别运行分别运行 有什么不同？有什么不同？HTML5移动移动Web开发开发第第55页页流体布局流体布局 就