網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）（慕課版）課件10.制作“助農(nóng)樂購”網(wǎng)站商品頁面_第1頁
網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）（慕課版）課件10.制作“助農(nóng)樂購”網(wǎng)站商品頁面_第2頁
網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）（慕課版）課件10.制作“助農(nóng)樂購”網(wǎng)站商品頁面_第3頁
網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）（慕課版）課件10.制作“助農(nóng)樂購”網(wǎng)站商品頁面_第4頁
網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）（慕課版）課件10.制作“助農(nóng)樂購”網(wǎng)站商品頁面_第5頁
已閱讀5頁，還剩20頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計與制作項目式教程（HTML+CSS）（慕課版）項目四綜合電商類網(wǎng)頁開發(fā)項目——制作“助農(nóng)樂購”網(wǎng)站商品頁面任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面教學(xué)任務(wù)任務(wù)項目實施任務(wù)分析頁面的框架結(jié)構(gòu)主要包括頭部區(qū)、主體區(qū)、腳部區(qū)，其中腳部區(qū)跟注冊頁的是一樣的，主要分析頭部區(qū)和主體區(qū)的框架結(jié)構(gòu)。1.頭部區(qū)：包括“頭部頂端”、“頭部搜索”、“頭部導(dǎo)航”部分?？蚣芙Y(jié)構(gòu)圖及主要設(shè)置要求如圖所示。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面項目實施任務(wù)分析2.主體區(qū)：包括“導(dǎo)航路徑”、“商品預(yù)覽區(qū)”、“商品介紹區(qū)”部分?？蚣芙Y(jié)構(gòu)圖及主要設(shè)置要求如圖所示。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站注冊頁面知識儲備知識導(dǎo)圖根據(jù)任務(wù)分析，在之前掌握知識的基礎(chǔ)上，完成本任務(wù)還需要學(xué)習(xí)的主要知識點有CSS偽類、元素類型轉(zhuǎn)換、iframe框架，知識導(dǎo)圖如圖所示。知識儲備新知學(xué)習(xí)1：CSS偽類1.CSS偽類的作用和語法

CSS偽類是用來添加一些選擇器的特殊效果。它可以給某些特定的元素設(shè)置樣式規(guī)則，從而添加一些特定的樣式，實現(xiàn)更精細(xì)化的樣式效果。CSS偽類通常以:冒號的形式出現(xiàn)，被放置在CSS選擇器的末尾?；菊Z法規(guī)則為：

選擇器:偽類{樣式語句;}任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面知識儲備新知學(xué)習(xí)1：CSS偽類2.超鏈接的CSS偽類CSS偽類的應(yīng)用場景非常廣泛，其中最常見的是用于超鏈接樣式的控制。例如：你想讓鼠標(biāo)停留在某個超鏈接文字上時，文字顏色發(fā)生變化，這時就可以使用CSS偽類來實現(xiàn)這個效果。在支持CSS的瀏覽器中，鏈接的不同狀態(tài)都可以以不同的方式顯示。偽類示例描述:linka:link未訪問的鏈接，用于定義鏈接的常規(guī)狀態(tài)。:visiteda:visited已訪問的鏈接，用于判斷已經(jīng)訪問過的鏈接。:hovera:hover鼠標(biāo)劃過的鏈接，用于表現(xiàn)鼠標(biāo)覆蓋在鏈接上的狀態(tài)。:activea:active已選中的鏈接，用于表現(xiàn)鼠標(biāo)按下時的鏈接狀態(tài)。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面知識儲備新知學(xué)習(xí)1：CSS偽類3.超鏈接的CSS偽類樣式舉例任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面知識儲備新知學(xué)習(xí)2：元素類型轉(zhuǎn)換1.display屬性及屬性值

網(wǎng)頁元素類型有兩大類，一類是塊級元素，一類是行內(nèi)元素，這兩類元素的類型不是一層不變的，可以根據(jù)需要來轉(zhuǎn)換。CSS中的display屬性可以規(guī)定元素應(yīng)該生成的框的類型，從而用來改變元素的顯示類型。display常用屬性值如下表所示：任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面屬性值描述none此元素不會被顯示。block此元素將顯示為塊級元素，此元素前后會帶有換行符。inline默認(rèn)。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。inline-block行內(nèi)塊元素。list-item此元素會作為列表顯示。table此元素會作為塊級表格來顯示（類似<table>），表格前后帶有換行符。table-row此元素會作為一個表格行顯示（類似<tr>）。table-column此元素會作為一個單元格列顯示（類似<col>）table-cell此元素會作為一個表格單元格顯示（類似<td>和<th>）inherit規(guī)定應(yīng)該從父元素繼承display屬性的值。知識儲備新知學(xué)習(xí)2：元素類型轉(zhuǎn)換1.display屬性的應(yīng)用舉例

display屬性的應(yīng)用場景很多，其中經(jīng)常會被用于橫向列表導(dǎo)航欄的制作。代碼如下：任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面在沒有為列表的li標(biāo)簽設(shè)置類型轉(zhuǎn)換前，因為li是塊元素，會換行，導(dǎo)航欄是豎式排列的。如果要將此導(dǎo)航欄的選項改為橫向分布，可給li元素添加display:inline-block;的樣式語句，它會將li元素轉(zhuǎn)換為行內(nèi)塊元素，這樣列表項就不會換行了。知識儲備新知學(xué)習(xí)2：元素類型轉(zhuǎn)換1.display屬性的應(yīng)用舉例

display屬性的應(yīng)用場景很多，其中經(jīng)常會被用于橫向列表導(dǎo)航欄的制作。代碼如下：任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面如果希望幾個列表項在列表寬度范圍內(nèi)平均分布，則可以將li元素轉(zhuǎn)換為表格單元格，將其父元素（ul元素）轉(zhuǎn)換為表格。知識儲備新知學(xué)習(xí)3：框架元素iframe1.iframe元素是HTML中一種用于將一個網(wǎng)頁嵌入到另一個網(wǎng)頁中的內(nèi)聯(lián)框架元素，用來加載和顯示來自不同源的內(nèi)容，如其他網(wǎng)站或者同一網(wǎng)站內(nèi)的其他頁面。它常常被用于框架集成、嵌入廣告或視頻、動態(tài)加載、跨域通信等方面。iframe元素由<iframe>標(biāo)簽定義，常用屬性如表所示。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面屬性值描述namename定義iframe框架的名稱。widthpx定義ifame框架的寬度。heightpx定義ifame框架的高度。srcurl定義在iframe框架中顯示的網(wǎng)頁文檔的URL。scrollingyes（是）no（否）auto（自動）定義是否在iframe框架中顯示滾動條。frameborder1（是）0（否）定義是否顯示iframe框架的邊框。知識儲備新知學(xué)習(xí)3：框架元素iframe2.ifame語法及舉例：

創(chuàng)建一個ifame框架的基本語法格式如下：

<iframesrc=""width="800"

height="600"></iframe>

這樣就實現(xiàn)了在一個800*600px大小的iframe框架當(dāng)中嵌入了“淘寶網(wǎng)”主頁的內(nèi)容。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面知識儲備新知學(xué)習(xí)3：框架元素iframe2.ifame語法及舉例：如果要嵌入本項目內(nèi)的其他網(wǎng)頁，也可將src屬性的值設(shè)置為項目內(nèi)其他網(wǎng)頁的相對路徑地址。例如要創(chuàng)建一個500*300px大小的無邊框無滾動條的iframe窗口，嵌入注冊頁reg.html的內(nèi)容，則代碼如右所示：任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面<iframesrc="reg.html"width="500"height="300"frameborder="0"scrolling="no"></iframe>知識儲備新知學(xué)習(xí)3：框架元素iframe2.ifame語法及舉例：

在實際應(yīng)用中，也經(jīng)常會使用超鏈接來控制在iframe框架中顯示不同的嵌入內(nèi)容，例如要實現(xiàn)如圖所示的，點擊“淘寶”或“注冊頁”超鏈接就可以在同一iframe框架中顯示對應(yīng)的頁面內(nèi)容。這里代碼設(shè)置要點是，需要為<iframe>標(biāo)簽設(shè)置name屬性，然后將超鏈接的target屬性值設(shè)置為跟那么值相同，即讓超鏈接指向的內(nèi)容顯示在iframe框架中。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面操作實踐任務(wù)實踐4.3.1：搭建頁面基礎(chǔ)1.設(shè)置HTML頭部標(biāo)簽信息在“助農(nóng)樂購”網(wǎng)站項目CSS目錄中新建goods.css文件，打開“助農(nóng)樂購”網(wǎng)站項目列表中的goods.html文件，在頭部標(biāo)簽<head>內(nèi)設(shè)置網(wǎng)頁標(biāo)題，引入CSS文件，具體代碼如下：任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面操作實踐任務(wù)實踐4.3.1：搭建頁面基礎(chǔ)2.2.從注冊頁拷貝腳部區(qū)模塊根據(jù)分析，商品頁和注冊頁的腳部區(qū)模塊是一摸一樣的，所以將reg.html、reg.css中關(guān)于腳部區(qū)模塊的代碼分別復(fù)制到goods.html、goods.css中。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面操作實踐任務(wù)實踐4.3.2：制作頁面頭部區(qū)1.搭建頭部區(qū)主干結(jié)構(gòu)根據(jù)之前對頭部區(qū)的結(jié)構(gòu)分析，頭部區(qū)分為頂端、搜索、導(dǎo)航欄三個部分，分別用div元素布局。在<body>…<body>內(nèi)首先書寫頭部區(qū)三個部分的主干結(jié)構(gòu)代碼。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面操作實踐任務(wù)實踐4.3.3：制作商品導(dǎo)航路徑1.搭建主體區(qū)主干結(jié)構(gòu)根據(jù)之前對主體區(qū)的結(jié)構(gòu)分析，主體區(qū)可以分為“商品導(dǎo)航路徑”、“商品預(yù)覽”、“商品介紹”三個區(qū)域，分別用div元素布局。在<body>標(biāo)簽內(nèi)頭部區(qū)代碼后書寫主體區(qū)部分的主干結(jié)構(gòu)代碼。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面操作實踐任務(wù)實踐4.3.3：制作商品導(dǎo)航路徑2.制作商品導(dǎo)航路徑

該區(qū)域由1行文字超鏈接組成導(dǎo)航路徑。編寫其Html+CSS代碼。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面操作實踐任務(wù)實踐4.3.4：制作商品預(yù)覽區(qū)根據(jù)對商品預(yù)覽區(qū)的結(jié)構(gòu)分析，該部分包括左側(cè)的“商品縮略圖”和右側(cè)的“商品購買信息”部分，用div元素布局。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面1.制作“商品縮略圖”部分根據(jù)分析，該部分由2個div構(gòu)成，1個div里放商品大圖，1個div里放5個商品縮略小圖。在商品預(yù)覽區(qū)<divclass="main_show">…</div>標(biāo)簽內(nèi)書寫代碼。操作實踐任務(wù)實踐4.3.4：制作商品預(yù)覽區(qū)任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面2.制作“商品購買信息”部分根據(jù)分析，該部分由1個h3標(biāo)題，1個文本段落，1個form表單構(gòu)成。操作實踐任務(wù)實踐4.3.5：制作商品介紹區(qū)根據(jù)對商品介紹區(qū)的結(jié)構(gòu)分析，該部分包括上部的“介紹導(dǎo)航”和下部的“介紹框架”部分，用div元素布局。當(dāng)點擊“介紹導(dǎo)航”上的超鏈接時，能在“介紹框架”內(nèi)顯示相應(yīng)的內(nèi)容，比如點擊“購買須知”，會顯示如圖4-51所示內(nèi)容，該功能由iframe框架實現(xiàn)。該部分由1個無序列表構(gòu)成，里面包括4個帶超鏈接功能的列表項。任務(wù)4.3制作“助農(nóng)樂購”網(wǎng)站商品頁面任務(wù)拓展根據(jù)任務(wù)實踐4.3.5的內(nèi)容，設(shè)計完善商品介紹

溫馨提示

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

評論

0/150

提交評論