HTML5+CSS3項目開發(fā)實戰(zhàn)課件

1、服裝品牌墻界面設(shè)計延遲符項目一第1頁，共198頁。目錄01 學(xué)習目標02 學(xué)習路徑03 任務(wù)描述04 任務(wù)技能延遲符05 任務(wù)實施06 任務(wù)總結(jié)第2頁，共198頁。01 學(xué)習目標延遲符第3頁，共198頁。 學(xué)習目標010203了解HTML5的文檔結(jié)構(gòu)、新增標簽了解CSS樣式規(guī)則掌握CSS3選擇器學(xué)習目標通過實現(xiàn)服裝品牌墻界面，學(xué)習HTML5與CSS3相關(guān)知識，了解HTML5與CSS3發(fā)展歷史和基礎(chǔ)標簽的使用，以及自適應(yīng)網(wǎng)站標簽的使用。延遲符04了解自適應(yīng)網(wǎng)站的概念第4頁，共198頁。02 學(xué)習路徑延遲符第5頁，共198頁。 學(xué)習路徑學(xué)習目標通過實現(xiàn)服裝品牌墻界面，學(xué)習HML5與CSS3相關(guān)知識

2、，了解HTML5與CSS3發(fā)展歷史和基礎(chǔ)標簽的使用，以及自適應(yīng)網(wǎng)站標簽的使用。延遲符第6頁，共198頁。延遲符03 任務(wù)描述第7頁，共198頁。情境導(dǎo)入01基本框架03開發(fā)環(huán)境04延遲符 任務(wù)描述任務(wù)描述02第8頁，共198頁。情境入01延遲符 情境導(dǎo)入隨著智能手機的興起，使用移動平臺進行網(wǎng)上購物方興未艾，其特點之一是操作具有針對性，例如以服裝品牌、性價比作為選擇服裝的條件，通過品牌服裝墻顯示服裝所對應(yīng)的牌子以及牌子所對應(yīng)商品的鏈接。本次任務(wù)主要是實現(xiàn)服裝品牌墻界面設(shè)計。第9頁，共198頁。情境入01延遲符 功能描述使用響應(yīng)式布局技術(shù)來設(shè)計服裝品牌墻界面01020304頭部包括服裝品牌墻的標題

3、主體包括各種品牌的圖標及說明底部包括本站點的版權(quán)信息第10頁，共198頁。情境入01延遲符 基本框架第11頁，共198頁。系統(tǒng)環(huán)境Windows 7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Dreamweaver CS6Tomcat 7.0電腦端：火狐瀏覽器、谷歌瀏覽器手機端：Webkit內(nèi)核瀏覽器、Android手機內(nèi)置瀏覽器 開發(fā)環(huán)境延遲符第12頁，共198頁。延遲符04 任務(wù)技能第13頁，共198頁。任務(wù)技能HTML5概述HTML5基礎(chǔ)網(wǎng)頁編輯器及環(huán)境CSS3初體驗CSS樣式表CSS選擇器 任務(wù)技能延遲符第14頁，共198頁。建設(shè)制造強國12HTML是超文本標記語言，主要是用來制作超文本的簡單標

4、記語言，HTML是1990年創(chuàng)建的一種標記性語言，1999年推出的HTML4就停止了。（1）取消過時標簽，新增一些標簽（2）解決瀏覽器兼容問題（3）代碼化繁為簡 HTML5概述延遲符HTML5的發(fā)展HTML5的優(yōu)點第15頁，共198頁。HTML5文檔的基本結(jié)構(gòu)1HTML5語法2HTML5新增標簽3（1）用于向瀏覽器說明當前文檔使用哪種HTML標簽。（2）和分別表示文檔的開始和結(jié)束，用于告知瀏覽器其自身是一個HTML文檔。（3）為頭部標簽，用于定義HTML文檔的頭部信息，緊跟在標簽后，里面包括的內(nèi)容有、和等。（4）為主體標簽，用于定義HTML文檔所要顯示的內(nèi)容，在瀏覽器中所看到的圖片，音頻，視頻

5、，文本等都位于內(nèi)。該標簽中的內(nèi)容是展示給用戶看的。HTML5為了更大兼容各瀏覽器，在設(shè)計和語法方面發(fā)生了一些變化，語法變化的主要內(nèi)容如下：標簽不在區(qū)分大小寫元素可以省略結(jié)束標簽允許省略屬性的屬性值允許屬性值不使用引號 HTML5基礎(chǔ)延遲符HTML5和HTML相比，增加了結(jié)構(gòu)標簽，語義標簽、特殊功能標簽以及audio和video標簽等。其中新增標簽如表標簽描述用于描述頁面上一處完整的文章用于定義導(dǎo)航條，包括主導(dǎo)航條、頁面導(dǎo)航、底部導(dǎo)航等aside用于定于當前頁面的附屬信息，內(nèi)容和article內(nèi)容相關(guān)hgroup用于對網(wǎng)頁或區(qū)段（section）的標題進行組合用于對元素進行組合header用于定

6、義文檔的頁眉（介紹信息）footer用于定義 section 或 document 的頁腳第16頁，共198頁。網(wǎng)頁編輯器1自適應(yīng)網(wǎng)頁設(shè)計2手機端訪問網(wǎng)頁環(huán)境部署3自從Macromedia的Dreamweaver CS6崛起之后，人們制作網(wǎng)頁已經(jīng)基本上不用Microsoft的FrontPage了。除了Dreamweaver之外，還有許多專業(yè)制作網(wǎng)頁的商業(yè)軟件也十分強悍。隨著智能手機的普及，設(shè)計的界面也需在手機端顯示，為了能夠在手機端正常顯示，我們需要使網(wǎng)頁寬度自動調(diào)整。（1）在網(wǎng)頁代碼的頭部，加入一行viewport元標簽。（2）不使用絕對寬度（3）Media Query模塊（4）media在

7、Dreamweaver CS6制作完之后，點擊瀏覽器就能出現(xiàn)效果，想要手機訪問，我們不僅需要在頭部添加響應(yīng)式布局所對應(yīng)代碼，還需配置服務(wù)器的環(huán)境才可以在手機上訪問。（本處以tomcat 7.0為例說明）（1）下載tomcat軟件，網(wǎng)址為/download-70.cgi。（2）配置tomcat環(huán)境。 網(wǎng)頁編輯器及環(huán)境延遲符第17頁，共198頁。建設(shè)制造強國12CSS即層疊樣式表（Cascading StyleSheet）。在網(wǎng)頁制作時采用層疊樣式的技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果更精確的控制。CSS3是CSS技術(shù)的升級版本。CSS3將完全向后兼容，網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持

8、CSS。CSS樣式規(guī)格具體格式如下：選擇器屬性1:屬性值1；屬性2:屬性則2在上面的規(guī)格中，選擇器表示希望進行格式化的元素，大括號內(nèi)是對該元素設(shè)置具體的樣式，屬性是對指定的對象設(shè)置樣式屬性，如文字大小，顏色，字體等。屬性和屬性值之間用英文的“:”鏈接，多個屬性之間用英文的“;”進行區(qū)分。 CSS3初體驗延遲符CSS3概述CSS3樣式規(guī)則第18頁，共198頁。建設(shè)制造強國1定義內(nèi)部樣式2style是標記的屬性，實際上任何HTML標記都擁有style屬性，用來設(shè)置行內(nèi)式。其中屬性和值的書寫規(guī)范和CSS樣式規(guī)則相同。標記一般位于標記中，也可以把它放在HTML文檔的任何地方。但由于瀏覽器是從上到下解析

9、代碼的，把CSS代碼放在頭部便于提前被下載和解析。 CSS樣式表延遲符定義標記的style屬性嵌入外部樣式表就是在HTML代碼中直接導(dǎo)入樣式表的方法?；菊Z法import url(外部樣式表的文件名稱);該語法格式中import語句后的“;”一定要加上。除了以嵌入外部樣式表的方法達到在HTML文件中引用樣式表的目的外，還可以用鏈接的方式使用外部CSS樣式?；菊Z法：該語法中，標記要放在頭部標記中。43嵌入外部樣式表鏈接外部樣式表第19頁，共198頁。類選擇器根據(jù)類名來選擇前面以“.”來標志類選擇器標簽選擇器ID選擇器后代選擇器一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定

10、哪些標簽，采用相應(yīng)的CSS樣式。ID 選擇器可以為標有特定 ID 的 HTML 元素指定特定的樣式。根據(jù)元素ID來選擇元素，具有唯一性，這意味著同一id在同一文檔頁面中只能出現(xiàn)一次前面以”#”號來標志，后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，將對父元素的選擇放在前面，對子元素的選擇放在后面，中間加一個空格分開。 CSS選擇器延遲符子選擇器請注意這個選擇器與后代選擇器的區(qū)別，子選擇器僅是指它的直接后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“”進行選擇，偽類選擇器有時候還會需要用文檔以外的其他條件來應(yīng)用元素的樣式，比如鼠標懸停等。這

11、時候就需要用到偽類了。第20頁，共198頁。05 任務(wù)實施延遲符第21頁，共198頁。輸入標題輸入標題輸入標題第一步：在里面添加標簽，使網(wǎng)頁適應(yīng)手機屏幕寬度。第二步：我們來制作新浪導(dǎo)航圖頭部，logo部分為新浪的logo，用標簽表示，第三步：主體部分包括各種品牌的圖標及說明，需要用到列表樣式標簽，第四步：尾部主要為本站點的版權(quán)信息，版權(quán)信息的樣式為文字居中，內(nèi)間距為10px，點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字 任務(wù)實施延遲符第22頁，共198頁。06 任務(wù)總結(jié)延遲符第23頁，共198頁。任務(wù)技能任務(wù)實施任務(wù)拓展任務(wù)描述本項目通過對服裝品牌墻的學(xué)習，對HTML5的發(fā)展、優(yōu)勢、文檔結(jié)

12、構(gòu)具有初步了解，對HTML5新增的標簽及屬性有了初步認識，同時也掌握了CSS3選擇器和自適應(yīng)網(wǎng)站的相關(guān)概念。 任務(wù)總結(jié)延遲符第24頁，共198頁。謝謝觀賞延遲符PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/sh

13、iti/ 教案下載：/jiaoan/ PPT論壇： 第25頁，共198頁。新浪微博導(dǎo)航界面設(shè)計延遲符項目二第26頁，共198頁。目錄01 學(xué)習目標02 學(xué)習路徑03 任務(wù)描述04 任務(wù)技能延遲符05 任務(wù)實施06 任務(wù)總結(jié)第27頁，共198頁。01 學(xué)習目標延遲符第28頁，共198頁。 學(xué)習目標010203了解流式布局和彈性布局掌握HTML5中常用的文本標簽掌握CSS3文本、字體屬性學(xué)習目標 通過實現(xiàn)新浪微博的導(dǎo)航界面，學(xué)習HTML5與CSS3相關(guān)的文本標簽、字體顏色以及彈性布局的使用。延遲符04掌握CSS3顏色的表示方法第29頁，共198頁。02 學(xué)習路徑延遲符第30頁，共198頁。 學(xué)習路

14、徑學(xué)習目標通過實現(xiàn)服裝品牌墻界面，學(xué)習HML5與CSS3相關(guān)知識，了解HTML5與CSS3發(fā)展歷史和基礎(chǔ)標簽的使用，以及自適應(yīng)網(wǎng)站標簽的使用。延遲符第31頁，共198頁。延遲符03 任務(wù)描述第32頁，共198頁。情境導(dǎo)入0102基本框架03開發(fā)環(huán)境04延遲符 任務(wù)描述功能描述第33頁，共198頁。情境入01延遲符 情境導(dǎo)入新浪微博是全國應(yīng)用最多，人氣最高的一款信息分享產(chǎn)品之一，它可以一天24小時發(fā)布新聞事件，娛樂節(jié)目，體壇賽事等實用信息。當打開新浪微博首頁時，會被新浪微博導(dǎo)航界面深深吸引，感嘆為什么這界面可以做的這么漂亮、簡潔，好奇什么時候也能做出像新浪這樣的界面。本次任務(wù)主要是實現(xiàn)新浪微博導(dǎo)

15、航界面設(shè)計。第34頁，共198頁。情境入01延遲符 功能描述使用響應(yīng)式布局技術(shù)來設(shè)計新浪微博導(dǎo)航界面01020304頭部包括新浪微博導(dǎo)航界面的logo和標題主體包括熱點網(wǎng)站鏈接和分類網(wǎng)站導(dǎo)航鏈接底部包括本站點導(dǎo)航鏈接和版權(quán)信息第35頁，共198頁。情境入01延遲符 基本框架第36頁，共198頁。系統(tǒng)環(huán)境Windows 7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Dreamweaver CS6Tomcat 7.0電腦端：火狐瀏覽器、谷歌瀏覽器手機端：Webkit內(nèi)核瀏覽器、Android手機內(nèi)置瀏覽器 開發(fā)環(huán)境延遲符第37頁，共198頁。延遲符04 任務(wù)技能第38頁，共198頁。任務(wù)技能HTML5文本標

16、簽CSS文本屬性CSS字體屬性CSS顏色CSS導(dǎo)航欄固定布局和流動布局的介紹 任務(wù)技能延遲符第39頁，共198頁。建設(shè)制造強國1段落標簽2標題元素從h1到h6共六級。標題元素中包含的文本被瀏覽器渲染為“塊”。HTML中，定義了6級標題，分別為h1、h2、h3、h4、h5、h6，每級標題的字體大小依次遞減，1級標題字號最大，6級標題字號最小。標題文本全部加粗。標簽主要功能是定義段落，在網(wǎng)頁中有文本，要插入一個新的段落時，可以使用該標簽來表示。和之間的文本段落上下會顯示一個空行，對標簽相當于兩個標簽。HTML5文本標簽延遲符標題標簽第40頁，共198頁。建設(shè)制造強國3標簽與標簽4標簽主要用于換行，

17、使用該標簽只能輸入空行，不能分割段落。該標簽是一個單標簽，不能成對出現(xiàn)，沒有開始和結(jié)束符號。標簽主要用于軟換行，即在文本中添加該標簽，如果該標簽沒有中斷英文字母則沒有什么效果，如果在一行中英文部分放不下時，則在下面一行顯示出來。該標簽主要功能是用戶可以創(chuàng)建一個可折疊的控件，只顯示想要的標題和文字，隱藏一些對標題或者文字描述的信息。標簽一般與標簽配合使用，顯示的內(nèi)容一般為標簽的內(nèi)容，如果點擊了標簽，則會顯示出標簽中的內(nèi)容。HTML5文本標簽延遲符標簽與 標簽第41頁，共198頁。文本對齊屬性 1文本修飾屬性2文本縮進屬性3text-align用來設(shè)定文本的對齊方式。有以下四種設(shè)置文本對齊的方式：

18、 left (居左，缺省值)，right (居右)， center (居中)， justify (兩端對齊)。text-decoration主要設(shè)定文本劃線的屬性。有四種屬性：none (無，缺省值) ，underline (下劃線)，overline (上劃線)，line-through (當中劃線)text-indent設(shè)定文本首行縮進。其值有以下設(shè)定方法： length (長度，可以用絕對單位(cm, mm, in, pt, pc)或者相對單位 (em, ex, px)，percentage (百分比，相當于父對象寬度的百分比)。CSS文本屬性延遲符第42頁，共198頁。建設(shè)制造強國4文

19、本陰影5text-transform屬性處理文本的大小寫，該屬性有4個取值：none（默認值）、uppercase（大寫）、lowercase（小寫）和capitalize（首字母大寫）。默認值none對文本不做任何改動，將使用原文檔中的原有大小寫。在CSS3中，text-shadow可向文本應(yīng)用陰影，允許規(guī)定水平陰影、垂直陰影、模糊距離以及陰影的顏色。CSS文本屬性延遲符文本字符轉(zhuǎn)換第43頁，共198頁。建設(shè)制造強國6文本垂直對齊7text-align 屬性的主要作用是設(shè)置文本對齊方式，該屬性通過指定一行與某一個點對齊來設(shè)置塊模式的對齊方式，該屬性主要是用于水平對齊。文本垂直對齊是根據(jù)行內(nèi)元

20、素的基線相對所寫元素所在的行的基線來做對齊，在該屬性中值可以是負數(shù)或者百分比。在表格中，通常用這個屬性來設(shè)置單元格內(nèi)容的對齊方式。 文本通常根據(jù)不可見的基線進行對齊的，而字母的底部位于基線之上。CSS文本屬性延遲符文本水平對齊第44頁，共198頁。CSS字體類型1字體風格2字體變形3在CSS中，有兩種不同類型的字體系列：通用字體類型：擁有相似外觀的字體系統(tǒng)組合（例如“Serif”或“Monospace”）。 特定字體類型：具體的字體系列（例如“Times”或“Courier”）。font-style屬性最常用于規(guī)定斜體文本，該屬性有三個取值：normal（文本正常顯示）、italic（文本斜體

21、顯示）、oblique（對于沒有設(shè)計過斜體樣式的文字強行用代碼使其傾斜）。font-variant屬性可以設(shè)定小型大寫字母，小型大寫字母即字母都是大寫字母，但字體尺寸會比大寫字母小。CSS字體屬性延遲符第45頁，共198頁。建設(shè)制造強國4字體大小5font-weight屬性的主要功能是設(shè)置文本的粗細程度，該屬性可以直接為字體設(shè)置一個粗度，一般設(shè)置字體粗度的關(guān)鍵字為100-900，這些數(shù)字越大，字體越粗，在大多數(shù)瀏覽器中數(shù)字400相當于所寫的normal，700相當于bold，除了用數(shù)字表示外，還可以使用normal、bold、bolder等。font-size屬性的主要設(shè)置文本中字體的大小，用

22、絕對值、相對值或px、pt、em來表示字體的大小。CSS字體屬性延遲符字體加粗第46頁，共198頁。建設(shè)制造強國1CSS中的顏色的表示方法2font-weight屬性的主要功能是設(shè)置文本的粗細程度，該屬性可以直接為字體設(shè)置一個粗度，一般設(shè)置字體粗度的關(guān)鍵字為100-900，這些數(shù)字越大，字體越粗，在大多數(shù)瀏覽器中數(shù)字400相當于所寫的normal，700相當于bold，除了用數(shù)字表示外，還可以使用normal、bold、bolder等。顏色的名稱 : 在CSS定義時可以直接用代表顏色的英文單詞來表示顏色。十六進制顏色 : 在使用CSS定義顏色時除了直接使用顏色的名字還可以使用十六進制來表示顏色

23、的信息。RGB和RGBA顏色 : 在設(shè)置CSS布局時會經(jīng)常用到，表示方式為rgb(red, green, blue)。CSS顏色延遲符顏色值第47頁，共198頁。建設(shè)制造強國1輸入標題CSS導(dǎo)航欄分為垂直導(dǎo)航欄和水平導(dǎo)航欄，用和元素來設(shè)置。CSS導(dǎo)航欄延遲符CSS導(dǎo)航欄第48頁，共198頁。建設(shè)制造強國1流體布局2固定寬度布局是在制作界面自己設(shè)置的一個寬度（固定值），比如說980px。使用這種布局通常需要設(shè)置一個整個的DIV布局，通常這個寬度為960像素，在里面各個模塊的寬度也是固定的，不會根據(jù)整個界面的變換而變換，所以說不管是手機端還是在PC端，訪問的界面的寬度都是一樣的，所顯示的信息也全部

24、會顯示出來。流體布局，也被成為流動布局，主要在設(shè)計頁面時寬度和高度不再是固定值，而是采用百分比來設(shè)置的固定布局和流動布局的介紹延遲符固定寬度布局第49頁，共198頁。05 任務(wù)實施延遲符第50頁，共198頁。輸入標題輸入標題輸入標題第一步：頭部制作，把新浪導(dǎo)航頁標題和圖片在一行現(xiàn)實，調(diào)整圖片的大小，設(shè)置一個下邊框，帶邊框陰影。第二步：主體熱點網(wǎng)站鏈接的制作，采用無序列表和float屬性來實現(xiàn)。第三步：主體分類導(dǎo)航鏈接的制作，取消無序列表默認的無序符號，用float屬性設(shè)置導(dǎo)航欄左浮動，設(shè)置無序列表中文字的大小，顏色和邊框第四步：底部版權(quán)信息制作，版權(quán)信息內(nèi)容為Copyright 2016 ，該

25、內(nèi)容為一個段落，使用段落標簽。點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字 任務(wù)實施延遲符第51頁，共198頁。06 任務(wù)總結(jié)延遲符第52頁，共198頁。任務(wù)技能任務(wù)實施任務(wù)拓展任務(wù)描述本項目通過對新聞網(wǎng)站導(dǎo)航網(wǎng)頁和文本新聞網(wǎng)頁設(shè)計的探析和練習，重點熟悉HTML5中常用的文本標簽、CSS文本屬性、字體屬性、顏色值及顏色表示方法、CSS鏈接屬性等，學(xué)會了網(wǎng)頁元素的水平對齊、CSS導(dǎo)航欄的設(shè)計，學(xué)會了新聞網(wǎng)頁和導(dǎo)航網(wǎng)頁的設(shè)計方法。了解流式布局和彈性布局的優(yōu)點和缺點，了解CSS框架的原理，為以后我們制作響應(yīng)式網(wǎng)站打好基礎(chǔ)。 任務(wù)總結(jié)延遲符第53頁，共198頁。謝謝觀賞延遲符PPT模板下載：/mo

26、ban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： 第54頁，共198頁。同城旅游主界面設(shè)計延遲符項目三第55頁，共198頁。目錄01 學(xué)習目標02 學(xué)習路徑03 任務(wù)描述04 任務(wù)

27、技能延遲符05 任務(wù)實施06 任務(wù)總結(jié)第56頁，共198頁。01 學(xué)習目標延遲符第57頁，共198頁。 學(xué)習目標010203掌握HTML5圖像標簽的使用掌握CSS3頁面背景圖像的設(shè)置掌握CSS3新增邊框?qū)傩詫W(xué)習目標通過實現(xiàn)同城旅游主界面，學(xué)習HTML5與CSS3圖像相關(guān)知識，了解和掌握HTML5圖像相關(guān)標簽的使用以及CSS3圖像相關(guān)屬性。延遲符第58頁，共198頁。02 學(xué)習路徑延遲符第59頁，共198頁。 學(xué)習路徑學(xué)習目標通過實現(xiàn)服裝品牌墻界面，學(xué)習HML5與CSS3相關(guān)知識，了解HTML5與CSS3發(fā)展歷史和基礎(chǔ)標簽的使用，以及自適應(yīng)網(wǎng)站標簽的使用。延遲符第60頁，共198頁。延遲符03

28、任務(wù)描述第61頁，共198頁。情境導(dǎo)入01基本框架03開發(fā)環(huán)境04延遲符 任務(wù)描述02功能描述第62頁，共198頁。情境入01延遲符 情境導(dǎo)入一個網(wǎng)站既要在引人注意的同時，也能夠顯示出想要表達的信息。如果想要網(wǎng)站豐富多彩，只有文字是不行的，主要原因是純文字的網(wǎng)站在用戶對視覺美感要求較高的時代會讓人感到乏味，在網(wǎng)站中添加美化元素是必不可少的，巧妙地在網(wǎng)頁中使用圖片可以為網(wǎng)頁增色不少。本次任務(wù)主要是實現(xiàn)同程旅游主界面設(shè)計。第63頁，共198頁。情境入01延遲符 功能描述頭部包括同城旅游觀光標題、返回按鈕、簽到按鈕010203主體包括文本搜索框、導(dǎo)航條、推薦旅游目的地圖片列表底部包括本站點的版權(quán)信息

29、第64頁，共198頁。情境入01延遲符 基本框架第65頁，共198頁。系統(tǒng)環(huán)境Windows 7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Dreamweaver CS6Tomcat 7.0電腦端：火狐瀏覽器、谷歌瀏覽器手機端：Webkit內(nèi)核瀏覽器、Android手機內(nèi)置瀏覽器 開發(fā)環(huán)境延遲符第66頁，共198頁。延遲符04 任務(wù)技能第67頁，共198頁。任務(wù)技能網(wǎng)頁中支持的圖片格式HTML5圖像標簽設(shè)置背景屬性盒子模型CSS3新增邊框?qū)傩訦TML5圖像過渡和變形屬性 任務(wù)技能延遲符第68頁，共198頁。建設(shè)制造強國1輸入標題2GIF格式是網(wǎng)頁上使用最多，應(yīng)用最廣的格式，最多支持8 位也就是256種顏

30、色，GIF格式圖片由許多存儲塊組成，用來存儲多幅圖像和決定圖像表現(xiàn)行為的控制塊，實現(xiàn)動畫和交互式的效果。GIF格式的圖片與其他格式的圖片相比，具有圖像文件短小，下載速度快的特點。JPEG格式圖片主要應(yīng)用于圖像和視頻處理的領(lǐng)域，優(yōu)點是能夠在提供良好的壓縮性能的同時，又具有較好的重建質(zhì)量。日常做網(wǎng)頁或者處理圖片時，經(jīng)常見的圖片格式為“.jpeg”、“.jpg”，這些格式是數(shù)據(jù)經(jīng)過壓縮編碼后在媒體上封存的格式。 網(wǎng)頁中支持的圖片格式延遲符GIF格式JPEG格式第69頁，共198頁。標簽1標簽和標簽2標簽3標簽用于在網(wǎng)頁中配置圖片。圖片可以為照片、網(wǎng)站橫幅、公司logo、導(dǎo)航按鈕等。標簽獨立使用，在X

31、HTML語法中要寫成，代表一段獨立的流內(nèi)容（圖像，圖標，照片，代碼等）標簽，是文檔中流內(nèi)容的一個主題單元，標簽里的流內(nèi)容和整個網(wǎng)頁的主內(nèi)容有很大的關(guān)系，但主內(nèi)容修改對標簽的內(nèi)容沒有影響。該標簽添加標題時需要標簽，標簽放在標簽的第一個或者最后一個子元素的后面。標簽與標簽配合使用，是定義可單擊區(qū)域圖像，該標簽有兩個參數(shù)，分別是shape和coords，其中shape代表的是設(shè)置熱點的形狀，coords代表的是設(shè)置熱點的位置和大小， HTML5圖像標簽延遲符第70頁，共198頁。CSS背景屬性主要是應(yīng)用于CSS文件中，作用是通過CSS的設(shè)置使網(wǎng)頁背景呈現(xiàn)出各種樣式。CSS背景屬性background

32、-color屬性background-image屬性background-repeat屬性一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽，采用相應(yīng)的CSS樣式。網(wǎng)頁圖像不僅可以使用顏色來裝飾，還可以使用圖片來裝飾。background-repeat屬性來設(shè)置圖片平鋪的方向，在設(shè)置圖片背景后使用。如果未規(guī)定 background-position 屬性，圖像顯示位置為左上角。 設(shè)置背景屬性延遲符background-position屬性background-position屬性用像素定位或百分比定位的方式設(shè)置背景定位，這是在最初的表格布局中沒有辦法實現(xiàn)的功能。bac

33、kground-position 屬性的默認設(shè)置的值是top left，與background-repeat屬性相同。background-attachment屬性界面完成瀏覽時，如果界面比較小則會出現(xiàn)滾動條，此時頁面背景會自動跟著滾動條的一起滾動，在CSS樣式表中，針對背景元素的控制，提供了background-attachment屬性，該屬性使背景不受滾動條的影響第71頁，共198頁。建設(shè)制造強國1margin屬性2所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，用這個假設(shè)的盒子設(shè)置各元素與網(wǎng)頁之間的空白，如元素的邊框?qū)挾取邮?、顏色、以及元素?nèi)容與邊框之間的空白距離。在CSS

34、中通過margin屬性設(shè)置元素邊框與相鄰元素之間的距離。 盒子模型延遲符盒子模型概念在CSS中通過border屬性為圖像添加邊框，同時可以調(diào)節(jié)邊框的粗細程度以及邊框的樣式和顏色。在CSS中通過padding屬性設(shè)置邊框和內(nèi)部元素之間的空白距離。43border屬性padding屬性第72頁，共198頁。border-image屬性1border-radius屬性2box-shadow屬性3border-image屬性主要功能是使用圖像作為標簽的邊框。如果標簽設(shè)置了border-collapse：collapse，則border-image將無效。border-radius 屬性的主要功能是實現(xiàn)

35、圓角的邊框效果。box-shadow屬性的主要功能是給邊框添加陰影，可以添加一個或者多個陰影，陰影設(shè)置的屬性用逗號隔開。省略長度的值0。CSS3新增邊框?qū)傩匝舆t符第73頁，共198頁。建設(shè)制造強國1輸入標題2transition屬性主要功能是實現(xiàn)背景圖像過渡的效果，是HTML5新增的功能，在做動畫時使用最多。transform屬性的主要功能是實現(xiàn)圖形的變形，主要實現(xiàn)變形的方式有旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。HTML5圖像過渡和變形屬性延遲符transition屬性transform屬性第74頁，共198頁。05 任務(wù)實施延遲符第

36、75頁，共198頁。輸入標題輸入標題輸入標題第一步：清除元素邊距，設(shè)置頭部的樣式，頭部背景顏色為白色，底部邊框為1px solid #f29406第二步：文本搜索框使用標簽（具體參見項目五介紹）第三步：導(dǎo)航欄的樣式為左浮動，顯示方式為行塊，文字水平居中第四步：版權(quán)信息內(nèi)容為Copyright 2016 ，該內(nèi)容為一個段落，使用段落標簽點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字 任務(wù)實施延遲符第76頁，共198頁。06 任務(wù)總結(jié)延遲符第77頁，共198頁。任務(wù)技能任務(wù)實施任務(wù)拓展任務(wù)描述本項目通過對旅游網(wǎng)站旅游目的地推薦網(wǎng)頁訓(xùn)練探析和練習，重點熟悉了HTML5中的圖像標簽、CSS的背景設(shè)置

37、、CSS在頁面中圖像的設(shè)置以及CSS3.0中新增關(guān)于圖片的便簽的使用，學(xué)會在網(wǎng)頁中合理地插入圖像和應(yīng)用圖片設(shè)計景點推薦網(wǎng)頁的方法。 任務(wù)總結(jié)延遲符第78頁，共198頁。謝謝觀賞延遲符PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwe

38、n/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： 第79頁，共198頁。小快魚旗艦店主界面設(shè)計延遲符項目四第80頁，共198頁。目錄01 學(xué)習目標02 學(xué)習路徑03 任務(wù)描述04 任務(wù)技能延遲符05 任務(wù)實施06 任務(wù)總結(jié)第81頁，共198頁。01 學(xué)習目標延遲符第82頁，共198頁。 學(xué)習目標010203掌握列表標簽的屬性和樣式掌握表格的創(chuàng)建和屬性掌握CSS3新增屬性學(xué)習目標通過實現(xiàn)小快魚旗艦店主界面，學(xué)習列表標簽的使用和表格的創(chuàng)建等技術(shù)。延遲符第83頁，共198頁。02 學(xué)習路徑延遲符第84頁，共198頁。 學(xué)習路徑學(xué)習目標通過實現(xiàn)服裝品牌墻界面，學(xué)習HML5與CS

39、S3相關(guān)知識，了解HTML5與CSS3發(fā)展歷史和基礎(chǔ)標簽的使用，以及自適應(yīng)網(wǎng)站標簽的使用。延遲符第85頁，共198頁。延遲符03 任務(wù)描述第86頁，共198頁。延遲符 任務(wù)描述情境導(dǎo)入0102基本框架03開發(fā)環(huán)境04功能描述第87頁，共198頁。情境入01延遲符 情境導(dǎo)入隨著在線購物的興起，各相關(guān)購物網(wǎng)站越來越多，這些網(wǎng)站都有一個特性：包含某種形式的列表，比如活動列表，商品列表，鏈接列表等，列表方便設(shè)計者能夠?qū)ο嚓P(guān)的元素進行分組。本次任務(wù)主要是實現(xiàn)小快魚旗艦店主界面設(shè)計。第88頁，共198頁。情境入01延遲符 功能描述頭部包括小快魚旗艦店的標題，商家的聯(lián)系方式010203主體包括搜索引擎框，商

40、品列表底部包括本站點的版權(quán)信息第89頁，共198頁。情境入01延遲符 基本框架第90頁，共198頁。延遲符04 任務(wù)技能第91頁，共198頁。任務(wù)技能列表的作用HTML5文本列表標簽CSS列表標簽屬性HTML5創(chuàng)建表格CSS定位 任務(wù)技能延遲符第92頁，共198頁。建設(shè)制造強國 列表是Web網(wǎng)頁中重要元素組成之一，通過對列表的修飾（即CSS樣式的修飾）可以達到用戶需求的效果。 在早期的表格式布局中列表起著關(guān)鍵性作用，每個表格由多行多列的單元格組成，當列表頭部為圖像時，則需要在原有基礎(chǔ)上添加新的表格，這種表格布局有可能會隨著網(wǎng)頁寬度的大小發(fā)生改變。 列表的作用延遲符第93頁，共198頁。無序列表

41、1有序列表2定義列表3 無序列表類似于Word中的項目符號，無序列表項目排列沒有順序，以符號作為子項的標識，使用一組標簽，該標簽中包含多組元素，其中每組均為一個列表。 有序列表類似于Word中的編號，有序列表子項可以為數(shù)字，字母等使用一組標簽,該標簽中包含多組元素，其中每組均為一個列表。 定義列表由自定義列表和自定義列表項組成，自定義列表以標簽（definition lists）開始，每個自定義列表項以（definition title）開始，每個自定義列表項的定義以（definition description）開始。HTML5文本列表標簽延遲符第94頁，共198頁。list-style-i

42、mage1list-style-position2list-style-type3list-style-image屬性用于定義列表前所使用的圖片，所有瀏覽器都支持這個屬性。list-style-position屬性用于顯示列表中列表項的位置，其取值為outside（列表項目在文本以外）、inside（列表項目在文本以內(nèi)，環(huán)繞文本對齊）。list-style-type為列表顯示類型，有9種常見屬性值。 CSS列表標簽屬性延遲符第95頁，共198頁。表格的基本結(jié)構(gòu)1定義表格的表頭單元格2合并單元格3使用表格顯示數(shù)據(jù)可以更直觀、更清楚。表格一般由行，列和單元格組成。表格中常見的表頭單元格分為垂直和水

43、平兩種。在HTML中合并單元格的方式有上下合并單元格，左右合并單元格兩種，合并單元格只需要使用td標記的兩個屬性colspan和rowspan。 HTML5創(chuàng)建表格延遲符第96頁，共198頁。建設(shè)制造強國12 relative屬性為相對定位；脫離文檔流的布局，但還在文檔流原先的位置遺留空白區(qū)域。定位的起始位置為此元素原先在文檔流的位置。 absolute屬性用于絕對定位；脫離文檔流的布局，遺留下來的空間由后面的元素填充。定位的起始位置為最近的父元素(postion不為static)，否則為body文檔本身。 CSS定位延遲符relative屬性absolute屬性第97頁，共198頁。05 任

44、務(wù)實施延遲符第98頁，共198頁。輸入標題輸入標題輸入標題第一步：頭部樣式分為兩部分：小快魚旗艦店標題，商家的聯(lián)系方式，其中商家的聯(lián)系方式包括商家店鋪的圖標、商家好評率、信用等級、聯(lián)系賣家以及收藏商鋪等信息第二步：頭部標題設(shè)置完成后開始設(shè)置商家的聯(lián)系方式好評率等。需要用到的標簽有、和第三步：主體分為搜索引擎框使用標簽第四步：商品列表的制作用到本項目所學(xué)的有序列表，無序列表，使用標簽點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字 任務(wù)實施延遲符第99頁，共198頁。06 任務(wù)總結(jié)延遲符第100頁，共198頁。任務(wù)技能任務(wù)實施任務(wù)拓展任務(wù)描述 通過本項目的學(xué)習，掌握HTML5列表標簽、CSS列表

45、屬性、表格屬性和定位屬性等，學(xué)會在網(wǎng)頁中合理地使用列表、表格和CSS定位屬性展示相關(guān)信息，學(xué)會了應(yīng)用列表、表格以及CSS定位設(shè)計商品信息展示網(wǎng)頁的方法。 任務(wù)總結(jié)延遲符第101頁，共198頁。謝謝觀賞延遲符PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/

46、 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： 第102頁，共198頁。同城旅游用戶注冊界面設(shè)計延遲符項目五第103頁，共198頁。目錄01 學(xué)習目標02 學(xué)習路徑03 任務(wù)描述04 任務(wù)技能延遲符05 任務(wù)實施06 任務(wù)總結(jié)第104頁，共198頁。01 學(xué)習目標延遲符第105頁，共198頁。 學(xué)習目標延遲符010203了解表單的概念了解表單元素的類型和屬性掌握CSS3設(shè)置表單的外觀學(xué)習目標 通過實現(xiàn)同城旅游用戶注冊界面，學(xué)習表單的類型及相關(guān)屬性，以及使用CSS3改變表單外觀的技能第106頁，共198頁。02 學(xué)習路徑延遲符第107頁，共198

47、頁。 學(xué)習路徑學(xué)習目標通過實現(xiàn)服裝品牌墻界面，學(xué)習HML5與CSS3相關(guān)知識，了解HTML5與CSS3發(fā)展歷史和基礎(chǔ)標簽的使用，以及自適應(yīng)網(wǎng)站標簽的使用。延遲符第108頁，共198頁。延遲符03 任務(wù)描述第109頁，共198頁。情境導(dǎo)入0102基本框架03開發(fā)環(huán)境04延遲符 任務(wù)描述功能描述第110頁，共198頁。情境入01延遲符 情境導(dǎo)入 隨著網(wǎng)站對交互性的要求越來越高，表單成為現(xiàn)代Web應(yīng)用程序的主要組成部分。表單通過收集來自用戶的信息，并將信息發(fā)送給服務(wù)器端來實現(xiàn)網(wǎng)上注冊、登錄、交易等多種功能。本次任務(wù)主要是實現(xiàn)同城旅游用戶注冊界面設(shè)計。第111頁，共198頁。情境入01延遲符 功能描述

48、頭部包括同城旅游的logo和用戶注冊標題010203主體包括手機號碼、登錄密碼，驗證碼文本框等底部包括版權(quán)信息所有第112頁，共198頁。情境入01延遲符 基本框架第113頁，共198頁。系統(tǒng)環(huán)境Windows 7系統(tǒng)及以上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Dreamweaver CS6Tomcat 7.0電腦端：火狐瀏覽器、谷歌瀏覽器手機端：Webkit內(nèi)核瀏覽器、Android手機內(nèi)置瀏覽器 開發(fā)環(huán)境延遲符第114頁，共198頁。延遲符04 任務(wù)技能第115頁，共198頁。任務(wù)技能表單的概述表單基本元素的使用HTML5新增input屬性 任務(wù)技能延遲符第116頁，共198頁。建設(shè)制造強國1表單的語法

49、和屬性2表單的主要功能是收集信息其處理過程為當單擊表單提交按鈕時，輸入在表單中的信息就會上傳到服務(wù)器中，然后由服務(wù)器中有關(guān)應(yīng)用程序進行處理，處理后將用戶提交的信息儲存在服務(wù)器端的數(shù)據(jù)庫中表單主要用于收集網(wǎng)頁上瀏覽者的相關(guān)信息，其標簽為，表單的基本語法格式如下: 表單的概述延遲符表單的介紹第117頁，共198頁。單行文本輸入框1密碼輸入框2多行文本輸入框3單行文本輸入框是一種允許用戶輸入和編輯文本的控件，HTML描述為密碼輸入框是一種特殊的文本輸入框，主要用于輸入保密信息，在瀏覽器中顯示為黑點或者其他符號，增加了文本輸入框的安全性多行文本輸入框允許用戶填寫多行內(nèi)容，HTML代碼為，通過HTML的

50、cols和rows屬性或CSS的height和width屬性設(shè)置多行文本輸入框的尺寸 表單基本元素的使用延遲符第118頁，共198頁。單選按鈕4復(fù)選框5下拉選擇框6單選按鈕主要控制網(wǎng)頁瀏覽者在一組選項里選擇一個選項。HTML代碼為復(fù)選框是網(wǎng)頁瀏覽者在一組選項里可以同時選擇多個選項的控件。HTML代碼為下拉選擇框是在有限的空間設(shè)置多個選項的控件。在下拉列表框中有列表控件和選項控件，HTML代碼分別為：和 表單基本元素的使用延遲符第119頁，共198頁。建設(shè)制造強國7提交按鈕和重置按鈕8普通按鈕是控制其他定義處理腳本工作的控件，HTML代碼提交按鈕是將輸入的信息提交到服務(wù)器的控件。HTML代碼，重

51、置按鈕是重置表單中輸入的信息的控件。HTML代碼延遲符普通按鈕 表單基本元素的使用第120頁，共198頁。URL1E-mail2number3URL屬性用于包含URL地址的輸入域。在提交表單時，會自動驗證URL域的值。HTML代碼為Email屬性用于包含E-mail地址的輸入域。在提交表單時，會自動驗證Email域的值。HTML代碼為number屬性提供一個輸入數(shù)字的類型。用戶可以直接輸入數(shù)字或者通過單擊微調(diào)框中的向上或向下按鈕選擇數(shù)字，HTML代碼為： HTML5新增input屬性延遲符第121頁，共198頁。range4date5placeholder6range屬性用來顯示滾動的控件。和

52、number屬性一樣，用戶可以使用max、min和step屬性控制控件的范圍。HTML代碼為在HTML5中，新增了多種data屬性，包括date、datetime、datetime-local、month、week和time，通過data屬性可以選取時間、日、月、年等placeholder屬性提供一種提示信息，描述輸入域所期待的值。placeholder屬性適用于以下類型的標簽：text、search、url、telephone、email以及password延遲符 HTML5新增input屬性第122頁，共198頁。05 任務(wù)實施延遲符第123頁，共198頁。輸入標題輸入標題輸入標題第一步：

53、頭部為標題部分，用H1標簽，設(shè)置標題為居中顯示第二步：主體部分為表單部分，用到的表單類型有text，password，checkbox等第三步：底部為版權(quán)信息，版權(quán)信息內(nèi)容為Copyright 2016 ，該內(nèi)容為一個段落，使用段落標簽點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字延遲符 任務(wù)實施第124頁，共198頁。06 任務(wù)總結(jié)延遲符第125頁，共198頁。任務(wù)技能任務(wù)實施任務(wù)拓展任務(wù)描述 通過本項目的學(xué)習，了解表單的作用以及使用方法，熟悉了HTML5中的表單及控件標簽，學(xué)會了應(yīng)用表單及控件設(shè)計注冊登錄與留言網(wǎng)頁的方法。 任務(wù)總結(jié)延遲符第126頁，共198頁。謝謝觀賞延遲符PPT模板下

54、載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： 第127頁，共198頁。天天動聽播放器界面延遲符項目六第128頁，共198頁。目錄01 學(xué)習目標02 學(xué)習路徑03 任務(wù)

55、描述04 任務(wù)技能延遲符05 任務(wù)實施06 任務(wù)總結(jié)第129頁，共198頁。01 學(xué)習目標延遲符第130頁，共198頁。 學(xué)習目標延遲符010203掌握HTML5中video標簽的屬性掌握HTML5中video標簽的方法和事件掌握HTML5中audio標簽的屬性學(xué)習目標 通過實現(xiàn)天天動聽播放器界面，學(xué)習HTML5相關(guān)的多媒體技術(shù)，掌握HTML5中新增音頻和視頻標簽的使用04掌握HTML5中audio標簽的方法和事件第131頁，共198頁。02 學(xué)習路徑延遲符第132頁，共198頁。 學(xué)習路徑學(xué)習目標通過實現(xiàn)服裝品牌墻界面，學(xué)習HML5與CSS3相關(guān)知識，了解HTML5與CSS3發(fā)展歷史和基礎(chǔ)標

56、簽的使用，以及自適應(yīng)網(wǎng)站標簽的使用。延遲符第133頁，共198頁。延遲符03 任務(wù)描述第134頁，共198頁。情境導(dǎo)入0102基本框架03開發(fā)環(huán)境04延遲符 任務(wù)描述功能描述第135頁，共198頁。情境入01延遲符 情境導(dǎo)入隨著網(wǎng)絡(luò)傳輸?shù)陌l(fā)展，音頻和視頻被廣泛的應(yīng)用到網(wǎng)頁設(shè)計中，在網(wǎng)頁中，音頻和視頻可以給用戶提供更直觀的，豐富的信息。本次任務(wù)主要是實現(xiàn)天天動聽播放器界面設(shè)計。第136頁，共198頁。情境入01延遲符 功能描述0102主體包括播放圖像和播放器控制條頭部包括天天動聽播放器標題第137頁，共198頁。情境入01延遲符 基本框架第138頁，共198頁。系統(tǒng)環(huán)境Windows 7系統(tǒng)及以

57、上系統(tǒng)軟件環(huán)境服務(wù)器瀏覽器Dreamweaver CS6Tomcat 7.0電腦端：火狐瀏覽器、谷歌瀏覽器手機端：Webkit內(nèi)核瀏覽器、Android手機內(nèi)置瀏覽器 開發(fā)環(huán)境延遲符第139頁，共198頁。延遲符04 任務(wù)技能第140頁，共198頁。任務(wù)技能audio標簽的概述video標簽的概述video標簽的屬性 任務(wù)技能延遲符audio標簽的屬性第141頁，共198頁。audio標簽的概述audio標簽定義了播放聲音文件或者音頻流的標準。支持三種音頻格式，分別是Ogg Vorbis ，MP3，Wav。HTML代碼為audio標簽的概述延遲符第142頁，共198頁。audio標簽的屬性au

58、dio標簽具有autoplay、autobuffer等屬性，通過這些屬性設(shè)置播放與緩存的功能audio標簽的屬性延遲符第143頁，共198頁。video標簽的概述video標簽主要是定義播放視頻文件或者視頻流的標準，支持3種視頻格式，分別為Ogg、WebM和MPEG4。HTML代碼為video標簽的概述延遲符第144頁，共198頁。video標簽的屬性video標簽具有autoplay、controls、width、height、poster等屬性，通過這些屬性可以設(shè)置播放、緩沖等功能video標簽的屬性延遲符第145頁，共198頁。05 任務(wù)實施延遲符第146頁，共198頁。輸入標題輸入標題

59、輸入標題第一步：頭部為天天動聽播放器的標題，用H1標簽第二步：主體為播放區(qū)域，由img和audio設(shè)置點擊輸入說明文字點擊輸入說明文字點擊輸入說明文字延遲符 任務(wù)實施第147頁，共198頁。06 任務(wù)總結(jié)延遲符第148頁，共198頁。任務(wù)技能任務(wù)實施任務(wù)拓展任務(wù)描述 通過本項目的學(xué)習，重點掌握HTML5中的多媒體元素標簽（主要包括標簽和標簽）、HTML5的audio/video屬性、audio/video方法、audio/video事件等 任務(wù)總結(jié)延遲符第149頁，共198頁。謝謝觀賞延遲符PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT

60、素材下載：/sucai/PPT背景圖片：/beijing/ PPT圖表下載：/tubiao/ 優(yōu)秀PPT下載：/xiazai/ PPT教程： /powerpoint/ Word教程： /word/ Excel教程：/excel/ 資料下載：/ziliao/ PPT課件下載：/kejian/ 范文下載：/fanwen/ 試卷下載：/shiti/ 教案下載：/jiaoan/ PPT論壇： 第150頁，共198頁。延遲符項目七使用HTML5繪制火柴棒人物第151頁，共198頁。目錄01 學(xué)習目標02 學(xué)習路徑03 任務(wù)描述04 任務(wù)技能延遲符05 任務(wù)實施06 任務(wù)總結(jié)第152頁，共198頁。01