Dreamweaver網頁設計製作技巧與提高

1、靈活運用樣式 　　 熟悉Web Design的網友就知道，調用Style的方法很多，我們可以單擊滑鼠右鍵選擇Custon Style來調用Style標準，也可以在狀態欄中的元素列表上單擊右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style標準，在網頁代碼中就生成一個〈span〉標籤，這樣的標籤一多就會使檔十分臃腫而且影響流覽器的解析速度，所以我們應儘量使用狀態欄中的元素列表來調用Style。　　 2、活用Format Table命令 　　在複雜的網頁設計中，表格的應用是最多的，因為利用表格可以自由地控制文本和圖像在網頁上出現的具體位置，從而使整個網頁看上去緊湊統一。Dreamweaver在這方面也不甘落後，我們可以使用其中的“Format Table”(格式化表格)命令來快速地對表格應用預先設計好的樣式。要使用預先設計好的樣式，先將游標置於表格的任意一個單格內，再選擇“Command”→“Format Table”命令， 在隨後出現的對話方塊中，從左邊的列表中選擇一個設計方案。按“Apply” 鍵來查看效果，如果不滿意的話，還可以重新設置或者修改部分參數的值，如邊界粗細，背景顏色等等。　　 3、同時鏈結到兩個網頁 　　我們都知道超連結一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“Go To URL”JavaScript 行為。打開一個有框架的網頁，選擇文字或圖像，然後從行為面板中選擇“Go To URL”。我們會注意到Dreamweaver會在“Go To URL”對話方塊中顯示所有可用的框架。選擇其中一個我們想鏈結的框架並輸入相應的URL後再選擇另一個框架並輸入另一個URL。　　 4、不給檔起中文名稱 　　大家在製作好了網頁後，通常會給網頁起一個具有代表性的中文名稱，一來能使人一看檔案名就能大概瞭解檔所包含的內容，二來能夠方便各個超連結之間的相互調用。但如果你在Dreamweaver中這樣做，就會發現Dreamweaver對中文檔案名支持得不是太好，經常會有頁面調用不正確的現象發生，所以我們以後在Dreamweaver中保存網頁的時候，儘量用英文或者數位作為檔案名稱，這樣就可以避免上面的出錯現象。　　 5、巧妙設置字體解析度 　　我們在製作網頁的時候，經常有這種體會，那就是製作好的網頁在本地電腦上流覽時很正常，但在另外一台電腦上流覽時發現原本漂亮的網頁變得歪歪扭扭了，這是為什麼呢?原來各個電腦的解析度要使你的主頁在不同的解析度下都能正常顯示，在 Dreamweaver中得到了較好的解決。在文檔視窗的右下角，Dreamweaver 顯示當前文檔被設計成的解析度大小。單擊哪個數位，在彈出式功能表中可以為當前的頁面指定顯示解析度，通過修改可以使你的主頁更具靈活性。使不同解析度的顯示器都能較好地顯示。　　 6、巧妙隱藏標籤 　　如果在網頁中插入了不可見的元素時，Dreamweaver會自動在頁面上添加一個與之相應的元素標籤，以便於我們選擇不可見元素。但這並不全是件好事，比如我們在一個有很多層的頁面中的第一行便插入一個表格，就會發現由於首行排列了太多的層元素標籤而使得表格自動退到了頁面的第二行，雖然在流覽時並不影響效果，但這確確實實會阻礙我們的工作。所以當我們覺得某個元素標籤礙手礙腳時，就索性將之遮罩掉。方法是按Ctrl+U打開Preferences面板，在Category中選中Invisibel Elements，在面板的右邊將會出現所有的元素標籤。只要將不需要的元素標籤前的勾去掉，以後它就保證不會再出現了。　　 7、善用拖放技巧 　　我們在使用Dreamweaver編輯網頁的時候，經常需要插入一些圖像什麼的，假設要插入的圖像很多，按照常規方法來操作就顯得非常麻煩。我們可以利用拖放技巧來很好地解決這個問題。首先我們把Dreamweaver的操作視窗變成活動視窗，以騰出空間來顯示Explorer視窗，找到要插入的圖像檔後，把它們一一用滑鼠拖動到網頁的適當部位，Dreamweaver將自動把這些圖像的url添加到檔的HTML代碼中，當然這裏要求被拖動的圖像檔必須是gif、jpg等web圖像格式的檔。對於已經在網頁中的圖像也是一樣，直接拖過來就可以了。但如果被拖動的圖像上有超連結，就不可以再使用拖動技術了，因為那時拖過來的僅僅是超連結地址。　　 8、自動設置更新時間 　　我們知道一個網頁要想獲得更多的回頭率，一個很重要的一條就是要不斷更新。但對於我們這些個人網頁來說，要天天及時更新恐怕不是很容易的事情。因此，我們希望網頁能自動更新，下面筆者就提供一個能自動更新修改時間的源代碼，我們只要把這段源代碼添加到…＜ /BODY＞之間就能實現更新時間的目的了: 　　＜ Script Language="JavaScript"＞ ＜ /script＞;二是用滑鼠依次單擊Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag，並從中選擇a，然後在decoration中選中none，最後單擊確定就成功了。　　 12、巧妙複製文字 　　在幾個不同的應用程式中間相互複製文字，是我們在實際工作中可能要常做的事情。但是，如果我們從Dreamweaver中複製編輯區中的文字到另外一個應用程式的時候，HTML代碼和文字將一起被複製過去了，那麼我們該如何才能只把編輯區中的文字複製下來呢?我們知道，通常複製時都用快捷鍵 Ctrl - C 來操作，如果我們在複製的時候多按一個C鍵，那麼Dreamweaver將只會複製選中的文字了。　　 13、善用快捷鍵 　　為了提高操作的效率，我們可以在Dreamweaver中使用快捷鍵，例如使用Ctrl-B或Ctrl-I來為文字應用黑體或斜體格式，也可以使用以下一些鍵盤快捷鍵來為選中的文本應用HTML格式:Ctrl-0: 無格式 Ctrl-T: 段落 Ctrl-1: 標題 1 Ctrl-2: 標題 2 Ctrl-3: 標題 3 Ctrl-4: 標題 4 Ctrl-5: 標題 5 Ctrl-6: 標題 6 14、自動關閉網頁 　　如果我們希望自己的網頁在指定的時間內能自動關閉，不妨在網頁源代碼中的標籤後面加入如下代碼: ＜ script LANGUAGE="JavaScript"＞ ＜ /script＞其中代碼中的3000表示3秒鐘，它是以毫秒為單位的。　　 15、巧妙設置對象名稱 　　我們在用Dreamweaver來製作非常複雜的效果時，有可能需要經常重複地使用某一個或者多個物件，例如我們經常需要定位某個特定的表格、圖像等，如果我們沒有給某一個網頁中的多個物件取名的話，那麼在重複應用這些物件的時候，可能很麻煩或者容易出錯。為了能夠方便調用這些物件，我們應該在每創建一個新的物件時，都記得給它取一個有代表性而且比較容易記憶的名稱。在給這些物件命名時，我們可以通過物件的“屬性”面板來操作就行了。 16、為圖像鏈結增加動態效果 　　有時我們為了要達到一種逼真的效果，希望滑鼠移動到某個鏈結上時能有動感產生。使用Dreamweaver可以很容易實現這種效果。設計時，我們首先需要準備兩幅圖像，第一幅是原始圖像，第二幅是滑鼠移動上去後的圖像。接著用滑鼠單擊第一幅圖，在屬性面板中的鏈結欄中填上要鏈結的檔，然後單擊鍵盤上的F8鍵，在彈出的Behaviors視窗中單擊“+”號，隨後選擇“swap image”，在接著出現的視窗中選擇第二幅圖像，最後單擊確定就可以了。