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

本單元我們使