【文档说明】第2讲移动设备HTML5页面布局课件.ppt，共(54)页，1.783 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-92611.html

以下为本文档部分文字说明：

HTML5移动Web开发广州大学华软软件学院第2讲移动设备HTML5页面布局HTML5移动Web开发第2页主要内容1.HTML5新语义元素概述2.常见移动应用布局3.使用HTML5创建标准的移动Web页面4.习题HTML5移动Web开发第3页

1、HTML5新语义元素•1.header定义文档的页眉（介绍信息）•2.footer定义末尾部分•3.nav构建导航•4.aside定义一个页面的区域•5.article描述文档中一块独立的文档内容•6.section定义文档中

的节•7.hgroup定义为对网页或区段的标题元素进行组合•等HTML5移动Web开发第4页1.header定义文档的页眉（介绍信息）<header><h1>Welcometomyhomepage</h1><p>MynameisDonaldDuck</p></header><d

ivclass="header"><h1>Welcometomyhomepage</h1><p>MynameisDonaldDuck</p></div>HTML5移动Web开发第5页运行效果示意图HTML5移动Web开发第6页2.footer定义

末尾部分•定义和用法1.<footer>标签定义文档或节的页脚。2.<footer>元素应当含有其包含元素的信息。3.页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。4.可以在一个文档中使用多个<footer>元素。HTML5

移动Web开发第10页•<footer>•<p>Postedby:zxf</p>•<p>•Contactinformation:<ahref="mailto:someone@example.com">•someone@example.com</a>•</p>•</footer>HTML5移

动Web开发第11页3.nav构建导航HTML5移动Web开发第12页•<footer>•<nav>•<ahref="/ex2_1.html">ex2-1</a>•<ahref="/ex2_2.html">e

x2-2</a>•Contactinformation:<ahref="mailto:someone@example.com">•someone@example.com</a>•</nav>•</footer>HTML5移动Web开发第13页•<footer>•<nav>•

<ul>•<li><ahref="/ex2_1.html">ex2-1</a></li>•<li><ahref="/ex2_2.html">ex2-2</a></li>•<li>Contactinformation:•<ahref="mailto

:someone@example.com">•someone@example.com</a>•</li>•</ul>•</nav>•</footer>HTML5移动Web开发第14页HTML5移动Web开发第15页HTM

L5移动Web开发第16页4.aside定义一个页面的区域•定义和用法1.<aside>标签定义其所处内容之外的内容。2.aside的内容应该与附近的内容相关。3.<aside>的内容可用作文章的侧栏。HTML5移动Web开发第17页典型的博客布局HTML5移动Web开发第18页

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

档中的节•<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。HTML5移动Web开发第20页HTML5移动Web开发第21页7.hgroup•HTML5移动Web开发第22页•<hgroup>•<h1>这是主标题</h1>•<h2>这是

副标题</h2>•</hgroup>•<p>Therestofthecontent...</p>HTML5移动Web开发第23页7.hgroup•对于hgroup元素的用法，虽然没有严格的要求，但是适当的使用hgroup元素对于SEO有一定的好处，hgroup中建议使用h1-h6标签。HTM

L5移动Web开发第24页2、常见移动应用布局HTML5移动Web开发第25页HTML5移动Web开发第26页HTML5移动Web开发第27页三段式结构是一种最基本布局方式•单视图并不一定都有head

或foot，所以Header、Footer使用虚线来表示。多数应用中还会有导航条（Navigatior），但一般情况下导航条会被计算为Header或Content的一部分，而不会独立存在。HTML5移动Web开发第28页3、使用HTML5创建标准

的移动Web页面1.从前图UI布局可以看出，主要区域包括header，正文article。2.header标签包含标题和nav导航列表。3.section标签包含全部article中文内容，每条article相当于列表的一项值。HTML5移动

Web开发第29页HTML5移动Web开发第30页请问，修改了那些地方？HTML5移动Web开发第31页HTML5移动Web开发第32页课堂练习•利用HTML5创建一个简单的web页面，页面规划如下图：headersection导航asid

e<导航>articlefooterHTML5移动Web开发第33页课后作业•已给代码是一个人的简历的网页描述。•请修改代码，选择合适的布局方式，使其可在移动端正常浏览，并把其中的显示的内容修改为你个人的信息（正文）。•源代码见：r

esume_demo-原版HTML5移动Web开发第34页附录•我们来看一下流行的页面布局有哪些？•这些布局不局限于web，泛指所有移动应用的页面布局。HTML5移动Web开发第35页1，竖排列表•竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的，文字是横屏显示的，因此竖排列表可

以包含比较多的信息。列表长度可以没有限制，通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。HTML5移动Web开发第36页HTML5移动W

eb开发第37页2、横排方块•横排方块是把并列元素横向显示的一种布局。我们常见的工具栏，TAB，Coverflow等都采用这种布局。受屏幕宽度限制，它可显示的数量较少，但可通过左右滑动屏幕或点击箭头查看更多内容，不过这需要用户进行主动探索。它比较适合元素数量较少的情

形，当需要展示更多的内容适，竖排列表则是更优的选择。HTML5移动Web开发第38页HTML5移动Web开发第39页3，九宫格•九宫格是非常经典的设计，展示形式简单明了，用户接受度很广。当元素数量固定不变为8、9、12、16时，则适合采用九宫格。虽然它有时候

给人设计老套的感觉，不过它的一些变体目前比较流行，比如METRO风格，一行两格的设计等。HTML5移动Web开发第40页HTML5移动Web开发第41页4，TAB•采用TAB可以减少界面跳转的层级，可以将并列的信息通过横向或竖向TAB来表现。与传统的一级一

级的架构方式对比，此种架构方式可以减少用户的点击次数，提高效率。当功能之间联系密切，用户需要频繁在各功能之间进行频繁时，TAB布局是首选。HTML5移动Web开发第42页HTML5移动Web开发第43页5，多面板•多面版的布局常见于PAD终端，手机上也会用到。多面版很像竖屏排列的TAB

，可以展示更多的信息量，操作效率较高，适合分类和内容都比较多的情形。它的不足是界面比较拥挤。HTML5移动Web开发第44页HTML5移动Web开发第45页6，手风琴•手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容，在不用的时候，内容是隐藏的。因此它可承载比较多的信息，同时

保持界面简洁。手风琴可以减少界面跳转，与树形结构相比，手风琴减少点击次数，提高操作效率。手风琴在浏览器上很常见，很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。HTML5移动Web开发第46页HTML5移动Web开发第47页7，弹出框•弹出框很常见，也属于布局设计的一种。弹出框把

内容隐藏，仅在需要的时候才弹出，以节省屏幕空间。弹出框可在原有界面上进行操作，不必跳出界面，体验比较连贯。弹出框在安卓系统上的使用很普遍，比菜单、单选框、多选框等，在IOS系统上使用相对少些。HTML5移动Web开发第48页HTML5移动Web开发第49页8，抽屉/侧边栏•抽屉也是将内

容先藏起来，在需要时再展开。弹出框一般是完成设置或完成某个任务，而抽屉展示的一般是具体内容。抽屉在交互体验上更加自然，和原界面融合较好。抽屉栏一般从顶部或底部拉出，若是从左右两侧拉出的，我们一般称为侧边栏。Path和一些浏览器

的书签，均采用了侧边栏的设计。HTML5移动Web开发第50页HTML5移动Web开发第51页9，标签•在搜索界面和分类界面时，会采用标签的方式来展现。标签方式比较动感的，增加了应用的趣味性，但使用场景较有限。HTML5移动Web开

发第52页HTML5移动Web开发第53页例•分别运行•有什么不同？•modernizr，请自行查资料了解。HTML5移动Web开发第54页例•分别运行•有什么不同？HTML5移动Web开发第55页流体布

局•就是网页缩小和放大时网页布局会随着浏览器的大小而改变！•由于页面中的宽度值都是百分数，所以拉伸、缩小浏览器的大小，布局的宽度会随之变化儿不会出现横向滚动条。这种布局叫做流体布局，可以增加文本的易读性。•但是流体布局也

有缺点。在窗口宽度小的时候，行变得非常窄，很难阅读。在多列布局中尤其如此。并且，很多时候，会遇到文字溢出等情况！HTML5移动Web开发第56页课后作业•已给代码是一个人的简历的网页描述。•请修改代码

，选择合适的布局方式，使其可在移动端正常浏览，并把其中的显示的内容修改为你个人的信息（正文）。•源代码见：resume_demo-原版•上交方式：把css、js、html等文件打包成一个文件夹，命名为

：实验2-学号姓名，下次上课之前上交到FTP。HTML5移动Web开发第57页