DreamWeaver超級技巧6

  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〉標籤,因為在〈table〉標籤中用style定義的文字格式會被netscape忽略。

34. 使用定製視窗功能測試網頁在不同解析度下的效果

誰都不希望看見自己辛辛苦苦做的網頁在不同的解析度下面目全非,所以測試網頁在不同解析度下的瀏覽效果是網頁製作中很重要的一步。我們可以在dreamweaver的操作界面中的狀態欄中間,選擇需要的解析度來調節視窗大小,從而實現在不同解析度下測試網頁效果。

35. 上傳網站時無需使用第三方ftp軟體

dreamweaver中融入了ftp功能,而且為網站上傳作了最佳化。我們可以做一個簡單的比較,當你使用一般的ftp軟體上傳網站時,是不是都按本地機上的網站目錄在伺服器中新建目錄,然後再一個個檔案上傳。這種做法實在沒錯,但由於本地機中的網站目錄中並不是每個檔案都被網頁調用(比如在建網頁時留下的備份檔案),所以篩選檔案的繁重工作量只有用戶自己知道。但使用dreamweaver上傳網頁就可以方便得多,由於ftp功能在幕後為用戶進行了許多必要的工作,所以用戶只要將網站地圖內相關的html檔案上傳,dreamweaver就會自動將與此html檔案相關的所有其他本地檔案一併上傳(如圖像、zip檔案、flash檔案甚至是各種real檔案)。使用dreamweaver內帶的ftp功能的具體做法是:編輯已經定義過的site,在“site definition for...”面板中選擇“web server info”。如果網頁是通過ftp方式上傳的話,將“server access”設為ftp,在ftp host中添入ftp伺服器的地址,在host directory中添入遠程登入目錄,在login中添入用戶名,再填好password。經過了以上的設定,就可以在site面板中按connect按鈕,當dreamweaver成功連入伺服器後,connect按鈕會自動變為disconnect,並且在一旁亮起一個小綠燈。接著要做的事就是在要上傳的html檔案上單擊右鍵,選擇“put”即可。當此html檔案上傳成功後,狀態條中將顯示put depanding file,說明dreamweaver正在上傳這個html檔案所調用的其他本地檔案。不僅如此,dreamweaver還可以直接下載伺服器上的檔案進行修改,方法么,只要使試試put旁的get按鈕就明白了。