《WEB前端開(kāi)發(fā)實(shí)戰(zhàn)》課件 任務(wù)一：銅鼓文化詳情頁(yè)制作

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

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

如右圖所示評(píng)判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁(yè)面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫(xiě)符合標(biāo)準(zhǔn)5.樣式編寫(xiě)正確，能夠達(dá)到參考效果1+X技能考核標(biāo)準(zhǔn)能正確選擇html標(biāo)簽和CSS樣式完成頁(yè)面制作技能大賽考核要求制作的頁(yè)面需具有交互設(shè)計(jì)，并符合W3C的HTML和CSS標(biāo)準(zhǔn)作品提交要求站點(diǎn)文件夾評(píng)判標(biāo)準(zhǔn)1.能夠進(jìn)行正確的頁(yè)面布局分析2.能夠進(jìn)行正確的切圖3.網(wǎng)站文件命名正確4.代碼編寫(xiě)符合標(biāo)準(zhǔn)5.樣式編寫(xiě)正確，能夠達(dá)到參考效果任務(wù)目標(biāo)任務(wù)目標(biāo)能夠掌握網(wǎng)頁(yè)前端重構(gòu)的流程方法能夠正確使用切圖工具進(jìn)行網(wǎng)頁(yè)切圖能夠使用HTML常用的標(biāo)簽構(gòu)建簡(jiǎn)單的HTML頁(yè)面能夠通過(guò)定義樣式屬性美化頁(yè)面，實(shí)現(xiàn)網(wǎng)頁(yè)效果圖的重構(gòu)效果能夠形成布局思維并通過(guò)標(biāo)準(zhǔn)流布局簡(jiǎn)單網(wǎng)頁(yè)任務(wù)描述標(biāo)準(zhǔn)流布局是網(wǎng)頁(yè)布局中最基本的布局方式，它決定了網(wǎng)頁(yè)元素的默認(rèn)位置和顯示樣式。本任務(wù)中，我們將通過(guò)制作廣西少數(shù)民族文化資源網(wǎng)中的銅鼓文化局詳情頁(yè)來(lái)學(xué)習(xí)如何使用HTML常用的結(jié)構(gòu)標(biāo)簽來(lái)構(gòu)建簡(jiǎn)單的HTML頁(yè)面、學(xué)習(xí)如何通過(guò)定義CSS樣式來(lái)美化頁(yè)面、學(xué)習(xí)標(biāo)準(zhǔn)流布局網(wǎng)頁(yè)的基礎(chǔ)知識(shí)。

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

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

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

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

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

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

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

上

而

下考核評(píng)價(jià)班級(jí)：姓名：學(xué)號(hào)任務(wù)名稱：銅鼓文化詳情頁(yè)制作評(píng)價(jià)項(xiàng)目評(píng)價(jià)標(biāo)準(zhǔn)自評(píng)情況考核情況課前自主探究（10%）完成課前學(xué)習(xí)通中下發(fā)任務(wù)□完成□基本完成□未完成□完成□基本完成□未完成工作過(guò)程（50%）布局結(jié)構(gòu)分析能夠進(jìn)行正確的頁(yè)面布局劃分□完成□基本完成□未完成□完成□基本完成□未完成頁(yè)面切圖能夠進(jìn)行正確的切圖□完成□基本完成□未完成□完成□基本完成□未完成網(wǎng)站搭建網(wǎng)站文件命名正確□完成□基本完成□未完成□完成□基本完成□未完成HTML代碼編寫(xiě)代碼編寫(xiě)符合W3C標(biāo)準(zhǔn)□完成□基本完成□未完成□完成□基本完成□未完成CSS代碼編寫(xiě)樣式書(shū)寫(xiě)正確，并能實(shí)現(xiàn)參考效果□完成□基本完成□未完成□完成□基本完成□未完成項(xiàng)目成果（20%）工作完整能夠按時(shí)完成任務(wù)□是□是工作規(guī)范能按企業(yè)規(guī)范要求進(jìn)行操作□是□是成果展示能準(zhǔn)確表達(dá)，匯報(bào)成果□是□是非技術(shù)考評(píng)（20%）態(tài)度學(xué)習(xí)態(tài)度是否端正□是□是紀(jì)律遵守紀(jì)律□是□是協(xié)作有交流、團(tuán)隊(duì)合作□是□是文明保持安靜，清理場(chǎng)所□是□是