網(wǎng)頁(yè)折疊菜單的DW制作教程(轉(zhuǎn)載)

發(fā)布時(shí)間：2012/2/14 11:40:26 作者：鄭州浩方網(wǎng)絡(luò) 來(lái)源：鄭州浩方網(wǎng)絡(luò) 瀏覽量：

相信有microsoft的網(wǎng)站？(如下圖)的朋友，都應(yīng)該對(duì)這個(gè)站上面那條折疊式菜單的導(dǎo)航欄感到贊嘆吧？（“呵呵，還是這個(gè)強(qiáng)。”“啊，雞蛋怎么會(huì)飛呀？！”）你想過(guò)你也能夠做出這樣的效果嗎？來(lái)吧，不用羨慕了，心動(dòng)不如行動(dòng)！網(wǎng)站建設(shè)技巧--

折疊式菜單實(shí)際上是通過(guò)層的顯示和隱藏，來(lái)達(dá)到這種效果的�，F(xiàn)在就鄭州網(wǎng)絡(luò)公司中的浩方(我們很普通,但很努力)來(lái)給大家說(shuō)說(shuō)如何制作吧。follow me!先打開(kāi)dreamweaver（dreamweaver對(duì)層的支持很好的，也是做網(wǎng)頁(yè)的必備工具）。

　　第一步：先插入一個(gè)一行、兩列的表格，方法：?jiǎn)螕舨藛紊系摹安迦搿保╥nsert），再選取“表格”(table)，在“行”（row）中輸入1，在列（columns）中輸入2，在單擊“確定”。（如圖二）為了美觀，在表格的屬性欄中，把寬和高分別設(shè)為200px和30px，并且把表格的邊框顏色全部設(shè)為#ffffff，然后分別點(diǎn)選兩個(gè)單元格，在屬性欄中將其邊框顏色設(shè)為#6699ff。在兩個(gè)單元格內(nèi)分別輸入“資料教程”和“相關(guān)軟件”。并在單元格屬性欄中設(shè)為中間對(duì)齊（順便說(shuō)一句：在dreamweaver中不但可以設(shè)定表格水平對(duì)齊方式，而且可以設(shè)定垂直位置對(duì)齊方式，在frontpage就只能自己去寫(xiě)代碼了，這也是我放棄frontpage使用dreamweaver的原因之一！www.cnbiuapp.com 這也是我們的心聲）

　　第二步，在“資料教程”單元格內(nèi)插入一個(gè)層。方法：?jiǎn)螕舨藛紊系摹安迦搿?insert),再選取“層”(layer)。這時(shí)，在單元格中便會(huì)出現(xiàn)一個(gè)層。這時(shí)我們并不滿(mǎn)意層的位置，所以就來(lái)移動(dòng)它。層的移動(dòng)是非常容易的，選取層，然后按鍵盤(pán)上的箭頭鍵就可以移動(dòng)了，而且不受任何限制，呵呵，簡(jiǎn)單吧。同樣，我們?yōu)榱嗣烙^也可以在層的屬性欄中設(shè)定它的大小，把寬和高分別設(shè)為100px和90px。

　　第三步：在層中插入一個(gè)三行、一列的表格，方法同第一步。并把寬和高分別設(shè)為100px和90px,以填滿(mǎn)這個(gè)層。再把邊框顏色做如第一步的設(shè)置。在三個(gè)單元格中輸入“dreamweaver”、“frontpage”和“hotdog”。并在屬性欄中設(shè)為中間對(duì)齊。

　　第四步：最關(guān)鍵的一步來(lái)了！在層的屬性欄中將“可視”設(shè)為“隱藏”（hidden），這樣在打開(kāi)網(wǎng)頁(yè)時(shí)便看不見(jiàn)這個(gè)層（要是看得見(jiàn)那還叫什么折疊式呀？�。＝又x取單元格，然后單擊dreamweaver最下面那一條狀態(tài)欄右邊的“顯示行為”按鈕（就是那個(gè)最中間的，由兩個(gè)圓圈組成的那個(gè)），來(lái)給單元格添加行為。這里要注意一個(gè)：一定要看好了！在行為欄的標(biāo)題欄上一定要是顯示“”才行，這說(shuō)明你要添加的這個(gè)行為是添加在單元格上的，如果沒(méi)有的話那就要重新點(diǎn)選單元格，直到成功為止。（如圖三）

　　在“行為目標(biāo)”(events for)中選擇一個(gè)合適的瀏覽器，一般是選擇“ie 4.0”。然后單擊左邊的“+”按鈕，來(lái)添加行為。在彈出的菜單中選擇“顯示或隱藏層”(show-hid layers)，在彈出的窗口中選擇“l(fā)ayer “l(fā)ayer1””，就是我們剛才添加的那個(gè)層了，再單擊“顯示”（show），確定就行了。這時(shí)在行為欄中就出現(xiàn)了我們剛剛添加的這個(gè)行為了。接著單擊“事件”(events)下面右邊的那個(gè)向下箭頭按鈕，在彈出菜單中選擇“當(dāng)鼠標(biāo)移上”（onmouseover）。好了，這樣當(dāng)頁(yè)面載入時(shí)，這個(gè)層并不會(huì)出現(xiàn)，只有當(dāng)我們的鼠標(biāo)移上單元格時(shí)才會(huì)出現(xiàn)，怎樣？酷吧？stop！不要高興得太早了，不要忘了還有一個(gè)問(wèn)題：鼠標(biāo)移開(kāi)單元格之后這個(gè)層還是顯示著的呀！并不會(huì)自動(dòng)消失的。（不要把電腦當(dāng)成全自動(dòng)的，你不告訴它怎么做時(shí)，它只是一堆廢鐵。^_^）其實(shí)解決這個(gè)問(wèn)題也很容易，我們可以添加顯示層的行為，當(dāng)然也可以添加隱藏層的行為呀！再單擊“+”按鈕，選取“顯示或隱藏層”，還是選取“l(fā)ayer1”，不過(guò)這次我們點(diǎn)擊的是“隱藏”（hide）了，再確定。然后選擇“事件”，單擊“當(dāng)鼠標(biāo)移開(kāi)”(onmouseout)。ok！完成了。

　　接下來(lái)，按照從第二步到第四步的過(guò)程，對(duì)“相關(guān)軟件”單元格進(jìn)行操作。一切完成之后，按下“f12”，預(yù)覽一下，呵呵，怎么樣？簡(jiǎn)單的幾步，就完成了這樣炫的效果，一切還是dreamweaver的功勞�。�(效果如圖四)

　　還有一個(gè)需要注意，層的移動(dòng)有時(shí)并不能做到“所見(jiàn)即所得”的效果，在編輯時(shí)本來(lái)位置很滿(mǎn)意，但是預(yù)覽時(shí)卻一塌糊涂，這就要多預(yù)覽幾次，多修改，才能得到好的效果。企業(yè)在鄭州做網(wǎng)站,找浩方.

【本文標(biāo)題和網(wǎng)址】：網(wǎng)頁(yè)折疊菜單的DW制作教程(轉(zhuǎn)載) http://www.cnbiuapp.com/jiaocheng/443.html

您可能對(duì)以下新聞還有興趣

網(wǎng)頁(yè)折疊菜單的DW制作教程(轉(zhuǎn)載)

其它偉置新聞

標(biāo)簽：DW制作教程折疊菜單制作教程網(wǎng)頁(yè)制作教程網(wǎng)頁(yè)菜單制作教程

聲明：本頁(yè)內(nèi)容由偉置電子科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶(hù)參考使用；我們制作的網(wǎng)站建設(shè)效果圖、網(wǎng)頁(yè)樣稿為我公司設(shè)計(jì)成果。如您認(rèn)為本頁(yè)中有涉嫌抄寫(xiě)您相關(guān)的內(nèi)容，請(qǐng)及時(shí)與我方聯(lián)系進(jìn)行核實(shí)，并提供相關(guān)證據(jù)，工作人員會(huì)在3個(gè)工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)本站將立刻刪除涉嫌侵權(quán)內(nèi)容。如果您對(duì)做網(wǎng)站、網(wǎng)站制作、網(wǎng)站優(yōu)化核心技術(shù)文章感興趣，請(qǐng)點(diǎn)擊查看網(wǎng)站建設(shè)知識(shí)和網(wǎng)站建設(shè)教程的相關(guān)文章，請(qǐng)關(guān)注鄭州網(wǎng)站建設(shè)公司偉置電子科技官網(wǎng)(www.cnbiuapp.com)。

用戶(hù)需求導(dǎo)航：網(wǎng)站建設(shè)價(jià)格、網(wǎng)站備案、網(wǎng)站推廣、偉置電子優(yōu)勢(shì)、聯(lián)系我們

<< 上一條網(wǎng)站美工在制作網(wǎng)站過(guò)程中應(yīng)注意的顏色禁忌 下一條 >>網(wǎng)站制作教程：論鄭州的網(wǎng)站建設(shè)步驟

新聞動(dòng)態(tài)