HTML5,CSS3,javasript,網(wǎng)頁制作,網(wǎng)頁設計第7章 鏈接與導航設計

HTML+CSS+JavaScript

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

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

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

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

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

7.2.1表格布局與列表布局的對比

1．表格布局

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

7.2.2設置列表類型通常的項目列表主要采用<ul>或<ol>標簽，然后配合<li>標簽羅列各個項目。在CSS樣式中，列表項的標志類型是通過屬性list-style-type來修改的，無論是<ul>標記還是<ol>標記，都可以使用相同的屬性值，而且效果是完全相同的?！狙菔?-2-1】設置列表類型

。

7.2案例：網(wǎng)絡花店鮮花展示頁面——設置列表樣式7.2.3設置列表項圖片符號

list-style-image屬性主要使用圖像來替換列表項的標記，當list-style-image屬性的屬性值為none或者設置的圖片路徑出錯時，list-style-type屬性會替代list-style-image屬性對列表產(chǎn)生作用?！狙菔?-2-3】設置列表項圖片符號

。

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

list-style-position屬性用于設置在何處放置列表項標記，其屬性值只有兩個關鍵詞outside（外部）和inside（內(nèi)部）?！狙菔?-2-4】設置列表項位置。

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

7.3.1普通的超鏈接導航菜單普通的鏈接導航菜單的制作比較簡單，主要采用將文字鏈接從“行級元素”變?yōu)椤皦K級元素”的方法來實現(xiàn)。【演示7-3-1】制作鏈接導航菜單

。

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

7.3.2縱向列表模式的導航菜單

由于縱向?qū)Ш讲藛蔚膬?nèi)容并沒有邏輯上的先后順序，因此可以使用無序列表制作縱向?qū)Ш讲藛巍！狙菔?-3-2】制作縱向列表模式的導航菜單

。

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

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

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

。

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

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

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

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