網站的頁面多種多樣，風格各異，網頁的質量直接影響著網站的效果。網頁設計的過程中，需要注意哪些方面的事項，有哪幾方面影響著網頁的設計效果呢?下面是本站小編整理的網頁設計技巧，希望對你有幫助!
1、靈活運用樣式
熟悉網頁設計的網友就知道，呼叫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可以很容易實現這種效果。設計時，我們首先需要準備兩幅圖象，第一幅是原始圖象，第二幅是滑鼠移動上去後的圖象。接著用滑鼠單擊第一幅圖，在屬性面板中的連結欄中填上要連結的檔案，然後單擊鍵盤上的F8鍵，在彈出的Behaviors視窗中單擊“+”號，隨後選擇“swap image”，在接著出現的視窗中選擇第二幅圖象，最後單擊確定就可以了。
16、巧妙設定物件名稱
我們在用Dreamweaver來製作非常複雜的效果時，有可能需要經常重複地使用某一個或者多個物件，例如我們經常需要定位某個特定的表格、圖象等，如果我們沒有給某一個網頁中的多個物件取名的話，那麼在重複應用這些物件的時候，可能很麻煩或者容易出錯。為了能夠方便呼叫這些物件，我們應該在每建立一個新的物件時，都記得給它取一個有代表性而且比較容易記憶的名稱。在給這些物件命名時，我們可以通過物件的“屬性”面板來操作就行了。