網(wǎng)站設計怎樣制作靜態(tài)頁面以及如何處理表格圖像等,深圳網(wǎng)站設計公司根據(jù)多年行業(yè)經(jīng)驗在前面的文章中與各位進行過分享,今天博納網(wǎng)絡主要詳細與各位分享如何制作動態(tài)網(wǎng)頁。動態(tài)網(wǎng)頁不但能夠實現(xiàn)復雜的動態(tài)效果,還能實現(xiàn)友好的人機交互網(wǎng)頁的功能。例如,通過行為執(zhí)行指定的動作來實現(xiàn)各種動態(tài)效果功能因此更容易引起瀏覽者的興趣。Dreamweaver提供了多種實現(xiàn)動態(tài)與本文將結合Dreamweaver行為、特效和iQuerv組件以案例的形式進行幫助用戶能夠初步制作動態(tài)網(wǎng)頁效果。
【學習重點】
◆制作跳轉菜單
◆制作可拖動對象
◆改變對象顯示屬性
◆制作交換按鈕
◆制作提示對話框
◆顯示和隱藏元素
◆設計動畫特效
◆設計Tab選項卡和模態(tài)對話框
動態(tài)網(wǎng)頁制作步驟制作跳轉菜單
跳轉菜單是鏈接的一種特殊形式。它不僅豐富了網(wǎng)頁中超鏈接的形式,同時最大限度地節(jié)省版面。在制作網(wǎng)頁時,如果頁面布局比較緊張可以使用它將些不太重要的鏈接進行歸類集中。在Dreamweaver中,利用“跳轉菜單”行為可以設計彈出式下拉鏈接列表。下拉菜單中的每個選項都定義一個超鏈接。當瀏覽者選擇菜單中的選項時,就如同單擊網(wǎng)頁中的超鏈接文本樣,跳轉到選項所定義的目標網(wǎng)頁。當然,還可以利用它鏈接圖片、文檔等對象。
【操作步驟】
第1步,啟動Dreamweaver,新建文檔,保存htest.html。將鼠標指針定位到預定義位置,選擇【插入】【表單】【選擇】命令,插入一個空的下拉菜單控件,在【屬性】面板中設置Name為menul.如圖7.1所示。
第2步.選擇【窗口】【行為】命令,打開【行為】面板。單擊【行為】面板列表框上面的t按鈕,在打開的下拉菜單中選擇【跳轉菜單】的行為,如圖7.2所示。
動態(tài)網(wǎng)頁制作效果圖7.2選擇【跳轉菜單】行為
第3步,打開【跳轉菜單】對話框,如圖7.3所示,
然后在該對話框中進行設置。
第4步,在【文本】文本框中設置項目的標題。在【選擇時,轉到URL]文本框中設置鏈接網(wǎng)頁的地址.如http://www.baidu.com/,或者直接單擊【瀏覽】按鈕找到鏈接的網(wǎng)頁。
第5步,在【打開URL于】下拉列表框中設置打開鏈接的窗口。如果選中【更改URL后選擇第個項目】復選框,可以設置在跳轉菜單鏈接文件的地址發(fā)生錯誤時,自動轉到菜單中第個項目的網(wǎng)址,如圖7.4所示。
第6步,設置完成,單擊面板上方的+按鈕,可以添加新的鏈接項目,
然后按第5步介紹的方法進行設置,最后設置的結果如圖7.5所示。
當選擇【菜單項】列表框中的項目,然后單擊面板上方的一按鈕,可以刪除項目。
提示:選擇已經(jīng)添加的項目,然后單擊面板上方的【同上】或者【同下】按鈕調整項目在跳轉菜單中的位置。
第7步,設置完畢,這時可以看到在【行為】中自動定義了“跳轉菜單”行為根據(jù)需要設置事件類型,這里設置honChange.即當跳轉菜單的值發(fā)生變化時,將觸發(fā)跳轉行為,如圖7.6所示。
動態(tài)網(wǎng)站設計實操效果圖7.6定義事件類型
第8步,保存頁面,在瀏覽器中預覽,可以看到個跳轉下拉菜單,當選擇不同的搜索引擎時,會自動跳轉到該搜索引擎主頁,如圖7.7所示.
深圳網(wǎng)站設計公司關于對于動態(tài)網(wǎng)站制作跳轉菜單的經(jīng)驗,本文就分享到這里。下期我們會繼續(xù)就動態(tài)網(wǎng)站制作知識進行分享。博納網(wǎng)絡編輯整理。