10 個簡單但有用的 Dreamweaver 初學者提示和技巧

Adobe Dreamweaver 是網頁設計師的強大工具。 Dreamweaver 提供了一個可視化設計界面和代碼編輯器來開發網站。 雖然它有利也有弊，但其廣泛的功能使您可以有效地構建網站。

這裡有 10 個簡單但有用的 Dreamweaver 提示和技巧，適用於初學者。

1.刪除換行符：

在將文檔、電子郵件或 Word 文件中的文本複製到 Dreamweaver 時，您最終會在段落或行的末尾出現換行符。 鏈接中斷字符 <br> 表示行結束，因此它後面的任何文本都將顯示在它下面的行上。 這些字符是不可見的，因此很難刪除它們。 儘管 Dreamweaver 通常不會突出顯示這些字符，但您可以更改首選項菜單中的設置，使程序顯示一個黃色小圖標，表示換行符。 一旦換行符可見，您就可以輕鬆刪除它們。

2.記得定義一個站點：

人們經常將使用 Dreamweaver 與使用 Word 文檔混淆。 然而，設計一個站點並不是要構建一個文件，而是要構建一個包含一系列相互關聯的文件（例如圖像、JavaScript 文件、網頁和 CSS 文件）的站點。 不了解這一點的用戶通常會忘記設置站點的重要性。 Dreamweaver 提供了一個易於設置的站點進程。 它提供有關站點文件位置的信息，並允許您選擇眾多 Dreamweaver 管理工具之一。 這些工具將您的文件傳輸到您的 Web 服務器、檢查損壞的鏈接並使用模板構建站點。

3.增加代碼的字體大小：

借助 Dreamweaver 調整字體大小的功能，您可以通過幾個簡單的步驟來增加代碼大小。 要增加字體大小，首先選擇 Dreamweaver > 首選項，然後單擊字體類別，然後選擇新大小並單擊確定。 這將幫助您使代碼易於閱讀，並且您可以長時間開發您的網站而不會讓您的眼睛疲勞。

4.關閉CSS背景速記：

CSS 的特性之一是背景屬性。 此功能允許您為背景添加顏色或圖像。 Dreamweaver 的背景速記屬性將 3 行代碼縮短為僅定義圖像、顏色和重複屬性的一行。 這當然可以更容易地定義背景屬性，但是如果您在速記版本中保留一個屬性，Web 瀏覽器會將其視為“無”。 例如，如果您僅指定圖像屬性，則在更改背景時，Web 瀏覽器將從以前的背景中刪除現有顏色。 因此，最好關閉 CSS 背景速記以避免這個問題。

5. 使用 CSS Designer 複製樣式：

使用 CSS Designer，您可以直觀地增強網頁上的樣式。 如果您希望使用 CSS 設計器的更多功能，請右鍵單擊任何選擇器以使用複製或複製操作。 這些選項允許您將樣式從一個選擇器複製到另一個選擇器。 這些樣式包括背景、文本、動畫或邊框。 如果要復制整個選擇器，請使用標準的複製或複製到媒體查詢命令以實現目標方法。 這些快捷方式將為您節省大量時間並保持一致的樣式。

6.消除導航欄：

Adobe Dreamweaver CS5 帶有一個瀏覽器導航工具欄。 創建此工具欄是為了與 Dreamweaver 的實時查看選項一起使用。 您可以在文檔窗口中找到這兩個選項。 實時視圖用於查看網頁的預覽。 使用實時視圖，您可以單擊鏈接並移至特定頁面。 導航工具欄顯示新頁面的位置，並允許您輕鬆地在頁面之間導航。 您可以在不使用時隱藏此工具欄，方法是取消選中視圖 > 工具欄部分中的瀏覽器導航選項。

7. 管理您的文件：

當您使用 Dreamweaver 設置站點時，所有文件都顯示在“文件”面板中。 您可以將此文件面板用於許多功能，例如重命名、移動和突出顯示文件名。 這可能很常見，您可能知道所有這些，但網頁與常規文件不同。 網頁具有來自外部樣式表文件的圖像、指向其他網頁的鏈接和 CSS 樣式。 通過 Windows 資源管理器正常重命名圖像、網頁或 CSS 文件可能會導致鏈接斷開。 而 Dreamweaver 允許您在使用文件面板移動或重命名文件時自動更新鏈接。 這樣就沒有斷開的鏈接。

8. 選擇標籤選擇器：

在應用 CSS 類樣式時，精確地添加或刪除標籤可能很困難。 對於選擇精確的線條，Dreamweaver 的標籤選擇器是最好的。 標籤選擇器位於文檔窗口的左下角。 此選擇器顯示文本周圍出現的所有 HTML 和其他標籤。 您可以通過單擊標籤選擇器欄中的可用標籤來選擇特定標籤。 突出顯示的標籤表示該標籤已被選中。

9. 使用片段：

Dreamweaver 提供的代碼片段是可以節省大量時間的核心代碼片段。 片段通過 Creative Cloud 同步，確保它們在每個系統上都可用。 您可以將最常用的快捷鍵指定為鍵盤快捷鍵。 如果要編輯快捷鍵，請打開鍵盤快捷鍵設計並複制標準集。 然後，選擇命令部分下方的片段類別以選擇您的收藏夾。 然後，您將找到所有可用片段的列表，包括您創建的片段。 最困難的部分是找出未使用的鍵盤組合。 但這可以通過使用修飾符來解決。

10. 連接 WordPress 和 Dreamweaver：

Dreamweaver 和 WordPress 組成了一個偉大的團隊。 您可以使用 Dreamweaver 的動態文件工具集設計和修改 WordPress 頁面。 此工具集包括自定義過濾器、動態相關文件和特定於站點的代碼提示。 困難的部分是弄清楚如何使用 Dreamweaver 處理其他站點頁面。 您應該首先從 WordPress 站點根目錄中的 index.php 文件開始，然後從那裡導航。 您可以將路徑直接添加到 Web 地址或使用 Dreamweaver 功能單擊鏈接。 頁面顯示後，您可以控制 Dreamweaver 中的 CSS 和其他工具。

Adobe Dreamweaver 非常適合構建網站。 除了代碼完成、代碼折疊和語法高亮等基本功能外，它還具有一些高級功能，例如代碼自省和實時語法檢查。 這些提到的技巧將幫助您更有效地構建您的網站。 如果您正在尋找無需大量編碼即可構建網站的工具，請查看這些網站構建工具。