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

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

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

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、網頁導航欄的設計方式有哪些

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

4、個人網頁設計導航上面可以寫些什麼呢

基本的一些導航要有，比如首頁、關於我、聯系我們等，其它的元素根據自己的需要加上，一般的個人站的導航為：首頁、個人介紹、相冊、日誌、聯系我們，具體可參考QQ空間和一些門戶網站的博客

5、網頁設計導航條

下面的代碼，你去看看，不好用再說。
<!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>

6、網頁設計應該如何布局

網頁布局類型

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

「國」字型:也可以稱為「同」字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些兩小條內

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

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

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

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

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

封面型:這種類型基本上是出現在一些網站的首頁，大部分為一些精美的平面設計結合一些小的動畫，放上幾個簡單的鏈接或者僅是一個「進入」的鏈接甚至直接在

首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現在企業網站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。

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

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

7、網頁設計淘寶裝修里浮動導航是怎麼做的？

具體步驟：

1，進入裝修頁面。
2，點擊導航處的編輯，進行到導航編輯里。
3，按一下添加，就會彈出一寶貝列表，打上勾就表示選中了。
4，點擊頁面，這里可以製作新的頁面，比如要搞活動什麼的就可以單獨做一個頁面出來。
5，自定義鏈接，就是新建的頁面要連接的寶貝地址。
6，點擊確定，所有的設置就完成了。
7，點擊發布，所有設置好的內容都在首頁導航條上出現了。

8、網頁設計的左邊導航器要怎麼做哈？？？

如果你是用表格的話，在左邊插入一列表格，在裡面添加你要的導航，如果是div的話，直接加個div，屬性設一下就行了。最好是，在photoshop ,或fr裡面先設計出草圖。

導航:首頁 > 萬維百科 > 網頁製作怎麼設計導航

網頁製作怎麼設計導航

與網頁製作怎麼設計導航相關的知識