網頁設計中的折疊用什麼代碼_Dreamweaver中折疊代碼是怎麼用的

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

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

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

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

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

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

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

<!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默認保存。

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

4、求一個後台左側菜單製作代碼，用Jquery做的折疊展開效果.實際工作中一般都是用JQUEY嗎？

可以告訴你思路，如果有3個菜單，就用3個div，最外層套一個大div來固定，點擊展開實際就專是改變某個或者兩屬個div的高就行了，前提是定位方式做好，不要絕對定位，難控制，用jquery響應點擊事件,，用jquery的animate函數製作展開動畫效果。思路加技術解決問題，我電腦剛重裝了沒有裝dreamweaver沒法給你做了，jquery入門很快的

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

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

6、Dreamweaver中折疊代碼是怎麼用的

您可以折疊和擴展代碼片斷，網頁設計中這樣無須使用滾動條即可查看文檔的不同部分。例如，若要查看應用於頁面下方較遠處的div標簽的head標簽中的所有CSS規則，您可以折疊head標簽和div標簽之間的所有內容，這樣就可以同時看到兩部分代碼。盡管可以通過在「設計」視圖或「代碼」視圖中來選擇代碼片斷，但只能在「代碼」視圖中折疊代碼。
注:依據Dreamweaver模板創建的文件將以完全展開的形式顯示所有代碼，即使模板文件(.dwt)包含折疊的代碼片斷也是如此。
折疊和展開代碼片斷
當您選擇了代碼後，將會在所選代碼的旁邊顯示一組折疊按鈕(在Windows中為減號;在Macintosh中為垂直三角形)。單擊這些按鈕可折疊和展開所選代碼。折疊了代碼後，折疊按鈕將變為展開按鈕(在Windows中為加號按鈕;在Macintosh中為水平三角形)。
有時，不會准確折疊您所選的代碼片斷。Dreamweaver使用「智能折疊」來折疊最常用和視覺效果很好的選定內容。例如，如果您選擇了一個縮進標簽並且選擇了該標簽之前的縮進空格，則Dreamweaver將不會折疊縮進的空格，因為大多數用戶希望保留縮進。若要禁用智能折疊，並強制Dreamweaver准確折疊選定的內容，您可在折疊代碼之前按住Ctrl。
此外，如果片斷中包含錯誤或特定瀏覽器不支持的代碼，則會在折疊的代碼片斷上放置一個警告圖標。
您也可以通過在按住Alt(Windows)或Option(Macintosh)的同時單擊其中一個折疊按鈕或單擊「編碼」工具欄中的「折疊選定內容」按鈕折疊該代碼。
選擇一些代碼。
選擇「編輯」>「代碼折疊」並選擇任一選項。
選擇折疊的代碼片斷
在「代碼」視圖中單擊折疊代碼片斷。
注:當您在「設計」視圖中選定的內容是折疊代碼片斷的一部分時，該片斷將會在「代碼」視圖中自動展開。當您在「設計」視圖中選定的內容是一個完整的代碼片斷時，「代碼」視圖中的片斷將保持折疊狀態。
本文TAG關鍵詞:
網頁設計Dreamweaver折疊代碼網頁設計內容首頁設計經驗什麼是偽靜態網頁設計注意事項Dreamweaver中如何打開現有網頁文檔Dreamweaver查找替換的技巧哪些事情HTML5無法實現Dreamweaver的操作訣竅2011年網頁設計流行趨勢Dreamweaver
CS3選擇性粘貼的妙用網站設計的小技巧匯總
(責任編輯:鄭州室內設計培訓，鄭州網頁設計培訓，鄭州平面設計培訓)

7、求html格式的折疊文檔的製作方法（類似於軟體教程在線文檔）？

這個可以使制用tree.js這個庫來實現的
1、你可以使用tree.jsS實現左側可以折疊的目錄結構，點擊左側展示右側的內容就可以了，具體可以查看tree.js文檔
2、另外可以使用一些現成的靜態模板來生成文檔，比如vue官網使用的文檔模板vue-press等等

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

折疊一般用hide()

引用jQuery

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

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

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> 

希望採納

10、如何讓dreamweaver設計的html代碼折疊

cs6 版本選擇要折疊的部分左邊會出現減號點擊減號就好了

cc2015版本滑鼠移到行號和代碼中間的空白處會出現灰色小三角點擊小三角

導航:首頁 > 萬維百科 > 網頁設計中的折疊用什麼代碼

網頁設計中的折疊用什麼代碼

與網頁設計中的折疊用什麼代碼相關的知識