HTML5,CSS3,javasript,網(wǎng)頁(yè)制作,網(wǎng)頁(yè)設(shè)計(jì)第7章 鏈接與導(dǎo)航設(shè)計(jì)

HTML+CSS+JavaScript

網(wǎng)頁(yè)制作機(jī)械工業(yè)出版社同名教材配套電子教案7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁(yè)面——設(shè)置鏈接樣式7.2案例：網(wǎng)絡(luò)花店鮮花展示頁(yè)面——設(shè)置列表樣式7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單——設(shè)置縱向?qū)Ш讲藛?.4案例：網(wǎng)絡(luò)花店主導(dǎo)航菜單——設(shè)置橫向?qū)Ш讲藛?.5實(shí)訓(xùn)：網(wǎng)絡(luò)花店商務(wù)安全中心頁(yè)面第7章鏈接與導(dǎo)航設(shè)計(jì)【案例展示】使用CSS設(shè)置鏈接樣式的基本知識(shí)制作網(wǎng)絡(luò)花店友情鏈接局部頁(yè)面，本例文件7-1.html在瀏覽器中的瀏覽效果如圖7-1所示。7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁(yè)面

7.1.1設(shè)置文字鏈接偽類中通過:link、:visited、:hover和:active來(lái)控制鏈接內(nèi)容訪問前、訪問后、鼠標(biāo)懸停時(shí)以及用戶激活時(shí)的樣式。需要說(shuō)明的是，這4種狀態(tài)的順序不能顛倒，否則可能會(huì)導(dǎo)致偽類樣式不能實(shí)現(xiàn)?！狙菔?-1-1】改變文字鏈接的外觀。7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁(yè)面

7.1.2設(shè)置圖文鏈接網(wǎng)頁(yè)設(shè)計(jì)中對(duì)文字鏈接的修飾不僅限于增加邊框、修改背景顏色等方式，還可以利用背景圖片將文字鏈接進(jìn)一步的美化?！狙菔?-1-3】設(shè)置圖文鏈接。

7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁(yè)面

【案例展示】使用CSS設(shè)置列表樣式的基本知識(shí)制作網(wǎng)絡(luò)花店鮮花展示頁(yè)面，本例文件7-2.html在瀏覽器中的瀏覽效果如圖7-5所示。7.2案例：網(wǎng)絡(luò)花店鮮花展示頁(yè)面——設(shè)置列表樣式

7.2.1表格布局與列表布局的對(duì)比

1．表格布局

2．列表布局使用列表布局來(lái)實(shí)現(xiàn)新聞列表，不僅結(jié)構(gòu)清晰，而且代碼數(shù)量明顯減少，如圖7-7所示。7.2案例：網(wǎng)絡(luò)花店鮮花展示頁(yè)面——設(shè)置列表樣式

7.2.2設(shè)置列表類型通常的項(xiàng)目列表主要采用<ul>或<ol>標(biāo)簽，然后配合<li>標(biāo)簽羅列各個(gè)項(xiàng)目。在CSS樣式中，列表項(xiàng)的標(biāo)志類型是通過屬性list-style-type來(lái)修改的，無(wú)論是<ul>標(biāo)記還是<ol>標(biāo)記，都可以使用相同的屬性值，而且效果是完全相同的。【演示7-2-1】設(shè)置列表類型

。

7.2案例：網(wǎng)絡(luò)花店鮮花展示頁(yè)面——設(shè)置列表樣式7.2.3設(shè)置列表項(xiàng)圖片符號(hào)

list-style-image屬性主要使用圖像來(lái)替換列表項(xiàng)的標(biāo)記，當(dāng)list-style-image屬性的屬性值為none或者設(shè)置的圖片路徑出錯(cuò)時(shí)，list-style-type屬性會(huì)替代list-style-image屬性對(duì)列表產(chǎn)生作用?！狙菔?-2-3】設(shè)置列表項(xiàng)圖片符號(hào)

。

7.2案例：網(wǎng)絡(luò)花店鮮花展示頁(yè)面——設(shè)置列表樣式7.2.4設(shè)置列表項(xiàng)位置

list-style-position屬性用于設(shè)置在何處放置列表項(xiàng)標(biāo)記，其屬性值只有兩個(gè)關(guān)鍵詞outside（外部）和inside（內(nèi)部）。【演示7-2-4】設(shè)置列表項(xiàng)位置。

7.2案例：網(wǎng)絡(luò)花店鮮花展示頁(yè)面——設(shè)置列表樣式【案例展示】使用CSS設(shè)置縱向?qū)Ш讲藛蔚幕局R(shí)制作網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單，本例文件7-3.html在瀏覽器中的瀏覽效果如圖7-17所示。7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單

7.3.1普通的超鏈接導(dǎo)航菜單普通的鏈接導(dǎo)航菜單的制作比較簡(jiǎn)單，主要采用將文字鏈接從“行級(jí)元素”變?yōu)椤皦K級(jí)元素”的方法來(lái)實(shí)現(xiàn)?！狙菔?-3-1】制作鏈接導(dǎo)航菜單

。

7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單

7.3.2縱向列表模式的導(dǎo)航菜單

由于縱向?qū)Ш讲藛蔚膬?nèi)容并沒有邏輯上的先后順序，因此可以使用無(wú)序列表制作縱向?qū)Ш讲藛?。【演?-3-2】制作縱向列表模式的導(dǎo)航菜單

。

7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單

【案例展示】使用CSS設(shè)置橫向?qū)Ш讲藛蔚幕局R(shí)制作網(wǎng)絡(luò)花店主導(dǎo)航菜單，本例文件7-4.html在瀏覽器中的瀏覽效果如圖7-27所示。7.4案例：網(wǎng)絡(luò)花店主導(dǎo)航菜單

導(dǎo)航菜單不只有縱向排列的形式，許多時(shí)候還需要頁(yè)面的菜單能夠在水平方向顯示。通過CSS屬性的控制，可以實(shí)現(xiàn)列表模式導(dǎo)航菜單的橫豎轉(zhuǎn)換。在保持原有HTML結(jié)構(gòu)不變的情況下，將縱向?qū)Ш睫D(zhuǎn)變成橫向?qū)Ш阶钪匾沫h(huán)節(jié)就是設(shè)置<li>標(biāo)簽為浮動(dòng)。【演示7-4-1】制作橫向列表模式的導(dǎo)航菜單

。

7.4案例：網(wǎng)絡(luò)花店主導(dǎo)航菜單

【實(shí)訓(xùn)展示】制作網(wǎng)絡(luò)花店商務(wù)安全中心頁(yè)面，本例文件safe.html在瀏覽器中的瀏覽效果如圖7-33所示，頁(yè)面局部布局示意圖如圖7-34所示。7.5實(shí)訓(xùn)：網(wǎng)絡(luò)花店商務(wù)安全中心頁(yè)面

制作過程如下：①頁(yè)面布局規(guī)劃。頁(yè)面布局的首要任務(wù)是弄清網(wǎng)頁(yè)的布局方式，分析版式結(jié)構(gòu)。從頁(yè)面布局示意圖可以看出，頁(yè)面中的主要內(nèi)容包括頂部的網(wǎng)站標(biāo)識(shí)及導(dǎo)航菜單、左側(cè)的網(wǎng)購(gòu)標(biāo)準(zhǔn)及新聞列表、右側(cè)的主體內(nèi)容及底部的版權(quán)信息。②建立目錄結(jié)構(gòu)。在實(shí)訓(xùn)文件夾下創(chuàng)建文件夾images和css，分別用來(lái)存放圖像素材和外部樣式表文件。③準(zhǔn)備素材。將本頁(yè)面需要使用的圖像素材存放在文件夾images下。7.5實(shí)訓(xùn)：網(wǎng)絡(luò)花店商務(wù)安全中心頁(yè)面

制作過程如下：④外部樣式表。在文件夾css下新建一個(gè)名為style.css的樣式表文件。⑤網(wǎng)頁(yè)結(jié)構(gòu)文件。在當(dāng)前文件夾中，用記事本新建一