2、快速修改檔案Title。很多時候我們新建的檔案往往忽略設定檔Title的內容,事後需要修改時,常常要開啟每一個檔案分別修改。其實這個工作可以在網站視窗中方便的完成。開啟網站視窗View選單下的Show Page Titles,可以讓網站視窗中的檔案顯示出檔案頭,而不是原先的檔案名稱。預設的檔案頭是Untitled Document我們可以分別兩次點擊,改變預設的文字為我們需要的檔案頭。如圖:
3、快速生成網站地圖。有時我們需要製作一個包含當前網站所有文件結構的網站地圖而找不到合適的方法。 Dreamweaver本身就帶有這個功能,方法如下:開啟File—Save Site Map指令,在彈出對話方塊中輸入已儲存的檔案名,Dreamweaver會在目前網站的根目錄下自動產生一個.bmp或.png格式的網站圖片。
二、 頁面佈局階段的技巧
Dreamweaver不僅僅是一個好的頁面製作工具,同時他還可以進行精確的頁面排版和佈局,這一部分我們介紹幾個頁面佈局方面的技巧。
1.開啟輔助表格。搞過設計的朋友都特別希望能精確的定位網頁元素,他們喜歡每個元素都能依照自己的願望精確的定位。 Dreamweaver自備的Grid功能可以有助於這種希望的實現。執行指令View—Edit Grid開啟座標輔助,可以選擇網格狀或是點狀顯示,同時開啟Snap to Grid,以後插入或新增新的元素時,都會依照你的設定精確定位。
2.利用表格排版頁面技巧。合理利用Dreamweaver中的表格功能,可以方便的達到美化頁面的目的,以下我介紹幾個技巧。
1)建立1px邊框。有些朋友抱怨Dreamweaver無法做出單像素的表格邊框,其實仔細利用表格的屬性面板即可做出這種單像素表格。首先使用Object面板插入一個表格,定義表格寬、高及行數和列數。此時Dreamweaver中插入表格的預設CellPad和CellSpace、Border都為0。在屬性面板中定義表格的Border為0,CellPad為5(此可使單元格中的內容與單元格邊緣之間保持5個像素);CellSpace為1(此項使得單元格之間保持1個項素的間距)。設定表格的背景色為深色(如#999999),設定單元格的背景色為淺色(如#FFFFFF)。在瀏覽其中觀察效果即可。
2)導入資料表格。有時我們需要將一些在Execel檔案中建立的表格匯入Dreamweaver中,我們可以下將原來的Execel檔案另存為帶有製表符分隔的.txt文字檔案。在Dreamweaver中執行Insert—Tabular Date開啟如下視窗:
添好各個參數後即可將其中的資料匯入Dreamweaver的一個表格中。
3)格式化表格。如果你對重複的設定各個單元格的參數感到厭煩的話,使用Format Table命令可以幫你快速格式化表格,此命令在Command菜單下,此命令內帶多種表格配色方案,你可以選擇一種,Dreamweaver會自動將色彩方案套用到你選定的表格上。如圖:
4、表格和圖層互轉。有的朋友喜歡自由自在的安排他的頁面內容,總是不喜歡表格的工作方式。其實你完全可以利用靈活的層來安排你的頁面內容,當你覺得滿意時再將它轉換為表格。選取你需要轉換的圖層,執行指令Modify—Convert—Layers to Table。如圖:
5.同時更新多個框架頁面。有是我們需要在點擊一個連結時同時更新另外的兩個或多個框架頁面內容,這可以透過以下步驟使用Dreamweaver的行為來實現。
1) 選擇連結的文字或圖片。
2) 開啟行為面板(Behaviors),點選加號新增Go to URL行為。
3) 在Go to URL對話框中顯示了目前現有的所有框架窗口,我們分別選定一個窗口名稱,可以分別單獨設定每個窗口將要更新的文件內容。 Dreamweaver會在設定了目標檔案的視窗後面加上一個「*」號,表示此框架視窗已設定了URL。
4) 完成後點確定即可,我們點此鏈接,會同時更新多個視窗的內容。
三、 內容篇
如何更快更方便得對內容進行組織,是每個朋友都想了解的,下面這幾個技巧也許你知道,也許不知道,但重要的是透過不斷的運用,你會發現它的優越性的。
1、快速標籤編輯。對於熟悉手寫程式碼的朋友來說,經常需要切換到程式碼視窗手動添加一些程式碼。其實利用Dreamweaver的Quick Tag Editor可以快速插入各種HTML標籤,一個是點擊屬性面板的圖示插入,另一種捷徑是Ctrl+T,這兩種方法都會開啟快速標籤編輯,可以直接從清單中選擇所需的原始碼標籤,如下圖:
2、快速新增圖片邊框。對於插入網頁中的許多圖片都是沒有邊框的,有時我們需要對圖片添加邊框,我們不需要打開圖像處理軟體即可實現。一種方法是選取圖片後直接在屬性面板定義Border為1px,這會為圖片加上1像素的邊框;另一種方法是定義一個樣式,我們可以將img標籤直接定義為四邊都為1px的樣式,則網頁中所有插入的圖片都會帶有相同的邊框。如圖:
3.使用拖曳方式增加連結。 Dreamweaver支援從文件內直接托動連結到網站內的其他文件,我們可以將網站視窗和文件視窗並排放置,如圖:
然後選取文件中需要連結的文字,開啟屬性面版,將連結網址列後的Point to File指向網站視窗中的目標檔即可,如下圖:
4.如何加入背景聲音。在Dreamweaver中對於一些多媒體聲音檔案的插入,很多朋友都感到有些困惑,其實很簡單,點擊Dreamweaver 工作窗口最左下角的標籤,打開Behavior面板,在彈出的behavior窗口點+號,選擇Play Sound,選擇你需要的聲音檔案即可加入。在文件視窗中選取聲音檔案標識,在屬性面板點選Parameters就可以自行設定背景音樂的循環次數、是否自動播放等屬性了,如圖:
四、 美化篇
美化各種網頁元素是一件既耗時又不一定出效果的工作,以下我介紹的幾個技巧也許能幫你一點忙。
1.快速創建配色方案。我們常常需要設定連結各個狀態的文字顏色,有些朋友覺得自己的色彩感不太好,總是去找一些配色手冊。其實Dreamweaver本身已經帶了一些配色方案,打開Commands—Set Color Scheme指令,我們可以看到有許多成套的配色方案,每個都定義了背景色、文字色、連結各個狀態的顏色,你只需選擇一種即可,見下圖:
2、CSS連結樣式技巧。文字連結一般有四個狀態,link、hover、active、visited,我們通常都會對文字連結的各個狀態定義不同的色彩和样式,但經常有朋友發現自己定義的樣式在瀏覽時並未像設想的那樣。主要原因是在樣式表中對連結的定義順序有一定的要求,正確的順序是:A:link—A:visited—A:hover。對一般的朋友來說,其實很多時候只是想Hover狀態有變化,有個小技巧就是不按上面的方法定義連結樣式,而只需定義a和a:hover狀態的樣式即可,這樣只有hover狀態的樣式與其他狀態的不同。修改方法如下圖;
3.創建不同色彩的連接文字與底線。普通的連結文字與連結底線都是相同的色彩,其實我們也可以利用樣式表中的Border屬性來取代普通連結的劃線,由於Border有較多的控制參數與樣式,因此只要將Border的色彩和文字的色彩定義的不同即可實現我們的目的。例如我們可以將文字定義為黑色,而在Border選項中定義下劃線為紅色,如下圖;
五、 提高效率技巧
Dreamweaver也包含了許多可以大幅提高工作效率的指令,包括函式庫項目的建立、範本的運用、歷史面板的功能及查找替換功能。這裡我介紹幾個小的技巧來示範這些指令的強大。
1.清理Word檔案技巧。我們經常需要將一些Word文件轉換為HTML文件,但這種轉換的結果是產生的HTML文件非常的大,裡麵包含了許多重複程式碼,綜合利用Dreamweaver的幾個功能可以方便的清理掉無用程式碼。首先開啟Word產生的HTML文件,執行Commands選單下Clean Up Word HTML指令,程式會自動辨識原來Word的版本,並將無用的程式碼清除。但此時的檔案仍有許多重複程式碼,主要是包含了大量的和
標籤,我們可以再次執行Commands選單下的Clean up HTML指令,在彈出的對話框中選定Specific Tag(s) 選項,並輸入span 和p標籤,中間用空格分開,執行指令後,所有的span和p標籤都被清除掉。
但此時文件中的每個圖片屬性中也包含了類似v:shapes="_x0000_i1025"的屬性,我們還需將這些屬性清除。開啟尋找替換面板,按下圖的設定設定替換規則,執行後即可清除所有圖片的這些屬性。如圖;
2、快速替換文件標題。前面我介紹了可以在網站視窗替換文件標題,但是只能一次替換一個文件的標題,我們可以嘗試著利用上一步介紹的查找替換命令一次替換多個文件的標題。通常我們新建的檔案標題都是Untitled Document,可以開啟Edit—Find And Replace指令,進行如下設置,將目前網站所有檔案標題為Untitled Document的都替換為我們自己的標題。
3、設定預設文檔格式。上面的方法雖然快捷,但是我們每次新建一個檔案時,預設的檔案標題仍舊是Untitled Document。因為新建文件時,Dreamweaver會呼叫一個預設的頁面作為缺省格式,這個檔案是Dreamweaver 4ConfigurationTemplatesDefault.html,這樣我們就可以將我們網站中統一的一些格式設定好,如背景色、字體大小、檔案標題等,然後將它儲存覆蓋上面的Default.html檔案。在以後我們新建檔案時,Dreamweaver會自動套用我們設定好的格式,這可以提高很大的工作效率。
六、 後期維護篇
好了,經過上面這麼多的介紹,我們已經掌握了一些網頁製作的技巧,但是您作完的頁面是否不再包含錯誤?您的連結是否都正確的連結?您的頁面在各種瀏覽器中是否都表現良好?您的網站中是否還有許多不再需要的文件?很多類似的問題都還存在著,這些都是屬於站點後期偵測和維護。這裡我們再介紹幾個後製檢測方面的技巧。
1、連結檢測。執行菜單File—Check Links命令,Dreamweaver會自動檢測當前站點中的所有鏈接,並檢測無效的鏈接,如下圖:
雙擊偵測出的一個結果,會自動開啟對應的頁面並直接定位到錯誤的連結處,很方便我們修改連結錯誤。
2、快速偵測無用檔案。執行選單指令Site—Check Links Sitewide可以開啟連結檔案偵測功能,我們也可以利用這個功能檢查網站中無用的文件,並刪除。只要選擇最上方下拉方塊中為Orphaned Files,所有站點中無用的檔案會列在下方,將它們全部選中,按Delete鍵即可刪除。