設計檢視

發行項
04/10/2013

[設計] 檢視使用類似於 WYSIWYG 的檢視，顯示 ASP.NET Web 網頁、主版頁面 (Master Page)、內容頁面、HTML 網頁，和使用者控制項。 [設計] 檢視可讓您加入文字和項目，然後調整其位置和大小，並使用特殊功能表或 [屬性] 視窗設定其屬性。 [分割] 檢視可讓您查看及編輯 [設計] 檢視和原始碼] 檢視中的文件。預設情況下，兩個視窗的水平排列。

將項目加入網頁時，Visual Web Developer 會建立您也可以在 [原始碼] 檢視中編輯的對應標記。如需詳細資訊，請參閱Source View。

若要切換至 [設計] 檢視，請按一下 [HTML 設計工具] 視窗底端的 [設計] 索引標籤。

注意事項
[設計] 檢視只會顯示文件的本文，即 <body> 和 </body> 標記之間的內容。雖然您可以使用 [文件屬性] 視窗編輯 head 項目的一些屬性 (例如文件標題)，但是必須切換至 [原始碼] 檢視，才能編輯不在 body 項目內部的項目屬性。

設計檢視與 Web 瀏覽器的檢視之差異

[設計] 檢視提供您類似 WYSIWYG 編輯的檢視，網頁的呈現方式就和在瀏覽器中顯示一樣。但是，[設計] 檢視不會完全符合網頁將呈現的樣子，所以您必須在瀏覽器 (或在多個瀏覽器) 中測試網頁，以確定網頁會以所設計的方式呈現。

同一份文件在 [設計] 檢視中顯示的內容與在 Web 瀏覽器中顯示的內容，會有下列差異：

設計介面是可編輯的。
有些在 [設計] 檢視中顯示的項目主要用於編輯，而不是要呈現在瀏覽器中，例如資料來源控制項。大多數只有在編輯時才出現的控制項，在 [設計] 檢視中會以灰色方塊呈現。
有些字元和段落格式的顯示可能會和特定瀏覽器中顯示的不一樣 (如果該 Web 瀏覽器以不同於 [設計] 檢視的方式實作該格式)。
超連結無作用。
用戶端指令碼不會執行。
伺服端程式碼未執行。
當指標移至支援替代文字的項目時 (例如影像)，工具提示中不會顯示這個替代文字。

顯示 Null 字元

在 [設計] 檢視中使用包含 Null 字元的範本時，會截斷接在 Null 字元後面的字元。這樣不會遺失任何資料，但是 [設計] 檢視不會顯示範本中接在 Null 字元後面的字元。

在設計檢視中定位項目

網頁中的項目實際上是由上而下配置。根據預設，在瀏覽器中呈現網頁時，會以相同的由上而下順序呈現項目。您也可以使用二維方式配置項目，以水平和垂直座標將項目定位在網頁上的任何位置。這個配置選項會利用所有樣式中都可使用的位置選項。如需詳細資訊，請參閱在設計檢視中定位項目。

在設計檢視中巡覽

為了協助您在項目之間移動並選取項目，[設計] 檢視提供了下列選項：

標記導覽：標記導覽會顯示目前的項目，以及其所屬之父標記的階層架構。您可以使用標記導覽查看具有焦點 (Focus) 的項目，並從目前的項目移至階層架構中較上層的項目。如需詳細資訊，請參閱 HTML Editor Tag Navigator。
文件大綱： [文件大綱] 視窗可以讓您找出並選取文件內的所有項目，包括不顯示的項目。如需詳細資訊，請參閱 How to: Navigate in the HTML Editor in Visual Studio。
[屬性] 視窗。當您從 [屬性] 視窗頂端的下拉式清單 (Drop Down List) 選取項目時，編輯器便會在文件中選取該項目。

加入項目

您可以使用下列方式，在 [設計] 檢視中將項目加入至網頁：

從 [工具箱] 拖曳這些項目。
按兩下 [工具箱] 的項目，這樣會在插入點目前在文件中的位置插入項目。
從另一個在 Visual Web Developer 開啟的文件中拖曳項目。
從 [方案總管] 拖曳這些項目。這個動作主要用於將使用者控制項和樣式表參考加入至網頁。
將文字直接輸入網頁。

設計檢視中的智慧標籤

在 [設計] 檢視中，有許多 ASP.NET 伺服器控制項會顯示智慧標籤，可快速存取最常用於設定控制項的設定和動作。根據預設，當您第一次將控制項加入至網頁時會顯示智慧標籤。也可以隨時使用捷徑功能表或按一下智慧標籤的符號，即可顯示智慧標籤。

設計檢視中的運算式

您不能在 [設計] 檢視中使用 [屬性] 視窗來變更運算式的值。例如，如果在 [原始碼] 檢視中對控制項指派運算式，則無法在 [設計] 檢視中變更該運算式的值。由於運算式的值是計算而來，您應該使用 [原始碼] 檢視來變更運算式。

重新整理設計工具

從 [原始碼] 檢視切換至 [設計] 檢視時，您可能需要重新整理設計工具才能看到某些類型的檔案變更。例如，已剖析主題程式碼但未編譯，因此，在 [原始碼] 檢視中對主題程式碼的變更，需要先重新整理，您才能在設計工具中看到這些變更。

若要重新整理設計工具，您可以執行下列其中一項：

以滑鼠右鍵按一下 [設計] 視窗，然後按一下 [重新整理]。
在 [檢視] 功能表上，按一下 [重新整理]。

請參閱

共用方式為