移動(dòng)設(shè)備HTML面布局課件

第2講移動(dòng)設(shè)備HTML5

頁(yè)面布局廣州大學(xué)華軟軟件學(xué)院第2講移動(dòng)設(shè)備HTML5

頁(yè)面布局廣州大學(xué)華軟軟件學(xué)院主要內(nèi)容HTML5新語(yǔ)義元素概述常見(jiàn)移動(dòng)應(yīng)用布局使用HTML5創(chuàng)建標(biāo)準(zhǔn)的移動(dòng)Web頁(yè)面習(xí)題主要內(nèi)容HTML5新語(yǔ)義元素概述1、HTML5新語(yǔ)義元素1.header定義文檔的頁(yè)眉（介紹信息）2.footer定義末尾部分3.nav構(gòu)建導(dǎo)航4.aside定義一個(gè)頁(yè)面的區(qū)域5.article描述文檔中一塊獨(dú)立的文檔內(nèi)容6.section定義文檔中的節(jié)7.hgroup定義為對(duì)網(wǎng)頁(yè)或區(qū)段的標(biāo)題元素進(jìn)行組合等1、HTML5新語(yǔ)義元素1.header定義文檔的頁(yè)眉（介紹1.header定義文檔的頁(yè)眉（介紹信息）<header><h1>Welcometomyhomepage</h1><p>MynameisDonaldDuck</p></header>等價(jià)于<divclass="header"><h1>Welcometomyhomepage</h1><p>MynameisDonaldDuck</p></div>1.header定義文檔的頁(yè)眉（介紹信息）<head運(yùn)行效果示意圖運(yùn)行效果示意圖2.footer定義末尾部分定義和用法<footer>標(biāo)簽定義文檔或節(jié)的頁(yè)腳。<footer>元素應(yīng)當(dāng)含有其包含元素的信息。頁(yè)腳通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等?？梢栽谝粋€(gè)文檔中使用多個(gè)<footer>元素。2.footer定義末尾部分定義和用法2.footer定義末尾部分2.footer定義末尾部分2.footer定義末尾部分提示和注釋提示：<footer>元素內(nèi)的聯(lián)系信息應(yīng)該位于<address>標(biāo)簽中。全局屬性<footer>標(biāo)簽支持HTML中的全局屬性。事件屬性<footer>標(biāo)簽支持HTML中的事件屬性。2.footer定義末尾部分提示和注釋下面的全局屬性可用于任何HTML元素下面的全局屬性可用于任何HTML元素<footer><p>Postedby:zxf</p><p>Contactinformation:<ahref="mailto:someone@"> someone@</a></p></footer><footer>3.nav構(gòu)建導(dǎo)航3.nav構(gòu)建導(dǎo)航<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講移動(dòng)設(shè)備HTML5頁(yè)面布局課件第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件4.aside定義一個(gè)頁(yè)面的區(qū)域定義和用法<aside>標(biāo)簽定義其所處內(nèi)容之外的內(nèi)容。aside的內(nèi)容應(yīng)該與附近的內(nèi)容相關(guān)。<aside>的內(nèi)容可用作文章的側(cè)欄。4.aside定義一個(gè)頁(yè)面的區(qū)域定義和用法典型的博客布局典型的博客布局5.article描述獨(dú)立的文檔內(nèi)容<article>標(biāo)簽規(guī)定獨(dú)立的自包含內(nèi)容。一篇文章應(yīng)有其自身的意義，應(yīng)該有可能獨(dú)立于站點(diǎn)的其余部分對(duì)其進(jìn)行分發(fā)。<article>元素的潛在來(lái)源：論壇帖子報(bào)紙文章博客條目用戶評(píng)論5.article描述獨(dú)立的文檔內(nèi)容<article>標(biāo)簽6.section定義文檔中的節(jié)<section>標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。6.section定義文檔中的節(jié)<section>標(biāo)簽定義第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件7.hgroup

7.hgroup

<hgroup><h1>這是主標(biāo)題</h1><h2>這是副標(biāo)題</h2></hgroup><p>Therestofthecontent...</p><hgroup>7.hgroup對(duì)于hgroup元素的用法，雖然沒(méi)有嚴(yán)格的要求，但是適當(dāng)?shù)氖褂胔group元素對(duì)于SEO有一定的好處，hgroup中建議使用h1-h6標(biāo)簽。7.hgroup對(duì)于hgroup元素的用法，雖然沒(méi)有嚴(yán)格的要2、常見(jiàn)移動(dòng)應(yīng)用布局2、常見(jiàn)移動(dòng)應(yīng)用布局第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件三段式結(jié)構(gòu)是一種最基本布局方式單視圖并不一定都有head或foot，所以Header、Footer使用虛線來(lái)表示。多數(shù)應(yīng)用中還會(huì)有導(dǎo)航條（Navigatior），但一般情況下導(dǎo)航條會(huì)被計(jì)算為Header或Content的一部分，而不會(huì)獨(dú)立存在。三段式結(jié)構(gòu)是一種最基本布局方式單視圖并不一定都有head或f3、使用HTML5創(chuàng)建標(biāo)準(zhǔn)的移動(dòng)Web頁(yè)面從前圖UI布局可以看出，主要區(qū)域包括header，正文article。header標(biāo)簽包含標(biāo)題和nav導(dǎo)航列表。section標(biāo)簽包含全部article中文內(nèi)容，每條article相當(dāng)于列表的一項(xiàng)值。3、使用HTML5創(chuàng)建標(biāo)準(zhǔn)的移動(dòng)Web頁(yè)面從前圖UI布局可以第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件請(qǐng)問(wèn)，修改了那些地方？請(qǐng)問(wèn)，修改了那些地方？第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件課堂練習(xí)利用HTML5創(chuàng)建一個(gè)簡(jiǎn)單的web頁(yè)面，頁(yè)面規(guī)劃如下圖：headersection導(dǎo)航aside<導(dǎo)航>articlefooter課堂練習(xí)利用HTML5創(chuàng)建一個(gè)簡(jiǎn)單的web頁(yè)面，頁(yè)面規(guī)劃如下課后作業(yè)已給代碼是一個(gè)人的簡(jiǎn)歷的網(wǎng)頁(yè)描述。請(qǐng)修改代碼，選擇合適的布局方式，使其可在移動(dòng)端正常瀏覽，并把其中的顯示的內(nèi)容修改為你個(gè)人的信息（正文）。源代碼見(jiàn)：resume_demo-原版課后作業(yè)已給代碼是一個(gè)人的簡(jiǎn)歷的網(wǎng)頁(yè)描述。附錄我們來(lái)看一下流行的頁(yè)面布局有哪些？這些布局不局限于web，泛指所有移動(dòng)應(yīng)用的頁(yè)面布局。附錄我們來(lái)看一下流行的頁(yè)面布局有哪些？1，豎排列表豎排列表是最常用的布局之一。手機(jī)屏幕一般是列表豎屏顯示的，文字是橫屏顯示的，因此豎排列表可以包含比較多的信息。列表長(zhǎng)度可以沒(méi)有限制，通過(guò)上下滑動(dòng)可以查看更多內(nèi)容。豎排列表在視覺(jué)上整齊美觀，用戶接受度很高，常用于并列元素的展示，包括目錄、分類、內(nèi)容等。1，豎排列表豎排列表是最常用的布局之一。手機(jī)屏幕一般是列表豎第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件2、橫排方塊橫排方塊是把并列元素橫向顯示的一種布局。我們常見(jiàn)的工具欄，TAB，Coverflow等都采用這種布局。受屏幕寬度限制，它可顯示的數(shù)量較少，但可通過(guò)左右滑動(dòng)屏幕或點(diǎn)擊箭頭查看更多內(nèi)容，不過(guò)這需要用戶進(jìn)行主動(dòng)探索。它比較適合元素?cái)?shù)量較少的情形，當(dāng)需要展示更多的內(nèi)容適，豎排列表則是更優(yōu)的選擇。2、橫排方塊橫排方塊是把并列元素橫向顯示的一種布局。我們常第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件3，九宮格九宮格是非常經(jīng)典的設(shè)計(jì)，展示形式簡(jiǎn)單明了，用戶接受度很廣。當(dāng)元素?cái)?shù)量固定不變?yōu)?、9、12、16時(shí)，則適合采用九宮格。雖然它有時(shí)候給人設(shè)計(jì)老套的感覺(jué)，不過(guò)它的一些變體目前比較流行，比如METRO風(fēng)格，一行兩格的設(shè)計(jì)等。3，九宮格九宮格是非常經(jīng)典的設(shè)計(jì)，展示形式簡(jiǎn)單明了，用戶接受第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件4，TAB采用TAB可以減少界面跳轉(zhuǎn)的層級(jí)，可以將并列的信息通過(guò)橫向或豎向TAB來(lái)表現(xiàn)。與傳統(tǒng)的一級(jí)一級(jí)的架構(gòu)方式對(duì)比，此種架構(gòu)方式可以減少用戶的點(diǎn)擊次數(shù)，提高效率。當(dāng)功能之間聯(lián)系密切，用戶需要頻繁在各功能之間進(jìn)行頻繁時(shí)，TAB布局是首選。4，TAB采用TAB可以減少界面跳轉(zhuǎn)的層級(jí)，可以將并列的信息第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件5，多面板多面版的布局常見(jiàn)于PAD終端，手機(jī)上也會(huì)用到。多面版很像豎屏排列的TAB，可以展示更多的信息量，操作效率較高，適合分類和內(nèi)容都比較多的情形。它的不足是界面比較擁擠。5，多面板多面版的布局常見(jiàn)于PAD終端，手機(jī)上也會(huì)用到。多面第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件6，手風(fēng)琴手風(fēng)琴布局常見(jiàn)于兩級(jí)結(jié)構(gòu)的內(nèi)容。用戶點(diǎn)擊分類可展開(kāi)顯示二級(jí)內(nèi)容，在不用的時(shí)候，內(nèi)容是隱藏的。因此它可承載比較多的信息，同時(shí)保持界面簡(jiǎn)潔。手風(fēng)琴可以減少界面跳轉(zhuǎn)，與樹(shù)形結(jié)構(gòu)相比，手風(fēng)琴減少點(diǎn)擊次數(shù)，提高操作效率。手風(fēng)琴在瀏覽器上很常見(jiàn)，很多瀏覽器的導(dǎo)航、歷史、下載管理等頁(yè)面均采用了手風(fēng)琴的設(shè)計(jì)。6，手風(fēng)琴手風(fēng)琴布局常見(jiàn)于兩級(jí)結(jié)構(gòu)的內(nèi)容。用戶點(diǎn)擊分類可展第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件7，彈出框彈出框很常見(jiàn)，也屬于布局設(shè)計(jì)的一種。彈出框把內(nèi)容隱藏，僅在需要的時(shí)候才彈出，以節(jié)省屏幕空間。彈出框可在原有界面上進(jìn)行操作，不必跳出界面，體驗(yàn)比較連貫。彈出框在安卓系統(tǒng)上的使用很普遍，比菜單、單選框、多選框等，在IOS系統(tǒng)上使用相對(duì)少些。7，彈出框彈出框很常見(jiàn)，也屬于布局設(shè)計(jì)的一種。彈出框把內(nèi)容隱第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件8，抽屜/側(cè)邊欄抽屜也是將內(nèi)容先藏起來(lái)，在需要時(shí)再展開(kāi)。彈出框一般是完成設(shè)置或完成某個(gè)任務(wù)，而抽屜展示的一般是具體內(nèi)容。抽屜在交互體驗(yàn)上更加自然，和原界面融合較好。抽屜欄一般從頂部或底部拉出，若是從左右兩側(cè)拉出的，我們一般稱為側(cè)邊欄。Path和一些瀏覽器的書(shū)簽，均采用了側(cè)邊欄的設(shè)計(jì)。8，抽屜/側(cè)邊欄抽屜也是將內(nèi)容先藏起來(lái)，在需要時(shí)再展開(kāi)。彈出第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件9，標(biāo)簽在搜索界面和分類界面時(shí)，會(huì)采用標(biāo)簽的方式來(lái)展現(xiàn)。標(biāo)簽方式比較動(dòng)感的，增加了應(yīng)用的趣味性，但使用場(chǎng)景較有限。9，標(biāo)簽在搜索界面和分類界面時(shí)，會(huì)采用標(biāo)簽的方式來(lái)展現(xiàn)。標(biāo)簽第2講移動(dòng)設(shè)備HTML5頁(yè)面布局課件例分別運(yùn)行有什么不同？modernizr，請(qǐng)自行查資料了解。例分別運(yùn)行例分別運(yùn)行有什么不同？例分別運(yùn)行流體布局就是網(wǎng)頁(yè)縮小和放大時(shí)網(wǎng)頁(yè)布局會(huì)隨著瀏覽器的大小而改變！由于頁(yè)面中的寬度值都是百分?jǐn)?shù)，所以拉伸、縮小瀏覽器的大小，布局的寬度會(huì)隨之變化兒不會(huì)出現(xiàn)橫向滾動(dòng)條。這種布局叫做流體布局，可以增加文本的易讀性。但是流體布局也有缺點(diǎn)。在窗口寬度小的時(shí)候，行變得非常窄，很難閱