項目一HTML5+CSS3網頁布局與美化主講：陳倩htmlh5imgjavascriptwebcsscolorhr任務三

古跡頁面制作目錄任務情境任務目標任務描述任務實施學習資源考核評價課后拓展1+X考證練習htmlh5imgjavascriptwebcolorhr任務情境民族民俗風情是廣西悠久歷史文化的重要組成部分，它神秘的風采和誘人的魅力吸引了越來越多的旅游者。近年來，廣西已逐步發展出具有當地特色的旅游精品路線，包括南國邊關攬勝游、壯鄉文化風情游、瑤苗侗鄉采風游、千年靈渠尋古游、寧明花山崖畫探奇游、百色小平足跡游等等。這些民俗旅游專線項目都取得了較好的經濟效益和社會效益。本次專題任務是制作廣西少數民族文化資源網中二級頁“古跡”網頁，使我們充分認識廣西自身民俗資源，促進廣西旅游業的快速發展。工作任務單工作任務單任務要求根據效果圖完成古跡頁面的制作甲方提供的設計圖

如右圖所示評判標準1.能夠進行正確的頁面布局分析2.能夠進行正確的切圖3.網站文件命名正確4.代碼編寫符合標準5.樣式編寫正確，能夠達到參考效果1+X技能考核標準能正確選擇HTML標簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設計，并符合W3C的HTML和CSS標準作品提交要求站點文件夾評判標準1.能夠進行正確的頁面布局分析2.能夠進行正確的切圖3.網站文件命名正確4.代碼編寫符合標準5.樣式編寫正確，能夠達到參考效果任務目標任務目標能夠利用浮動布局方法對頁面進行布局能正確掌握背景圖片樣式的設置能正確選擇html標簽和CSS樣式完成頁面制作能夠提高溝通協作能力，增強工匠精神和專業素質任務描述網頁布局是網頁制作過程中非常重要的技術環節,也是網頁制作過程中難度較大的一個部分。如何正確合理地進行網頁布局，無論是對于網頁內容的合理呈現還是對于提升網頁整體的美觀程度都是非常重要的。浮動布局作為當下網頁制作中重要的一種布局技術，在實際應用中被廣泛采納。

本任務，我們將通過制作廣西少數民族文化資源網中古跡網頁對浮動布局的原理及應用方法進行更為深入的學習和鞏固。任務實施圖1

結構布局分圖古跡頁面分為頁面頭部、頁面主體和頁面尾部三大部分。其中，頁面頭部和頁面尾部與任務二節日頁面相似，頁面主體包含新聞聚焦和古跡簡介兩個欄目，新聞聚焦欄目主要通過列表的形式展示與名勝古跡相關的新聞，古跡簡介欄目用于展示名勝古跡信息。布局結構分析頁面切圖HTML布局+css美化任務實施圖2頁面切圖切片效果布局結構分析頁面切圖HTML布局+css美化創建頁面、鏈接樣式創建頁面主體結構和樣式美化創建頁面頭部制作新聞聚焦欄目步驟一步驟二步驟三步驟四構建HTML標準流布局+CSS頁面美化操作步驟制作古跡簡介欄目步驟五制作頁面尾部步驟六任務實施布局結構分析頁面切圖HTML布局+css美化學習資源CSS3過渡效果transform變形屬性常見transform變形屬性（2D轉換）值描述none定義不進行轉換。rotate(angle)定義元素在二維空間的旋轉，在參數中規定角度。scale(x,y)定義元素在二維空間的縮放和翻轉。translate(x,y)定義元素在二維空間的偏移。transform屬性，可用于元素的變形，可實現元素的旋轉、縮放、移動、傾斜等變形效果。語法如下:transform:none|transform-functions;其中，none:默認值，不設置元素變形;transform-functions:設置一個或多個變形函數。變形函數主要包括旋轉rotate()、縮放scale()、移動translate()等，設置多個變形函數時，用空格間隔。學習資源CSS3過渡效果transform變形屬性元素的旋轉，rotate()函數語法如下:rotate(angle)其中，angle表示旋轉的角度，為帶有角度單位標識符的數值，角度單位是deg。值為正時,表示順時針旋轉；值為負時，表示逆時針旋轉。設置當鼠標放到無序列表項目上時的CSS樣式。順時針旋轉30度，背景顏色為橙色，文字顏色為白色。代碼如下:li:hover{transform:rotate(30deg);background-color:orange;color:white;}當把鼠標放到導航欄項目上時，欄目會旋轉一定的角度，網頁效果如圖所示：學習資源CSS3過渡效果transform變形屬性元素的縮放和翻轉，scale()函數語法如下:scale(x,y)其中，x:表示元素在水平方向上的縮放倍數。y:表示元素在垂直方向上的縮放倍數。x、y的值可以為整數、負數、小數。當取值的絕對值大于1時,表示放大;絕對值小于1時，表示縮小。當取值為負數時，元素會被翻轉。如果y值省略，則說明垂直方向上的縮放倍數與水平方向上的縮放倍數相同。當鼠標放到導航欄項目上時，欄目在水平和垂直方向同時放大1.5倍，效果如圖所示。:li:hover{transform:scale(1.5);background-color:orange;color:white;}學習資源CSS3過渡效果transform變形屬性元素的移動，translate()函數語法如下:translate(dx,dy)其中，dx:表示元素在水平方向上的偏移距離;dy:表示元素在垂直方向上的偏移距離;dx、dy的值為帶有長度單位標識符的數值，可以為負值和帶小數的值。若取值大于0，則表示向右或向下偏移;若取值小于0，則表示向左或向上偏移。如果dy值省略，則說明垂直方向上的偏移距離默認為0。設置鼠標放到導航欄上時，欄目發生一定的偏移，向右偏移10像素,向下偏移5像素。代碼如下:transform:translate(10px,5px);學習資源CSS3過渡效果transform變形屬性同時使用多個變形函數，使得元素變形可以更加靈活，多個函數之間用空格分隔。設置向右下方向各偏移10像素，順時針旋轉30度，垂直翻轉。代碼如下:transform:translate(10px,10px)rotate(30deg)scale(1,-1);學習資源CSS3過渡效果transform變形屬性transition過渡屬性值描述transition-property屬性名，哪個屬性需要變化transition-duration持續時間transition-timing-function過渡效果的速度曲線transition-delay過渡延遲時間將元素的某個屬性從“一個值”在指定時間內過渡到“另一個值”transition：屬性名持續時間過渡方式延遲時間學習資源CSS3過渡效果transform變形屬性transition-timing-function屬性規定過渡效果的速度曲線。

該屬性允許過渡效果隨著時間來改變其速度。值描述linear勻速ease慢速開始，變快，慢速結束ease-in慢速開始ease-out慢速結束ease-in-out慢速開始和結束考核評價班級：姓名：學號任務名稱：古跡頁面制作評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發任務□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結構分析能夠進行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網站搭建網站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標準□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務□是□是工作規范能按企業規范要求進行操作□是□是成果展示能準確表達，匯報成果□是□是非技術考評（20%）態度學習態度是否端正□是□是紀律遵守紀律□是□是協作有交流、團隊合作□