PPTHTML5+CSS3 Web前端開發(fā)技術(shù) 課件 第5單元-學(xué)習(xí)情境7-制作招聘網(wǎng)站首頁

HTML5+CSS3Web前端開發(fā)技術(shù)單元5制作網(wǎng)站首頁單元5制作網(wǎng)站首頁學(xué)習(xí)情境7制作招聘網(wǎng)站首頁學(xué)習(xí)情境7制作招聘網(wǎng)站首頁01030204情境概述知識(shí)準(zhǔn)備案例講解總結(jié)PART01情境概述學(xué)習(xí)情境7制作招聘網(wǎng)站首頁教學(xué)概述教學(xué)導(dǎo)航知識(shí)重點(diǎn)HTML5音頻元素的用法；HTML5視頻元素的用法；CSS3動(dòng)畫的用法；CSS3過渡效果的用法；CSS3變形效果的用法；CSS3多列布局的用法知識(shí)難點(diǎn)CSS3動(dòng)畫相關(guān)屬性的設(shè)置推薦教學(xué)方式從學(xué)習(xí)情境入手，通過引導(dǎo)學(xué)生制作一個(gè)招聘網(wǎng)站首頁Web頁面，讓學(xué)生掌握HTML5多媒體元素的用法和CSS3動(dòng)畫、多列布局樣式的用法；通過引導(dǎo)學(xué)生制作一個(gè)企業(yè)網(wǎng)站首頁Web頁面，讓學(xué)生掌握CSS3過渡、變形樣式屬性的用法。建議學(xué)時(shí)24學(xué)時(shí)推薦學(xué)習(xí)方法網(wǎng)站的首頁通常是一個(gè)信息聚合頁面，要綜合運(yùn)用多種HTML標(biāo)簽和CSS樣式，需多鞏固前面的學(xué)習(xí)內(nèi)容，再結(jié)合新知識(shí)點(diǎn)，按照效果圖實(shí)現(xiàn)網(wǎng)頁。必須掌握的理論知識(shí)<video>標(biāo)簽及屬性@keyframes規(guī)則animation樣式屬性transition樣式屬性transform樣式屬性column樣式屬性必須掌握的技能使用HTML5多媒體元素開發(fā)網(wǎng)頁使用CSS3動(dòng)畫屬性美化網(wǎng)頁使用CSS3過渡屬性美化網(wǎng)頁使用CSS3變形屬性美化網(wǎng)頁使用CSS3多列布局屬性開發(fā)網(wǎng)頁教學(xué)概述網(wǎng)站首頁通常是信息的聚合頁面，包含多個(gè)內(nèi)容版塊。本單元將學(xué)習(xí)制作一個(gè)招聘網(wǎng)站首頁和一個(gè)企業(yè)網(wǎng)站首頁，這兩個(gè)首頁的內(nèi)容版塊具有一定的通用性和代表性，通過舉一反三，我們可以制作出類似的網(wǎng)站首頁頁面。教學(xué)概述學(xué)習(xí)情境描述本學(xué)習(xí)情境是制作一個(gè)招聘網(wǎng)站的首頁，在本學(xué)習(xí)情境中，我們需要考慮與網(wǎng)站首頁制作相關(guān)的各種內(nèi)容，如頁首、頁腳、導(dǎo)航條、宣傳圖（視頻）、輪播圖、列表等，通過將新學(xué)的知識(shí)技能與前面學(xué)習(xí)的內(nèi)容相結(jié)合，進(jìn)行綜合運(yùn)用，從而完成招聘網(wǎng)站首頁的開發(fā)制作。教學(xué)概述本節(jié)課需要掌握的情境知識(shí)點(diǎn)和技能點(diǎn)關(guān)鍵知識(shí)點(diǎn)：（1）音頻元素<audio>的使用方法（2）視頻元素<video>的使用方法（3）動(dòng)畫關(guān)鍵幀@keyframes規(guī)則的使用方法（4）動(dòng)畫樣式animation屬性的使用方法教學(xué)概述本節(jié)課需要掌握的情境知識(shí)點(diǎn)和技能點(diǎn)關(guān)鍵技能點(diǎn)：（1）使用<video>元素在網(wǎng)頁中播放視頻（2）使用@keyframes和animation屬性實(shí)現(xiàn)動(dòng)畫效果教學(xué)概述本節(jié)課的學(xué)習(xí)目標(biāo)掌握綜合運(yùn)用HTML5和CSS3實(shí)現(xiàn)包含頁首、頁腳、導(dǎo)航欄、宣傳欄、輪播圖、信息列表版塊、圖片展示版塊等的聚合型網(wǎng)頁的技能掌握在網(wǎng)頁中實(shí)現(xiàn)音視頻播放的方法掌握在網(wǎng)頁中實(shí)現(xiàn)動(dòng)畫效果的方法掌握使用CSS動(dòng)畫制作自動(dòng)播放的輪播圖的方法教學(xué)概述本節(jié)課的任務(wù)書完成招聘網(wǎng)站首頁的整體框架搭建實(shí)現(xiàn)招聘網(wǎng)站首頁的頁首、頁腳效果實(shí)現(xiàn)招聘網(wǎng)站首頁的導(dǎo)航欄實(shí)現(xiàn)招聘網(wǎng)站首頁的宣傳欄視頻播放效果實(shí)現(xiàn)招聘網(wǎng)站首頁的輪播圖效果實(shí)現(xiàn)招聘網(wǎng)站首頁的其余各子版塊PART02知識(shí)準(zhǔn)備學(xué)習(xí)情境7制作招聘網(wǎng)站首頁知識(shí)準(zhǔn)備知識(shí)分布網(wǎng)絡(luò)知識(shí)準(zhǔn)備引導(dǎo)問題1.網(wǎng)站首頁一般需要包含哪些模塊？2.制作網(wǎng)站首頁的各個(gè)模塊時(shí)需要用到哪些頁面元素？知識(shí)準(zhǔn)備知識(shí)點(diǎn)介紹1、視頻元素<video>2、音頻元素<audio>3、關(guān)鍵幀動(dòng)畫規(guī)則@keyframes4、CSS動(dòng)畫屬性animation視頻元素<video>知識(shí)準(zhǔn)備<video>是HTML5中新增的元素，它的作用是在HTML頁面中嵌入視頻元素，<video>元素支持三種視頻格式：MP4、WebM和Ogg。屬性描述autoplay如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。controls如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。height設(shè)置視頻播放器的高度。loop如果出現(xiàn)該屬性，則當(dāng)媒體文件完成播放后再次開始播放。muted規(guī)定視頻的音頻輸出應(yīng)該被靜音。poster規(guī)定視頻下載時(shí)顯示的圖像，或者在用戶點(diǎn)擊播放按鈕前顯示的圖像。preload如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。src要播放的視頻的URL。width設(shè)置視頻播放器的寬度。<videosrc="movie.mp4"controls="controls">您的瀏覽器不支持video標(biāo)簽。</video>知識(shí)準(zhǔn)備示例：音頻元素<audio>知識(shí)準(zhǔn)備<audio>是HTML5中新增的元素，它的作用是在HTML頁面中嵌入音頻元素，<audio>元素支持MP3、WAV和Ogg格式的音頻文件。<audio>元素的常用屬性如表5-5所示。屬性描述autoplay如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。controls如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。loop如果出現(xiàn)該屬性，則當(dāng)音頻完成播放后再次開始播放。muted規(guī)定音頻輸出被靜音。preload如果出現(xiàn)該屬性，則音頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。src要播放的音頻的URL。audio標(biāo)簽常用屬性<audiosrc="someaudio.wav">您的瀏覽器不支持audio標(biāo)簽。</audio>知識(shí)準(zhǔn)備示例：可以在<audio>和</audio>標(biāo)簽之間放置文本內(nèi)容，這樣不支持<video>元素的瀏覽器就可以顯示出該標(biāo)簽的信息。關(guān)鍵幀動(dòng)畫規(guī)則@keyframes知識(shí)準(zhǔn)備屬性描述animationname必需指定，定義動(dòng)畫的名稱。keyframes-selector必需的。動(dòng)畫持續(xù)時(shí)間的百分比。合法值：0-100%from(和0%相同)to(和100%相同)css-styles必需的。一個(gè)或多個(gè)合法的CSS樣式屬性。@keyframesmymove{0%{ top:0px; left:0px; background:red; } 50%{top:100px;left:100px;background:yellow; } }示例：CSS動(dòng)畫屬性animation知識(shí)準(zhǔn)備animation-name必需的。指定要綁定的關(guān)鍵幀動(dòng)畫的名稱。即@keyframes規(guī)則中的animationname。animation-duration必需的。指定動(dòng)畫需要多少秒或毫秒完成。animation-delay設(shè)置動(dòng)畫在啟動(dòng)前的延遲間隔需要多少秒或毫秒。animation-iteration-count定義動(dòng)畫的播放次數(shù)。合法值：n正整數(shù)，定義應(yīng)該播放多少次動(dòng)畫。infinite指定動(dòng)畫播放無限次animation-direction指定是否應(yīng)該輪流反向播放動(dòng)畫。合法值：normal 默認(rèn)值。動(dòng)畫按正常播放。reverse 動(dòng)畫反向播放。alternate 動(dòng)畫在奇數(shù)次正向播放，在偶數(shù)次反向播放。alternate-reverse 動(dòng)畫在奇數(shù)次反向播放，在偶數(shù)次正向播放。animation屬性說明div{animation:mymove5sinfinite;}animation-direction指定是否應(yīng)該輪流反向播放動(dòng)畫。合法值：normal 默認(rèn)值。動(dòng)畫按正常播放。reverse 動(dòng)畫反向播放。alternate 動(dòng)畫在奇數(shù)次正向播放，在偶數(shù)次反向播放。alternate-reverse 動(dòng)畫在奇數(shù)次反向播放，在偶數(shù)次正向播放。animation-fill-mode規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式。合法值：none 默認(rèn)值。動(dòng)畫在動(dòng)畫執(zhí)行之前和之后不會(huì)應(yīng)用任何樣式到目標(biāo)元素。forwards 當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。backwards 在animation-delay所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。both 向前和向后填充模式都被應(yīng)用。animation-play-state規(guī)定動(dòng)畫是運(yùn)行還是暫停。合法值：paused 動(dòng)畫暫停。running 動(dòng)畫播放。知識(shí)準(zhǔn)備示例：PART03案例講解學(xué)習(xí)情境7制作招聘網(wǎng)站首頁案例講解1.制作招聘網(wǎng)站首頁實(shí)例：使用HBuilder工具制作一個(gè)招聘網(wǎng)站首頁，并在瀏覽器上進(jìn)行展示案例講解1.制作招聘網(wǎng)站首頁步驟：設(shè)計(jì)頁面整體布局設(shè)計(jì)頁頭設(shè)計(jì)主體內(nèi)容設(shè)計(jì)頁腳PART04總結(jié)學(xué)習(xí)情境7制作招聘網(wǎng)站首頁總結(jié)總結(jié)

本單元我們使