移动设备HTML5页面布局.pptVIP

2、常见移动应用布局三段式结构是一种最基本布局方式单视图并不一定都有head或foot，所以Header、Footer使用虚线来表示。多数应用中还会有导航条（Navigatior），但一般情况下导航条会被计算为Header或Content的一部分，而不会独立存在。使用HTML5创建标准的移动Web页面A从前图UI布局可以看出，主要区域包括header，正文article。header标签包含标题和nav导航列表。section标签包含全部article中文内容，每条article相当于列表的一项值。B请问，修改了那些地方？课堂练习利用HTML5创建一个简单的web页面，页面规划如下图：01header02section03导航04aside导航05article06footer07已给代码是一个人的简历的网页描述。01请修改代码，选择合适的布局方式，使其可在移动端正常浏览，并把其中的显示的内容修改为你个人的信息（正文）。02源代码见：resume_demo-原版03课后作业01附录02我们来看一下流行的页面布局有哪些？这些布局不局限于web，泛指所有移动应用的页面布局。1，竖排列表竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的，文字是横屏显示的，因此竖排列表可以包含比较多的信息。列表长度可以没有限制，通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。2、横排方块横排方块是把并列元素横向显示的一种布局。我们常见的工具栏，TAB，Coverflow等都采用这种布局。受屏幕宽度限制，它可显示的数量较少，但可通过左右滑动屏幕或点击箭头查看更多内容，不过这需要用户进行主动探索。它比较适合元素数量较少的情形，当需要展示更多的内容适，竖排列表则是更优的选择。3，九宫格九宫格是非常经典的设计，展示形式简单明了，用户接受度很广。当元素数量固定不变为8、9、12、16时，则适合采用九宫格。虽然它有时候给人设计老套的感觉，不过它的一些变体目前比较流行，比如METRO风格，一行两格的设计等。HTML5移动Web开发第*页HTML5移动Web开发第*页HTML5移动Web开发广州大学华软软件学院HTML5移动Web开发广州大学华软软件学院提示和注释提示：如果文档中有“前后”按钮，则应该把它放到nav元素中。SEO由英文SearchEngineOptimization缩写而来，中文意译为“有哪些信誉好的足球投注网站引擎优化”。SEO是指从自然有哪些信誉好的足球投注网站结果获得网站流量的技术和过程，是在了解有哪些信誉好的足球投注网站引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在有哪些信誉好的足球投注网站引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的目标及用途。解释在书上17页解释在书上18页布置课后作业之前，先讲后面的附录。广州大学华软软件学院第2讲移动设备HTML5

页面布局主要内容HTML5新语义元素概述常见移动应用布局使用HTML5创建标准的移动Web页面习题header定义文档的页眉（介绍信息）footer定义末尾部分nav构建导航aside定义一个页面的区域article描述文档中一块独立的文档内容section定义文档中的节hgroup定义为对网页或区段的标题元素进行组合等1、HTML5新语义元素1.header定义文档的页眉（介绍信息）headerh1Welcometomyhomepage/h1pMynameisDonaldDuck/p/headerdivclass=headerh1Welcometomyhomepage/h1pMynameisDonaldDuck/p/div运行效果示意图2.footer定义末尾部分定义和用法footer标签定义文档或节的页脚。footer元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个footer元素。2.footer定义末尾部分01提示和注释提示：footer元素内的联系信息应该位于address标签中。02全局属性footer标签支持HTML中的全局属性。03事件属性footer标签支持HTML中的事件属性。2.footer定义末尾部分下面的全局属性可用于任何HTML元素footerPostedby:zxf/psomeone@/a/p/foo