1、網(wǎng)頁設(shè)計(jì)案例教程案例說明 導(dǎo)航欄的主要功能是通過超鏈接實(shí)現(xiàn)從本頁面跳轉(zhuǎn)到瀏覽者想要查看的其他頁面，其中鼠標(biāo)移動(dòng)到導(dǎo)航欄上的某個(gè)菜單項(xiàng)時(shí)一般會(huì)有變色效果。一個(gè)好的導(dǎo)航欄應(yīng)讓用戶能快捷、準(zhǔn)確地訪問網(wǎng)站要展現(xiàn)的主要內(nèi)容，同時(shí)導(dǎo)航欄的風(fēng)格也要與網(wǎng)站本身的風(fēng)格相匹配。 導(dǎo)航欄包括縱向?qū)Ш綑凇M向?qū)Ш綑凇吕藛蔚膶?dǎo)航欄等。在制作導(dǎo)航欄的過程中，一般會(huì)應(yīng)用CSS樣式表來對(duì)導(dǎo)航欄進(jìn)行設(shè)置和美化。本案例中，我們從最基礎(chǔ)的縱向?qū)Ш綑陂_始學(xué)習(xí)。案例步驟 在HTML 5中，導(dǎo)航欄是由標(biāo)簽定義的。導(dǎo)航欄一般分為橫向和縱向，針對(duì)使用制作的導(dǎo)航欄，橫向菜單無須改變結(jié)構(gòu)，只需設(shè)置樣式的變化即可；此處制作的縱向菜單，需要使

2、用“display: block;”屬性改變超鏈接列表的結(jié)構(gòu)。構(gòu)建HTML結(jié)構(gòu)1.步驟 01將本書附贈(zèng)的“素材與實(shí)例第5章”文件夾拷貝至本地磁盤創(chuàng)建的“My Web”站點(diǎn)根目錄中。步驟 02打開“文件”面板，在剛拷貝的文件夾“第5章task1”中新建一個(gè)名為“menu-lx.html”的網(wǎng)頁文檔。案例步驟步驟 03在Dreamweaver中打開新建的文檔，在body區(qū)域輸入文字“我的首頁 心情日記 學(xué)習(xí)心得 工作筆記 生活瑣碎 聯(lián)系我們”。案例步驟步驟 04選中所有輸入的文字，單擊“插入”面板“結(jié)構(gòu)”類別中的“Navigation”按鈕，彈出“插入Navigation”對(duì)話框，在“ID”編輯框

3、中輸入“dh”，然后單擊“確定”按鈕，插入標(biāo)簽。案例步驟步驟 05添加超鏈接，即為文字添加超鏈接標(biāo)簽。選中“我的首頁”文字，單擊“插入”面板“常用”類別中的“Hyperlink”按鈕，打開“Hyperlink”對(duì)話框。由于現(xiàn)在還沒有需要跳轉(zhuǎn)的頁面，所以在“鏈接”編輯框中輸入“#”符號(hào)（表示插入空鏈接），然后單擊“確定”按鈕。案例步驟步驟 06參考步驟5的操作，依次為“心情日記”“學(xué)習(xí)心得”“工作筆記”“生活瑣碎”和“聯(lián)系我們”這些文字添加超鏈接。案例步驟步驟 07保存文件。按【Ctrl+S】組合鍵保存網(wǎng)頁，然后按【F12】鍵在瀏覽器中預(yù)覽效果。此時(shí)網(wǎng)頁的結(jié)構(gòu)部分制作完成，涉及的HTML標(biāo)簽如表

4、5-1所示。表5-1 涉及的HTML標(biāo)簽標(biāo) 簽描 述網(wǎng)頁主體標(biāo)簽HTML 5中的新標(biāo)簽，定義導(dǎo)航鏈接部分超鏈接文字超鏈接案例步驟設(shè)置CSS樣式2.步驟 01指定在HTML頁面中引入CSS樣式表的方法，這里使用內(nèi)嵌樣式，在標(biāo)簽對(duì)之間添加以下代碼。案例步驟步驟 02設(shè)置超鏈接樣式，包括縱向排列，消除下劃線，設(shè)置文字大小和顏色，設(shè)置背景顏色和內(nèi)邊距等。在步驟1輸入的標(biāo)簽對(duì)之間輸入代碼。設(shè)置各超鏈接塊高度為30像素，再設(shè)置行高為30像素，目的是讓文字可以在塊中縱向居中，這也是使用line-height實(shí)現(xiàn)內(nèi)容縱向居中的方法。 超鏈接標(biāo)簽屬于行內(nèi)元素，將其轉(zhuǎn)換為塊元素（display:block）的原因

5、有兩個(gè)，一是可以控制標(biāo)簽的寬度、高度及能填充邊框等；二是為了使鼠標(biāo)指針放在導(dǎo)航欄的任意位置（文字之外的地方）都可產(chǎn)生懸停效果。提示案例步驟步驟 03設(shè)置鼠標(biāo)移到超鏈接上時(shí)，超鏈接文字顏色發(fā)生變化的效果（使用hover偽類），在步驟2輸入的代碼下方輸入代碼。#dh a:hovercolor:#FFFFFF; /*設(shè)置超鏈接在hover狀態(tài)時(shí)的文字顏色*/background-color: #000033; /*設(shè)置超鏈接在hover狀態(tài)時(shí)的背景色*/border-left-width: 10px; /*設(shè)置超鏈接在hover狀態(tài)時(shí)左邊框的寬度為10像素*/border-left-style: s

6、olid; /*設(shè)置超鏈接在hover狀態(tài)時(shí)左邊框的線型為實(shí)線*/border-left-color:#D8D803; /*設(shè)置超鏈接在hover狀態(tài)時(shí)左邊框的顏色*/ padding屬性叫做填充（或內(nèi)邊距），用來設(shè)置塊元素中的元素（如文字）同塊邊框之間的距離；margin屬性叫做外邊距，用來設(shè)置元素與元素之間的距離。案例步驟步驟 04保存文件。按【Ctrl+S】組合鍵保存網(wǎng)頁，然后按【F12】鍵在瀏覽器中預(yù)覽效果。a:hover表示鼠標(biāo)放到超鏈接上時(shí)超鏈接的狀態(tài)；a:link是超鏈接沒被訪問時(shí)的狀態(tài)；a:active為鼠標(biāo)單擊超鏈接但沒釋放時(shí)的狀態(tài)；a:visited為超鏈接被訪問后的狀態(tài)。

7、對(duì)于其他元素也可設(shè)置動(dòng)態(tài)效果，只需將a換成其他選擇器名即可。提示支撐知識(shí)點(diǎn)使用CSS的一些小技巧 display屬性規(guī)定元素的顯示類型，其具有多個(gè)不同的屬性值，其中display:block表示將元素轉(zhuǎn)換為塊級(jí)元素。合理利用display:block屬性1. 要對(duì)行內(nèi)元素進(jìn)行有關(guān)高度、寬度等樣式的設(shè)置，就需要為此行內(nèi)元素添加display:block屬性，將其轉(zhuǎn)換為塊元素。利用border設(shè)置特殊邊框2. 利用border可以對(duì)4個(gè)方向的邊框分別進(jìn)行設(shè)置。因此在設(shè)置邊框的時(shí)候，可以單獨(dú)設(shè)置一個(gè)方向的邊框，也可以對(duì)多個(gè)方向的邊框分別進(jìn)行不同的樣式設(shè)置。案例說明 本案例中，我們將通過制作簡單橫向?qū)?/p>

8、航欄，來繼續(xù)學(xué)習(xí)制作導(dǎo)航欄的方法及CSS樣式表的使用。本案例將會(huì)用到前一個(gè)案例中的一些步驟，同時(shí)會(huì)涉及到浮動(dòng)、塊元素等知識(shí)。案例步驟步驟 01打開“文件”面板，在上一案例中拷貝的文件夾“第5章task2”中新建一個(gè)名為“menu-lx.html”的網(wǎng)頁文檔。構(gòu)建HTML結(jié)構(gòu)1.步驟 02在Dreamweaver中打開新建的文檔，在代碼界面的body部分輸入文字“雪域西藏”“天府四川”“稻城亞丁”“神奇九寨”“永恒三峽”“雄秀峨眉”“川藏萬里”“城市驛站”和“出國咨詢”。步驟 03添加超鏈接，即為文字添加超鏈接標(biāo)簽。選中“雪域西藏”文字，單擊“插入”面板“常用”類別中的“Hyperlink”按鈕

9、，打開“Hyperlink”對(duì)話框?yàn)槲淖痔砑涌真溄樱缓髤⒄胀瑯拥姆椒槠渌淖痔砑涌真溄印０咐襟E步驟 04將文字用標(biāo)簽括起來。在代碼視圖中選中前面輸入的文字，單擊“插入”面板“結(jié)構(gòu)”類別中的“Navigation”按鈕，彈出“插入Navigation”對(duì)話框，在“ID”編輯框中輸入“topmenu”，然后單擊“確定”按鈕，插入標(biāo)簽。案例步驟步驟 01指定在頁面中引入CSS樣式的方法。本例使用內(nèi)嵌樣式，在標(biāo)簽對(duì)之間輸入如下代碼。設(shè)置CSS樣式2.案例步驟步驟 02為塊設(shè)置樣式，包括設(shè)置背景顏色和高度，以及其內(nèi)的文字大小和顏色等。本例中塊的id為topmenu，所以用“#topmenu”選擇器

10、來控制其樣式。在標(biāo)簽對(duì)之間輸入如下代碼。#topmenu background:#515151; /*設(shè)置nav塊的背景顏色*/font-size:14px; /*設(shè)置nav塊中文字的大小為14像素*/color: #ffffff; /*設(shè)置nav塊中文字的顏色*/height:27px; /*設(shè)置nav塊的高度為27像素*/案例步驟步驟 03為塊中的超鏈接標(biāo)簽設(shè)置樣式。在步驟2輸入的代碼下方添加如下代碼。#topmenu a float:left; /*將超鏈接塊設(shè)置為向左浮動(dòng)*/width: 100px; /*設(shè)置超鏈接的寬度為100像素*/color: #FFF; /*設(shè)置超鏈接的文字顏

11、色*/text-decoration: none; /*去掉超鏈接的下劃線*/text-align: center; /*設(shè)置超鏈接塊的文字對(duì)齊方式為居中*/line-height:27px; /*設(shè)置超鏈接塊的行高為27像素*/案例步驟步驟 04設(shè)置超鏈接在hover狀態(tài)下的效果。在步驟3輸入的代碼下方添加如下代碼。#topmenu a:hover background:#f00; /*設(shè)置超鏈接在hover狀態(tài)下的背景色*/color: #fff; /*設(shè)置超鏈接在hover狀態(tài)下的文字顏色*/當(dāng)設(shè)置行內(nèi)元素的屬性為float:left以后，就不需要再設(shè)置display:block屬性，除

12、非這個(gè)元素有顯示和隱藏狀態(tài)的切換，即display:hidden屬性和display:block屬性的切換。案例步驟步驟 05保存文件。按【Ctrl+S】組合鍵保存網(wǎng)頁，然后按【F12】鍵在瀏覽器中預(yù)覽效果。這樣一個(gè)簡單的橫向?qū)Ш綑诰屯瓿闪恕０咐f明 通過前面2個(gè)案例的學(xué)習(xí)，大家已經(jīng)對(duì)導(dǎo)航欄有了初步的了解，現(xiàn)在我們需要在前面2個(gè)例子的基礎(chǔ)上，對(duì)導(dǎo)航欄進(jìn)行更深入的學(xué)習(xí)，制作一個(gè)帶有背景圖像變換效果的橫向?qū)Ш綑冢?dāng)將鼠標(biāo)指針移到導(dǎo)航欄的菜單項(xiàng)時(shí)背景會(huì)發(fā)生變化。案例步驟步驟 01打開“文件”面板，在案例一拷貝的文件夾“第5章task3”中新建一個(gè)名為menu-lx.html的網(wǎng)頁。步驟 02在Dre

13、amweaver中打開新建的文檔，然后在代碼界面的body區(qū)域輸入文字“首頁”“管理咨詢”“營銷策劃”“項(xiàng)目推廣”“招生代理”“展覽展示”“兼職人事”“設(shè)計(jì)制作”“聯(lián)系我們”和“投訴建議”。構(gòu)建HTML結(jié)構(gòu)1.案例步驟步驟 03添加類名為menus的標(biāo)簽。選中前面輸入的文字，然后單擊“插入”面板“結(jié)構(gòu)”類別中的“Navigation”按鈕，在彈出的“插入Navigation”對(duì)話框的“Class”編輯框中輸入類名為menus，單擊“確定”按鈕。此時(shí)在代碼界面中會(huì)看到插入的代碼。案例步驟步驟 04添加超鏈接，即為文字添加超鏈接標(biāo)簽。選中“首頁”文字，單擊“插入”面板“常用”類別中的“Hyperl

14、ink”按鈕，打開“Hyperlink”對(duì)話框?yàn)槲淖痔砑涌真溄樱缓髤⒄胀瑯拥姆椒槠渌淖痔砑涌真溄印０咐襟E步驟 01指定在頁面中引入CSS樣式的方法。本例使用內(nèi)嵌樣式，在標(biāo)簽對(duì)之間輸入如下代碼。設(shè)置CSS樣式2.案例步驟步驟 02設(shè)置類名為menus的塊的寬度、高度和背景。在標(biāo)簽對(duì)之間輸入如下代碼。.menuswidth:802px; /*設(shè)置nav塊的寬度*/height:41px; /*設(shè)置nav塊的高度*/background:url(images/menuBg.jpg) no-repeat; /*設(shè)置nav塊的背景圖像且圖像不重復(fù)*/案例步驟步驟 03設(shè)置塊中超鏈接標(biāo)簽的默認(rèn)樣式

15、。在前一個(gè)步驟完成后，可以看到超鏈接的效果及位置都不合適，因此需要設(shè)置其樣式。在步驟2中輸入的代碼下方輸入如下代碼。.menus a float:left; /*設(shè)置超鏈接向左浮動(dòng)*/width:78px; /*設(shè)置超鏈接寬度*/ height:41px; /*設(shè)置超鏈接高度*/text-align:center; /*設(shè)置超鏈接文字居中*/line-height:41px; /*設(shè)置超鏈接行高*/color:#FFFFFF; /*設(shè)置超鏈接文字顏色*/text-decoration:none; /*設(shè)置超鏈接無下劃線*/font-size:12px; /*設(shè)置超鏈接字體大小*/案例步驟步驟

16、04設(shè)置超鏈接在hover狀態(tài)（將鼠標(biāo)指針放在超鏈接上）下的樣式。.menus a:hoverbackground:url(images/menu_ok.jpg) no-repeat center; overflow:hidden案例說明 本案例將要制作帶下拉菜單的橫向?qū)Ш綑凇Ｔ搶?dǎo)航欄的制作比前面3個(gè)案例的制作都要復(fù)雜一些。要在不使用javascript的情況下制作帶下拉菜單的導(dǎo)航欄，需要合理利用CSS的display屬性，通過設(shè)置display屬性的值來完成菜單的顯示和隱藏。案例步驟步驟 01打開“文件”面板，在案例一中拷貝的文件夾“第5章task4”中新建一個(gè)名為“menu-lx.html

17、”的網(wǎng)頁文檔。步驟 02在Dreamweaver中打開新建的文檔，在代碼界面的body部分輸入作為一級(jí)菜單的文字：“首頁”“企業(yè)新聞”“產(chǎn)品信息”“特價(jià)促銷”“聯(lián)系我們”和“新手論壇”。構(gòu)建HTML結(jié)構(gòu)1.案例步驟步驟 03在代碼界面中選擇前面輸入的文字，單擊“插入”面板“結(jié)構(gòu)”類別中的“ul 項(xiàng)目列表”按鈕，為所選文字添加無序列表標(biāo)簽。案例步驟步驟 04依次選中“首頁”“企業(yè)新聞”“產(chǎn)品信息”“特價(jià)促銷”“聯(lián)系我們”和“新手論壇”文字，單擊“插入”面板“結(jié)構(gòu)”類別中的“l(fā)i 列表項(xiàng)”按鈕，分別為這些文本添加列表項(xiàng)標(biāo)簽。案例步驟步驟 05為文字添加超鏈接標(biāo)簽。選中“首頁”文字，單擊“插入”面板

18、“常用”類別中的“Hyperlink”按鈕，打開“Hyperlink”對(duì)話框，在“鏈接”編輯框中輸入“#”符號(hào)，單擊“確定”按鈕。步驟 06參考步驟5的方法，依次為“企業(yè)新聞”“產(chǎn)品信息”“特價(jià)促銷”“聯(lián)系我們”和“新手論壇”文字添加超鏈接。案例步驟步驟 07添加一個(gè)塊標(biāo)簽。在代碼界面中選擇前面添加的包括在內(nèi)的標(biāo)簽元素，然后單擊“插入”面板“結(jié)構(gòu)”類別中的“Navigation”按鈕，打開“插入Navigation”對(duì)話框，單擊“確定”按鈕插入塊標(biāo)簽。步驟 08添加二級(jí)菜單。在代碼界面body部分的首頁代碼下面輸入作為“首頁”的二級(jí)菜單文字：“最新更新”和“下載排行”，然后參照前面的步驟為這2

19、段文字添加、和標(biāo)簽。案例步驟步驟 09參照步驟8，依次為其他一級(jí)菜單添加對(duì)應(yīng)的二級(jí)菜單文字及、和標(biāo)簽，涉及的HTML標(biāo)簽如表5-2所示。案例步驟表5-2 涉及的HTML標(biāo)簽標(biāo) 簽描 述網(wǎng)頁主體標(biāo)簽無序列表無序列表項(xiàng)HTML 5中的新標(biāo)簽，定義導(dǎo)航鏈接部分超鏈接文字超鏈接案例步驟步驟 01指定在頁面中引入CSS樣式的方法。本例使用內(nèi)嵌樣式，在標(biāo)簽對(duì)之間輸入如下代碼。設(shè)置CSS樣式2.案例步驟步驟 02設(shè)置整體頁面所有標(biāo)簽的通用屬性。在標(biāo)簽對(duì)之間輸入如下代碼。*margin:0; /*設(shè)置頁面所有標(biāo)簽的外邊距為0*/padding:0; /*設(shè)置頁面所有標(biāo)簽的內(nèi)邊距為0*/ *號(hào)代表所有標(biāo)簽的通用

20、屬性，在*選擇器中設(shè)置的CSS樣式將會(huì)被頁面中所有標(biāo)簽共同使用。此處為了清空在各種瀏覽器上可能出現(xiàn)的內(nèi)邊距和外邊距，故統(tǒng)一將其定義為0像素。案例步驟步驟 03設(shè)置標(biāo)簽的樣式，輸入的代碼如下。li list-style:none; /*設(shè)置列表項(xiàng)無編號(hào)*/text-align:center; /*設(shè)置列表項(xiàng)的文字為居中*/line-height:24px; /*設(shè)置列表項(xiàng)的行高*/案例步驟步驟 04設(shè)置超鏈接樣式，輸入的代碼如下。此時(shí)按【F12】鍵，可在瀏覽器中看到效果。a text-decoration:none; /*設(shè)置超鏈接無下劃線*/color:#333333; /*設(shè)置超鏈接文字顏色

21、*/font-size:12px; /*設(shè)置超鏈接文字大小*/line-height:24px; /*設(shè)置超鏈接行高*/display:block; /*將超鏈接轉(zhuǎn)換為塊元素*/案例步驟步驟 05此時(shí)該導(dǎo)航欄的初步樣式已經(jīng)完成，下面將要調(diào)整塊及其包含的元素樣式。首先設(shè)置該塊中第1級(jí)列表項(xiàng)標(biāo)簽的樣式，完成后在瀏覽器中預(yù)覽頁面。nav ul liwidth:120px; /*設(shè)置標(biāo)簽的寬度為120像素*/float:left; /*設(shè)置標(biāo)簽向左浮動(dòng)*/border:1px #333 dashed; /*設(shè)置標(biāo)簽邊框的粗細(xì)、顏色及線型*/background:#FFD2D2; /*設(shè)置標(biāo)簽的背景色*

22、/案例步驟要為某個(gè)標(biāo)簽下面的子標(biāo)簽設(shè)置樣式，只需將該標(biāo)簽的名稱（或類名、id名）寫在前面即可。例如，設(shè)置類名為menu的標(biāo)簽下的標(biāo)簽樣式，可以寫成：.menu ul。這樣設(shè)置的好處在于樣式只會(huì)影響指定位置的標(biāo)簽，而對(duì)于其他地方的標(biāo)簽不會(huì)有任何影響。提示案例步驟步驟 06隱藏2級(jí)菜單。樣式設(shè)置中nav ul li只影響了塊中的第1級(jí)、標(biāo)簽，而對(duì)第2級(jí)的、標(biāo)簽并沒有產(chǎn)生向左浮動(dòng)的效果。在需求中，2級(jí)菜單的默認(rèn)狀態(tài)是隱藏的，由于二級(jí)菜單的標(biāo)簽是位于1級(jí)菜單的下面，因此輸入如下代碼來隱藏二級(jí)菜單。nav ul li uldisplay:none; /*設(shè)置2級(jí)菜單默認(rèn)隱藏*/案例步驟步驟 07設(shè)置1級(jí)菜單中標(biāo)簽下標(biāo)簽的hover狀態(tài)樣式。設(shè)置完成后，保存并在瀏覽器中預(yù)覽網(wǎng)頁，可以看到效果（鼠標(biāo)指針移到“產(chǎn)品信息”上）。nav ul li a:hovercolor:#fff; /*設(shè)置hover狀態(tài)時(shí)標(biāo)簽的文字顏色*/background-color:#BB0916; /*設(shè)置hover狀態(tài)時(shí)標(biāo)簽的背景顏色*/案例步驟步驟 08顯示2級(jí)菜單。要顯示被隱藏的2級(jí)菜單，只需要設(shè)置display屬性為block即可。