單元4

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

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

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

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

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

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

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

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