課件 拓展模塊7.6 開(kāi)發(fā)簡(jiǎn)單HTML5應(yīng)用項(xiàng)目

07信息技術(shù)模塊7數(shù)字媒體技術(shù)

數(shù)字媒體是指以二進(jìn)制數(shù)的形式記錄、處理、傳播、獲取過(guò)程的信息載體，這些載體包括邏輯媒體和實(shí)物媒體。數(shù)字媒體就是以數(shù)字化形式（0或1）傳送信息，并通過(guò)計(jì)算機(jī)存儲(chǔ)、處理和傳播信息的媒體?！緦W(xué)習(xí)目標(biāo)】(1)了解數(shù)字媒體概念、數(shù)字媒體屬性、數(shù)字媒體特征等；(2)了解數(shù)字媒體技術(shù)概念和特性、研究應(yīng)用領(lǐng)域、未來(lái)發(fā)展及趨勢(shì)；(3)了解數(shù)字文本處理的技術(shù)過(guò)程、數(shù)字文本編輯、存儲(chǔ)、傳輸及展現(xiàn)；(4)了解數(shù)字圖像處理的技術(shù)過(guò)程、數(shù)字圖像處理的主要技術(shù)；(5)了解數(shù)字聲音處理的技術(shù)過(guò)程、數(shù)字聲音的編輯和應(yīng)用；(6)了解數(shù)字視頻處理技術(shù)過(guò)程、數(shù)字視頻的編輯和應(yīng)用(7)開(kāi)發(fā)簡(jiǎn)單的HTML5應(yīng)用項(xiàng)目、HTML5制作方法和HTML5發(fā)布【知識(shí)圖譜】目錄CONTENTS7.1認(rèn)知數(shù)字媒體和數(shù)字媒體技術(shù)7.2了解數(shù)字文本處理7.3了解數(shù)字圖像處理7.4了解數(shù)字聲音處理7.5了解數(shù)字視頻處理7.6開(kāi)發(fā)簡(jiǎn)單HTML5應(yīng)用項(xiàng)目7.6

開(kāi)發(fā)簡(jiǎn)單HTML5應(yīng)用項(xiàng)目067.6.1

認(rèn)知HTML51.HTML5的概念

HTML5是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式，是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式．被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開(kāi)發(fā)。作為Web中核心語(yǔ)言，用戶(hù)使用任何手段進(jìn)行網(wǎng)頁(yè)瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過(guò)一些技術(shù)處理將其轉(zhuǎn)換成為了可識(shí)別的信息。HTML5在從前HTML4.01的基礎(chǔ)上進(jìn)行了一定的改進(jìn)，是新時(shí)代的新背景下，一種新型互聯(lián)網(wǎng)傳播模式，也簡(jiǎn)稱(chēng)為H5。7.6.1

認(rèn)知HTML52.HTML5技術(shù)的優(yōu)勢(shì)

新一代互聯(lián)網(wǎng)技術(shù)的發(fā)展，使H5技術(shù)能夠在多媒體終端靈活地實(shí)現(xiàn)跨模式輸出，輸出模式也從傳統(tǒng)的單向模式變成了雙向互動(dòng)模式，使用戶(hù)的互聯(lián)網(wǎng)體驗(yàn)大大提升。用戶(hù)獲取的信息載體成多元化方式發(fā)展，H5以其節(jié)約化的圖像、個(gè)性化交互的方式成為熱門(mén)的互聯(lián)網(wǎng)傳播模式。往往具有設(shè)計(jì)方法靈活，方便修改；具有豐富多彩的交互先進(jìn)技術(shù)；具有較低的維護(hù)開(kāi)發(fā)成本等優(yōu)勢(shì)。7.6.2

使用HTML標(biāo)簽編寫(xiě)網(wǎng)頁(yè)的結(jié)構(gòu)

對(duì)于HTML5來(lái)講，在網(wǎng)頁(yè)結(jié)構(gòu)上標(biāo)簽定義與使用更加語(yǔ)義化，讓搜索引擎以及工程師更加迅速理解當(dāng)前網(wǎng)頁(yè)的整個(gè)重心所在。傳統(tǒng)HTML頁(yè)面布局和HTML5布局7.6.2

使用HTML標(biāo)簽編寫(xiě)網(wǎng)頁(yè)的結(jié)構(gòu)

HTML5中新增的主體結(jié)構(gòu)元素：article元素、section元素、aside元素、nav元素、time元素、pubdate元素，在結(jié)構(gòu)標(biāo)簽、多媒體標(biāo)簽、web應(yīng)用標(biāo)簽、注釋標(biāo)簽等方面有了新的補(bǔ)充和變化，具有更加豐富多元的媒體表現(xiàn)，增強(qiáng)了瀏覽器的原生功能，減少瀏覽器插件flash應(yīng)用，提高用戶(hù)體驗(yàn)滿(mǎn)意度，讓開(kāi)發(fā)更加方便。7.6.3

使用浮動(dòng)、定位、Flex精細(xì)控制網(wǎng)頁(yè)布局

浮動(dòng)與定位在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用得很廣泛，是兩種主要布局方式的實(shí)現(xiàn)方法。一般在網(wǎng)頁(yè)中，塊標(biāo)簽是自上而下的一塊塊堆疊，行內(nèi)標(biāo)簽則在一行內(nèi)從左到右依次并排，較為單調(diào)，浮動(dòng)能夠讓標(biāo)簽內(nèi)容脫離這種文檔流，通過(guò)left、right浮動(dòng)值向左、向右浮動(dòng)，可以把元素移到瀏覽器邊沿的左邊或右邊，呈現(xiàn)粘粘在邊沿效果，它下邊的文本則會(huì)充斥在它的一邊或者下面。1.浮動(dòng)和定位浮動(dòng)效果7.6.3

使用浮動(dòng)、定位、Flex精細(xì)控制網(wǎng)頁(yè)布局

定位，用于控制網(wǎng)頁(yè)上元素的位置，將其放置合適地方，比如瀏覽網(wǎng)頁(yè)會(huì)發(fā)現(xiàn)頂部導(dǎo)航欄總是懸浮在頂部，即便向下滾動(dòng)網(wǎng)頁(yè)，這就是定位的很好體現(xiàn)。使用了position屬性，值為fixed，即固定，規(guī)定了left、right和top屬性，離左邊、右邊和頂部的距離，就完成了定位。1.浮動(dòng)和定位7.6.3

使用浮動(dòng)、定位、Flex精細(xì)控制網(wǎng)頁(yè)布局

移動(dòng)端目前較為流行的布局，F(xiàn)lex布局也稱(chēng)彈性盒布局，往往是通過(guò)給父集加子集實(shí)現(xiàn)效果。比如flex-direction、flex-wrap

、flex-basis、Justify-content，設(shè)置排列、縮放和對(duì)其方式。2.Flex布局7.6.4

裝飾美化網(wǎng)頁(yè)內(nèi)容

網(wǎng)頁(yè)文件本身是一種文本文件，通過(guò)在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容那么如何用處處流露著細(xì)膩和創(chuàng)意的動(dòng)效細(xì)節(jié)打動(dòng)人，HTML5往往通過(guò)與CSS的配合達(dá)到裝飾美化網(wǎng)頁(yè)的效果，其中各種濾鏡和特效，可以運(yùn)用到web項(xiàng)目中。CSS代碼7.6.5使用轉(zhuǎn)換、過(guò)渡、動(dòng)畫(huà)等高級(jí)特性translate()方法

CSS3動(dòng)畫(huà)提供了2D和3D以及常規(guī)動(dòng)畫(huà)屬性接口，它可以工作在頁(yè)面的任何一個(gè)元素的任意一個(gè)屬性，CSS3的動(dòng)畫(huà)是利用C語(yǔ)言編寫(xiě)的，它是系統(tǒng)層面的動(dòng)畫(huà)。在2D轉(zhuǎn)換上CSS3轉(zhuǎn)換可以可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。transform屬性適用于2D或3D轉(zhuǎn)換的元素，transform-origin屬性，設(shè)置轉(zhuǎn)化元素位置。1.轉(zhuǎn)換7.6.5使用轉(zhuǎn)換、過(guò)渡、動(dòng)畫(huà)等高級(jí)特性過(guò)渡屬性語(yǔ)法形式

CSS中用于設(shè)置過(guò)渡特效的屬性transition，該屬性允許CSS的屬性值在一定的時(shí)間區(qū)間內(nèi)平滑地過(guò)渡，依靠了CSS3版本標(biāo)準(zhǔn)之前對(duì)“JavaScript”和“Flash”的依賴(lài)，使頁(yè)面的性能得以提升。這種效果可以在鼠標(biāo)懸?。?hover）、鼠標(biāo)單擊（:active）、表單元素獲得焦點(diǎn)（:focus）或?qū)υ厝魏胃淖円约霸贘avaScript中某些事件執(zhí)行后觸發(fā)，并圓滑（若不對(duì)時(shí)間曲線(xiàn)進(jìn)行特殊設(shè)置）地以動(dòng)畫(huà)效果改變CSS的屬性值。2.過(guò)渡7.6.5使用轉(zhuǎn)換、過(guò)渡、動(dòng)畫(huà)等高級(jí)特性HTML5/CSS3滑塊動(dòng)畫(huà)菜單圖標(biāo)動(dòng)畫(huà)

HTML5動(dòng)畫(huà)效果的實(shí)現(xiàn)Canvas，CSS3和Javascript，通過(guò)合理的選擇，來(lái)實(shí)現(xiàn)最優(yōu)的呈現(xiàn)。3.動(dòng)畫(huà)7.6.6發(fā)布HTML5應(yīng)用

在當(dāng)下，HTML5應(yīng)用程序（WEBAPP）為企業(yè)提供了對(duì)本地應(yīng)用程序開(kāi)發(fā)的簡(jiǎn)單替代，尤其是隨著更多HTML5開(kāi)發(fā)框架的出現(xiàn)。任何組織在多個(gè)平臺(tái)上實(shí)現(xiàn)移動(dòng)應(yīng)用程序都會(huì)優(yōu)先考慮HTML5發(fā)布