在Dreamweaver中制作選項卡式網(wǎng)頁效果

1、在Dreamweaver中制作選項卡式網(wǎng)頁效果在網(wǎng)站設(shè)計過程中經(jīng)常會遇到選項卡效果的制作，很多剛開始學(xué)習(xí)網(wǎng)頁設(shè)計的朋友會覺得這個很難制作，今天我就結(jié)合div和css做一個選項卡效果實例，大家一起探討一下Dreamweaver中的“行為”的奧妙。操作步驟：一、制作選項卡的鼠標(biāo)交換效果1.打開Dreamweaver CS6.0，新建一個html空白文件并保存到文件夾內(nèi)。2.創(chuàng)建一個父層。打開“插入”>“布局對象”>“Div標(biāo)簽”。3.在彈出的“插入Div標(biāo)簽”對話框中的ID文本框中輸入“gen”，然后單擊“確定”按鈕。4.然后在代碼視圖</ head>標(biāo)簽前輸入如下代碼：&

2、lt;style type="text/css">#gen position: absolute;width: 376px;height: 30px;z-index: 1;border-bottom:solid #F30 2px;border-top:solid #CCC 1px;border-right:solid #CCC 1px;</style>5.div變成如下圖所示效果。6.刪除div中的“此處顯示id“gen”的內(nèi)容”提示文字后，輸入文本“汽車”，然后在設(shè)計視圖中選擇該文本后，在“html”屬性面板中“鏈接”文本框中輸入“#”，為該文本添加了一

3、個空鏈接。7.在</ style>前輸入如下所示代碼：#gen a height: 30px;display: block;float: left;padding-left:10px;padding-right:10px;line-height: 30px;color: #000;font-weight: bold;text-decoration: none;border-bottom: 2px solid #F30;border-left: 1px solid #CCC;8.“汽車”的超級鏈接樣式變成如下圖所示樣式：9. 在</ style>前輸入如下所示代碼：#ge

4、n a:hover color: #F00;background-color:#FFF;text-decoration: underline;border-top: 2px solid #F30;border-left:#CCC solid 1px;border-bottom:#FFF solid 2px;border-radius: 3px 3px 0px 0px;margin-top:-2px; 10.“汽車”的鼠標(biāo)交換鏈接樣式變成如下圖所示樣式：11.在“設(shè)計”視圖中，激活“汽車”所在的<a>標(biāo)簽，然后使用“CTRL+C”復(fù)制，用鼠標(biāo)將插入點定位到div“gen”的空白處，使

5、用“CTRL+V”粘貼兩次，得到如圖所示效果：12.分別將文字修改為“降價”、“二手車”。二、添加“顯示-隱藏”行為13.將插入點定位到div“gen”的空白處，打開“插入”>“布局對象”>“Div標(biāo)簽”，在彈出的“插入Div標(biāo)簽”對話框中的ID文本框中輸入“qc”，然后單擊“確定”按鈕。14.參考上一步所示方法，再先后創(chuàng)建“jj”、“esc”兩個div。15. 在</ style>前輸入如下所示代碼：#qc position: absolute;width: 378px;height: 221px;z-index: 1;left: 0px;top: 33px;back

6、ground-color: #FF0000;#jj position: absolute;width: 378px;height: 221px;z-index: 2;left: 0px;top: 33px;background-color: #FFFF00;#esc position: absolute;width: 378px;height: 221px;z-index: 3;left: 0px;top: 33px;background-color: #99CC00;16.網(wǎng)頁效果如下圖所示：17.激活“汽車”的<a>標(biāo)簽，然后打開“標(biāo)簽檢查器”控制面版，激活“行為”選項卡。18.單擊“標(biāo)簽檢查器”控制面版中的“添加行為”按鈕，從彈出的菜單中選擇“顯示/隱藏元素”命令。19.從彈出的對話框中選擇“divqc”元素，然后單擊下方的“顯示”按鈕，再依次選擇“divjj”元素和“divesc”元素，分別設(shè)置為“隱藏”，然后單擊“確定”按鈕。20.打開“實時視圖”，用鼠標(biāo)單擊“汽車”鏈接預(yù)覽該效果。此時我們可以看到，單擊鼠標(biāo)時，紅色div會顯示出來，但是我們需要將鼠標(biāo)動作修改為鼠標(biāo)指向該鏈接時，發(fā)生div顯示的事件。這個問題需要在“標(biāo)簽檢查器”的“行為”面版中解決一下。21.用鼠標(biāo)激活“汽車”的<a>標(biāo)簽，然后打開“標(biāo)簽檢