DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> Dreamweaver超級技巧(下)
Dreamweaver超級技巧(下)
編輯:Dreamweaver相關     

    26. 制作鼠標移上去後有變化的動態菜單

  所謂動態菜單其實是兩幅圖,一幅是鼠標不放在上面所顯示的,另一副是鼠標移上去所顯示的。我們可以利用Dreamweaver提供的行為之中的swap image來實現這個效果。首先插入一副圖片,用鼠標單擊它,在屬性面版的連接欄內輸入要連接的網頁。然後打開行為面板添,點擊“+”號,選擇swap image。接著出現一個窗口,要你選擇鼠標移上去後所顯示的圖片,在此選擇第二副圖片,點擊“確定”。好了,效果完成了,多簡單。

  27. 用Dreamweaver制作出一個類似於下拉菜單的效果

  制作一個類似於下拉菜單的效果需要用到層的隱藏和顯示特性。具體的方法是:在頁面中插入一個單行多列的表格,作為你的菜單條。表格的列數由菜單選項的多少決定。插入一個層,在層中輸入第一個下拉菜單的內容,並把這個層移動到表格第一列的下面。同理,對其他菜單項也作如上的操作,插入相應的層。把所有層的顯示屬性(vis)改為隱藏(Hidden)。

    選擇表格的第一個單元,單擊窗口(Windows)→行為(Behaviors),彈出行為面板。按下“+”添加行為Show-Hide layers,並將第一個層(Layer1)屬性改為顯示(Show),其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個行為,將它的觸發事件(events)改為onMouseover。這樣,當鼠標移動到第一個表格單元之上時,第一個下拉菜單就會顯示出來。接著再添加一個行為Show-Hide layers,並將所有層的屬性改為隱藏。接著在行為面板中編輯這個行為,將它的觸發事件(events)改為onMouseout。這樣當鼠標從第一個表格單元之上移開時,第一個下拉菜單就會隱藏起來。對其他的菜單項重復上述操作。但要注意設置“菜單二”時,第二層顯示,其他層隱藏;設置“菜單三”時,第三層顯示,其他層隱藏;依此類推下去。好了,做好了,按F12看看吧。

  28. 輕松制作下載文件

  用Dreamweaver其實很簡單,把要讓浏覽者下載的文件名寫上,然後拖動鼠標選取這段文字,在文本的屬性面板上“Link”的屬性輸入框中寫上文件名就行了。注意:若被下載的文件與該網頁不在同一目錄下,則文件名必須包含相對路徑,否則在下載時將提示找不到文件。

  29. 利用Dreamweaver的書簽制作跳轉鏈接

  利用Dreamweaver的書簽我們可以實現這個功能。具體方法是:將光標移到你想跳轉到的地方,選擇菜單中的“插入(Insert)→書簽(Name Anchor)”,輸入書簽的名稱。接下來,在你想調用鏈接的鏈接目標框中填入“#書簽名稱”,這樣一個頁面內的跳轉鏈接就做好了。在這裡,如果我們在書簽名稱前填入網頁的名稱,就會跳轉到其他頁面中的書簽處。 比如說我們在Link處填入“index.htm#top”,當浏覽者點擊這個鏈接時就會跳轉到index頁面中的top書簽處。

  30. 去掉圖片和表格接觸地方的空隙

  要使圖片和表格接觸的地方不留空隙,僅在表格屬性面板上把外框線(border)設為0是不行的,還需要在表格的屬性面板上把單元格的兩個屬性設為0(即cellspacing="0"和cellpadding="0")。

  31. 用TracingImage幫助定位網頁中各元素的位置

  TracingImage是Dreamweaver一個非常有效的功能,它允許用戶在網頁中將原來的圖案設計作為輔助的背景。這麼一來,用戶就可以非常方便地定位文字、圖像、表格、層等網頁元素在該頁面中的位置了。TracingImage的具體使用是這樣的:首先使用各種繪圖軟件作出一個想象中的網頁排版格局圖,然後將此圖保存為網絡圖像格式(包括gif、jpg、jpeg和png)。用Dreamweaver打開你所編輯的網頁,在頁面的空白區單擊右鍵,選擇“Page Properties...”,然後在彈出的對話框中的Tracing Image項中輸入剛才創建的網頁排版格局圖所在位置。再在Image Transparen中設定TracingImage的透明度,OK。這樣你就可以在當前網頁中方便地定位各個網頁元素的位置了。使用了TracingImage的網頁在用Dreamweaver編輯時不會再顯示背景圖案,但當使用浏覽器浏覽時正好相反,TracingImage不見了,所見的就是經過編輯的網頁(當然能夠顯示背景圖案)。

  32. 關於“Convert Table widths to Pixels”和“Convert Table widths to Percent”

  “Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver兩個設置表格寬度的重要功能。當你打開一個帶有表格的網頁時,在狀態欄中點中〈table〉標簽,在隨後顯示出的表格屬性工具面板中就能看到這兩個按鈕了。顧名思義“Convert Table widths to Pixels”就是將表格中所有單元的寬度以像素表示,而“Convert Table widths to Percent”是將表格中所有單元的寬度以百分比表示。仔細想想他們的作用,如果將一個表格的寬度全以像素表示,但浏覽窗口被放大時,表格就不會隨之放大單元格的寬度。而使用了“Convert Table widths to Percent”後能夠使你在640×480分辨率下建立的100%寬的表格在更高的分辨率下依舊保持100%的寬度。所以活用這兩個功能可以使網頁排版事半功倍。

  33. 調用Style而不致使網頁原代碼混亂不堪

  調用Style的方法很多,你可以單擊右鍵選擇Custon Style來調用Style規范,也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣,但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style規范,在網頁代碼中就生成一個〈span〉標簽,這樣標簽一多就會使文件十分臃腫而且影響浏覽器的解析速度,所以我建議盡量使用狀態欄中的元素列表來調用Style。還有一個小技巧,如果你要使用一個Style定義某表格單元中的所有文字,只要在〈td〉標簽中調用Style就行了,而不需要在一個個定義〈p〉標簽。注意這個方法不適用於〈table〉標簽,因為在〈

12下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved