網頁導航欄製作:[2]如何為網頁添加導航欄

通常我們會利用PS等圖像處理軟體製作導航欄的效果圖,然後就需要將其添加到網頁中。今天小編就與大家分享一下為網頁添加導致欄的具體方法。

方法/步驟

打開Deamweaver8,新建一網頁文件。接著輸入以下導航菜單的內容:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>導航欄示例</title>

</head>

<body>

<ul id="navigation">

<li></li>

<li><a href="#">首    頁</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互動交流</a></li>

<li><a href="#">開心一刻</a></li>

<li><a href="#">懸 賞 令</a></li>

<li></li>

</ul>

</body>

</html>

此時對應效果如圖:

接下來準備相關的導航按鈕圖片(可以事先利用PS製作好)。本文中小編使用的圖標如圖所示。

然後將以下CSS代碼加入到<head></head>之間:

<style type="text/css">

body {text-align:center;}

#navigation

{ list-style-type:none; height:auto;}

#navigation li { width:154px; height:60px; text-align:center;

float:left; padding-top:18px;font-size:20px; font-family:"微軟雅黑", "宋體", "隸書";

background-image:url(images/noactive.jpg);}

a {width:154px; height:72px;}

a:link { text-decoration:none; color:#FFFF00;}

a:visited { text-decoration:none; color:#FFFF00; }

#navigation li:hover { color:#CC0000; text-decoration:underline;

background-image:url(images/active.jpg);}

a:hover{ color:#CC0033;}

#left {background-image:url(images/left.jpg); width:22px;}

</style>

在加入CSS代碼之間,網頁此時的效果如圖:

接下來,我們對網頁效果進行調整,將HTML菜單部分進行調整:

<body>

<ul id="navigation">

<li style="background-image:url(images/left.jpg);width:22px;"></li>

<li><a href="#">首    頁</a></li>

<li><a href="#">我的博客</a></li>

<li><a href="#">互動交流</a></li>

<li><a href="#">開心一刻</a></li>

<li><a href="#">懸 賞 令</a></li>

<li style="background-image:url(images/right.jpg);width:22px;"></li>

</ul>

</body>

最終炫酷的導航欄就製作完成啦!

相關文章

  1. 網頁導航欄製作:[1]怎麼用PS製作炫酷導航欄

    網頁導航欄作為網頁設計中的重要組成部分,其扮演著極為重要的角度.可以看網頁導航欄設計的成功與否,在很大程序上決定著整個網頁的美觀程度.今天小編就與大家一起分享一下炫酷導航欄的製作方法,希望在此起到拋磚 ...
  2. Html5/網頁簡潔導航欄製作

    幾乎每個網頁都會有導航欄,大家再製作網頁的時候也會用到導航欄,現在小編就教大家怎麼製作一個簡潔的網站導航欄 工具/原料 記事本 基本做法 我們以的導航欄為標準來製作一個導航欄 首先大家看看這個的原理& ...
  3. 靜態網頁製作教材:[3]網頁頭部細分

    主體我們設置好後,下面看看頭部是怎麼細分的吧 工具/原料 代碼 電腦 方法/步驟 頭部一般我們會放一個logo,和導航,下面我們開始製作吧.這裡我們需要在頭部的div裡面加入新的div <htm ...
  4. 如何製作一個漂亮網頁,超簡單

    製作一個漂亮網頁 工具/原料 PS Dreamweaver 方法/步驟 我們需要先製作背景圖片.也就是網頁背景那塊藍色的部分.我們需要單獨做出來. 新建一個1920px*400px的文件 我們拉一個一 ...
  5. 網頁設計基礎:如果你想學網頁製作

    很多朋友問我,網站建設中如何製作網頁,類似這樣的問題很多.我們這裡就再次說說這個問題.可以告訴想學網頁製作的朋友,學習製作網頁和學習其它知識一樣,是要有基礎的.在基礎之上學習起來會比較輕鬆和快捷的:其 ...
  6. 教你製作簡單的網頁

    最基本的網頁製作,只需幾步就可以製作出自己的網頁,跟我來一起試一下. 首先知道最基本的三條語句結構. 工具/原料 電腦 電腦記事本 方法/步驟 打開電腦,點擊右鍵,新建一個文本文檔(即記事本). 在記 ...
  7. 巧用PS製作淘寶通欄店招--店招導航欄製作(二)

    前兩篇分享了通欄店招的頁頭背景圖片的製作和上傳方法,這篇我們繼續分享店招通欄導航欄的製作與上傳方法. 方法/步驟 在店招通欄背景中我們截取一張1920*30的矩形圖片,並填充我們自己想要的顏色.為了達 ...
  8. 淘寶怎樣製作個性店鋪店招和導航欄

    店鋪導航是店鋪的一個關鍵部分,很多新開淘寶店鋪的都很頭疼店招的製件,購買現成的又不想花錢的,誰都想讓店鋪更有特色,那麼這就需要自己設計,自己製作的,下面的文章是小編親自折磨出來的,希望對大家有幫助.下 ...
  9. dreamweaver製作asp動態網頁之修改記錄

    前面介紹了如何向資料庫中添加記錄,在頁面上顯示記錄以及刪除記錄.接下來就在此基礎上介紹一下如何修改記錄. 工具/原料 dreamweaver CS6. 方法/步驟 打開Dreamweaver CS6, ...
  10. 刪除文件導致Win7左側的導航欄里收藏夾無法添加

    如果一不小心刪除了C盤用戶名之下的一些文件,導致win7左側的導航欄里收藏夾原本的"桌面,下載,最近訪問文件"消失了.如圖: 而且,導航欄中右鍵"收藏夾"中的& ...
  11. 用frontpage製作簡單的網頁示例

    Frontpage是微軟公司出品的一款製作網頁入門級軟體,製作網頁的前提是自己必需要有一定的網頁代碼知識能力,下面為大家介紹下如何用frontpage製作簡單的網頁,感興趣的朋友可以參考下 方法/步驟 ...
  12. 怎樣使用易企秀製作好看的網頁

    在微信裡面是不是看到過很多高大上的網頁,不僅有動作效果,還有背景音樂.下面小強哥就用易企秀軟體給大家製作一個. 工具/原料 一個郵箱帳戶 可以接收簡訊的手機 方法/步驟 百度搜尋易企秀進入官網,你也可 ...
  13. Dreamwavear技巧:[1]網頁中如何製作選擇題

    Dreamwavear軟體是製作網頁的一大利器,我們怎樣在網頁中製作選擇題呢?下面我們一起來看看網頁中選擇題的製作. 工具/原料 Dreamwavear軟體 單項選擇題製作: 打開Dreamwavea ...
  14. win7如何讓任務欄中的窗口網頁不合併在一起

    我們安裝了win7系統以後,常常會發現,當我們打開的網頁很多的時候,系統會自動將網頁進行合併,這讓用慣了xp系統的人們很不習慣,在接下來的內容里,小編將會教會如何讓任務欄中的窗口.網頁或按鈕不進行合併 ...
  15. 網頁按鈕的製作

    平時我們看到網頁的時候一般都能看到突出的小按鈕,有方的,有圓的.今天我們來製作一下吧! 工具/原料 電腦 ps 方法/步驟 首先新建一個文檔,設置為寬800高1000的像素,72的解析度吧,RGB顏色 ...
  16. Ps製作透明玻璃網頁用戶信息展示教程

    玻璃網頁其實跟玻璃的製作一樣.重點是把邊緣及中間的高光渲染出來,比較規則的圖形直接用圖層樣式做出初步的質感,再增手工增加一些高光等即可.其它部分可以按自己需要添加. 工具/原料 電腦一台 安裝Phot ...
  17. 按鍵精靈腳本製作教程:網頁遊戲規範瀏覽器大小

    寫頁游腳本的時候,瀏覽器的不統一是硬傷.目前的解決方法有:1.自己用VB語言或其他語言寫一個腳本專用的瀏覽器.2.讓使用者用指定的瀏覽器.3.用361插件,創建瀏覽器窗口.還有其他的方法嗎?答案是肯定 ...
  18. 如何運用美圖秀秀網頁版簡單製作文字陰影效果

    在日常的工作和生活中,對於某些職員或者愛好照片特效的小夥伴而言,會遇到怎麼製作出文字的陰影效果的問題?不會PS的小白來說,得去各種手機軟體非常麻煩,今天就教給大家一個非常簡便的方法,利用美圖秀秀網頁版 ...
  19. 網頁表格的製作(高級)

    平時我們用Word編輯表格都是得心應手.但在寫博做表格時好像就不那麼聽話了.如果用插入表格的辦法,不太美觀,而且合併.拆分都無法實現.今天我們探討把網頁表格做成Word表格一樣的功能,甚至更美觀.這裡 ...
  20. photoshop圖層樣式製作漂亮的網頁按鈕

    這是一篇photoshop按鈕做教程,教程中把為各位講解怎麼樣運用photoshop中的圖層樣式功能做出水晶按鈕的透明與三維效果,各位一起來動手做吧. 先看完成圖. 工具/原料 photoshop 步 ...