項(xiàng)目一HTML布局+CSS美化任務(wù)五

美食詳情頁制作主講：黃美世htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實(shí)施學(xué)習(xí)資源考核評價(jià)課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境廣西是中國5個(gè)少數(shù)民族自治區(qū)之一，地處中、南亞熱帶季風(fēng)氣候區(qū)，氣候溫暖，熱量豐富，有很多地方美食，自古以來廣西就是官宦商旅云集之地，因而這里的飲食習(xí)慣融合了粵、川、湘、浙、贛、閩等地方菜肴特色，善長眾菜合調(diào)，粗菜細(xì)做。本次專題任務(wù)是完成廣西少數(shù)民族文化資源網(wǎng)中二級頁“美食”頁面，讓更多的人了解廣西的特色美食，喜歡廣西美食，起到很好的宣傳作用，從而促進(jìn)廣西經(jīng)濟(jì)的發(fā)展。本次專題任務(wù)是采用彈性布局的方式來進(jìn)行美食頁面的布局，利用響應(yīng)式布局來完成網(wǎng)頁電腦端、iPad端和移動端三個(gè)端口的展示。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成美食詳情頁制作甲方提供的設(shè)計(jì)圖

如右圖所示評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇html標(biāo)簽和CSS樣式、響應(yīng)式布局、彈性布局相關(guān)知識完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計(jì)，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫符合標(biāo)準(zhǔn)5.樣式編寫正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握網(wǎng)頁前端重構(gòu)的流程方法能夠正確使用切圖工具進(jìn)行網(wǎng)頁切圖能夠掌握響應(yīng)式布局的基礎(chǔ)知識能夠掌握彈性布局的基礎(chǔ)知識能夠通過mediaquery媒體查詢的使用和定義樣式屬性實(shí)現(xiàn)三個(gè)端口的自適應(yīng)，實(shí)現(xiàn)網(wǎng)頁效果圖的重構(gòu)效果任務(wù)描述響應(yīng)式布局是一個(gè)網(wǎng)站能夠兼容多個(gè)終端而不是為每個(gè)終端做一個(gè)特定的版本。本任務(wù)中，我們將通過制作廣西少數(shù)民族文化資源網(wǎng)中的美食詳情頁來學(xué)習(xí)響應(yīng)式布局、彈性布局的基礎(chǔ)知識、學(xué)習(xí)mediaquery媒體查詢、學(xué)習(xí)如何通過定義CSS樣式來實(shí)現(xiàn)電腦端、iPad端和手機(jī)端自適應(yīng)。

美食詳情頁分為頁頭、頁面主體、頁尾三大結(jié)構(gòu)，頁面頭部包含標(biāo)題logo、頁面導(dǎo)航欄、登陸、注冊信息，獲取當(dāng)前時(shí)間、美食頁面的banner，頁面主體部份包含相約廣西欄目、廣西美食介紹欄目兩個(gè)板塊任務(wù)實(shí)施圖2

結(jié)構(gòu)布局思路圖圖1

結(jié)構(gòu)布局劃分圖布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化任務(wù)實(shí)施圖3頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化foodvideo創(chuàng)建站點(diǎn)文件夾JS在進(jìn)行網(wǎng)頁制作之前，首先需要完成站點(diǎn)文件夾的建立ImgCSS文件/文件夾作用Img文件夾存放圖片資源文件CSS文件夾存放CSS樣式文件JS文件夾存放JS文件video文件夾存放視頻文件food.html文件首頁任務(wù)實(shí)施布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化創(chuàng)建頁面、鏈接樣式、搭建頁面主體結(jié)構(gòu)完成頁面頭部制作相約廣西欄目制作廣西特色美食介紹欄目步驟一步驟二步驟三步驟四構(gòu)建HTML響應(yīng)式布局+CSS頁面美化操作步驟制作頁面尾部步驟五完成美食頁面平板端制作步驟六完成美食頁面移動端制作步驟七布局結(jié)構(gòu)分析頁面切圖HTML布局+css美化任務(wù)實(shí)施學(xué)習(xí)資源學(xué)習(xí)資源響應(yīng)式布局的概念響應(yīng)式布局意在實(shí)現(xiàn)不同屏幕分辨率的終端上瀏覽網(wǎng)頁的不同展示方式。通過響應(yīng)式設(shè)計(jì)能使網(wǎng)站在手機(jī)和平板電腦上有更好的瀏覽閱讀體驗(yàn)。響應(yīng)式WEB設(shè)計(jì)是一個(gè)讓用戶通過各種尺寸的設(shè)備瀏覽網(wǎng)站獲得良好的視覺效果的方法,響應(yīng)式設(shè)計(jì)可以隨著所顯示的屏幕大小而改變,實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的核心就是媒體查詢。使用@media媒體查詢，可以針對不同的媒體類型定義不同的樣式。優(yōu)點(diǎn)：1、面對不同分辨率設(shè)備靈活性強(qiáng)。2、能夠快捷解決多設(shè)備顯示適應(yīng)問題。響應(yīng)式布局的優(yōu)、缺點(diǎn)缺點(diǎn)：1、兼容各種設(shè)備工作量大，效率低下。2、代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長。響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源01flex（彈性布局）02mediaquery（媒體查詢）03vw/vh實(shí)現(xiàn)響應(yīng)式布局的五種方式04%(百分百)04rem響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源flex彈性布局的定義Flex彈性布局是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)，確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。?yīng)用它可以更輕松地設(shè)計(jì)靈活的響應(yīng)式布局結(jié)構(gòu)，而無需使用浮動或定位。使用flex彈性布局的目的是用一種更加有效的方式來對一個(gè)容器中的子元素進(jìn)行排列、對齊和分配空白空間。如需使用flex彈性布局，首先需要定義flex容器（將display屬性設(shè)置為flex）。Flex容器內(nèi)包含了一個(gè)或多個(gè)flex元素。響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源1.主軸與交叉軸

（flex-direction）：利用該屬性定義主軸方向，即項(xiàng)目的排列方向值描述row默認(rèn)值。水平堆疊flex項(xiàng)目（從左到右）。row-reverse水平堆疊flex項(xiàng)目（從右到左）。column垂直堆疊flex項(xiàng)目（從上到下）。column-reverse垂直堆疊flex項(xiàng)目（從下到上）。

響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源2.項(xiàng)目分行flex-wrap：利用該屬性定義當(dāng)一條軸線排不下所有項(xiàng)目時(shí)，如何換行值描述wrap換行nowrap不換行wrap-reverse行序反向響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源3.排序方向justify-content、align-items：justify-content屬性用于定義flex項(xiàng)目在主軸上對齊。align-items屬性用于定義flex項(xiàng)目在交叉軸對齊。值描述flex-start默認(rèn)值。將flex項(xiàng)目在容器的開頭對齊flex-end將flex項(xiàng)目在容器的末端對齊center將flex項(xiàng)目在容器的中心對齊stretch拉伸顯示baseline基線對齊

響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源4.分行的排序方式align-content：align-content屬性規(guī)定當(dāng)分行時(shí)，每一行的排序方式值描述flex-start默認(rèn)值。每行在容器的開頭對齊flex-end每行在容器的末端對齊center每行在容器的中心對齊space-around在每行之前、之間和之后都帶有空格space-between每行之間都有相等距離響應(yīng)式布局flex彈性布局媒體查詢學(xué)習(xí)資源響應(yīng)式布局flex彈性布局媒體查詢1.媒體查詢的定義媒體查詢是CSS3的新增屬性。它是實(shí)現(xiàn)響應(yīng)式布局的關(guān)鍵，可以針對不同的媒體類型和不同的屏幕尺寸定義不同的樣式，在重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新進(jìn)行渲染。媒體查詢目前廣泛應(yīng)用于蘋果手機(jī)、Android手機(jī)、平板電腦等設(shè)備。學(xué)習(xí)資源響應(yīng)式布局flex彈性布局媒體查詢2.媒體查詢語法@mediamediatypeand

|

not|only(mediafeafure){css-code;}語法解釋：（1）用@開頭，@media注意@符號。（2）mediatype用于定義媒體類型。（3）關(guān)鍵字為and，not，only(注意and前后都有空格)。（4）mediafeature媒體特性必須用括號()括起。關(guān)鍵字解釋：And：可以將多個(gè)媒體特性連接到一起，相當(dāng)于“且”的意思。Not:排除某個(gè)媒體類型，相當(dāng)于“非”的意思，可以省略。Only:指定某個(gè)特定的媒體類型，可省略。學(xué)習(xí)資源響應(yīng)式布局flex彈性布局媒體查詢3.媒體類型值描述all默認(rèn)值。用于所有媒體類型的設(shè)備print用于打印機(jī)screen用于計(jì)算機(jī)、平板電腦、智能手機(jī)等speech用于屏幕閱讀器等發(fā)聲設(shè)備mediatype屬性值考核評價(jià)班級：姓名：學(xué)號任務(wù)名稱：古跡頁面制作評價(jià)項(xiàng)目評價(jià)標(biāo)準(zhǔn)自評情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實(shí)現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項(xiàng)目成果（20%）工作完整能夠按時(shí)完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報(bào)成果□是□是非技術(shù)考評（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□