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

1、網頁製作-導航條背景圖片

<li class="title">Service</li>
<li class="back" style="background:url(添加你得漸變背景，是整個的背景。)">
<ul>
<li>Language Services</li>
<li>Market Research</li>

<li>Software Development</li>

<li>Corporate Training</li>

</ul>

</li>

2、網頁設計導航條

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

3、DW網頁導航條的製作。請大家教下！附圖

看不到你的圖...給按鈕做成a標簽的背景a{background:url(你要做背景的圖片路徑)； width:119px; height:60px; display:block;}然後定義a:hover{background:url(你要做背景的圖片路徑)；}需要疊加的效果的話就在hover的樣式裡面加上filter:alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;
打字不易，希望採納

4、怎樣製作網站導航條

網頁菜單導航製作助手——碩思魔法菜單。是一款無需了解DHTML和JavaScript代碼編程的導航工具，只需點擊滑鼠就可以製作具有專業水準的動態菜單和簡單專業的菜單導航。真正地體現了「簡單才是專業」。步驟/方法現在很多人有個人網站，公司的網站更是日新月異。一個友好的菜單導航，不僅能讓用戶快捷的訪問相關頁面，也能讓搜索引擎更快的抓取到我們網站。而製作網站時會遇到各種各樣的問題。比如：如何展示更多的內容，怎樣讓訪問者便捷地到達想要的頁面等等。網頁菜單導航，能很好地幫你解決這些問題！所以，網站的菜單導航製作便成為重中之重了。選擇一款很強大的菜單製作工具，讓我們不懂DHTML和JavaScript的小白，都可以用它輕松製作具有專業水準的動態菜單和導航條的工具也是大勢所趨。網頁菜單導航製作助手——碩思魔法菜單。是一款無需了解DHTML和JavaScript代碼編程的導航工具。碩思網頁魔法菜單可以生成多級菜單，其獨特的菜單懸浮和任意定位功能更是最大限度地節省了頁面空間，而絲毫不影響頁面布局。多種子菜單彈出效果使你的頁面化平庸為神奇！您可以在菜單項中插入生動的動畫圖片、設置背景圖、編輯文字以及定義邊框。生成的菜單還會根據瀏覽器窗口的大小，自動調整彈出菜單的位置。碩思網頁魔法菜單支持多款主流瀏覽器：IE、Netscape 和Opera。這些體貼的功能一定能讓您製作出非同凡響的菜單！魔法菜單還可以作為插件在FrontPage、DreamWeaver和碩思主頁編輯器中使用。製作好的網頁菜單可以根據用戶自己的需要自動生成相應的代碼。可以選擇生成搜索引擎友好代碼可以生成站點地圖，谷歌xml站點地圖或者發布js腳本代碼等。提供了很大的選擇空間，可以滿足大部分網頁菜單製作及導航條製作的要求。碩思魔法菜單支持多種編碼格式，我們可以根據我們所使用的編碼選擇一種合適的編碼格式，同時還支持任意類型文檔，並且支持UTF-8字元編碼。提供多種動態菜單模板樣式，可以根據自己所要創建的菜單項的需要，編輯菜單上的文字、設置背景圖、式樣以及定義邊框等。操作簡單，只要點擊滑鼠就可以創建出屬於你的個性化的、專業的菜單項。更多精彩電腦信息，請登錄:中國高速網-IT頻道。

5、如何用PPT製作網站導航欄

PPT教程一、首先畫一個矩形框，設置其大小為：高6.2厘米，寬5.2厘米。
PPT教程二、再畫一個矩形框，設置其大小為：高6厘米，寬5厘米。
PPT教程三、把它們的頂邊、左邊重合在一起，再進行組合，這樣兩個對象就變成一個對象。
具體步驟如下：把小一點的矩形框放在大的矩形框上面，直接拖動小的到大的上面即可。或者採用如下辦法：設置大的矩形框的位置為：水平：1厘米，垂直：2厘米，小的也是同樣的位置，這樣它們就重合。
選中大的矩形框(下面的那個)，按住Shift鍵不放開，再單擊小的矩形框，然後右擊->組合
PPT教程四、再畫一個矩形框，高：1.2厘米，寬：5.8厘米，位置：水平：0.65厘米，垂直：0.8厘米。
右擊該矩形框，選擇「添加文字」，輸入「菜單」兩字。
PPT教程五、添加菜單項
1、再畫一個矩形框，大小：高：1.2，寬：5，位置：水平：1，垂直：2，添加文字為「設計思維」
2、重復1，改位置為：水平：1，垂直：3.2，添加文字「色彩設計」。
3、再畫三個同樣的矩形框，只是按照上面步驟更改位置和文本，不再鰲述。
PPT教程六、設置進入動畫
右擊選中剛剛創建的對象，選擇「自定義動畫」，出現「自定義動畫」的任務窗格(只有PPT 2003以上的版本才有，2000版以下的可以休息了，不支持啊)，選擇組合框(兩個大的矩形框，已經組合在一起成為一個對象)，單擊「添加效果」->「進入」->「其它效果」，選擇「切入」，確定返回。更改切入方向的為「自頂部」(只要在任務窗格中單擊「方向」的下拉箭頭進行選擇即可)。
設置觸發器，在任務窗格下方出現第一個動畫對象，單擊它(選中)，然後在它的右邊單擊下拉箭頭，選擇「計時」，出現一個對話框。單擊「觸發器」的按鈕，選擇下面的一個「單選按鈕」，再單擊它右邊的下拉箭頭選擇「矩形框5：菜單」，確定返回即可。
一個組合框的觸發器下拉動畫完成了。
下面進行其它的對象觸發器下拉動畫設置：
選中「設計思維」矩形框，按照上面的步驟進行重復的設置，只修改如下部分：
在設置完成後，「設計思維」的動畫是「單擊」才能進行的，因此，需要修改。在任務窗格中選中「設計思維」動畫，然後單擊它右邊的下拉箭頭，選擇「從上一項之後開始」命令(或者直接單擊任務窗格上部的「開始」下拉箭頭，選擇「之後」，下同)。
上面完成了「設計思維」的下拉動畫設置
再選擇「色彩設計」矩形框，添加下拉動畫，其設置與「設計思維」相同，但是要改「單擊」為「之前」，其含義是：讓「設計思維」與「色彩設計」的動畫同時進行。
後面的菜單項與「色彩設計」完全相同。
PPT教程七、設置退出動畫
其設置過程與六基本相同，
首先選擇「組合框」，單擊「添加效果」->選擇「退出」命令(注意，六是選擇「進入」，這里是選擇「退出」)，然後選擇「退出動畫」中的「切出」，設置其觸發器為「矩形框5：菜單」，也就是和上面的相同。動畫方向為「到頂部」，開始為「單擊」，再選擇「設計思維」矩形框，添加「退出」動畫效果，觸發器還是「矩形框5：菜單」，把「單擊」改為「之後」，而其它的菜單項都設置為「之前」，設置方法同六。
PPT教程八、添加多張幻燈片
按下Ctrl + M 4次，添加4張幻燈片，在每一張上添加適當的文字。
選擇剛剛弄成包含有的菜單幻燈片(也就是第一張)，選中「設計思維」矩形框對象，單擊「幻燈片放映」，選擇「動作設置」命令，超鏈接到第一張幻燈片，同理，其它每一個菜單對象都超連接到對應的幻燈片上。
然後選中第一張做好動畫菜單的所有對象，復制粘貼到所有的幻燈片上，至此大功告成。

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

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

7、網頁中的導航條怎樣簡單的製作出來？？

不麻煩啊。。。。css文本導航條，你多去學學就很簡單啊。。。你加我qq，我傳個給你，這個裡面有很多精美的導航。。。 //css代碼 body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } /*- Menu Tabs 1--------------------------- */ #tabs1 { float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url("images/tableft1.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url("images/tabright1.gif") no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } //圖片 //html代碼 <h2>Tab Menu 1</h2> <div id="tabs1"> <ul> <li><a href="#" title="Link 1"><span>Link 1</span></a></li> <li><a href="#" title="Link 2"><span>Link 2</span></a></li> <li><a href="#" title="Link 3"><span>Link 3</span></a></li> <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li> <li><a href="#" title="Link 5"><span>Link 5</span></a></li> <li><a href="#" title="Link 6"><span>Link 6</span></a></li> <li><a href="#" title="Link 7"><span>Link 7</span></a></li> </ul> </div> <br /><br />
記得採納啊

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

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

導航:首頁 > 萬維百科 > 網頁設計導航條製作教程

網頁設計導航條製作教程

與網頁設計導航條製作教程相關的知識