網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）（慕課版）課件11.制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）（慕課版）課件11.制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）（慕課版）課件11.制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）（慕課版）課件11.制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）（慕課版）課件11.制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩26頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）（慕課版）項(xiàng)目四綜合電商類(lèi)網(wǎng)頁(yè)開(kāi)發(fā)項(xiàng)目——制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)項(xiàng)目實(shí)施任務(wù)分析小丁制作完了商品頁(yè)以后，就開(kāi)始著手制作網(wǎng)站主頁(yè)，根據(jù)頁(yè)面的設(shè)計(jì)需求，最終效果如圖所示：頁(yè)面效果任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)項(xiàng)目實(shí)施任務(wù)分析分析頁(yè)面的框架結(jié)構(gòu)，主要包括頭部區(qū)、主體區(qū)、腳部區(qū)3個(gè)部分，其中頭部區(qū)、腳部區(qū)跟商品頁(yè)的是一樣的，所以主要分析主體區(qū)的框架結(jié)構(gòu)。主體區(qū)主要包括“廣告導(dǎo)航”、“熱賣(mài)推薦”部分。框架結(jié)構(gòu)圖及主要設(shè)置要求如圖所示。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備知識(shí)導(dǎo)圖在之前掌握知識(shí)的基礎(chǔ)上，完成本任務(wù)還需要學(xué)習(xí)的主要知識(shí)點(diǎn)有CSS精靈圖、定位布局，知識(shí)導(dǎo)圖如圖所示。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS精靈圖1.CSS精靈圖的概念CSS精靈圖（sprite）是一種背景圖片的應(yīng)用方式，將多個(gè)小圖片整合到一張透明背景的大圖片中，然后將這個(gè)大圖作為背景圖，通過(guò)background-position屬性來(lái)使用。核心目的是有效地減少服務(wù)器接受和發(fā)送請(qǐng)求的次數(shù)，提高頁(yè)面的加載速度。在使用精靈圖時(shí)，需要精確測(cè)量每個(gè)小背景圖片的大小和位置。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS精靈圖2.background-position屬性值background-position屬性我們?cè)谇懊嬉呀?jīng)簡(jiǎn)單學(xué)習(xí)過(guò)，這里來(lái)詳細(xì)討論下它的屬性值如何設(shè)置，如表所示。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS精靈圖3.位置值的計(jì)算插入精靈圖之后，可以通過(guò)background-position屬性在大圖上進(jìn)行定位來(lái)尋找需要的小圖片。在進(jìn)行定位時(shí)，只要找到目標(biāo)圖片的坐標(biāo)點(diǎn)就可以了，那么要怎么尋找目標(biāo)圖片的坐標(biāo)點(diǎn)呢？任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS精靈圖3.位置值的計(jì)算把精靈圖的橫向當(dāng)作X軸，縱向當(dāng)作Y軸，左上角當(dāng)作原點(diǎn)(0,0)，注意網(wǎng)頁(yè)中的坐標(biāo)X軸向右是正值，向左是負(fù)值；Y軸向下是正值，向上是負(fù)值。結(jié)合上圖我們可以看到第二個(gè)小圖標(biāo)的左上角距離X軸原點(diǎn)有100px的距離，距離Y軸原點(diǎn)有0px的距離，那么第二個(gè)小圖標(biāo)的坐標(biāo)點(diǎn)為(100,0)，由于原點(diǎn)是不動(dòng)的，如果想要讓第二個(gè)小圖標(biāo)顯示出來(lái)，精靈圖就需要向左移動(dòng)100px，因此，第二個(gè)小圖標(biāo)的background-position屬性值就為“-100px,0”，同理可得第三個(gè)小圖標(biāo)的值為“0,-100px”，第四個(gè)小圖標(biāo)的值為“-100px,-100px”。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS精靈圖4.CSS精靈圖應(yīng)用舉例例如我們要制作如右圖所示的導(dǎo)航欄圖標(biāo)，在不使用CSS精靈圖技術(shù)時(shí)，需要將圖標(biāo)一個(gè)個(gè)插入到相應(yīng)位置，而使用CSS精靈圖則可以將這4個(gè)小圖標(biāo)先用圖像處理工具拼合在一張大圖上。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)1：CSS精靈圖任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)2：定位布局1.定位屬性position在前面學(xué)習(xí)中介紹了文檔流的知識(shí)，如果想讓網(wǎng)頁(yè)元素成為定位流，即實(shí)現(xiàn)在上下左右?guī)讉€(gè)方向上的精確定位，則可以使用CSS的定位布局，通過(guò)position屬性來(lái)設(shè)置元素的定位類(lèi)型。position屬性的常用定位方式，見(jiàn)表所示。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)2：定位布局2.定位的偏移量設(shè)置了position屬性，僅僅只是確定了元素用哪種方式定位，不能體現(xiàn)元素的偏移量，則還需要用left、right、top或bottom來(lái)精確定義元素的偏移值。具體如下表所示。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)2：定位布局3.定位布局的語(yǔ)法：定位元素{position:定位方式;left:像素值;right:像素值;top:像素值;bottom:像素值;}任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)知識(shí)儲(chǔ)備新知學(xué)習(xí)2：定位布局4.定位布局的舉例：任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)定位布局前定位布局后知識(shí)儲(chǔ)備新知學(xué)習(xí)2：定位布局5.堆疊屬性z-index

當(dāng)對(duì)多個(gè)元素同時(shí)進(jìn)行定位時(shí)，定位元素之間有可能發(fā)生重疊，如果想調(diào)整元素的堆疊順序，則可以對(duì)定位元素設(shè)置z-index屬性，z-index屬性只對(duì)定位元素起作用，其值是整數(shù)，默認(rèn)值為0，可以是負(fù)數(shù)。值越大元素的堆疊順序就越靠上，反之值越小元素的堆疊順序就越靠下。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.1：搭建頁(yè)面基礎(chǔ)1.設(shè)置HTML頭部標(biāo)簽信息在“助農(nóng)樂(lè)購(gòu)”網(wǎng)站項(xiàng)目CSS目錄中新建index.css文件，打開(kāi)“助農(nóng)樂(lè)購(gòu)”網(wǎng)站項(xiàng)目列表中的index.html文件，在頭部標(biāo)簽<head>內(nèi)設(shè)置網(wǎng)頁(yè)標(biāo)題，引入CSS文件，具體代碼如下：任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.1：搭建頁(yè)面基礎(chǔ)2.從商品頁(yè)拷貝頭部區(qū)、腳部區(qū)模塊根據(jù)分析，主頁(yè)和商品頁(yè)的頭部區(qū)、腳部區(qū)模塊是一摸一樣的，所以將goods.html、goods.css中關(guān)于頭部區(qū)、腳部區(qū)模塊的代碼分別復(fù)制到index.html、index.css中。3.搭建主體區(qū)主干結(jié)構(gòu)根據(jù)對(duì)主體區(qū)的結(jié)構(gòu)分析，該部分包括“廣告導(dǎo)航”和“熱賣(mài)推薦”兩大部分，用div元素布局。在<body>標(biāo)簽內(nèi)頭部區(qū)代碼后書(shū)寫(xiě)主體區(qū)部分的主干結(jié)構(gòu)代碼，具體代碼如下：任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.2：制作廣告導(dǎo)航區(qū)如圖所示，根據(jù)對(duì)廣告導(dǎo)航區(qū)的結(jié)構(gòu)分析，該部分包括左邊的“側(cè)導(dǎo)航”和右邊的“廣告圖”兩大部分，用div元素布局。1.制作“側(cè)導(dǎo)航”部分任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.2：制作廣告導(dǎo)航區(qū)如圖所示，根據(jù)分析，該部分由1個(gè)無(wú)序列表ul構(gòu)成，列表內(nèi)有12個(gè)列表項(xiàng)li，每個(gè)列表項(xiàng)內(nèi)包括圖標(biāo)和導(dǎo)航文字。在“廣告導(dǎo)航”模塊<divclass="banner">…</div>內(nèi)書(shū)寫(xiě)以下代碼：任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.2：制作廣告導(dǎo)航區(qū)任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)CSS樣式代碼如下：操作實(shí)踐任務(wù)實(shí)踐4.4.2：制作廣告導(dǎo)航區(qū)2.制作“廣告圖”部分如圖所示，根據(jù)分析，該部分由1個(gè)廣告圖和2個(gè)輪播按鈕構(gòu)成，輪播按鈕分別布局在廣告圖的最左側(cè)和最右側(cè)垂直居中的位置，用div元素布局。具體代碼如下：任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.2：制作廣告導(dǎo)航區(qū)2.制作“廣告圖”部分需要注意的是，一般廣告圖上的輪播按鈕在默認(rèn)狀態(tài)下是隱藏的，當(dāng)鼠標(biāo)覆蓋到輪播按鈕上方時(shí)，輪播按鈕才會(huì)出現(xiàn)，如圖所示。所以輪播按鈕除了設(shè)置定位布局外，還需要用display屬性來(lái)實(shí)現(xiàn)隱藏和顯示的效果。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.2：制作廣告導(dǎo)航區(qū)提示：如果要讓輪播按鈕布局在廣告圖垂直方向居中的位置，如果直接設(shè)置上偏移值top為廣告圖高度的一半即200像素，會(huì)發(fā)現(xiàn)按鈕靠下，并不在垂直居中的位置。這是因?yàn)槠浦档挠?jì)算是以定位元素的左上角為基準(zhǔn)點(diǎn)的，而不是中心點(diǎn)。所以這里就還需要減去它本身的高度的一半，以保證輪播按鈕的中心點(diǎn)挪到上偏移200像素的位置，所以這里輪播按鈕的上偏移值應(yīng)該為：廣告圖高度一半（200像素）-按鈕高度一半（20像素）=180像素，如圖所示。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.3：制作熱賣(mài)推薦區(qū)如圖所示，根據(jù)對(duì)熱賣(mài)推薦區(qū)的結(jié)構(gòu)分析，該部分包括上面的“熱賣(mài)推薦導(dǎo)航”和下面的“熱賣(mài)推薦展示”兩大部分，用div元素布局。1.制作“熱賣(mài)推薦導(dǎo)航”部分任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.3：制作熱賣(mài)推薦區(qū)1.制作“熱賣(mài)推薦導(dǎo)航”部分如圖所示，根據(jù)分析，該部分由1個(gè)無(wú)序列表ul構(gòu)成，列表內(nèi)有8個(gè)列表項(xiàng)li。在“熱賣(mài)推薦”模塊<divclass="hot">…</div>標(biāo)簽內(nèi)書(shū)寫(xiě)以下代碼：任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)CSS樣式代碼操作實(shí)踐任務(wù)實(shí)踐4.4.3：制作熱賣(mài)推薦區(qū)2.制作“熱賣(mài)推薦展示”部分如圖所示，根據(jù)分析，該部分由2個(gè)無(wú)序列表ul構(gòu)成，每個(gè)列表內(nèi)有5個(gè)列表項(xiàng)li，用來(lái)布局商品展示塊。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)操作實(shí)踐任務(wù)實(shí)踐4.4.3：制作熱賣(mài)推薦區(qū)任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)HTML代碼如下：操作實(shí)踐任務(wù)實(shí)踐4.4.3：制作熱賣(mài)推薦區(qū)任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)CSS代碼如下：任務(wù)拓展利用所學(xué)，在主頁(yè)右邊設(shè)計(jì)制作一個(gè)導(dǎo)航工具欄，要求在窗口固定位置，不隨頁(yè)面滾動(dòng)。效果如圖所示。制作導(dǎo)航工具欄任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)小結(jié)延伸任務(wù)小結(jié)本任務(wù)圍繞“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)的制作，分析了頁(yè)面的結(jié)構(gòu)要素，介紹了CSS精靈圖、定位布局的知識(shí)與技能，綜合應(yīng)用完成了頁(yè)面的制作。任務(wù)4.4制作“助農(nóng)樂(lè)購(gòu)”網(wǎng)站主頁(yè)項(xiàng)目小結(jié)通過(guò)本項(xiàng)目的學(xué)習(xí)，小丁完成了助農(nóng)樂(lè)購(gòu)網(wǎng)站的注冊(cè)頁(yè)、商品頁(yè)以及主頁(yè)的制作任務(wù)，掌握了表單、iframe框架、CSS進(jìn)階選擇器的使用方法以及CSS精靈圖和定位布局的應(yīng)用。小丁的職業(yè)技能和

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論