《網(wǎng)頁設(shè)計與制作實踐》課件第5章鏈接與列表

第5章鏈接與列表1考核知識點超鏈接標簽<a>、鏈接偽類、元素類型的轉(zhuǎn)換。2練習目標●掌握文本超鏈接的定義方法?！裾莆真溄觽晤惖亩x方法?！駨土曉仡愋偷霓D(zhuǎn)換的相關(guān)知識。實驗1頁碼導航條請做出以下效果：要求：（1）頁碼都由超鏈接標簽<a>定義。（2）<a>標簽樣式效果如圖所示，有高寬、有邊框、有底色、沒有超鏈接默認的下劃線。（3）有hover效果,鼠標移到頁碼上字和邊框都變紅色。（4）當前頁頁碼底色為紅色，字為白色。3實驗內(nèi)容及要求實驗1頁碼導航條結(jié)構(gòu)分析：是在一個盒子<div>中包多個<a>超鏈接元素。樣式分析：實現(xiàn)效果圖5-7所示樣式的思路如下：（1）通過最外層的大盒子對頁碼導航條進行整體控制，需要對其設(shè)置寬度、高度以及背景色。（2）設(shè)置超鏈接標簽<a>樣式，為其添加背景、文本樣式、邊框和填充，并將其轉(zhuǎn)換為行內(nèi)塊元素，使其橫向排列并能支持高寬設(shè)置。（3）通過鏈接偽類實現(xiàn)不同的鏈接狀態(tài)。4實驗分析實驗1頁碼導航條1考核知識點<map><area/></map>標簽及屬性的用法。2練習目標●掌握<map><area/></map>標簽定義及屬性的設(shè)置。●熟練熱點區(qū)域的繪制及編輯的操作。實驗2圖片熱點超鏈接請做出以下效果：要求：

給定的圖片“map.png”上有三個商品，只有在商品圖片區(qū)域

上點擊才能進到相應的商品詳情頁面。3實驗內(nèi)容及要求實驗2圖片熱點超鏈接結(jié)構(gòu)分析：是在一個盒子<div>中包多個<a>超鏈接元素。樣式分析：實現(xiàn)效果圖5-7所示樣式的思路如下：（1）通過最外層的大盒子對頁碼導航條進行整體控制，需要對其設(shè)置寬度、高度以及背景色。（2）設(shè)置超鏈接標簽<a>樣式，為其添加背景、文本樣式、邊框和填充，并將其轉(zhuǎn)換為行內(nèi)塊元素，使其橫向排列并能支持高寬設(shè)置。（3）通過鏈接偽類實現(xiàn)不同的鏈接狀態(tài)。4實驗分析實驗2圖片熱點超鏈接1考核知識點無序列表<ul>。2練習目標●掌握無序列表的應用方法?！駨土暫凶幽Ｐ偷南嚓P(guān)知識。實驗3

魅力彩妝歲末盛惠請做出以下效果：要求：

（1）用給定的圖片做背景。

（2）用無序列表來定義內(nèi)容條目。

（3）樣式效果如圖5-7所示。3實驗內(nèi)容及要求實驗3魅力彩妝歲末盛惠頁面結(jié)構(gòu)分析：如圖5-7所示的彩妝優(yōu)惠單，各優(yōu)惠條目之間是并列關(guān)系，因此可以用無序列表<ul>進行定義。樣式分析：實現(xiàn)效果圖5-7所示樣式的思路如下：（1）運用背景屬性（background）為ul添加背景圖，設(shè)置列表水平居中顯示。（2）把li轉(zhuǎn)換成行級塊元素，通過填充來控制li的高寬，為li設(shè)置背景樣式。4實驗分析實驗3魅力彩妝歲末盛惠1考核知識點自定義列表<dl>、圖片創(chuàng)建超鏈接。2練習目標●掌握自定義列表的應用方法?！裾莆請D片創(chuàng)建超鏈接的定義方法。實驗4自定義列表請做出以下效果：要求：

（1）用自定義列表定義頁面結(jié)構(gòu)。（2）樣式效果如圖所示。3實驗內(nèi)容及要求實驗4自定義列表頁面內(nèi)容結(jié)構(gòu)分析：圖5-11所示的木耳商品，由圖片和文字兩部分構(gòu)成，文字是對圖片的描述和說明，因此可以通過定義列表實現(xiàn)該圖文混排效果。其中<dt></dt>標記中插入圖片，<dd></dd>標記中放入對圖片解釋說明的文字。樣式分析：（1）為dl設(shè)置寬高、填充和邊框樣式。（2）為dd設(shè)置字體樣式。4實驗分析實驗4自定義列表1考核知識點自定義列表<dl>、CSSSprites（圖片精靈）技術(shù)。2練習目標●掌握自定列表的應用方法。●掌握列表項創(chuàng)建超鏈接的方法?！袷炀欳SSSprites（圖片精靈）技術(shù)。實驗5服裝鞋包菜單制作請做出以下效果：要求：

（1）用自定義列表定義頁面結(jié)構(gòu)。

（2）用給定圖片上的圖標做列表項的項目符號。

（3）鼠標經(jīng)過時超鏈接的狀態(tài)字變?yōu)榧t色。3實驗內(nèi)容及要求實驗5服裝鞋包菜單制作結(jié)構(gòu)分析：頁面結(jié)構(gòu)可以化分為一個盒子中包括兩部內(nèi)容，上面部分是菜單名，下面部分是對菜單的菜單項列表。結(jié)構(gòu)分析如圖5-13所示，可以用自定義列表來定義頁面結(jié)構(gòu)，用<dt>標簽定義菜單名，用<dd>標簽定義菜單項。樣式分析：（1）設(shè)置a的文本樣式，通過鏈接偽類實現(xiàn)不同的鏈接狀態(tài)。（2）通過dl對菜單欄進行整體控制，需要對其設(shè)置寬度、高度、填充以及