1、如何製作網頁首頁導航菜單顯示二級菜單
<!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>
.sever{ margin-top:4px;}
.sever_menu{ width:213px; background:#99ABB9;}
.sever_menu a{ display:block; }
.sever_menu img{ *margin-bottom:-2px;}
.help_menu,.help_menu_main{ line-height:25px; }
.help_menu{ height:25px; background:#4AC5E8; border-bottom:1px solid #99ABB9;text-indent:57px;}
.help_menu a{ background:url(../images/help_arr.jpg) no-repeat 43px center;}
#sever_left .help_menu:hover a{ color:#fff;}
.help_menu .hover{ background:url(../images/help_hover_arr.jpg) no-repeat 43px center; color:#FFFFFF;}
.help_menu_main ul{ text-indent:63px;}
.help_menu_main ul li{ border-bottom:1px solid #B3BFCB;}
.help_menu_main ul li a{ color:#fff;}
</style>
<script>
// JavaScript Document
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<div class="sever">
<div class="sever_menu L" id="sever_left">
<img src="images/sever_help.jpg" />
<div class="help_menu"><a id="help1" onclick="setTab('help',1,9)" class="hover">新手上路</a></div>
<div id="con_help_1" class="help_menu_main">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help2" onclick="setTab('help',2,9)">如何銷售</a></div>
<div id="con_help_2" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help3" onclick="setTab('help',3,9)">如何采購</a></div>
<div id="con_help_3" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help4" onclick="setTab('help',4,9)">交易安全</a></div>
<div id="con_help_4" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help5" onclick="setTab('help',5,9)">操作指南</a></div>
<div id="con_help_5" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help6" onclick="setTab('help',6,9)">商人通服務</a></div>
<div id="con_help_6" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help7" onclick="setTab('help',7,9)">商業資訊</a></div>
<div id="con_help_7" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help8" onclick="setTab('help',8,9)">展會幫助</a></div>
<div id="con_help_8" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
<div class="help_menu"><a id="help9" onclick="setTab('help',9,9)">廣告幫助</a></div>
<div id="con_help_9" class="help_menu_main" style="display:none">
<ul>
<li><a href="#">·注冊/登錄</a></li>
<li><a href="#">·發布信息</a></li>
<li><a href="#">·網上防騙</a></li>
<li><a href="#">·常見問題</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
這個拿去參考一下吧~~
2、DW怎麼製作網頁折疊菜單請教高手如果能手把手教最好了！
我來實現一下吧！
<div><a href="javascript:;" onclick="change('label1');return false;">關於我們</div>
<div id="label1"> //這里需要使用div來包含,屬於「關於我們」的內容，並定義一個id
<div>公司介紹</div>
<div>榮譽資質</div>
<div>分類管理</div>
</div>
<script>
function change(id){
var display = document.getElementById(id).style.display;
if(display=='none'){
document.getElementById(id).style.display = '';
} else {
document.getElementById(id).style.display = 'none';
}
}
</script>
下面「新聞中心」類推
3、網頁設計中的彈出菜單製作
打開"行為"面板,選"顯示彈出菜單"在內容里有個"+",新建一個,重復新建多個即可,其他選項是設置外觀和功能,自己看著辦.要選中觸發行為的文字或圖像再點行為面板.這樣就不是豎著排了吧
4、網頁設計：下拉菜單的十幾種表現形式
網頁設計或者應用UI網頁設計中經常會出現下拉菜單，主要是會將不常用的同類選項或者提醒放置其中，如何設計下拉菜單，網頁設計出圖片以及裁剪後的大小，然後後台再把這些做起來，這些作品或許能給你啟發。下面先看下這些作品的設計風格，我相信會對你們有大的啟發的，設計感實在是需要慢慢的積累創新的，時代進步不得不把我們帶的進步。具體內容可以參看百家號
5、設計一個網頁折疊菜單，如何設置它默認為關閉狀態？
在你想隱藏的折疊菜單外層的盒子加上這個CSS屬性：display：none；就好了
6、網頁樹形折疊菜單製作
JavaScript Code： function Ob(o){ var o=document.getElementById(o)?document.getElementById(o):o; return o; } function Hd(o) { Ob(o).style.display="none"; } function Sw(o) { Ob(o).style.display=""; } function ExCls(o,a,b,n){ var o=Ob(o); for(i=0;i<n;i++) {o=o.parentNode;} o.className=o.className==a?b:a; } function CNLTreeMenu(id,TagName0) { this.id=id; this.TagName0=TagName0==""?"li":TagName0; this.AllNodes = Ob(this.id).getElementsByTagName(TagName0); this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) { this.ClassName0=ClassName0; this.ClassName1=ClassName1; this.ClassName2=ClassName2; this.ImgUrl=ImgUrl || "css/s.gif"; this.ImgBlankA ="<img src=\"css/s.gif\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展開/折疊\" />"; this.ImgBlankB ="<img src=\"css/s.gif\" class=\"s\" />"; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:""; this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML; } } this.SetNodes = function (n) { var sClsName=n==0?this.ClassName0:this.ClassName1; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName; } } } CSS Code： .CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;} .CNLTreeMenu ul {padding:0;} .CNLTreeMenu li {list-style:none;padding:0;} .Closed ul {display:none;} .Child img.s {background:none;cursor:default;} #CNLTreeMenu1 ul {margin:0 0 0 17px;} #CNLTreeMenu1 img.s {width:20px;height:15px;} #CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;} #CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;} #CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;} #CNLTreeMenu2 ul {margin:0 0 0 17px;} #CNLTreeMenu2 img.s {width:17px;height:15px;} #CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;} #CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;} #CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;} #CNLTreeMenu3 ul {margin:0 0 0 17px;} #CNLTreeMenu3 img.s {width:34px;height:18px;} #CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;} html code: <p> <!--CNLTreeMenu Start:--> </p> <div class="CNLTreeMenu" id="CNLTreeMenu1"> <h4>CNL Tree Menu1</h4> <p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展開</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折疊</a></p> <ul> <li class="Opened"><a href=" http://www.iecn.net ">IECN.Net</a> <ul> <li><a href="#1">技術區</a> <ul> <li><a href="#">網頁技術</a> <ul> <li class="Child"><a href="#">JavaScript</a></li><!--Child Node--> <li class="Child"><a href="#">HTML/XHTML/CSS</a></li> <li class="Child"><a href="#">Ajax</a></li> <li class="Child"><a href="#">網頁製作工具</a></li> <li class="Child"><a href="#">設計/圖形</a></li> <li class="Child"><a href="#">Flash/多媒體</a></li> <li class="Child"><a href="#">VML/Web3D</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">Web編程</a> <ul> <li class="Child"><a href="#">Java</a></li><!--Child Node--> <li class="Child"><a href="#">.Net</a></li> <li class="Child"><a href="#">ASP/VBScript</a></li> <li class="Child"><a href="#">PHP</a></li> <li class="Child"><a href="#">Perl/Python</a></li> <li class="Child"><a href="#">Web綜合/開源</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">資料庫</a> <ul> <li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node--> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li> <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">伺服器</a> <ul> <li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node--> <li class="Child"><a href="#">Unix/Linux/Apache</a></li> <li class="Child"><a href="#">應用伺服器</a></li> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二級目錄</a> <ul> <li><a href="#">三級目錄</a> <ul> <li><a href="#">四級目錄</a> <ul> <li><a href="#">五級目錄</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n級目錄</a> <ul> <li class="Child"><a href="#">葉結點1</a></li><!--Child Node--> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二級目錄</a> <ul> <li><a href="#">三級目錄</a> <ul> <li><a href="#">四級目錄</a> <ul> <li><a href="#">五級目錄</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n級目錄</a> <ul> <li class="Child"><a href="#">葉結點1</a></li><!--Child Node--> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> </ul></li><!--Sub Node 1 --> </ul> </div><!-- CNLTreeMenu --> <!--CNLTreeMenu1 End!-->
希望採納
7、網頁設計:如何創建一個滾動菜單
首先打開dreamweaver8寫基本語法
<marquee>滾動文字 </marquee>
2.文字移動屬性的設置
（1）滾動方向屬性direction
可以設定文字滾動的方向，分別為向左（left）、向右（right）、向上（up）、向下（down），使滾動的文字具有更多的變化。
基本語法：
<marquee direction="value">滾動文字</marquee>
（2）滾動方式屬性behavior
通過這個屬性能夠設定不同方式的滾動文字效果。如滾動的循環往復、交替滾動、單次滾動等。
基本語法：
<marquee behavior="value">滾動文字</marquee>
（3）滾動循環屬性loop
通過這個屬性能夠讓文字滾動循環進行。
基本語法：
<marquee loop="次數">滾動文字</marquee>
（4）滾動速度屬性scrollamout
通過這個屬性能夠調整文字滾動的速度。
基本語法：
<marquee scrollamount="value">滾動文字</marquee>
（5）滾動延遲屬性scrolldelay
通過這個屬性，可以在每一次滾動的間隔產生一段時間的延遲。
基本語法：
<marquee scrolldelay="value">滾動文字</marquee>
3.外觀(Layout)設置
（1）滾動文字對齊方式align
基本語法：
<marquee align="對齊方ottom，對齊上沿、中間、下沿。
（2）滾動背景顏色屬性bgcolor
在滾動文字的後面，可以添加背式">滾動文字</marquee>
對方方式=top、middle、b景顏色。
基本語法：
<marquee bgcolor="color_value">滾動文字</marquee>
8、如何製作網頁多級菜單
是可以利用dreamweaver製作的，利用它的「層」+「行為」或者spry功能製作，不過比較麻煩，估計現在沒有人再去這樣製作。
如果你不會編寫程序的話，那麼可以利用專門的網頁菜單製作軟體製作，也可以下載網頁菜單源代碼，直接粘貼在網頁里就可以了。
dreamweaver也有這樣的網頁菜單製作插件吧，你也可以找找，製作相對來說比較簡單吧。