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

1、怎麼製作自己網站的導航頁面

你得有那個軟體，還要去互聯網交錢

2、如何製作網頁中的位置導航

這個做起來不能但說起來復雜，基本原理就是根據獲取的ID賦值給當前位置的變數。比如說內有容ab兩個頁面a.asp b.asp,從a頁面點擊鏈接b.asp?id=1跳轉到b頁面，b頁面就根據獲取的id調用資料庫裡面的分類名稱，賦值到當前位置的變數里，這樣隨著ID的不同，當前位置就會發生變化。還有別的方式，比如靜態的變數，不需要調用資料庫，而是在頁面定義的，也可以

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

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

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

這是初學者可能會問的問題，其實這要具體情況具體分析的：比如如果內容非常多，就要考慮用「國字型」或拐角型;而如果內容不算太多而一些說明性的東西比較多，則可以考慮標題正文型;那幾種框架結構的一個共同特點就是瀏覽方便，速度快，但結構變化不靈活;而如果是一個企業網站想展示一下企業形象或個人主頁想展示個人風采，封面性是首選;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. 變化型：即上面幾種類型的結合與變化，比如本站在視覺上是很接近拐角型的，但所實現的功能的實質是那種上、左、右結構的綜合框架型。

5、網頁導航條怎麼做?

可以用div+css做的

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(/uploadfile/200806/17/66191858519.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(/uploadfile/200806/17/66191858519.gif) left -42px; color:#ffffff;}
#nav li a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/index.asp">主頁</a></li>
<li><a id="current" href="/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="/Sort/List_5.html">常用代碼</a></li>
<li><a href="/Sort/List_6.html">水晶圖標</a></li>
<li><a href="/Sort/List_7.html">幻燈圖片</a></li>
<li><a href="/Sort/List_10.html">軟體下載</a></li>
<li><a href="/css2/">CSS2.0實用手冊</a></li>
</ul>
</body>
</html>
文章出處：標准之路(http://www.aa25.cn/div_css/289.shtml)

6、html中製作一個網頁導航，怎麼弄

用表格做！看你的抄導航是橫排的還是豎排的。橫排的就建一個一行多列的表格，豎排的就建一個一列多行的表格。把每一個鏈接放在各個單元格中。最後把這個表格保存為一個HTML文件，在需要導航的頁面上include這個文件在你指定的位置就OK了。這樣的好處是你只要做一次導航文件就可以在所有你想要用！的地方引用。

7、求網頁製作導航欄的代碼或方法

css代碼如下：---------------------
#box_topbar {
/*width: 980px;*/
width:100%;height:135px;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
width: 100%;height: 105px;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; /* position fixed for IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");background:#1a1a1a;
color:#fff;

}
html代碼如下------------------------------
<div id="box_topbar">
<div id="topNav">
</div></div>

做網頁還是用Dreamweaver更方便一些的

8、網頁製作導航欄和分類欄怎麼在子頁面也共用呢

首先將導航欄或分類欄目製作成一個獨立的文件，這個文件需要根據你使用不同的網頁編程語言來進行不同的命名，比如.html .asp .php .jsp;再將這文件放置到需要調用的地方即可：
HTML靜態網頁調用：
<include file="header.htm" />
ASP網頁調用：

PHP網頁調用：
<?php include 'header.php';?>

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

其他頁面大致相同

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

網頁設計導航頁

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