單元4 商品信息展示網(wǎng)頁設(shè)計

單元4

商品信息展示網(wǎng)頁設(shè)計

購物網(wǎng)站通常會以圖文混排方式展示商品外觀和有用信息，吸引顧客選購商品。 本單元通過對購物網(wǎng)站的商品列表網(wǎng)頁和品牌展示網(wǎng)頁設(shè)計的探析與訓(xùn)練，重點學(xué)習(xí)HTML5中的列表標(biāo)簽、CSS的列表屬性、表格屬性和定位屬性等，學(xué)會在網(wǎng)頁中合理地使用列表、表格和CSS定位屬性展示相關(guān)信息，學(xué)會應(yīng)用列表、表格及CSS定位設(shè)計商品信息展示網(wǎng)頁。教學(xué)導(dǎo)航教學(xué)目標(biāo)（1）熟悉HTML5中的列表標(biāo)簽（2）熟悉CSS的列表屬性、表格屬性和定位屬性（3）學(xué)會在網(wǎng)頁中合理地使用列表、表格和CSS定位屬性展示相關(guān)信息（4）學(xué)會應(yīng)用列表、表格及CSS定位設(shè)計商品信息展示網(wǎng)頁關(guān)鍵字購物網(wǎng)站商品信息展示網(wǎng)頁列表標(biāo)簽列表屬性表格屬性定位屬性參考資料（1）HTML5的常用標(biāo)簽及其屬性、方法與事件參考附錄B（2）CSS的屬性參考附錄C（3）CSS的各種選擇器的含義和用法參考附錄D教學(xué)方法任務(wù)驅(qū)動法、分組討論法、理論實踐一體化、探究學(xué)習(xí)法課時建議6課時實例探析【任務(wù)4-1】探析手機麥包包網(wǎng)觸屏版的熱銷商品網(wǎng)頁【效果展示】 手機麥包包網(wǎng)觸屏版的熱銷商品網(wǎng)頁0401.html的瀏覽效果如圖4-1所示。 手機麥包包網(wǎng)觸屏版的熱銷商品網(wǎng)頁0401.html的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，頂部內(nèi)容包括Logo圖片、用戶登錄超鏈接按鈕和購物車超鏈接按鈕，中部內(nèi)容為熱銷商品列表，底部為多個導(dǎo)航超鏈接。圖4-1手機麥包包網(wǎng)觸屏版的熱銷商品網(wǎng)頁0401.html的瀏覽效果【網(wǎng)頁探析】1．網(wǎng)頁0401.html的HTML代碼探析2．網(wǎng)頁0401.html的CSS代碼探析知識梳理1．HTML5的列表標(biāo)簽（1）<ul>、<ol>和<li>標(biāo)簽 <ul>標(biāo)簽用于定義無序列表，<ol>標(biāo)簽用于定義有序列表，<li>標(biāo)簽用于定義列表項目。 <li>標(biāo)簽可用在有序列表（<ol>）和無序列表（<ul>）中。（2）<dl>、<dt>和<dd>標(biāo)簽 <dl>標(biāo)簽定義了定義列表（definitionlist），<dd>在定義列表中用于定義條目的定義部分，<dt>標(biāo)簽定義了定義列表中的項目（即術(shù)語部分）。 <dl>標(biāo)簽用于結(jié)合<dt>（定義列表中的項目）和<dd>（描述列表中的項目）。（3）<menu>標(biāo)簽 <menu>標(biāo)簽用于定義菜單列表。 當(dāng)希望列出表單控件時使用該標(biāo)簽。 注意與<nav>的區(qū)別，<menu>專門用于表單控件。（4）<command>標(biāo)簽 <command>標(biāo)簽用于定義命令按鈕，如單選按鈕、復(fù)選框或按鈕。 只有當(dāng)<command>標(biāo)簽位于<menu>標(biāo)簽內(nèi)時，該元素才是可見的。 否則不會顯示這個元素，但是可以用它規(guī)定鍵盤快捷鍵。2．CSS列表屬性（List） CSS列表屬性允許放置、改變列表項標(biāo)志，或者將圖像作為列表項標(biāo)志。 從某種意義上講，不是描述性文本的任何內(nèi)容都可以認為是列表。（1）列表類型（2）列表項圖像（3）列表標(biāo)志位置3．HTML5的鏈接與導(dǎo)航標(biāo)簽（1）<a>標(biāo)簽（2）<nav>標(biāo)簽4．CSS表格屬性（Table） CSS表格屬性可以改善表格的外觀。（1）表格邊框（2）折疊邊框（3）表格寬度和高度（4）表格文本對齊（5）表格內(nèi)邊距（6）表格顏色5．CSS定位屬性（Positioning） CSS定位（Positioning）屬性允許對元素進行定位。 CSS為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。（1）CSS定位機制 CSS有3種基本的定位機制：普通流、浮動和絕對定位。 除非專門指定，否則所有框都在普通流中定位。 也就是說，普通流中的元素的位置由元素在(X)HTML中的位置決定。（2）CSSposition屬性position屬性值使用說明static元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中relative元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留absolute元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框fixed元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過其包含塊是視窗本身表4-8

position屬性值的含義（3）CSS相對定位 設(shè)置為相對定位的元素框會偏移某個距離。 元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。 相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。圖4-2相對定位示意圖（4）CSS絕對定位 設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。 元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣。 元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。圖4-3絕對定位示意圖提示：因為絕對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其他元素。可以通過設(shè)置z-index屬性來控制這些框的堆放次序。（5）CSS浮動 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。 由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。圖4-4右浮動示意圖圖4-5左浮動示意圖圖4-6浮動元素被卡住的示意圖（6）行框和清理 浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。 因此，創(chuàng)建浮動框可以使文本圍繞圖像，如圖4-7所示。圖4-7圖像向左浮動示意圖圖4-8

clear屬性應(yīng)用示意圖引導(dǎo)訓(xùn)練【任務(wù)4-2】設(shè)計蘇寧易購觸屏版的促銷商品列表網(wǎng)頁【任務(wù)描述】 編寫HTML代碼和CSS代碼，設(shè)計圖4-9所示蘇寧易購觸屏版的促銷商品列表網(wǎng)頁0402.html。圖4-9蘇寧易購觸屏版的促銷商品列表

網(wǎng)頁0402.html的瀏覽效果 蘇寧易購觸屏版的促銷商品列表網(wǎng)頁0402.html的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，如圖4-9所示。 頂部內(nèi)容包括返回鏈接圖片、標(biāo)題文字和主頁鏈接圖片，中部內(nèi)容包括多行促銷商品列表，底部內(nèi)容包括多個導(dǎo)航超鏈接和版權(quán)信息。 網(wǎng)頁0402.html頂部結(jié)構(gòu)使用<nav>標(biāo)簽實現(xiàn)，中部結(jié)構(gòu)使用<section>標(biāo)簽實現(xiàn)，底部結(jié)構(gòu)使用<footer>標(biāo)簽實現(xiàn)?！救蝿?wù)實施】1．網(wǎng)頁0402.html的主體結(jié)構(gòu)設(shè)計 在本地硬盤的文件夾“04商品信息展示網(wǎng)頁設(shè)計\0402”中創(chuàng)建網(wǎng)頁0402.html。（1）定義網(wǎng)頁0402.html通用CSS代碼（2）定義網(wǎng)頁0402.html主體結(jié)構(gòu)的CSS代碼（3）編寫網(wǎng)頁0402.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁0402.html的局部內(nèi)容設(shè)計（1）網(wǎng)頁0402.html的頂部內(nèi)容設(shè)計（2）網(wǎng)頁0402.html的中部內(nèi)容設(shè)計（3）網(wǎng)頁0402.html的底部內(nèi)容設(shè)計【任務(wù)4-3】設(shè)計易購網(wǎng)的選用商品列表網(wǎng)頁【任務(wù)描述】 編寫HTML代碼和CSS代碼，設(shè)計圖4-10所示易購網(wǎng)的選用商品列表網(wǎng)頁0403.html。圖4-10易購網(wǎng)的選用商品列表網(wǎng)頁0403.html的瀏覽效果 易購網(wǎng)的選用商品列表網(wǎng)頁0403.html的主體結(jié)構(gòu)為上、下結(jié)構(gòu)，如圖4-10所示。 上部內(nèi)容包括標(biāo)題文字，底部內(nèi)容為圓角表格，在該表格中顯示所選商品。 網(wǎng)頁0402.html上部結(jié)構(gòu)使用<header>標(biāo)簽實現(xiàn)，下部結(jié)構(gòu)使用<section>標(biāo)簽實現(xiàn)?！救蝿?wù)實施】1．設(shè)計網(wǎng)頁0403.html的CSS代碼 在本地硬盤的文件夾“04商品信息展示網(wǎng)頁設(shè)計\0403”中創(chuàng)建網(wǎng)頁0403.html。（1）定義網(wǎng)頁0403.html通用CSS代碼（2）定義網(wǎng)頁0403.html中的表格的CSS代碼（3）定義網(wǎng)頁0403.html主體結(jié)構(gòu)的CSS代碼2．編寫網(wǎng)頁0403.html的HTML代碼同步訓(xùn)練【任務(wù)4-4】設(shè)計凡客誠品網(wǎng)觸屏版的品牌墻網(wǎng)頁【任務(wù)描述】 編寫HTML代碼和CSS代碼，設(shè)計圖4-11所示凡客誠品網(wǎng)觸屏版的品牌墻網(wǎng)頁0404.html。圖4-11凡客誠品網(wǎng)觸屏版的品牌墻

網(wǎng)頁0404.html的瀏覽效果 凡客誠品網(wǎng)觸屏版的品牌墻網(wǎng)頁0404.html的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，如圖4-11所示。 頂部內(nèi)容包括首頁鏈接圖片和標(biāo)題文字，中部內(nèi)容包括多行商品品牌列表，底部內(nèi)容包括多個導(dǎo)航超鏈接。 網(wǎng)頁0404.html頂部結(jié)構(gòu)使用<nav>標(biāo)簽實現(xiàn)，中部結(jié)構(gòu)使用<section>標(biāo)簽實現(xiàn)，底部結(jié)構(gòu)使用<footer>標(biāo)簽實現(xiàn)?！救蝿?wù)實施】1．網(wǎng)頁0404.html的主體結(jié)構(gòu)設(shè)計 在本地硬盤的文件夾“04商品信息展示網(wǎng)頁設(shè)計\0404”中創(chuàng)建網(wǎng)頁0404.html。（1）定義網(wǎng)頁0404.html通用CSS代碼（2）定義網(wǎng)頁0404.html主體結(jié)構(gòu)的CSS代碼（3）編寫網(wǎng)頁0404.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁0404.html的局部內(nèi)容設(shè)計（1）網(wǎng)頁0404.html的頂部內(nèi)容設(shè)計（2）網(wǎng)頁0404.html的中部內(nèi)容設(shè)計（3）網(wǎng)頁0404.html的底部內(nèi)容設(shè)計拓展訓(xùn)練【任務(wù)4-5】設(shè)計蘇寧易購觸屏版的家用電器精選商品導(dǎo)航網(wǎng)頁【任務(wù)描述】 編寫HTML代碼和CSS代碼，設(shè)計圖4-12所示蘇寧易購觸屏版的家用電器精選商品導(dǎo)航網(wǎng)頁0405.html。圖4-12蘇寧易購觸屏版的

家用電器精選商品導(dǎo)航網(wǎng)頁

0405.html的瀏覽效果 蘇寧易購觸屏版的家用電器精選商品導(dǎo)航網(wǎng)頁0405.html的主體結(jié)構(gòu)為上、下結(jié)構(gòu)，如圖4-12所示。 上部內(nèi)容包括返回鏈接圖片、標(biāo)題文字、用戶登錄鏈接圖片、購物車鏈接圖片和首頁鏈接圖片，下部內(nèi)容包括多行家用電器精選商品圖片列表。 網(wǎng)頁0405.html上部結(jié)構(gòu)使用