版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第2讲移动设备HTML5
页面布局广州大学华软软件学院第2讲移动设备HTML5
页面布局广州大学华软软件学院主要内容HTML5新语义元素概述常见移动应用布局使用HTML5创建标准的移动Web页面习题主要内容HTML5新语义元素概述1、HTML5新语义元素1.header定义文档的页眉(介绍信息)2.footer定义末尾部分3.nav构建导航4.aside定义一个页面的区域5.article描述文档中一块独立的文档内容6.section定义文档中的节7.hgroup定义为对网页或区段的标题元素进行组合等1、HTML5新语义元素1.header定义文档的页眉(介绍1.header定义文档的页眉(介绍信息)<header><h1>Welcometomyhomepage</h1><p>MynameisDonaldDuck</p></header>等价于<divclass="header"><h1>Welcometomyhomepage</h1><p>MynameisDonaldDuck</p></div>1.header定义文档的页眉(介绍信息)<head运行效果示意图运行效果示意图2.footer定义末尾部分定义和用法<footer>标签定义文档或节的页脚。<footer>元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个<footer>元素。2.footer定义末尾部分定义和用法2.footer定义末尾部分2.footer定义末尾部分2.footer定义末尾部分提示和注释提示:<footer>元素内的联系信息应该位于<address>标签中。全局属性<footer>标签支持HTML中的全局属性。事件属性<footer>标签支持HTML中的事件属性。2.footer定义末尾部分提示和注释下面的全局属性可用于任何HTML元素下面的全局属性可用于任何HTML元素<footer><p>Postedby:zxf</p><p>Contactinformation:<ahref="mailto:someone@"> someone@</a></p></footer><footer>3.nav构建导航3.nav构建导航<footer><nav><ahref="/ex2_1.html">ex2-1</a><ahref="/ex2_2.html">ex2-2</a>Contactinformation:<ahref="mailto:someone@"> someone@</a></nav></footer><footer><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@"> someone@</a></li></ul></nav></footer><footer>第2讲移动设备HTML5页面布局课件第2讲移动设备HTML5页面布局课件4.aside定义一个页面的区域定义和用法<aside>标签定义其所处内容之外的内容。aside的内容应该与附近的内容相关。<aside>的内容可用作文章的侧栏。4.aside定义一个页面的区域定义和用法典型的博客布局典型的博客布局5.article描述独立的文档内容<article>标签规定独立的自包含内容。一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。<article>元素的潜在来源:论坛帖子报纸文章博客条目用户评论5.article描述独立的文档内容<article>标签6.section定义文档中的节<section>标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。6.section定义文档中的节<section>标签定义第2讲移动设备HTML5页面布局课件7.hgroup
7.hgroup
<hgroup><h1>这是主标题</h1><h2>这是副标题</h2></hgroup><p>Therestofthecontent...</p><hgroup>7.hgroup对于hgroup元素的用法,虽然没有严格的要求,但是适当的使用hgroup元素对于SEO有一定的好处,hgroup中建议使用h1-h6标签。7.hgroup对于hgroup元素的用法,虽然没有严格的要2、常见移动应用布局2、常见移动应用布局第2讲移动设备HTML5页面布局课件第2讲移动设备HTML5页面布局课件三段式结构是一种最基本布局方式单视图并不一定都有head或foot,所以Header、Footer使用虚线来表示。多数应用中还会有导航条(Navigatior),但一般情况下导航条会被计算为Header或Content的一部分,而不会独立存在。三段式结构是一种最基本布局方式单视图并不一定都有head或f3、使用HTML5创建标准的移动Web页面从前图UI布局可以看出,主要区域包括header,正文article。header标签包含标题和nav导航列表。section标签包含全部article中文内容,每条article相当于列表的一项值。3、使用HTML5创建标准的移动Web页面从前图UI布局可以第2讲移动设备HTML5页面布局课件请问,修改了那些地方?请问,修改了那些地方?第2讲移动设备HTML5页面布局课件课堂练习利用HTML5创建一个简单的web页面,页面规划如下图:headersection导航aside<导航>articlefooter课堂练习利用HTML5创建一个简单的web页面,页面规划如下课后作业已给代码是一个人的简历的网页描述。请修改代码,选择合适的布局方式,使其可在移动端正常浏览,并把其中的显示的内容修改为你个人的信息(正文)。源代码见:resume_demo-原版课后作业已给代码是一个人的简历的网页描述。附录我们来看一下流行的页面布局有哪些?这些布局不局限于web,泛指所有移动应用的页面布局。附录我们来看一下流行的页面布局有哪些?1,竖排列表竖排列表是最常用的布局之一。手机屏幕一般是列表竖屏显示的,文字是横屏显示的,因此竖排列表可以包含比较多的信息。列表长度可以没有限制,通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观,用户接受度很高,常用于并列元素的展示,包括目录、分类、内容等。1,竖排列表竖排列表是最常用的布局之一。手机屏幕一般是列表竖第2讲移动设备HTML5页面布局课件2、横排方块横排方块是把并列元素横向显示的一种布局。我们常见的工具栏,TAB,Coverflow等都采用这种布局。受屏幕宽度限制,它可显示的数量较少,但可通过左右滑动屏幕或点击箭头查看更多内容,不过这需要用户进行主动探索。它比较适合元素数量较少的情形,当需要展示更多的内容适,竖排列表则是更优的选择。2、横排方块横排方块是把并列元素横向显示的一种布局。我们常第2讲移动设备HTML5页面布局课件3,九宫格九宫格是非常经典的设计,展示形式简单明了,用户接受度很广。当元素数量固定不变为8、9、12、16时,则适合采用九宫格。虽然它有时候给人设计老套的感觉,不过它的一些变体目前比较流行,比如METRO风格,一行两格的设计等。3,九宫格九宫格是非常经典的设计,展示形式简单明了,用户接受第2讲移动设备HTML5页面布局课件4,TAB采用TAB可以减少界面跳转的层级,可以将并列的信息通过横向或竖向TAB来表现。与传统的一级一级的架构方式对比,此种架构方式可以减少用户的点击次数,提高效率。当功能之间联系密切,用户需要频繁在各功能之间进行频繁时,TAB布局是首选。4,TAB采用TAB可以减少界面跳转的层级,可以将并列的信息第2讲移动设备HTML5页面布局课件5,多面板多面版的布局常见于PAD终端,手机上也会用到。多面版很像竖屏排列的TAB,可以展示更多的信息量,操作效率较高,适合分类和内容都比较多的情形。它的不足是界面比较拥挤。5,多面板多面版的布局常见于PAD终端,手机上也会用到。多面第2讲移动设备HTML5页面布局课件6,手风琴手风琴布局常见于两级结构的内容。用户点击分类可展开显示二级内容,在不用的时候,内容是隐藏的。因此它可承载比较多的信息,同时保持界面简洁。手风琴可以减少界面跳转,与树形结构相比,手风琴减少点击次数,提高操作效率。手风琴在浏览器上很常见,很多浏览器的导航、历史、下载管理等页面均采用了手风琴的设计。6,手风琴手风琴布局常见于两级结构的内容。用户点击分类可展第2讲移动设备HTML5页面布局课件7,弹出框弹出框很常见,也属于布局设计的一种。弹出框把内容隐藏,仅在需要的时候才弹出,以节省屏幕空间。弹出框可在原有界面上进行操作,不必跳出界面,体验比较连贯。弹出框在安卓系统上的使用很普遍,比菜单、单选框、多选框等,在IOS系统上使用相对少些。7,弹出框弹出框很常见,也属于布局设计的一种。弹出框把内容隐第2讲移动设备HTML5页面布局课件8,抽屉/侧边栏抽屉也是将内容先藏起来,在需要时再展开。弹出框一般是完成设置或完成某个任务,而抽屉展示的一般是具体内容。抽屉在交互体验上更加自然,和原界面融合较好。抽屉栏一般从顶部或底部拉出,若是从左右两侧拉出的,我们一般称为侧边栏。Path和一些浏览器的书签,均采用了侧边栏的设计。8,抽屉/侧边栏抽屉也是将内容先藏起来,在需要时再展开。弹出第2讲移动设备HTML5页面布局课件9,标签在搜索界面和分类界面时,会采用标签的方式来展现。标签方式比较动感的,增加了应用的趣味性,但使用场景较有限。9,标签在搜索界面和分类界面时,会采用标签的方式来展现。标签第2讲移动设备HTML5页面布局课件例分别运行有什么不同?modernizr,请自行查资料了解。例分别运行例分别运行有什么不同?例分别运行流体布局就是网页缩小和放大时网页布局会随着浏览器的大小而改变!由于页面中的宽度值都是百分数,所以拉伸、缩小浏览器的大小,布局的宽度会随之变化儿不会出现横向滚动条。这种布局叫做流体布局,可以增加文本的易读性。但是流体布局也有缺点。在窗口宽度小的时候,行变得非常窄,很难阅
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 启动除尘风机作业指导书理论考试
- 药物化学智慧树知到答案2024年浙江大学
- 湖南机场物流股份有限公司交货员考试题
- 18高中数学新教材课堂导学案(直线与圆锥曲线关系)
- 机动车零部件及配件相关行业投资方案范本
- 休闲专用车及其零附件相关行业投资规划报告
- 柱上式无功补偿装置相关行业投资方案
- 江西省宜春市高安市校联考2023-2024学年八年级12月月考道德与法治试题
- 风寒证方剂成分的安全阈值探索
- 甲午中日战争与列强瓜分中国狂潮 统编版八年级历史上册
- 《照明线路安装与检修》一体化课件-第一章 职业感知与安全用电
- 施工现场巡查岗位职责
- 沪外教2011版七年级英语上册《UNIT1 Back to School》教案及教学反思
- 环境保护税课件
- 2024届江苏省苏州市振华中学数学七年级第一学期期末质量检测模拟试题含解析
- 护理高水平专业群建设方案
- 白砂糖生产工艺
- 第五章病原物的致病性和寄主的抗病性课件
- 文科学术规范与学术论文写作课件
- 新型城镇化发展规划实施情况中期总结评估报告
- 12J3-1 天津市建筑标准设计图集(2012版)外墙外保温
评论
0/150
提交评论