建站
咨詢
售后
建站咨詢
新聞中心
這篇文章將為大家詳細(xì)講解有關(guān)dreamweaver如何制作網(wǎng)頁折疊菜單效果，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括延平網(wǎng)站建設(shè)、延平網(wǎng)站制作、延平網(wǎng)頁制作以及延平網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，延平網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到延平省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
去過Microsoft的網(wǎng)站嗎?(如圖一)如果去過的話，那么你應(yīng)該對這個(gè)站上面那條折疊式菜單的導(dǎo)航欄感到贊嘆吧?你想過你也能夠做出這樣的效果嗎?來吧，不用羨慕了，心動(dòng)不如行動(dòng)!
折疊式菜單實(shí)際上是通過層的顯示和隱藏，來達(dá)到這種效果的?，F(xiàn)在就讓我來說說如何制作吧。Follow Me!先打開DreamWeaver(DreamWeaver對層的支持很好的，也是做網(wǎng)頁的必備工具)。
第一步：先插入一個(gè)一行、兩列的表格，方法：單擊菜單上的“插入”(Insert)，再選取“表格”(Table)，在“行”(Row)中輸入1，在列(Columns)中輸入2，在單擊“確定”。(如圖二)為了美觀，在表格的屬性欄中，把寬和高分別設(shè)為200px和30px，并且把表格的邊框顏色全部設(shè)為#FFFFFF，然后分別點(diǎn)選兩個(gè)單元格，在屬性欄中將其邊框顏色設(shè)為#6699FF。在兩個(gè)單元格內(nèi)分別輸入“資料教程”和“相關(guān)軟件”。并在單元格屬性欄中設(shè)為中間對齊(順便說一句：在DreamWeaver中不但可以設(shè)定表格水平對齊方式，而且可以設(shè)定垂直位置對齊方式，在FrontPage就只能自己去寫代碼了，這也是我放棄FrontPage使用DreamWeaver的原因之一!)
第二步，在“資料教程”單元格內(nèi)插入一個(gè)層。方法：單擊菜單上的“插入”(Insert),再選取“層”(Layer)。這時(shí)，在單元格中便會(huì)出現(xiàn)一個(gè)層。這時(shí)我們并不滿意層的位置，所以就來移動(dòng)它。層的移動(dòng)是非常容易的，選取層，然后按鍵盤上的箭頭鍵就可以移動(dòng)了，而且不受任何限制，呵呵，簡單吧。同樣，我們?yōu)榱嗣烙^也可以在層的屬性欄中設(shè)定它的大小，把寬和高分別設(shè)為100px和90px。
第三步：在層中插入一個(gè)三行、一列的表格，方法同第一步。并把寬和高分別設(shè)為100px和90px,以填滿這個(gè)層。再把邊框顏色做如第一步的設(shè)置。在三個(gè)單元格中輸入“DreamWeaver”、“FrontPage”和“HotDog”。并在屬性欄中設(shè)為中間對齊。
第四步：最關(guān)鍵的一步來了!在層的屬性欄中將“可視”設(shè)為“隱藏”(Hidden)，這樣在打開網(wǎng)頁時(shí)便看不見這個(gè)層(要是看得見那還叫什么折疊式呀?!)。接著選取單元格，然后單擊DreamWeaver最下面那一條狀態(tài)欄右邊的“顯示行為”按鈕(就是那個(gè)最中間的，由兩個(gè)圓圈組成的那個(gè))，來給單元格添加行為。這里要注意一個(gè)：一定要看好了!在行為欄的標(biāo)題欄上一定要是顯示“ ”才行，這說明你要添加的這個(gè)行為是添加在單元格上的，如果沒有的話那就要重新點(diǎn)選單元格，直到成功為止。(如圖三)
在“行為目標(biāo)”(Events For)中選擇一個(gè)合適的瀏覽器，一般是選擇“IE 4.0”。然后單擊左邊的“+”按鈕，來添加行為。在彈出的菜單中選擇“顯示或隱藏層”(Show-Hid Layers)， 在彈出的窗口中選擇“Layer “Layer1””，就是我們剛才添加的那個(gè)層了，再單擊“顯示”(Show)，確定就行了。這時(shí)在行為欄中就出現(xiàn)了我們剛剛添加的這個(gè)行為了。接著單擊“事件”(Events)下面右邊的那個(gè)向下箭頭按鈕，在彈出菜單中選擇“當(dāng)鼠標(biāo)移上”(OnMouseOver)。好了，這樣當(dāng)頁面載入時(shí)，這個(gè)層并不會(huì)出現(xiàn)，只有當(dāng)我們的鼠標(biāo)移上單元格時(shí)才會(huì)出現(xiàn)，怎樣?酷吧?Stop!不要高興得太早了，不要忘了還有一個(gè)問題：鼠標(biāo)移開單元格之后這個(gè)層還是顯示著的呀!并不會(huì)自動(dòng)消失的。(不要把電腦當(dāng)成全自動(dòng)的，你不告訴它怎么做時(shí)，它只是一堆廢鐵。^_^)其實(shí)解決這個(gè)問題也很容易，我們可以添加顯示層的行為，當(dāng)然也可以添加隱藏層的行為呀!再單擊“+”按鈕，選取“顯示或隱藏層”，還是選取“Layer1”，不過這次我們點(diǎn)擊的是“隱藏”(Hide)了，再確定。然后選擇“事件”，單擊“當(dāng)鼠標(biāo)移開”(OnMouseOut)。OK!完成了。
接下來，按照從第二步到第四步的過程，對“相關(guān)軟件”單元格進(jìn)行操作。一切完成之后，按下“F12”，預(yù)覽一下，呵呵，怎么樣?簡單的幾步，就完成了這樣炫的效果，一切還是DreamWeaver的功勞啊!(效果如圖四)
.jpg)
還有一個(gè)需要注意，層的移動(dòng)有時(shí)并不能做到“所見即所得”的效果，在編輯時(shí)本來位置很滿意，但是預(yù)覽時(shí)卻一塌糊涂，這就要多預(yù)覽幾次，多修改，才能得到好的效果。
關(guān)于“dreamweaver如何制作網(wǎng)頁折疊菜單效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。
名稱欄目：dreamweaver如何制作網(wǎng)頁折疊菜單效果
分享路徑：http://fisionsoft.com.cn/article/pcisog.html
