各網頁的設計導航_網頁設計導航是怎麼做的

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

其他頁面大致相同

2、建設網站中的導航欄在設計時有哪些常見的樣式？

分享幾個常見的導航設計：
1、滑出導航
滑出式導航是現在很流行的一種，當用戶打開頁面時，第一眼看到的是主要的內容而非菜單，給用戶更好的第一印象。響應式全屏滑出導航也可以給人愉悅的體驗。
2、全屏導航
全屏導航設計對內容有強調作用，用戶可以更加便捷地切換到不同的頁面，讓內容成為更加觸手可及的東西。如果設計的夠合理，用戶會在無意識間充分運用起它的導航功能。
3、單頁滾動導航
對於不含有大量內容的網站而言，單頁式的導航的效果非常不錯。這樣的網站只需要簡單的向下滾動操作，內容就會持續不斷地到你的眼前。
4、垂直導航
垂直導航最流行的有兩種排版方式，一種是隱藏式的導航菜單，需要的時候點擊顯示。另外一種是固定的側邊欄來展示菜單。它為網站設計提供了一種新的視覺體驗。
導航如何使用，還是要結合你的項目的具體特徵來決定的。

3、網站導航的設計有哪些特點

你好、網站導航是影響用戶體驗的重要因素，只有清晰專業的設計才會給用戶帶來耳目一新的感覺，從而提升公司的形象，故而在網站建設中，設計師要重視導航的設計。以下是設計網站導航的幾個特點。
1、清晰性
清晰性是網站導航設計的首要目標，導航起著引導用戶瀏覽信息的重要作用，而導航設計的清晰與否直接影響了網站信息架構以及用戶體驗。導航的清晰不僅體現在導航按鈕的明朗設計上，還要體現出主導航與副導航之間清晰明了層次性。
2、麵包屑導航
麵包屑導航是一種線性的導航方式，通過搭建極具層次的網站架構，讓用戶在訪問網站時迅速獲取當前頁面在網站中的位置，通過提供各個層級的快速入口，方便用戶操作。需要注意的是，並不是所有的網站都適用麵包屑導航，對於一些層級較深骨架清晰的網站，麵包屑導航不失為一種極佳的選擇。
3、關鍵詞
導航系統中的鏈接通常是網站獲得內部鏈接的最後主要來源，在導航欄目設計中，盡量使用目標關鍵詞，並對重要欄目添加目錄式的鏈接，以提高網站關鍵詞的權重。需要注意點是這雖然是優化網站的好辦法，但在導航設計中要注意關鍵詞的密度。
如果你有其它的疑問可以繼續追問，如果覺得有幫助，請採納，謝謝！

4、網站導航設計該具備哪些功能

1. 導航與內容要有明顯的區別。導航的目錄或主題種類必須清晰，不要讓用戶感到困惑，如果有需要突出的區域，則應該與一般網頁在視覺上有所區別。
2. 導航的鏈接必須全是有效鏈接。無論是一般導航還是有下拉菜單的導航，裡面的所有文字都應該是有效的鏈接。
3. 准確的導航文字描述。用戶在點擊導航鏈接前對他們所找的東西有一個大概的了解，鏈接上的文字必須能准確描述鏈接所到達的頁面內容。
4. 搜索導航結果。搜索的結果一定不要出現無法找到的結果，因為這是很讓用戶失望的，如果無法精確找出結果，搜索功能應該實現對錯字、類似產品或相關產品給出一個相近的模糊結果。

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

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

6、如何設計網站導航系統？

導航模式

網站的導航如何設計，在設計網站導航時首先應該明確用戶的瀏覽習慣，根據用戶的瀏覽習慣，首先會先大概地掃視一遍頁面，其次則會開始尋找導航欄，快速從導航欄上找到主要信息，引導用戶尋找網站對他有用的信息。一般來說左邊的權重要比右邊的權重要高一些。

網站的導航信息應該明確，，設計一個有魅力的導航還能留住用戶瀏覽更多的內容信息，帶給用戶良好的體驗。在網站導航設計上應該主要關注一下幾點：導航的模式常見的導航模式有很多，例如頂部水平橫欄式，垂直導航欄，側邊固定式，滑出或者彈出窗口導航等，通常網站是根據所要展示的內容要點來選擇不同的導航。如果網站的內容較少，在網站導航上可以選取水平式導航，這樣既可以重點內容而且簡單清晰，網站內容較多的時候可以選擇抽屜式的導航，用戶在瀏覽網站時各種信息都很明確。如果網站的顯示頁過長，比較試用的是垂直式導航，方便用戶在瀏覽內容時導航信息始終保持在一個位置可以被快速找到。

導航內容

網站的導航應該是對整個網站想要展示的信息總結，導航的信息要與詳細頁面符合，標題的總結要精簡，注意網站小內容最好不要以導航的總標題形式出現，可通過細分的下拉菜單，或者以更多形式的小菜單欄里出現。

導航細節

在導航設計時可以設置一個「回到頂部」的標志，以便用戶快速到達頭部的導航位置。這樣對於網站內容較多用戶下滾的內容過長時就可以快速的回到頂部了。

導航創意

我們都喜歡新的東西，在看慣了千篇一律的導航形式如果能給導航加點創意，那麼肯定會非常吸引人眼球。

網站的導航在網站設計中有著舉足輕重的地位，好的網站導航是成功的一半，所以在網站的導航設置上更加註意。

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

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

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

8、網頁設計導航條

下面的代碼，你去看看，不好用再說。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">

</style>
</head>

<body>
<div id="navigation">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">產品展示</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">聯系電話</a>
<div>
<ul>
<li><a href="#">產品1一</a></li>
<li><a href="#">產品2一</a></li>
<li><a href="#">產品3一</a></li>
<li><a href="#">產品4一</a></li>
<li><a href="#">產品5一</a></li>
<li><a href="#">產品6一</a></li>
</ul>
</div>
</li>
<li><a href="#">公司介紹</a></li>
</ul>
</div>

</body>
</html>

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

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

<head>

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

</head>

<body>

</ul>

</body>

</html>

2、此時對應效果如圖：

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

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

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代碼之間，網頁此時的效果如圖：

導航:首頁 > 萬維百科 > 各網頁的設計導航

各網頁的設計導航

與各網頁的設計導航相關的知識