1、網頁設計案例教程案例說明 導航欄的主要功能是通過超鏈接實現從本頁面跳轉到瀏覽者想要查看的其他頁面，其中鼠標移動到導航欄上的某個菜單項時一般會有變色效果。一個好的導航欄應讓用戶能快捷、準確地訪問網站要展現的主要內容，同時導航欄的風格也要與網站本身的風格相匹配。 導航欄包括縱向導航欄、橫向導航欄、帶下拉菜單的導航欄等。在制作導航欄的過程中，一般會應用CSS樣式表來對導航欄進行設置和美化。本案例中，我們從最基礎的縱向導航欄開始學習。案例步驟 在HTML 5中，導航欄是由標簽定義的。導航欄一般分為橫向和縱向，針對使用制作的導航欄，橫向菜單無須改變結構，只需設置樣式的變化即可；此處制作的縱向菜單，需要使

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

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

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

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

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

7、對于其他元素也可設置動態效果，只需將a換成其他選擇器名即可。提示支撐知識點使用CSS的一些小技巧 display屬性規定元素的顯示類型，其具有多個不同的屬性值，其中display:block表示將元素轉換為塊級元素。合理利用display:block屬性1. 要對行內元素進行有關高度、寬度等樣式的設置，就需要為此行內元素添加display:block屬性，將其轉換為塊元素。利用border設置特殊邊框2. 利用border可以對4個方向的邊框分別進行設置。因此在設置邊框的時候，可以單獨設置一個方向的邊框，也可以對多個方向的邊框分別進行不同的樣式設置。案例說明 本案例中，我們將通過制作簡單橫向導

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

9、，打開“Hyperlink”對話框為文字添加空鏈接，然后參照同樣的方法為其他文字添加空鏈接。案例步驟步驟 04將文字用標簽括起來。在代碼視圖中選中前面輸入的文字，單擊“插入”面板“結構”類別中的“Navigation”按鈕，彈出“插入Navigation”對話框，在“ID”編輯框中輸入“topmenu”，然后單擊“確定”按鈕，插入標簽。案例步驟步驟 01指定在頁面中引入CSS樣式的方法。本例使用內嵌樣式，在標簽對之間輸入如下代碼。設置CSS樣式2.案例步驟步驟 02為塊設置樣式，包括設置背景顏色和高度，以及其內的文字大小和顏色等。本例中塊的id為topmenu，所以用“#topmenu”選擇器

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

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

12、非這個元素有顯示和隱藏狀態的切換，即display:hidden屬性和display:block屬性的切換。案例步驟步驟 05保存文件。按【Ctrl+S】組合鍵保存網頁，然后按【F12】鍵在瀏覽器中預覽效果。這樣一個簡單的橫向導航欄就完成了。案例說明 通過前面2個案例的學習，大家已經對導航欄有了初步的了解，現在我們需要在前面2個例子的基礎上，對導航欄進行更深入的學習，制作一個帶有背景圖像變換效果的橫向導航欄，當將鼠標指針移到導航欄的菜單項時背景會發生變化。案例步驟步驟 01打開“文件”面板，在案例一拷貝的文件夾“第5章task3”中新建一個名為menu-lx.html的網頁。步驟 02在Dre

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

14、ink”按鈕，打開“Hyperlink”對話框為文字添加空鏈接，然后參照同樣的方法為其他文字添加空鏈接。案例步驟步驟 01指定在頁面中引入CSS樣式的方法。本例使用內嵌樣式，在標簽對之間輸入如下代碼。設置CSS樣式2.案例步驟步驟 02設置類名為menus的塊的寬度、高度和背景。在標簽對之間輸入如下代碼。.menuswidth:802px; /*設置nav塊的寬度*/height:41px; /*設置nav塊的高度*/background:url(images/menuBg.jpg) no-repeat; /*設置nav塊的背景圖像且圖像不重復*/案例步驟步驟 03設置塊中超鏈接標簽的默認樣式

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

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

17、”的網頁文檔。步驟 02在Dreamweaver中打開新建的文檔，在代碼界面的body部分輸入作為一級菜單的文字：“首頁”“企業新聞”“產品信息”“特價促銷”“聯系我們”和“新手論壇”。構建HTML結構1.案例步驟步驟 03在代碼界面中選擇前面輸入的文字，單擊“插入”面板“結構”類別中的“ul 項目列表”按鈕，為所選文字添加無序列表標簽。案例步驟步驟 04依次選中“首頁”“企業新聞”“產品信息”“特價促銷”“聯系我們”和“新手論壇”文字，單擊“插入”面板“結構”類別中的“li 列表項”按鈕，分別為這些文本添加列表項標簽。案例步驟步驟 05為文字添加超鏈接標簽。選中“首頁”文字，單擊“插入”面板

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

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

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

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

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