項目一HTML5+CSS3網(wǎng)頁布局與美化任務(wù)一

銅鼓文化詳情頁制作主講：秦紅梅htmlh5imgjavascriptwebcsscolorhr目錄任務(wù)情境任務(wù)目標(biāo)任務(wù)描述任務(wù)實施學(xué)習(xí)資源考核評價課后拓展1+X考證練習(xí)htmlh5imgjavascriptwebcolorhr任務(wù)情境廣西少數(shù)民族文化資源網(wǎng)是一個通過網(wǎng)站展示廣西少數(shù)民族在文化、節(jié)日、美食、古跡等方面資源的的綜合性資源類的網(wǎng)站。銅鼓，壯語稱作“寧董”，壯族全民崇鼓，是使用銅鼓最普遍的一個民族。在壯民族的心目中，銅鼓具有非同尋常的功能：它不僅是天地神靈的集合體和入神溝通的圣物，也是代表權(quán)力和財富的“國之重器”，而且還是重大社會活動中必備的禮器和樂器。本次專題任務(wù)是采用標(biāo)準(zhǔn)流布局的方式來完成網(wǎng)站二級頁“文化”目錄中關(guān)于壯族銅鼓文化詳情頁的制作。工作任務(wù)單工作任務(wù)單任務(wù)要求根據(jù)效果圖完成銅鼓文化詳情頁制作甲方提供的設(shè)計圖

如右圖所示評判標(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樣式完成頁面制作技能大賽考核要求制作的頁面需具有交互設(shè)計，并符合W3C的HTML和CSS標(biāo)準(zhǔ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)頁切圖能夠使用HTML常用的標(biāo)簽構(gòu)建簡單的HTML頁面能夠通過定義樣式屬性美化頁面，實現(xiàn)網(wǎng)頁效果圖的重構(gòu)效果能夠形成布局思維并通過標(biāo)準(zhǔn)流布局簡單網(wǎng)頁任務(wù)描述標(biāo)準(zhǔn)流布局是網(wǎng)頁布局中最基本的布局方式，它決定了網(wǎng)頁元素的默認(rèn)位置和顯示樣式。本任務(wù)中，我們將通過制作廣西少數(shù)民族文化資源網(wǎng)中的銅鼓文化局詳情頁來學(xué)習(xí)如何使用HTML常用的結(jié)構(gòu)標(biāo)簽來構(gòu)建簡單的HTML頁面、學(xué)習(xí)如何通過定義CSS樣式來美化頁面、學(xué)習(xí)標(biāo)準(zhǔn)流布局網(wǎng)頁的基礎(chǔ)知識。

壯族銅鼓文化詳情頁分為頁頭、當(dāng)前位置、頁中、頁尾四大結(jié)構(gòu)，頁面頭部包含頁面頂部和頁面導(dǎo)航兩大版塊，其中導(dǎo)航部份包含標(biāo)題logo、導(dǎo)航菜單、登陸、注冊信息三個版塊，當(dāng)前位置是關(guān)于當(dāng)前位置的導(dǎo)覽，頁面主體部份包含壯族銅鼓文化內(nèi)涵、銅鼓文化核心思想兩個版塊。__________任務(wù)實施圖2

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

結(jié)構(gòu)布局劃分圖布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施圖3頁面切圖切片效果布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化創(chuàng)建站點文件夾indexJS在進(jìn)行網(wǎng)頁制作之前，首先需要完成站點文件夾的建立ImgCSS文件/文件夾作用Img文件夾存放圖片資源文件CSS文件夾存放CSS樣式文件JS文件夾存放JS文件Index.html文件首頁布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施創(chuàng)建頁面、鏈接樣式創(chuàng)建HTML主體結(jié)構(gòu)設(shè)置通用樣式完成頭部Header部份制作步驟一步驟二步驟三步驟四構(gòu)建HTML標(biāo)準(zhǔn)流布局+CSS頁面美化操作步驟完成當(dāng)前位置部分制作步驟五完成主體文章部分制作步驟六完成頁尾部分制作步驟七布局結(jié)構(gòu)分析頁面切圖網(wǎng)站搭建HTML布局+css美化任務(wù)實施學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維01HTML創(chuàng)建頁面元素02CSS盒模型呈現(xiàn)元素03CSS排版元素布局思維流程學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維CSS布局基礎(chǔ)在HTML中，元素可以分類，即行內(nèi)（inline）元素、塊(block)和行內(nèi)塊（inline-block）元素?！蛐袃?nèi)元素行內(nèi)元素的特點：行內(nèi)元素不會單獨占一行，它的寬度和高度由其內(nèi)容決定

，且不支持盒子模型。一般不能設(shè)置行內(nèi)元素的寬度、高度、對齊等屬性。常見行內(nèi)元素如下：

標(biāo)簽說明<span>小盒子、小節(jié)點、小區(qū)塊<a>超級鏈接<b><i>文本內(nèi)容的粗體/斜體<strong><em>文本內(nèi)容的強(qiáng)調(diào)學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維◎塊元素塊元素的特點：每個塊元素都會獨占一行或多行，支持盒子模型，可以設(shè)置塊元素的寬度、高度、對齊等屬性。塊元素常被用于網(wǎng)頁布局。常見的塊元素如下：標(biāo)簽說明<div><section>盒子、節(jié)點、區(qū)塊<header><article><footer><aside><nav>語義類布局標(biāo)簽<h1>-<h6>標(biāo)題<p>段落<ul><ol><dl><li>列表類標(biāo)簽學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維◎行內(nèi)塊元素行內(nèi)塊元素綜合了行內(nèi)元素和塊元素的特性，開發(fā)者可以對行內(nèi)塊元素設(shè)置寬度、高度和對齊屬性，但該元素不會獨占一行，支持部分盒子模型。常見的行內(nèi)塊元素有：標(biāo)簽說明<img>外部圖片（文件）<video>外部視頻（文件）<input><select><textarea>內(nèi)部表單控件學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維◎元素類型的轉(zhuǎn)換每個HTML元素默認(rèn)都有自己的顯示模式，不同的顯示模式有不同的呈現(xiàn)特性，使用CSS的【display】屬性可以轉(zhuǎn)換HTML元素的顯示模式，如可以設(shè)置寬度和高度；或是希望塊元素能夠具有行內(nèi)元素的某些特性，如不獨占一行，則可以使用display屬性對元素的類型進(jìn)行轉(zhuǎn)換，其語法規(guī)則為：選擇器{display:屬性；}屬性有四個值，分別如下：屬性說明Inline將元素轉(zhuǎn)換成行內(nèi)元素block將元素轉(zhuǎn)換成塊元素Inline-block將元素轉(zhuǎn)換成行內(nèi)塊元素none將元素隱藏，不占據(jù)頁面空間學(xué)習(xí)資源常用布局方式CSS布局基礎(chǔ)標(biāo)準(zhǔn)流布局布局思維

通過制作廣西少數(shù)民族文化資源網(wǎng)中的“銅鼓文化詳情頁”不難發(fā)現(xiàn)，網(wǎng)頁的頭部、內(nèi)容、頁腳是自上而下順序分布的。像這種網(wǎng)頁結(jié)構(gòu)元素像流水一樣自上而下或是自左而右分布的網(wǎng)頁布局模式就稱為標(biāo)準(zhǔn)流或文檔流。這也是網(wǎng)頁布局的默認(rèn)模式。

在標(biāo)準(zhǔn)流中，塊級元素獨占一行，垂直放置。瀏覽器將按HTML標(biāo)簽的書寫順序，自上而下解析并顯示網(wǎng)頁頭部、內(nèi)容和頁腳部分。頭部內(nèi)容頁腳自

上

而

下考核評價班級：姓名：學(xué)號任務(wù)名稱：銅鼓文化詳情頁制作評價項目評價標(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代碼編寫樣式書寫正確，并能實現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項目成果（20%）工作完整能夠按時完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報成果□是□是非技術(shù)考評（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□是□是協(xié)作有交流、團(tuán)隊合作□是□是文明保持安靜，清理場所□是□是