關於 Dreamweaver 的 10 個小技巧——Web 開發人員的最佳代碼編輯器

Dreamweaver 是 Internet 上所有基於 Web 的活動之母。 對於大多數人來說，Dreamweaver 只是一個創建網站的工具，但只有專業人士知道 Dreamweaver 才是強大的。

Dreamweaver 具有許多功能和選項，使其成為 Web 開發人員最喜歡的工具。 毫無疑問，該軟件擁有目前市場上任何其他 Web 開發軟件所沒有的最知名的 IDE（集成開發環境）。 無論是開發、協作和編碼工具，Dreamweaver 都為 Web 開發人員提供了一個不錯的範圍。 這就是為什麼對於初學者 Web 開發人員來說，了解如何最大限度地利用 Dreamweaver 非常重要。

區分專家 Web 開發人員和普通 Web 開發人員的所有方面都隱藏在令人遺憾的直觀菜單層下，這就是為什麼新 Web 開發人員難以提高他們的技能的原因。 但是，在本文中，我將向您展示 Dreamweaver 的那些隱藏而強大的功能，這些功能對於滿足當今市場的需求非常重要。 本文將幫助您快速訪問這些功能，並將為您提供十大有用的技巧，這將提高您的工作質量並顯著改進您的編碼。

1.動態視圖和實時視圖：

每個人都知道 Dreamweaver 提供靜態視圖或我們打開的文件。 但是，關於 WordPress 等應用程序的動態視圖的問題仍未得到解答。 為了設置動態視圖，我們需要告訴 Dreamweaver 用於動態視圖的設置。 要進行設置，請通過單擊視圖 > 實時視圖 > 選項菜單進入 HTTP 請求設置，然後輸入正確查看應用程序所需的 GET 或 POST。

之後，將 Dreamweaver 中的實時視圖切換到頁面的實時、像素完美呈現的 WebKit 中，這將替換設計視圖面板。 然後使用實時 Javascript、DOM 操作、數據庫查詢、服務器端代碼和呈現的 CSS 來完成它，而不是設計視圖界面中的佔位符圖標。

2. 用於加強導航的引導程序：

導航是響應式網站中的單頁組件，它應該具有自適應能力來滿足小屏幕的需求，Bootstrap 可以提供很大幫助。 Bootstrap 允許您輕鬆設置導航欄並從水平條切換到垂直面板。 背後的原因是 Dreamweaver 支持 Bootstrap 的所有導航靈活性，並且在開發有效的響應式網站時，它是一個易於使用的功能。

為了讓您快速了解它，以下是如何在開發中使用 Bootstrap 的快速演示。

使用 Bootstrap 加強導航從 Dreamweaver 的新文檔對話框開始。 只需單擊新文檔對話框中的 Bootstrap Framework 按鈕，並選中預構建佈局選項複選框即可使用功能齊全的導航選項，例如；

• 標準、無序且語義正確的鏈接列表。
• 用於放置品牌形象的標誌區域。
• 準備激活提交按鈕和搜索字段。
• 預設子導航項的下拉菜單並使用分隔線完成。
• 需要時可以對齊的左右部分。
• 內置響應能力。

如果你覺得很難，還有另一種選擇。 Dreamweaver 允許您製作自定義的導航欄。 如果您喜歡深色調色板，只需將 .navbar-inverse 類添加到您的 <nav> 標記。 你甚至可以玩它。 如果您想始終在頁面上方顯示導航，請鍵入 .navbar-fixe-top。 如果要在下面顯示，請鍵入 .navbar-fixed-bottom。 所有這些 Bootstrap 類都是標準的，Dreamweaver 代碼提示也支持這些編碼，因此您不必記住整個編碼。 您只需在元素顯示中鍵入 .navbar，您將獲得彈出列表，您可以在其中選擇所需的選項。

3. 凍結 JavaScript：

Ajax 具有非常動態的特性。 這就是為什麼很多時候我們需要在首頁加載時與不可用或未呈現項目的頁面進行交互。 這些項目可能會在加載一段時間後注入頁面，這就是它在第一次加載時不顯示的原因。 例如，當您可能想要更改完全在 JavaScript 上實現的工具提示的樣式時，您曾經有條不紊地在腳本中搜索以查找在何處創建了哪個項目。 不要搜索腳本，請嘗試以下操作。

將您的 Dreamweaver 放入實時視圖並呈現您的頁面。 然後隨時按 F6 凍結 JavaScript，這將允許您剖析和定位頁面中任何動態項目的任何代碼。 這不僅可以幫助您定位動態項目的確切代碼，還可以通過減少在動態網站中搜索任何代碼的時間來加快開發速度。

4、代碼高亮：

如果您不習慣每天晚上都看到復雜的編碼，那麼編碼腳本可能會非常混亂。 這是代碼的突出顯示幫助您在整個腳本中創建分離的地方。 Dreamweaver 具有突出顯示有助於閱讀的編碼的功能，而不是用最前沿的方式移動您的眼睛。 為此，請打開 Dreamweaver 首選項並打開技術預覽部分。 然後單擊啟用代碼突出顯示選項並讓 Dreamweaver 完成它的工作。 但是，您可能需要更新 Dreamweaver 版本，因為此功能僅在最新版本中可用。

啟用突出顯示選項後，只需雙擊任何標籤，它就會突出顯示當前頁面上該標籤的所有實例。 但是，應該定義參數。 該工具非常適合快速識別和查找相似元素。 突出顯示任何元素後，在 PC 上使用鍵盤快捷鍵 f3，在 Mac 上使用 CMD-G）從一個突出顯示的元素跳轉到下一個元素。 此外，shift 修飾符可以返回到上一節。 此外，代碼突出顯示還適用於 HTML 標記屬性和值，因此您可以輕鬆發現特定類。

5. 自動 JavaScript 補全：

Dreamweaver 是一個出色的平台，其中包含智能且完整的 HTML 和 CSS 代碼。 不過，有些人認為 JavaScript 並不完整。 對於 jQuery 或 Prototype，在 Dreamweaver 中，您應該知道有提供 Javascript 完成代碼的 API 擴展。 這些代碼加快了開發過程，因為通過使用這些代碼，無需鍵入整個腳本，並且對於快速編碼人員來說非常方便。

Dreamweaver 是唯一一款允許您使用此類 jQuery 和 Prototype 完成代碼的 Web 開發軟件，可幫助每個 Web 開發人員加快他們的任務並以最少的努力生產出最好的產品。

6. 輕鬆訪問相關文件：

CSS 和 JavaScript 是您打開 HTML 和 PHP 文件時看到的獨立文件的名稱。 打開 PHP 文件時，您可以在窗口頂部看到它。 因為這些所有選項都放在前面，您可以輕鬆切換到這些文件並進行更改，甚至無需打開它們即可保存。 單擊相關文件欄中的任何文件，它將在代碼視圖中顯示其源代碼，在設計視圖中顯示父頁面。

此外，您還可以使用任何代碼導航器工具來快速訪問將影響您當前解決方案的 CSS 源代碼。 這種對 CSS 源代碼的快速訪問減少了編碼時間，並允許 Web 開發人員專注於他們開發過程的不同方面。

7. 即時美化代碼：

雜亂無章的代碼行表明這種編碼的開發人員不夠專業和熟練，無法按順序編寫代碼。 這在網站的搜索引擎優化中也很重要。 然而，組織和美化你的代碼並不像人們想像的那麼困難。 通過正確了解 Dreamweaver 選項，您可以即時組織代碼。 只需使用“應用源格式”選項並完全根據您的喜好進行修改。 為了使您的編碼乾淨整潔，請單擊編碼工具欄底部的“格式源代碼”，然後轉到“編輯>工具欄>編碼”，然後選擇“代碼格式設置”進行設置。

另一種組織腳本的方法是從“命令”>“應用源格式”訪問格式選項，或者通過選擇“將源格式應用於選擇”選項僅將其應用於編碼塊。

8. 無絨編碼：

無論 Adob​​e 為 Dreamweaver 配備了多少強大的工具和功能，您在網站上工作的越多，您在編碼方面的工作就越多。 這件事可以提高你的技能，但它也會打開無窮無盡的錯誤之門，因為編寫過多的代碼並不是一件容易的事。 Dreamweaver 知道這一點，這就是為什麼在最新版本的 Dreamweaver（即 Creative Cloud (CC)）中有一項稱為 Linting 支持的功能。 Linting 是一種基本的編程語法檢查工具，可用於 CSS、HTML 和 JavaScript。 通過這種方式，每當 Dreamweaver 發現任何問題或錯誤時，它都會發出一些一般性和特定性的信號。

要運行測試，請在 Dreamweaver 中打開一個充滿代碼的頁面，您將在狀態欄右側看到一個圓圈中的綠色小複選標記。 如果只有一個小的綠色複選標記被圈起來，那麼您的代碼一切正常。 如果有一個紅叉標記，那麼您的編碼存在一些問題，您需要對其進行修改以正常運行您的網站。 此外，通過單擊錯誤標記，它可以將您帶到錯誤描述的錯誤所在的列和行。 最好的一點是這個功能沒有限制，你可以使用它直到你沒有得到綠色標記。

9.檢查瀏覽器兼容性：

瀏覽能力是每個 Web 開發過程中最基本的東西之一。 這就是 Dreamweaver 讓您更輕鬆的原因，因此您在開始 Web 開發之前永遠不會錯過這些基本內容。 在 Dreamweaver 中打開要檢查其兼容性的文檔。 在放置代碼、拆分和設計視圖選項圖標的菜單欄中，還有另一個選項，稱為“檢查頁面”按鈕。

單擊時，它將打開一個下拉菜單，在其中選擇檢查瀏覽器兼容性，然後在單獨的窗口中查看兼容性結果。

10. 代碼最小化：

在為大型網站編碼時，經常會出現一大段代碼開始在屏幕上激怒您。 很少有人知道他們可以通過按鍵盤上的一個按鈕來最小化這段代碼。 當您確定不需要對代碼塊進行任何更改時，只需選擇該塊並單擊代碼行號旁邊的“-”。 該塊將最小化並且在您擴展它之前不會打擾您。