Design View

  • 發行項

 

發佈時間: 2016年4月

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

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

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

System_CAPS_note注意事項

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

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

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

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

  • 設計介面是可編輯的。

  • 有些在 [設計] 檢視中顯示的項目主要用於編輯，而不是要呈現在瀏覽器中，例如資料來源控制項。 大多數只有在編輯時才出現的控制項，在 [設計] 檢視中會以灰色方塊呈現。

  • 有些字元和段落格式的顯示可能會和特定瀏覽器中顯示的不一樣 (如果該 Web 瀏覽器以不同於 [設計] 檢視的方式實作該格式)。

  • 超連結無作用。

  • 用戶端指令碼不會執行。

  • 伺服端程式碼未執行。

  • 當指標移至支援替代文字的項目時 (例如影像)，工具提示中不會顯示這個替代文字。

顯示 Null 字元

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

在設計檢視中定位項目

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

在設計檢視中巡覽

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

  • 標記導覽： 標記導覽會顯示目前的項目，以及其所屬之父標記的階層架構。 您可以使用標記導覽查看具有焦點 (Focus) 的項目，並從目前的項目移至階層架構中較上層的項目。 如需詳細資訊，請參閱 NIB: Using the Tag Navigator in Visual Web Developer。

  • 文件大綱： [文件大綱] 視窗可以讓您找出並選取文件內的所有項目，包括不顯示的項目。 如需詳細資訊，請參閱 NIB: How to: Navigate in the HTML Editor in Visual Web Developer。

  • [屬性] 視窗。 當您從 [屬性] 視窗頂端的下拉式清單 (Drop Down List) 選取項目時，編輯器便會在文件中選取該項目。

加入項目

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

  • 從 [工具箱] 拖曳這些項目。

  • 按兩下 [工具箱] 的項目，這樣會在插入點目前在文件中的位置插入項目。

  • 從另一個在 Visual Web Developer 開啟的文件中拖曳項目。

  • 從 [方案總管] 拖曳這些項目。 這個動作主要用於將使用者控制項和樣式表參考加入至網頁。

  • 將文字直接輸入網頁。

設計檢視中的智慧標籤

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

設計檢視中的運算式

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

重新整理設計工具

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

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

  • 以滑鼠右鍵按一下 [設計] 視窗，然後按一下 [重新整理]。

  • 在 [檢視] 功能表上，按一下 [重新整理]。

請參閱

Walkthrough: Creating a Basic Web Forms Page in Visual Studio
NIB: Source View
NIB: Paste Operations in the HTML Editor Source and Design Views
NIB: Using the Tag Navigator in Visual Web Developer
Positioning Elements in Design View
NIB: How to: Navigate in the HTML Editor in Visual Web Developer