優秀設計網頁導航

1、網頁導航欄的設計方式有哪些

導航欄的設計方式有很多種，通過專業的PS設計軟體，可以結合自己的靈感設計，網上有很多可以做為參考或欣賞。

2、html+div設計網頁，需要實現導航菜單路徑跟蹤，怎麼做，比如我從主頁進入到產品也在到詳細信息頁，需要有

首頁代碼index.html

//script代碼，參數分別是，本頁地址，本頁名稱，跳轉頁地址
function redirect(u, n, g){
location.href = g + '?url=' + u + '&pn=' + encodeURI(n);
}

//html代碼，這里向下一個頁面傳的是本頁的頁面名稱和地址
<a href="#" onClick="redirect('index.html', '首頁', 'proct.html');">產品</a>

產品頁代碼proct.html

//script代碼
function GetRequest() {
   var url = location.search; //獲取url中"?"符後的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}

var param = GetRequest();

window.onload = function(){
    //一般來說，當前所在頁面不需要加鏈接
    document.getElementById('d').innerHTML = '<a href="'+ param.url +'">'+ decodeURI(param.pn) +'</a> -> 產品頁';
}

//html代碼，導航所在容器
<div id="d"></div>

其他頁面大致相同

3、有哪些炫酷好玩兒的網頁導航設計

Jova

Jova的網站設計非常清爽，導航欄的設計均衡並且結構妥帖

設計師使用細線構成的線框柵格來構建網站導航，經典的黑白配色，加上清晰銳利的英文字體，構建出優雅迷人的外觀，在柔和的背影映襯之下，給人深刻的印象。

Beloesuhoe

Beloesuhoe  的設計團隊巧妙地使用布景構建出了一個獨一無二的網頁導航，非常抓人眼球。這個網站乍一看好象就是一個背景圖，但是實際上，網頁上脈動的小紅點會提示你導航的存在，它並不是看起來那麼簡單。將滑鼠移動到小紅點上，你會發現這些導航點是可交互的，並且將你引導到特定的頁面。這種「沉浸式」的導航欄設計是個非常有趣的解決方案，可拓展的空間也相當大。

First Person

First Person  整站使用了單頁滾動設計，並且通過左上方的菜單欄來進行導航引導。但是這並不是它的突出之處，當你在首頁向下滾動的時候，能夠看到一個精心製作的3D場景，整個場景會隨著白天黑夜變換主題，並且當你滑鼠移動到3D場景的特定點上的時候，能夠激活組件，進行交互，瀏覽信息，絕對別出心裁。雖然整站導航不算突出，但是這個3D場景的導航設計 ，簡直帥酷爆表。

Mint Design Company

說 Mint Design Company 的導航設計  精美絕倫完全不是過譽。設計師幾乎是用漂亮的手繪插畫完成了整個網頁的設計，導航欄所使用的手繪圖標更是精緻，滑鼠移動到導航欄圖標處會有好玩兒的動效出現，最關鍵的是每個動效都不盡相同。

Vive Latino

Viva  Latino的設計團隊充分利用塗鴉的獨特效果，讓整著陸頁在同類設計中脫穎而出。干凈的單色頁面上，漂亮的手繪排版設計和獨具個性的小人錯落混拍在一起，營造出節日的氣氛，最關鍵的是，這樣的設計也創造出獨具一格的導航模式。

Pete Nottage

這個名為Pete Nottage  的網站以五彩繽紛的插畫而著稱，也使得整個網站充滿了創造性和積極的氛圍。這些扁平風的插畫以城市場景為主題，並且還是作為網站導航而存在

為了讓這個導航欄更加好玩，網站的設計師和開發者將許多動態的元素加入到插畫中，比如移動的汽車和遊艇，那些看似靜態的景物其實也是可交互的，當你點擊它們的時候，有些建築會抖動甚至消失!這種引人入勝的設計賦予了網站獨特的氣質，讓人流連忘返樂此不疲。

Mathilde Jacon

Mathilde Jacon  的這個個人作品展示頁使用了更加獨特的導航模式：嵌套環形可互動式導航欄，環形的每一段都會導向一個作品。原來導航還可以這樣做啊!

Moira Young

Moira Young  的網站採用了一套自然風的主題，導航設計則以優雅的輻射狀的閃光來呈現，當你滑鼠移到這些微光之上，導航內容便會呈現，漂亮而微妙。

Bancolombia

和許多之前的網站導航設計思路相近，漂亮的插畫和動態視覺元素共同構建起了它的導航欄。網站唯一與時代脫節的地方在於，它採用了Flash來實現這些功能，而非HTML5。

Nat-Ant

值得一提的是，使用極簡設計風其實也可以作出別出心裁的導航欄的。正如你所看到，網頁的著陸頁非常干凈，背景大量留白，幾個控制項散落在頁面上用作導航，不同尋常。

Love Carmen Rose

Love Carmen Rose 的網頁設計  也個性十足，精雕細琢的背景圖其實承載著它獨有的導航模式，雖然看起來不太顯眼，但是復雜的導航和背景圖也足夠它脫穎而出了，不是么?

Orillo

用戶打開 Orillo  網站的時候，能看到低調沉穩的背景上用簡約線條勾勒出來的控制中心。用戶可以藉助這個獨特的導航欄做很多事情，唯一可惜的是它僅能在桌面端瀏覽器上呈現，移動端頁面則使用的是另外一個相對簡單的版本。

OK Kid

OK Kid的網頁充分運用了視頻背景的特性來設計它們的基礎導航體系。設計團隊採用視覺優先的設計原則，最終結果也並沒有令人失望。

The  Colors of Motion

網頁採用運動的色彩來呈現經典的美國精神，帶你開始一段旅程。結合影片劇情，設計團隊展現了一個原創而吸引人的導航設計，雖然沒有任何標識，但是那些細細的條紋會帶你走完這個旅程

HelloNicolas

從你打開這個網頁的第一秒開始，頁面所展示的作品就會吸引住你的全部注意力。網站的視覺設計非常大膽，整體布局導航通過相對較寬的可交互區域來展現，每一塊完成不同的工作。

Grimouville

想不想通過Grimouville  開始一段短暫而難忘的旅程?打開這個網站就可以了。網站中那些有趣的互動元素能讓你在城市的大街小巷中實現這個夢想。

Leidgens Piscines

網站的著陸頁令人難以忘懷：壯觀的視頻背景和風格化明顯的導航欄，這些設計不僅讓你愉悅，還能更為高效地探索網站。雅緻的菱形導航欄中，每個區塊包含著不同的功能和相應的短片。

Soppo

基於柵格的導航系統配合可愛的圖片營造出網站的整體氛圍，純色和圖片的錯落排布，不同區塊中獨特的效果，會讓你記住這個網站的。

Visit Brazil

這是一個真正意義上的概念網站。通過有趣的交互，你可以在這個網站知道關於巴西這個國家許多有趣的故事。

Alexandru Nastase

網站的設計師巧妙的利用排版和簡約的外觀，呈現出了網站有趣的氛圍。密集而大膽的標題周圍，圍繞著相對較小的文字導航，塑造出獨特的形式感。

4、網頁設計，設計網頁的導航按鈕是用什麼軟體做的

如果是圖片按鈕的話，用PS軟體製作。如果是其他文字按鈕，可以去找下代碼。

5、網頁設計，導航菜單，我想實現一個很常見的效果

<style>
#div1{ background:url(img_1.gif) ; }
#div1:hover{ background:url(img_2.gif); }
</style>
<div id="div1">hello</div>
不需要js

6、網站建設導航欄的重要性

　導航的作用是必不可少的
一個性能超好的網站導航是讓一個網站從庸俗走向不凡的必經之路，在今天的社會中，千變萬化的網路系統中，許多網頁已經把網頁導航設計的也來也形式化，規則化，然而網頁導航的能力也並不是傳說或者虛擬，此刻就來分析一下這個道理。
一個不凡導航設計的重要性
存在一個管理學的概念就是「最佳實踐」就是把某一個東西或者某一樣技術達到極致，進行實踐，最大效果的減少出錯的問題，這樣也就是我們口中暢談的問題的最佳解決和處理方法。我們現在使用的網站的導航都是一個網站成功設計的典範，同時也是導航設計最佳的實驗，導航具有清晰的內容劃分和連接模式，可以從初始頁開始領著客戶進行一步一步的深入了解，是真正受歡迎和實用的一種設計。相對的是，如果你設計的導航系統不好，把這個操作和瀏覽的模式進行復雜化，那麼這樣是打不成目標的，因為用戶一旦無法最短時間里找到目標，必然會選擇離開。
一個良好的導航欄的菜單設計就像一個優秀的交警，他可以指明方向，並且行為簡單，方便用戶快速的達到目的，當然，這樣以來用戶第一件事情想要了解的就是他們的位置，這樣方便下一步或者撤回上一步，讓客戶的思路也很清晰，這也是為什麼在設計導航的時候讓用戶進行體驗的一個重要原因。現如今導航的設計已經和以前大不相同，其中也帶有了個人的創意，但是要挑選或者創造一款眾多人都喜歡的導航欄也是一件不容易的事情。不過科技在進步，導航欄也在改善，最完美的一款就是現在新出的可以用漢堡的菜單一樣吸收各種導航的元素，很方便一擊就開。
為了不讓客戶產生迷惑當然需要產生相同的因素，當你放入簡單的元素的時候，客戶就不會很復雜的操作他們想要的內容，所以，任何設計，務必保持簡單的因素，不要讓客戶花時間去尋找他們關心的內容，考慮如何才能讓他們快速的操作。這一點是必須要考慮的。
所以說一個正確的導航欄的設計基礎應該是簡單性和實用性，要幫客戶定位內容並且解決問題，自然也會有更多的客戶過來體驗，而且導航欄也要和你網站兼容，要快速的進行對數據的分析，慢慢進步，畢竟今天才是移動端的開始。
望採納，謝謝！

7、網頁設計導航是怎麼做的

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

<html xmlns="網址">

<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>

2、此時對應效果如圖：

3、接下來准備相關的導航按鈕圖片（可以事先利用PS製作好）。

4、然後將以下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>

5、在加入CSS代碼之間，網頁此時的效果如圖：

8、如何設計網頁導航欄標題

這是初學者可能會問的問題，其實這要具體情況具體分析的：比如如果內容非常多，就要考慮用「國字型」或拐角型;而如果內容不算太多而一些說明性的東西比較多，則可以考慮標題正文型;那幾種框架結構的一個共同特點就是瀏覽方便，速度快，但結構變化不靈活;而如果是一個企業網站想展示一下企業形象或個人主頁想展示個人風采，封面性是首選;Flash型更靈活一些，好的Flash大大豐富了網頁，但是它不能表達過多的文字信息。還沒有提到的就是變化型了，我只是想把這個留給各位朋友了，因為，只有不斷的變化才會提高，才會不斷豐富我們的網頁!

烈火網 www.liehuo.net 推薦閱讀蒼井空在微博為青海玉上周五(23日)，日本AV女優蒼井空在自己的微博宣布，擬發起為青海災民籌款的活...IPv4 地址枯竭的日子何時到來？五一放假安排,2010年勞動節放假三天百度聯盟峰會召開 三大舉措助力聯盟發韓國版獸獸照片下載地址,遭網友瘋狂追谷歌街景汽車肩負收集WiFi網路與MAC的關注地球日：共同珍惜資源倡導低碳生活中國電影著作權協會:網吧看電影收費網頁灰白:向玉樹地震遇難同胞默哀點擊彈出div圓角的遮罩層,可關閉可移動類似HAO123.COM的多個搜索引擎跳轉效果Tab選項卡效果,兼容IE、火狐、Chrome等網站技術分析報告之——開心網給Dedecms前台/後台添加來源網址功能極點五筆7.1 (x86/x64) 標准版/學習版 導航欄的位置

導航欄能讓我們在瀏覽時容易的到達不同的頁面，是網頁元素非常重要的部分，所以導航欄一定要清晰、醒目，一般來講，導航欄要在「第一屏」能顯示出來，但是有時第一屏可能會小於上面所說的435px，基於這點考慮，那種橫向放置的導航欄要優於縱向的導航欄考慮，原因很簡單：如果瀏覽者的第一屏很矮，橫向的仍能全部看到，而縱向的就很難說了，因為窗口的寬度一般是不會受瀏覽器設置影響的，而縱向的則不確定性要大的多。

網頁布局類型

網頁布局大致可分為「國」字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型，下面分別論述。

1. 「國」字型：也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯系方式、版權聲明等。這種結構是我們在網上見到的差不多是最多的一種結構類型。

2. 拐角型：這種結構與上一種其實只是形式上的區別，其實是很相近的，上面是標題及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。

3. 標題正文型：這種類型即最上面是標題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。

4. 左右框架型：這是一種左右為分別兩頁的框架結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標致，右面是正文。我們見到的大部分的大型論壇都是這種結構的，有一些企業網站也喜歡採用。這種類型結構非常清晰，一目瞭然。

5. 上下框架型：與上面類似，區別僅僅在於是一種上下分為兩頁的框架。

6. 綜合框架型：上頁兩種結構的結合，相對復雜的一種框架結構，較為常見的是類似於「拐角型」結構的，只是採用了框架結構。

7. 封面型：這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。

8. Flash型：其實這與封面型結構是類似的，只是這種類型採用了目前非常游戲行的Flash，與封面型不同的是，由於Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當，絕不差於傳統的多媒體。

9. 變化型：即上面幾種類型的結合與變化，比如本站在視覺上是很接近拐角型的，但所實現的功能的實質是那種上、左、右結構的綜合框架型。