水平導(dǎo)航是網(wǎng)站導(dǎo)航最常見的形式，其制作方法比較簡(jiǎn)單。下面我將詳細(xì)教你如何制作水平導(dǎo)航。 打開Adobe Dreamweaver CC 2015 首先打開Adobe Dreamweaver CC 2

水平導(dǎo)航是網(wǎng)站導(dǎo)航最常見的形式，其制作方法比較簡(jiǎn)單。下面我將詳細(xì)教你如何制作水平導(dǎo)航。

打開Adobe Dreamweaver CC 2015

首先打開Adobe Dreamweaver CC 2015軟件，這是一款專業(yè)的網(wǎng)頁(yè)制作工具。

創(chuàng)建一個(gè)新的網(wǎng)頁(yè)文檔

在菜單欄中點(diǎn)擊"文件"，然后選擇"新建"命令或按住Ctrl N鍵打開"新建文檔"對(duì)話框，并選擇文檔類型為HTML，然后點(diǎn)擊"創(chuàng)建"按鈕，即可創(chuàng)建一個(gè)新的網(wǎng)頁(yè)文檔。

添加導(dǎo)航容器

在body標(biāo)簽之間添加一個(gè)div元素作為導(dǎo)航的容器，這樣可以方便地控制導(dǎo)航的樣式和布局。

添加無(wú)序列表

在div標(biāo)簽內(nèi)部添加ul標(biāo)簽，用來(lái)創(chuàng)建一個(gè)無(wú)序列表，無(wú)序列表中的每個(gè)li標(biāo)簽代表一個(gè)導(dǎo)航項(xiàng)。

添加導(dǎo)航鏈接

在每個(gè)li標(biāo)簽里面添加a標(biāo)簽，設(shè)置href屬性為相應(yīng)的鏈接地址，并填寫顯示的文本內(nèi)容，這樣就創(chuàng)建了一個(gè)導(dǎo)航鏈接。

添加樣式

在head標(biāo)簽之間添加style標(biāo)簽，用來(lái)定義導(dǎo)航的樣式?？梢栽O(shè)置導(dǎo)航容器的背景色、邊框樣式和高度等屬性，以及導(dǎo)航鏈接的浮動(dòng)、內(nèi)邊距和字體樣式等。

保存并預(yù)覽

最后保存網(wǎng)頁(yè)文件，并按住F12鍵可以在瀏覽器中預(yù)覽效果，這樣就可以看到制作好的水平導(dǎo)航了。

通過(guò)以上步驟，你可以輕松地制作一個(gè)簡(jiǎn)單的水平導(dǎo)航欄，方便用戶在網(wǎng)站上進(jìn)行導(dǎo)航和瀏覽。