網(wǎng)站制作怎樣處理顯示和隱藏元素，深圳網(wǎng)站設(shè)計制作公司博納網(wǎng)絡(luò)詳解，Dreamweaver中的“顯示隱藏元素”行為具有顯示和隱藏元素的功能，通過事件隱藏或顯示所指定的對象，一般常被用作與網(wǎng)頁交互時的信息。例如，當(dāng)鼠標(biāo)指針指向某個圖片和文字時，即可顯示有關(guān)詳細(xì)信息。
利用“顯示隱藏元素”行為，可在站點的主頁上，為每個導(dǎo)航按鈕所鏈接的網(wǎng)頁設(shè)置個包含該網(wǎng)頁主要信息的層，并為每個導(dǎo)航按鈕加入行為。在瀏覽網(wǎng)頁時，層開始處于隱藏狀態(tài)，只有將鼠標(biāo)指針指向該導(dǎo)航按鈕時，才可顯示該層；移開按鈕后層自動消失，單擊該按鈕又可跳轉(zhuǎn)到目標(biāo)網(wǎng)頁上。怎樣實現(xiàn)以上功能，博納網(wǎng)絡(luò)-網(wǎng)站設(shè)計師總結(jié)了十二步操作流程。
【操作步驟】
第1步，打開示例中的orig. html文件，另存為effect. html。本例將利用“顯示隱藏元素”行為制作切換面板。
第2步，單擊【代碼】視圖，}刀換到代碼編輯窗口下，在<bodv>標(biāo)簽中添加如下4行代碼，如圖7-34所示。
<div id="apDivl"><img src="images/el.png" /></div>
<div id="apDiv:"><img src="images/e:.png" /></div>
<div id="apDiv3"><img src="images/l.png" /></div>
<div id="apDiv4"><img src="images/_.png" /></div>
第3步，選中<div id:”apDiv3”>．新建css規(guī)則，設(shè)置定位樣式，Position: absolute、Vidth: 1003px、Height: 580px、Z-Index:4、Left: Opx、Top: 89px．如圖7-35所示。
第4步，選中<div id:”apDiv4”>，新建CSS規(guī)rUi]，設(shè)置定位樣式，設(shè)置參數(shù)與apDiv3相同，不同點是Z-Index:3，即讓apDiv3顯示在上面如圖7-35所示。
第5步，選中<div id:'apDivl'>.在css樣式面板中單擊【新建css規(guī)則】按鈕，設(shè)置定位樣式，Position: absolute. Width: 56pxHeight: 31px. Z-Index:2、Left: 500px. Top: 37px,如圖7-36所示。
網(wǎng)站設(shè)計實操示意圖7-36設(shè)計<div id:”apDivl”>標(biāo)簽樣式
第6步，選中<div id:”apDivl”>．然后在【行為】面板中單擊t按鈕，在彈出的下拉列表中選擇【顯示隱藏元素】選項，打開【顯示隱藏元素】對話框，如圖7- 37所示。
第7步，在【元素】列表中選中相應(yīng)的AP元素并設(shè)置元素的顯示或隱藏屬性，例如，選中div”apDivl”元素，然后單擊【隱藏】按鈕表示隱藏該AP元素；選中div”apDiv 2”元素，單擊【顯示】按鈕，表示顯示該AP元素。而【默認(rèn)】按鈕表示使用【屬|(zhì)生】面板上設(shè)置的AP元素的顯示或隱藏屬}生。最后，設(shè)置<div id:”apDiv3”>隱藏，而<div id:”apDiv4”>顯示，詳細(xì)設(shè)置如圖7-38所示。
第8步，設(shè)置完成后單擊【確定】按鈕。在【行為】面板上查看行為的事件是否正確。如果不正確，單擊事件旁的向下按鈕，在彈出的菜單中選擇相應(yīng)的事件。在本例中設(shè)置鼠標(biāo)事件為onClick，如圖7-39所示。
網(wǎng)站設(shè)計實操示意7-39設(shè)置事件響應(yīng)類型
第9步．選中<div id:”apDiv2”>，由于<div id:”apDiv2”>被<divid:”apDivl”>標(biāo)簽覆蓋住，在【設(shè)計】視圖下看不到該標(biāo)簽，因此單擊【代碼】視圖，在【代碼】視圖下拖選<div id:”apDiv2”>標(biāo)簽的完整結(jié)構(gòu)，如圖7-40所示。
網(wǎng)站設(shè)計實操示意圖-40拖選<divd=”apDiv2”>標(biāo)簽
第10步，單擊【行為】面板中的t按鈕，從中選擇【顯示隱藏元素】選項。在打開的【顯示隱藏元素】對話框中選中相應(yīng)的AP元素并設(shè)置元素的顯示或隱藏屬性，具體設(shè)置如圖7-41所示。
網(wǎng)站設(shè)計操作步驟示意圖7-4l設(shè)置【顯示隱藏元素】對話框
第11步，單擊【確定】按鈕后，在【行為】面板中將鼠標(biāo)事件更改為onClick，如圖7-42所示。
網(wǎng)站設(shè)計制作步驟實操示意圖7-42設(shè)置事件響應(yīng)類型
第12步，設(shè)置完成后保存為頁面，瀏覽效果如圖7-43所示。當(dāng)單擊【換臺】按鈕，則會切換到選臺頁面，此時按鈕顯示為“返回”，如果單擊【返回】按鈕，則返回到前面頁面。
網(wǎng)站設(shè)計操作步驟示意圖7-43顯隱控制按鈕
提示；為了便于參考，下面給出行為的觸發(fā)事件的動作、說明列表，如表下表所示。
網(wǎng)站設(shè)計實操案例行為動作說明表
深圳網(wǎng)站制作公司關(guān)于網(wǎng)站設(shè)計時對于快速處理頁面顯示與隱藏元素的實操經(jīng)驗分享本文就到這里，希望我們的文章對您的工作有所幫助。博納網(wǎng)絡(luò)編輯整理。
