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

節日頁面制作目錄任務情境任務目標任務描述任務實施學習資源考核評價課后拓展1+X考證練習htmlh5imgjavascriptwebcolorhr任務情境廣西是多民族聚居的自治區，自古以來就有許多的民族傳統節日，比如壯族的三月三歌節、瑤族的達努節和盤王節、苗族的踩花山、仫佬族的走坡節、侗族的花炮節，以及別有風味的打油茶等充滿著濃郁的民族風情的節日活動。民族節日的形式、內容豐富多彩，它包含特有的民俗風情、節慶典禮、宗教信仰、傳統服飾、烹調技藝、工藝特產、音樂歌舞等，以豐富的文化內涵及特有的民族風情吸引著廣大的海內外游客。本次專題任務是采用浮動布局的方式來完成網站中節日頁的制作。工作任務單工作任務單任務要求根據效果圖完成節日頁面的制作甲方提供的設計圖

如右圖所示評判標準1.能夠進行正確的頁面布局分析2.能夠進行正確的切圖3.網站文件命名正確4.代碼編寫符合標準5.樣式編寫正確，能夠達到參考效果1+X技能考核標準能正確選擇HTML標簽和CSS樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設計，并符合W3C的HTML和CSS標準作品提交要求站點文件夾評判標準1.能夠進行正確的頁面布局分析2.能夠進行正確的切圖3.網站文件命名正確4.代碼編寫符合標準5.樣式編寫正確，能夠達到參考效果任務目標任務目標能夠掌握網頁前端重構的流程方法能夠正確使用切圖工具進行網頁切圖能夠掌握浮動布局的原理和應用技巧能夠掌握項目列表的使用方法和CSS樣式的應用方法能夠利用浮動布局方法對頁面進行布局能夠了解廣西少數民族民俗活動，增強民族凝聚力能夠提高溝通協作能力，增強工匠精神和專業素質任務描述浮動布局是最常見的網頁布局方式之一，通過設置元素的float屬性可以使原本獨占一行的多個塊元素顯示在同一行中，從而為網頁布局提供了更多的可能性。浮動前浮動后任務實施圖1

結構布局劃分圖民族節日頁分為頁頭、頁中和頁尾三大結構，頁頭和頁尾與任務一壯族銅鼓文化詳情頁類似，頁中包含新聞資訊和節日博覽兩個欄目內容，新聞資訊欄目通過圖文展示民族節日活動相關的最新新聞，節日博覽作為側邊欄，通過列表的形式按民族進行分類，展示廣西各少數民族的節日信息。布局結構分析頁面切圖HTML布局+css美化任務實施圖2頁面切圖切片效果布局結構分析頁面切圖HTML布局+css美化創建頁面、鏈接樣式創建頁面主體結構和樣式美化創建頁面頭部制作新聞資訊欄目步驟一步驟二步驟三步驟四構建HTML標準流布局+CSS頁面美化操作步驟制作節日博覽欄目步驟五制作頁面尾部步驟六任務實施布局結構分析頁面切圖HTML布局+css美化學習資源列表的應用列表是一種非常有用的數據排列方式，最直接的用途是有序的呈現文字，但利用列表還可以做出其他豐富的效果，羅列不同的元素，如圖像等，使用項目列表制作導航菜單也是重要的應用之一。浮動的原理及應用方法列表的應用和樣式設置學習資源列表的分類代碼

<h3>廣西的少數民族：</h3><ul><li>壯族</li><li>瑤族</li><li>侗族</li></ul>效果項目列表ul也稱為無序列表，使用<li>標簽來羅列各個項目，并使用特殊符號來進行分項標識，如黑色圓點等。列表項之間沒有順序關系。浮動的原理及應用方法列表的應用和樣式設置學習資源列表的分類代碼<h3>網頁制作相關課程設計：</h3><ol><li>網頁美工</li><li>HTML+CSS網頁制作</li><li>JavaScript程序設計</li></ol>效果編號列表ol又稱為有序列表，每個列表項前面都有標識順序的編號，如1、2、3等。編號的形式可以通過CSS樣式進行控制。浮動的原理及應用方法列表的應用和樣式設置學習資源列表的樣式設置屬性描述list-style-type規定列表項標記的類型。list-style-image指定圖像作為列表項標記。list-style-position規定列表項標記（項目符號）的位置。浮動的原理及應用方法列表的應用和樣式設置學習資源浮動的原理及應用方法列表的應用和樣式設置列表的樣式設置屬性值說明disc默認值，黑色圓點circle空心圓圈

square黑色正方形none不顯示符號decimal數字，如1，2，3………lower-roman小寫羅馬文字，如：ⅰ，ⅱ，ⅲ，ⅳ……upper-roman大字羅馬文字，如：Ⅰ，Ⅱ，Ⅲ，Ⅳ……lower-latin小寫拉丁文，如：a，b，c，d……upper-latin大寫拉丁文，如：A，B，C，D……inherit繼承list-style-type屬性，設置列表符號類型項目列表編號列表學習資源列表的樣式設置list-style-image屬性，將圖像指定為列表項標記：語法格式：list-style-image:url(圖像的路徑及文件名);浮動的原理及應用方法列表的應用和樣式設置學習資源列表的樣式設置list-style-position屬性，指定列表項標記（項目符號）的位置。屬性值說明outside默認值。保持列表符號位于文本左側，并且放置在文本以外，環繞文本不根據標記對齊。inside列表符號放置在文本以內，且環繞文本根據列表符號對齊。"list-style-position:outside;"表示項目符號點將在列表項之外。"list-style-position:inside;"

表示項目符號將在列表項內。浮動的原理及應用方法列表的應用和樣式設置學習資源浮動與float屬性元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。在CSS中，float屬性用來定義元素向哪個方向浮動，語法格式如下：選擇器{float:屬性值;}屬性值說明left元素向左浮動。right元素向右浮動。none默認值。元素不浮動，并會顯示在其在文本中出現的位置。inherit規定應該從父元素繼承float屬性的值。浮動的原理及應用方法列表的應用和樣式設置學習資源浮動的原理及特點浮動元素脫離默認文檔流，漂浮在默認文檔流之上，效果參考圖1-27。浮動元素不受默認文檔流的限制，直接適用于盒子模型。浮動元素以父元素或同級元素的浮動方向為參考進行對齊排列。浮動元素雖然脫離默認文檔流，但是仍會對默認文檔流中的內容造成影響。浮動的原理及應用方法列表的應用和樣式設置學習資源浮動帶來的不良影響浮動的原理及應用方法列表的應用和樣式設置在浮動布局中，因為浮動元素脫離了標準流，所以會對附近的其他元素產生影響，使結構布局出現混亂。另外，還會出現一種高度塌陷的現象：原來的父容器高度是由被包含元素撐起的，但是當被包含元素脫離標準流浮動后，原來的父容器高度就會塌陷。未設置浮動的狀態時，如下圖所示：當兩個子元素向左浮動時，box1出現高度塌陷，box2受浮動影響向上移動，如下入所示：學習資源消除浮動不良影響的方法浮動的原理及應用方法列表的應用和樣式設置方法一：在被浮動不良影響的元素中設置樣式clear：both。缺點：不能解決父元素的高度塌陷問題。方法二：在最后一個浮動元素后添加空標簽（可以是<div>、<p>、<hr>等），并為其添加樣式clear：both。缺點：添加無意義的空標簽，結構化差，后期維護麻煩。方法三：使用偽元素清除浮動，給包含浮動的父元素添加如下樣式。

優點：沒有增加標簽，不破壞文檔結構，沒有副作用，同時能在低版本瀏覽器上正常顯示。學習資源消除浮動不良影響的方法浮動的原理及應用方法列表的應用和樣式設置方法三：使用偽元素清除浮動，給包含浮動的父元素添加如下樣式。步驟一:設置.clearfloat樣式步驟二:將.clearfloat樣式應用在浮動元素的父元素上。.clearfloat{zoom:1;}.clearfloat:after{content:"";display:block;height:0;visibility:hidden;clear:both;}設置.clearfloat樣式考核評價班級：姓名：學號任務名稱：節日頁面制作評價項目評價標準自評情況考核情況課前自主探究（10%）完成課前學習通中下發任務□完成□基本完成□未完成□完成□基本完成□未完成工作過程（50%）布局結構分析能夠進行正確的頁面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁面切圖能夠進行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網站搭建網站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫代碼編寫符合W3C標準□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫樣式書寫正確，并能實現參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務□是□是工作規范能按企業規范要求進行操作□是□是成果展示能準確表達，匯報成果□是□是非技術考評（20%）態度學習態度是否端正□是□是紀律