網頁設計折疊式面板_網頁設計怎麼將一部分內容折疊起來

1、dreamweaver怎麼製作網頁折疊菜單效果通過層的顯示和隱藏來實現

你好，dw做網頁導航影藏和顯示效果的話，有兩種方式：
第一：找開源的代碼
第二：自己用js或者jq寫一個。

2、請教一個網頁製作問題：怎樣製作折疊頁面

首先，你要利用布局表格和布局單元格製作一個樣式，然後每做一個付頁都以這個樣式為基礎就行了。比如左側和上部為台頭和導航，中間部分為展示區域，然後每個付頁都做成這樣，就可以了。

3、dreamweaver網頁設計中使用spry可折疊面板時，怎樣設計面板的更漂亮

樣式只能做出樣子出來，真正把功能實現你還需要運用到JS

4、網頁樹形折疊菜單製作

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>  </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> <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> <li><a href="#">Web編程</a> <ul> <li class="Child"><a href="#">Java</a></li> <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> <li><a href="#">資料庫</a> <ul> <li class="Child"><a href="#">Access/SQLServer</a></li> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li> <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li> </ul></li> <li><a href="#">伺服器</a> <ul> <li class="Child"><a href="#">Windows/IIS</a></li> <li class="Child"><a href="#">Unix/Linux/Apache</a></li> <li class="Child"><a href="#">應用伺服器</a></li> </ul></li> </ul></li> <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> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> <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> <li class="Child"><a href="#">葉結點2</a></li> <li class="Child"><a href="#">葉結點3</a></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul></li> </ul> </div> 

希望採納

5、如何在DW中製作左右折疊的網頁

這個不難我可以教復你的制

你要會使用ASP 語言不用特別難的簡單的就行，左邊的折疊 ×（樹形）是添加行為實現的，這個在設計面板里是可以實現的，而想在右邊的表格里顯示左邊菜單里的詳細內容，要建立資料庫。

左邊的菜單是通過調用資料庫里的數據顯示在右邊的表格里的，?id=

6、設計一個網頁折疊菜單，如何設置它默認為關閉狀態？

在你想隱藏的折疊菜單外層的盒子加上這個CSS屬性：display：none；就好了

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

下面「新聞中心」類推

8、關於網頁製作....折疊,交我怎麼做

<!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=gb2312" />
<title>折疊彩單示範效果</title>
</head>

<body><SCRIPT language=JavaScript>
function actMenu(menuid)
{
try
{
var menuidobj = eval(menuid)
if(menuidobj.style.display=='none')
{
try
{
menu1.style.display='none';
menu2.style.display='none';
}
catch(e)
{}

menuidobj.style.display='';
Set(menuid);
menucookie = menuid;
}
else
{
menuidobj.style.display='none';
Set("none");
}
}
catch(e)
{}
}
</SCRIPT>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#F7F7F7">· <A href="javascript:actMenu('menu1')">折疊彩單1</A></td>
</tr>
<tr id=menu1 style="DISPLAY: none">
<td bgcolor="#FFFFFF"><TABLE cellSpacing=0 cellPadding=0 width="95%" align=center
border=0>
<TBODY>
<TR>
<TD class=y-blue-an colSpan=3> <DIV align=left><center>
要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容要顯示的內容<BR>
</DIV></TD>
</TR>
<TR>
<TD bgColor=#ffffff colSpan=3><IMG height=1 src=""
width=1 border=0></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td bgcolor="#000000">· <A href="javascript:actMenu('menu2')">折疊菜單2</A></td>
</tr>
<tr id=menu2 style="DISPLAY: none">
<td bgcolor="#FFFFFF"><TABLE cellSpacing=0 cellPadding=0 width="95%" align=center
border=0>
<TBODY>
<TR>
<TD height=29> <DIV align=left>
<style type="text/css">
#sTitle {
background-color:#f7f7f7;
border:1px solid #cccccc;
width:800px; /*這里設置點擊後顯示的總寬度*/
margin-left:auto;
margin-right:auto;
padding:10px 4px;
font-size:9pt;
font-family: Verdana, Arial, sans-serif;
}
#sTitle ul{
margin:0 0 0 15px;
padding:0;
}
#sTitle li{
text-align: left;
width:100%;
white-space:nowrap;
overflow : hidden;
text-overflow : ellipsis ;
}
</style>
<div id="sTitle">
<ul>
<li><a href="#">超級鏈接</a></li>
<li><a href="#">超級鏈接</a></li>
<li><a href="#">超級鏈接</a></li>
<li><a href="#">超級鏈接</a></li>
</ul>
</div>
</DIV></TD>
</TR>
<TR>
<TD bgColor=#ffffff><IMG height=1 src="" width=1
border=0></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</body>
</html>

本來昨天就看到你的問題了，不過當時困了沒來得及回答。

把以上代碼拷貝到DW代碼區域中。按F12默認保存。

這段代碼有什麼看不懂的你再問我好了。

9、在frontpage製作網頁中，如何插入一個可折疊的嵌套項目符號？？

需要用到JAVASCRIPT腳本

10、網頁設計怎麼將一部分內容折疊起來

折疊一般用hide()

引用jQuery

然後用 $("#div1").hide() 就能把id為div1的區域隱藏起來了。保留title的顯示，就能做到你說的折疊

導航:首頁 > 萬維百科 > 網頁設計折疊式面板

網頁設計折疊式面板

與網頁設計折疊式面板相關的知識