程式碼與分割網頁檢視

網頁的 [設計] 檢視可讓您在系統自動建立 HTML 程式碼的情況下,以視覺化的方式設計網頁。但有時您還是需要使用網頁的程式碼。例如,當您接手某人的網站專案時,通常會想知道他們使用了哪些標籤。

[程式碼] 檢視可顯示用以製作網頁的程式碼。[分割] 檢視可讓您同時充分掌控網頁的設計與程式碼。選取某個窗格中的項目時,另一個窗格會捲動並找出該窗格中的項目。例如,若選取了 [設計] 窗格中的某個 PARAGRAPH 元素,[程式碼] 窗格就會捲動至對應的 <p> 標籤,反之亦然。此種方式非常適合讓您於執行程式碼時同時加以監控,而且亦可當做學習工具使用,因為您可以在 [設計] 窗格中執行作業,同時在程式碼自動於 [程式碼] 窗格中更新時加以檢視。

Cc295452.alert_note(zh-tw,Expression.10).gif注意事項:

若要在網頁處於 [分割] 檢視狀態時在 [程式碼] 與 [設計] 檢視之間移動,請按 ALT+PAGE DOWN 或 ALT+PAGE UP。

當您在 [分割] 檢視的 [設計] 窗格中執行作業時,可以不重新整理網頁,而檢視 [程式碼] 窗格中自動更新的程式碼。若您在 [分割] 檢視的 [程式碼] 窗格中進行編輯,[設計] 窗格將在您按一下 [設計] 檢視中的任意處、儲存網頁或指向 [檢視] 功能表並按一下 [重新整理] 後,反映您的變更。

Cc295452.alert_tip(zh-tw,Expression.10).gif秘訣:

若您認為 [分割] 檢視所提供的空間不足以供 [設計] 與 [程式碼] 窗格使用,您可以考慮在新的視窗中開啟網頁 (在 [視窗] 功能表上按一下 [在新視窗開啟]),於其中一個視窗中使用網頁的 [設計] 檢視,並於另一個視窗中使用 [程式碼] 檢視。若電腦上安裝了兩部監視器,可以在其中一部監視器上顯示含有網頁之 [設計] 檢視的視窗,而在另一部監視器上顯示含有網頁之 [程式碼] 檢視的另一個視窗。

在分割檢視中調整設計和程式碼窗格的大小

  • 在 [分割] 檢視中,執行下列其中一項動作:

    • 拖曳 [設計] 與 [程式碼] 窗格間的分隔線。

    • 以滑鼠右鍵按一下 [設計] 窗格中的任意處,然後按 [移動分割]。按向上鍵或向下鍵,將分隔線向上或向下移動。完成分隔線的移動作業後,請按 ENTER 鍵。

請參閱

概念

程式碼與指令碼工具概觀

設定程式碼格式

移至某特定的程式碼行

快速標籤編輯器

快速標籤編輯器

編輯 HTML 標籤的屬性