導航:首頁 > 網站知識 > dw如何創建網站導航欄菜單
dw如何創建網站導航欄菜單
發布時間：2022-07-01 20:46:311. 怎麼在dreamweaver中加導航條
一個網站的不同頁面使用了同一導航條。通過統一導航條的方法，我們可以實現網站風格的統一，同時也方便了瀏覽者在不同頁面間的跳轉。用Dreamweaver 3可作出各種比較復雜的導航條。網頁上的導航條可由一個或幾個部分組成，每個部分均由各種圖像構成，可以鏈接到不同的網頁頁面。在Dreamweaver中每部分中最多可設四個狀態下的圖像。一開始是一個初始圖像，當滑鼠移動到導航條部位上時則顯示另一個圖像，還可以設置當滑鼠點擊後的初始圖像，以及滑鼠點擊後當滑鼠再次移動到這個部位上的圖像。一般地，每部位只設一到兩種狀態的圖像。因為圖像太多了，會影響網頁頁面的訪問、瀏覽的速度。
導航條製作方法：
移動游標到需要導航條的地方，單擊主菜單欄的「Insert\Navigation Bar」子命令，或直接單擊Objects面板上的圖標，彈出「Insert Navigation Bar」對話框(圖1)，此時我們可以進行各種設置來實現上述功能：
圖1
在「Element Name」項後的文本框填入這個部位的命名，也可以不填，這時Dreamweaver 3將自動給它命名。在Dreamweaver中每部分中最多可設四個狀態下的圖像：「Up Image」項是該部位的初始圖像，在其後文本框填入已准備好的圖像的地址，或點擊右邊Browse按鈕來選擇。每個部位可只設置Up Image項，其下的「Over Image」、「Down Image」和「Over While Down Image」三項可以不設置。其中，「Over Image」項是滑鼠移動到這個部位上時顯示的圖像(本例中選擇)；「Down Image」項是滑鼠點擊該部位後顯示的初始圖像；「Over While Down Image」項是滑鼠點擊後當滑鼠再次移動到這個部位上時顯示的圖像。注意：Element Name項和 Up Image項是必需的，所有的調用圖像都會在系統的提示下保存在Dreamweaver 3文件夾中，以便調用。
當然，還可給該部位設置超級鏈接：在下面的「When Clicked Go To URL」項後文本框填入鏈接到的文件的地址，或單擊Browse按鈕選擇，當滑鼠移動到這個部位上時，在狀態欄中可以看到鏈接到的地址。When Clicked Go To URL項後有一個下拉選框，這是設置超級鏈接的目標。
2. 用dreamweaver做二級導航菜單，用什麼方法好，怎麼做啊
一、打開Dreamweaver，點擊 文件-新建 菜單，創建一個HTML文件，輸入網站導航欄文字，並選中輸入的文字，在下面的屬性欄鏈接處加一個空鏈接：#。然後保存該網頁文件。
圖片分享：
二、點擊 窗口-行為 菜單，打開行為面板。
圖片分享：
三、選中第一步輸入的文字，點行為面板上的+號，在彈出的菜單中選-顯示彈出式菜單。
圖片分享：
四、在彈出的對話框中勾選 Don』t show me this message again(不要再次向我提示此信息)，再點 繼續。
圖片分享：
五、在下列對話框分別設置內容、外觀、高級、位置選項。在 內容 選項中，點+號可以添加菜單項，-號可以刪除菜單項，縮進項可以自動生成二級菜單。
圖片分享：
六、各項都設置好後，按F12，在瀏覽器中預覽網頁效果如下：
圖片分享：
此時你會發現和網頁同級的目錄多了兩個文件，分別是：arrows.gif、mm_menu.js。請勿修改、移動位置，這是彈出式菜單必須的圖片、JS文件。
圖片分享：
如需修改下拉菜單，可以選中文字，點擊行為面板的 顯示彈出式菜單 即可。
圖片分享：
如果下拉菜單下面有Flash，為了不影響下拉菜單的正常效果和層次，需要給Flash添加透明代碼： <param name="WMODE" value="transparent"> ，還需在embed標簽中加入代碼：wmode="transparent"，
3. 怎樣用dreamweaver製作網站下拉菜單
一、打開Dreamweaver，點擊 文件-新建 菜單，創建一個HTML文件，輸入網站導航欄文字，並選中輸入的文字，在下面的屬性欄鏈接處加一個空鏈接：#。然後保存該網頁文件。
如果下拉菜單下面有Flash，為了不影響下拉菜單的正常效果和層次，需要給Flash添加透明代碼： <param name="WMODE" value="transparent"> ，還需在embed標簽中加入代碼：wmode="transparent"，
4. 怎麼用dreamweaver製作導航欄
1.首先創建一個1x6的表格，參數為：border=0 cellspacing=3 cellpadding=0；
2.在這個表格的每個單元格內分別插入一個表格，寬度和高度設為100%；
3.建立一個CSS樣式.up和.down；代碼如下：
<style>
.up{
border:4 outset royalblue;color:yellow;background:blue;cursor:hand
}
.down{
border:4 inset royalblue;color:#33ff33;background:blue;cursor:hand
}
</style>
4.對插入的表格調用樣式和行為，代碼如下：
class=up onMouseDown="className='down'" onMouseUp="className='up'" onMouseOut="className='up'" onclick=window.open("button.htm","_blank") 。
5. 怎樣用dreamweaver製作導航欄下拉菜單
在一些企業或門戶網站的導航欄中，經常會看到下拉菜單，這樣會使用戶操作方便一些。其實，用Dreamweaver軟體就可以製作下拉菜單，只需要點幾下就出來了。而且良好地兼容IE、FF瀏覽器。以下是具體製作步驟： 一、打開Dreamweaver，點擊 文件-新建 菜單，創建一個HTML文件，輸入網站導航欄文字，並選中輸入的文字，在下面的屬性欄鏈接處加一個空鏈接：#。然後保存該網頁文件。 二、點擊 窗口-行為 菜單，打開行為面板。 三、選中第一步輸入的文字，點行為面板上的+號，在彈出的菜單中選-顯示彈出式菜單。 四、在彈出的對話框中勾選 Don』t show me this message again(不要再次向我提示此信息)，再點 繼續。 五、在下列對話框分別設置內容、外觀、高級、位置選項。在 內容 選項中，點+號可以添加菜單項，-號可以刪除菜單項，縮進項可以自動生成二級菜單。 六、各項都設置好後，按F12，在瀏覽器中預覽網頁效果如下： 此時你會發現和網頁同級的目錄多了兩個文件，分別是：arrows.gif、mm_menu.js。請勿修改、移動位置，這是彈出式菜單必須的圖片、JS文件。 如需修改下拉菜單，可以選中文字，點擊行為面板的 顯示彈出式菜單 即可。 如果下拉菜單下面有Flash，為了不影響下拉菜單的正常效果和層次，需要給Flash添加透明代碼： <param name="WMODE" value="transparent"> ，還需在embed標簽中加入代碼：wmode="transparent"，
6. 怎樣用Dreamweaver製作導航欄下拉菜單
DreamWeaver 是用標簽行為的功能來製作下拉菜單的。
7.在行為里添加onMouseOver（意思是滑鼠經過時）
同樣的方法 讓Layer2 隱藏
在行為里添加onMouseOut（意思是滑鼠離開時）
這樣就成功，可是會發現離開總菜單 下拉菜單也消失了，所以
最後還要選中Layer2 再做一次Layer2的onMouseOveronMouseOut 行為。
7. 如何使用Dreamweaver做一個網頁的導航欄
如果你不會編程，可以到很多js源碼站，下載、復制導航欄的源代碼，粘貼到網頁上使用。
也有不少網頁導航欄製作軟體，可以方便地做出需要的菜單，同樣可以復制到網頁上使用。
8. 用Dreamweaver 怎樣創建導航條以及導航條的下拉菜單
有兩種方式可以實現
一、純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>
<style type="text/css">
/*
#193B5F 欄目字體顏色
*/
*{margin:0; padding:0}
body{width:960px; margin:20px auto; font-size:14px;}
/*導航條*/
#nav {background-color:blue; color:#fff;height:25px;line-height:25px;text-align:center;list-style:none;}
#nav a{color:#fff;}
#nav li{width:75px;float:left;position:relative;z-index:1;}
#nav li .title{display:block;}
#nav li .title:hover{background-color:green;}
#nav li .submenu{width:75px;margin:0 auto;background:green;position:absolute;left:0;top:25px;display:none;}
#nav li .submenu dd{border-top:1px dotted #ddd;color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<!-- 有二級菜單的，給li加class="menu" 沒有的不用加 -->
<li class="menu">
<a href="#" class="title">國家政務</a>
<dl class="submenu">
<dd><a href="#">時政要聞</a></dd>
<dd><a href="#">遠程黨教</a></dd>
<dd><a href="#">村務管理</a></dd>
</dl>
</li>
<li>
<a href="#" class="title">網路服務</a>
</li>
<li class="menu">
<a href="#" class="title">信息交流</a>
<dl class="submenu">
<dd><a href="#">求購信息</a></dd>
<dd><a href="#">轉讓信息</a></dd>
</dl>
</li>
</div><!--end nav-->
<script type="text/javascript">
<!--
var nav = document.getElementById("nav").childNodes;
for (var i=0;i<nav.length;i++)
{
if (nav[i].className=="menu")
{
nav[i].onmouseover = function(){fnNav(this,"block")};
nav[i].onmouseout = function(){fnNav(this,"none")};
}
}
function fnNav(obj,flag)
{
obj.getElementsByTagName("dl")[0].style.display = flag;
}
//-->
</script>
</body>
</html>
二、CSS+JS實現，代碼如下
<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋體, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{
display: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#" _fcksaverl="#">產品介紹</a>
<ul>
<li><a href="#" _fcksaverl="#">產品一</a></li>
<li><a href="#" _fcksaverl="#">產品一</a></li>
</ul>
</li>
<li><a href="#" _fcksaverl="#">服務介紹</a>
<ul>
<li><a href="#" _fcksaverl="#">服務二</a></li>
<li><a href="#" _fcksaverl="#">服務二</a></li>
</ul>
</li>
<li><a href="#" _fcksaverl="#">成功案例</a>
<ul>
<li><a href="#" _fcksaverl="#">案例三</a></li>
</ul>
</li>
<li><a href="#" _fcksaverl="#">關於我們</a>
<ul>
<li><a href="#" _fcksaverl="#">我們四</a></li>
</ul>
</li>
<li><a href="#" _fcksaverl="#">在線演示</a>
<ul>
<li><a href="#" _fcksaverl="#">演示</a></li>
<li><a href="#" _fcksaverl="#">演示</a></li>
</ul>
</li>
<li><a href="#" _fcksaverl="#">聯系我們</a>
<ul>
<li><a href="#" _fcksaverl="#">聯系聯系聯系聯系聯系</a></li>
<li><a href="#" _fcksaverl="#">聯系聯系聯系</a></li>
</ul>
</li>
</ul>
</body>
</html>
9. dreamweaver怎麼創建導航條
導航條製作方法如下：
移動游標到需要導航條的地方，單擊主菜單欄的「Insert\Navigation Bar」子命令，或直接單擊Objects面板上的圖標，彈出「Insert Navigation Bar」對話框，此時我們可以進行各種設置來實現上述功能：
在「Element Name」項後的文本框填入這個部位的命名，也可以不填，這時Dreamweaver 3將自動給它命名。在Dreamweaver中每部分中最多可設四個狀態下的圖像：「Up Image」項是該部位的初始圖像，在其後文本框填入已准備好的圖像的地址，或點擊右邊Browse按鈕來選擇。每個部位可只設置Up Image項，其下的「Over Image」、「Down Image」和「Over While Down Image」三項可以不設置。其中，「Over Image」項是滑鼠移動到這個部位上時顯示的圖像(本例中選擇)；「Down Image」項是滑鼠點擊該部位後顯示的初始圖像；「Over While Down Image」項是滑鼠點擊後當滑鼠再次移動到這個部位上時顯示的圖像。注意：Element Name項和 Up Image項是必需的，所有的調用圖像都會在系統的提示下保存在Dreamweaver 3文件夾中，以便調用。 當然，還可給該部位設置超級鏈接：在下面的「When Clicked Go To URL」項後文本框填入鏈接到的文件的地址，或單擊Browse按鈕選擇，當滑鼠移動到這個部位上時，在狀態欄中可以看到鏈接到的地址。When Clicked Go To URL項後有一個下拉選框，這是設置超級鏈接的目標。
接著是「Options」項，若選中「Preload Images」選框，則瀏覽者瀏覽頁面時，所有圖像將在頁面下載的同時全部下載，整個頁面打開的速度會慢些，但圖像間轉換會沒有延遲，選中它。反之，不選Preload Images選框，則頁面下載的同時只下載初始圖像，其它圖像按順序下載，整個頁面打開的速度較快，但圖像間轉換會有延遲。若選中「Show 「Down Image」Initially」選框，則將Down Image設為初始圖像。此時，Over While Down Image項改為滑鼠移動到這個部位上時顯示的圖像，Up Image項改為滑鼠點擊該部位後顯示的初始圖像，Over image項改為滑鼠點擊後當滑鼠再次移動到這個部位上時顯示的圖像。
最下面是「 Insert」項，選框中有Horizontally(水平)和Vertically(垂直)兩個選項。選中Horizontally為導航條水平展開，選中Vertically 為導航條垂直展開。 Use Table 項，選中後，Dreamweaver自動生成HTML代碼將導航條各部位用表格隔開。
當一個部位設置完成後，要添加其他部位，可點擊對話框上方的「+」按鈕，可按上面的步驟進行新部位的設置。要刪去某一個部位，在「Nav Bar Elements」選框中先選中，再點擊對話框上方的「-」按鈕即可。
另外，使用設置導航條圖像中的高級功能,可改變文檔中基於當前按鈕下的其他的圖像。在默認下,單擊導航條中的元素時,所有導航條中元素都會自動地返回原來默認的狀態。若想設置被選中圖像的上浮或是下沉的不同效果時,可用導航條中的高級功能:在「Behaviors」面板中的「Actions」標簽頁,單擊其上面的「+」號按鈕,在彈出的菜單中選擇「Set Nav Bar Image」命令,彈出Set Nav Bar Image 對話框中,選擇「Advanced」標簽頁,對高級屬性進行設置。其中,若選擇「Over Image or over while Down Image」項,則當滑鼠劃過圖片時顯示其上面的圖片,有上浮或是下沉的效果,並在「Also Set Image」文本框中選擇要顯示的圖片,同時在其下面的「If Down To Image File」中選擇當滑鼠按下時要顯示的圖片路徑；若選擇「Down Image」項,則當瀏覽者單擊所選圖像後,顯示另外的圖片。
存檔後，按F12鍵測試所作導航條。
10. dreamweaver做導航條
1.點擊Dreamweaver，雙擊打開。
2.選擇文件-打開（快捷鍵Ctrl+O），打開網頁文本。
3.把滑鼠游標放在需要插入導航條的地方，選擇插入記錄-圖像對象-導航條命令。
4.此時會彈出插入導航條的對話框。
5.點擊「狀態圖像」後面的瀏覽，在彈出的對話框中選擇需要的圖片。
6.同上步一樣，插入滑鼠經過圖像和按下圖像。
7.點擊確定後出現下面效果。
8.保存文檔，按F12使用瀏覽器瀏覽效果。
與dw如何創建網站導航欄菜單相關的資料
- 同志網站在哪裡
- 網站有些什麼類型的
- 如何只搜索單一網站內容
- 網站怎麼切換倍速
- 律師事務所網站應該如何製作
- 網上購物網站怎麼查
- 如何讓瀏覽器打開一個網站
- 中考成績網站進不去怎麼辦
- 江蘇平台網站搭建怎麼聯系
- 哪個網站看出生五行准
- 如何取消寵物網站
- 魏都區網站優化效果如何
- 怎麼舉報網站亂推送
- 公司打不開一個網站怎麼辦
- 國外有哪些壁紙好看的網站
- 網站建設後如何增加網路流量
- 3xhh換成什麼網站
- 國付寶網站是什麼
- 柳州找房子用什麼網站
- 動漫圖哪些網站的沒有水印
- 哪些電視可以登錄網站
- 什麼網站有收費的
- 微信團隊登錄了網站如何退掉
- 平陽網站圖片設計要注意什麼
- 資本基金網站建設需要多少錢
- qq如何製作告白網站
- 網站知道賬號如何破解密碼
- 哪裡有BD電影藍光下載網站
- 網站公安備案有什麼要注意
- 歌曲原創網站哪裡找
- 閱文為什麼沒有其他網站流量
- 網站製作如何把控項目製作時間
- 網站如何分配ip
- 聯想筆記本怎麼更改網站許可權
- 柳林織夢怎麼建移動網站
- 如何訪問專線網站
- 空孕催乳劑官方網站怎麼買
- 長治網站設計怎麼樣
- 澳門新葡3280網站是多少
- 如何在百度對話框里顯示常用網站
- 網站建設一個團隊多少人
- 如何對一個網站進行創新創意