項目一

HTML5+CSS3網頁布局與美化任務四

服飾頁面制作主講：莫德智htmlh5imgjavascriptwebcsscolorhr目錄任務情境任務目標任務描述任務實施學習資源考核評價課后拓展1+X考證練習htmlh5imgjavascriptwebcolorhr任務情境

中國人的漢字是象形文字，而多數的民族沒有自己的文字，所以他們就借助針、線在服飾上描繪民族圖案，講述本民族的故事，讓子孫了解本民族的文化歷史，傳承民族精神。例如壯族服飾中，存在的大量動物紋樣就折射出了壯族人民對自然的崇拜。廣西擁有著12個少數民族，而這些少數民族的服飾各有其特色之處。

本次專題任務是采用定位布局的方式來完成廣西少數民族文化資源網二級頁“服飾”頁面的制作。工作任務單工作任務單任務要求根據效果圖完成服飾頁面制作甲方提供的設計圖

如右圖所示評判標準1.能夠進行正確的頁面布局分析2.能夠進行正確的切圖3.網站文件命名正確4.代碼編寫符合標準5.樣式編寫正確，能夠達到參考效果1+X技能考核標準能正確選擇html標簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設計，并符合W3C的HTML和CSS標準作品提交要求站點文件夾評判標準1.能夠進行正確的頁面布局分析2.能夠進行正確的切圖3.網站文件命名正確4.代碼編寫符合標準5.樣式編寫正確，能夠達到參考效果任務目標任務目標能夠掌握網頁前端重構的流程方法能夠正確使用切圖工具進行網頁切圖能夠使用HTML常用的標簽構建簡單的HTML頁面能夠通過定義樣式屬性美化頁面，實現網頁效果圖的重構效果能夠形成布局思維并通過定位布局簡單網頁任務描述定位布局是主流的頁面布局之一，定位布局可以實現標準流布局和浮動布局沒辦法完成的效果，比如某個元素可以自由的在一個盒子內移動位置，并且壓住其他盒子。當我們滾動窗口的時候，盒子是固定屏幕某個位置的。定位布局是可以讓盒子自由的在某個盒子內移動位置或固定屏幕中某個位置，并且可以壓住其他盒子。

本任務中，我們將通過制作廣西少數民族文化資源網中的服飾頁面來學習使用定位布局的三種定位類型，如何設置元素定位位置。

服飾頁面的頁面結構：頁面頂部包含標題logo、頁面導航欄、登陸、注冊以及頁面主圖，頁面主體部份包含民族時尚，傳統服飾，壯美配飾以及固定側邊欄。頁尾部分。任務實施圖2

結構布局思路圖圖1

結構布局分析圖布局結構分析頁面切圖網站搭建HTML布局+css美化任務實施圖3頁面切圖切片效果布局結構分析頁面切圖網站搭建HTML布局+css美化創建站點文件夾fineryJS在進行網頁制作之前，首先需要完成站點文件夾的建立ImgCSS文件/文件夾作用Img文件夾存放圖片資源文件CSS文件夾存放CSS樣式文件JS文件夾存放JS文件finery.html文件服飾布局結構分析頁面切圖網站搭建HTML布局+css美化任務實施創建站點、鏈接樣式、搭建頁面主體結構完成頁頭（header）內容制作民族時尚欄目制作傳統服飾欄目步驟一步驟二步驟三步驟四構建HTML標準流布局+CSS頁面美化操作步驟制作壯美配飾欄目步驟五制作固定側邊欄欄目步驟六完成頁腳（footer）內容步驟七布局結構分析頁面切圖網站搭建HTML布局+css美化任務實施學習資源定位布局基礎定位布局布局思維01HTML創建頁面元素02CSS盒模型呈現元素03CSS排版元素布局思維流程學習資源定位的組成定位=定位模式+邊偏移◎定位模式position屬性，決定了html元素在頁面中的定位方式以及定位的參照對象。定位布局基礎定位布局布局思維值定位方式文檔流參照對象static靜態定位（默認值）默認文檔流依據默認文檔流中元素的順序依次排列=無定位absolute絕對定位定位文檔流相對于非static定位的父元素進行定位relative相對定位相對于自身在默認文檔流中的位置進行定位fixed固定定位相對于瀏覽器視口進行定位學習資源邊偏移屬性描述top頂端偏移量，定義元素相對于其父元素的上邊線的距離bottom底部偏移量，定義元素相對于其父元素的下邊線的距離right右側偏移量，定義元素相對于其父元素右邊線的距離left左側偏移量，定義元素相對于其父元素左邊線的距離◎邊偏移定位布局基礎定位布局布局思維◎定位層對象不設定position屬性，即保持對象默認的【static】的靜態定位方式，對象處于默認文檔流中。設定position屬性，即將對象轉化為【非static】的動態定位方式，這種【非static】的定位對象，我們往往稱為“定位層”。學習資源◎定位文檔流定位布局基礎定位布局布局思維定位層對象，脫離默認文檔流，形成新的定位文檔流。定位文檔流依附于Z軸走向排列，多個定位文檔流具有Z軸方向的前后疊加順序關系。與浮動文檔流不同，定位文檔流將完全脫離默認文檔流，無任何關聯。學習資源◎定位文檔流的順序控制定位布局基礎定位布局布局思維屬性說明z-index規定定位元素的堆疊順序，擁有更高順序的元素總是會處于較低順序的元素的前面z-index屬性僅對定位層對象生效，用來控制對象的定位文檔流層疊關系。z-index：Z軸的索引順序。值用來指定順序關系，number數字形式，沒有單位，允許負值。未定義z-index的情況下，定位對象依據它們在HTML結構中的順序，寫在后面的在Z軸上越靠前z-index：默認值為0，正值越大，層疊級別越高，Z軸上越靠前；學習資源◎相對定位relative相對定位是元素在移動位置的時候，是相對于它原來的位置來說的。特點：定位布局基礎定位布局布局思維在相對定位中同一個方向上的定位屬性只能使用一個給相對定位的元素設置margin/padding等屬性的時會影響到標準流的布局相對定位是不脫離標準流的,會繼續在標準流中占用一份空間在相對定位中是區分塊級元素/行內元素/行內塊級元素。學習資源◎絕對定位absolute絕對定位是元素在移動位置的時候，是相對于它的祖先元素來說的。定位布局基礎定位布局布局思維如果祖先元素父級有定位(相對、絕對、固定定位)，則以最近一級，有定位祖先元素為參考點移動位置如果沒有祖先元素，或者祖先元素沒定位，即默認情況下所有的絕對定位的元素,無論有沒有祖先元素,都會以body作為參考點。絕對定位不再占用原先的位置（脫標）絕對定位參考點學習資源◎固定定位fixed固定定位是元素固定于瀏覽器的可視區的位置。定位布局基礎定位布局布局思維特點02跟父元素沒有任何關系03不隨滾動條滾動01以瀏覽器的可視窗口為參照點移動元素04固定定位不再占有原先的位置(脫標)05固定定位也可以看做是一種特殊的絕對定位06定定位和絕對定位一樣不區分行內/塊級/行內塊級學習資源

通過制作廣西少數民族文化資源網中的“服飾頁面”不難發現，網頁的內容，我們可以讓其在頁面的任何位置。像這種網頁結構元素讓盒子自由的在某個盒子內移動或固定在屏幕中的某個位置，并且可以壓住某個盒子。

在定位布局中，通過設置元素的定位模式和邊偏移量，實現頁面內容的布局方式。定位布局基礎定位布局布局思維考核評價班級：姓名：學號任務名稱：服飾頁面制作評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發任務□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結構分析能夠進行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網站搭建網站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標準□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務□是□是工作規范能按企業規范要求進行操作□是□是成果展示能準確表達，匯報成果□是□是非技術考評（20%）態度學習態度是否端正□是□是紀律遵守紀律□是□是協作有交流、團隊合作□是□是文明保