MyEclipse技術交流群：742336981 歡迎一起進群討論

一、HTML & JSP 可視化設計器

本文簡要介紹了 HTML 和 JSP Web 設計器的概念、功能和基本操作過程。這兩個設計器具有相似的功能和相同的操作模型，但本文為專門針對其類型的內容。本文檔中的示例是使用 MyEclipse HTML Designer 創建的。

HTML網頁設計器具有設計/源代碼分屏模式，因此您可以在使用設計器時查看源代碼。HTML調色板分為HTML4、HTML5、Ionic和JQuery Mobile元素。

Ionic調色板在MyEclipse 2015 CI 11和更高版本中可用。

設計模式下的HTML網頁設計器

1.1內容類型支持(HTML、JSP)

MyEclipse HTML Web Designer專門用于創建和編輯HTML文件。MyEclipse JSP Web Designer用于創建和編輯JSP文件，包括Struts和JSF文檔。在Designer啟動過程中，將檢查正在加載的文件的內容，Eclipse平臺根據文檔的內容類型選擇相應的HTML或JSP Web Designer。

1.2編輯模式

設計器提供了三種編輯模式來支持任何類型的編輯。

• 源模式——源模式是HTML和JSP代碼的源代碼編輯器，它包括智能內容輔助、行編號、彩色語法高亮顯示、格式操作、實時驗證、在鍵入時標記有問題的源代碼以及代碼格式化。
  設計模式-設計模式有雙面板視圖，設計模式在頂部面板，源模式在底部面板。
• 設計模式為所見即所得的可視化編輯模式。設計畫布允許選擇、復制、剪切、粘貼和使用拖放重新定位web UI控件。此模式包括一個設計調色板，其中包含可以添加到設計畫布的UI web控件。
• 預覽模式-預覽模式允許您快速查看頁面在瀏覽器中的外觀。這種模式提供了IE預覽和Mozilla預覽。預覽模式從設計模式加載當前源代碼，即使編輯器內容尚未保存。HTML源代碼以預覽模式呈現，并且“扎根”于資源所在的位置。如果HTML文檔中的圖像相對于HTML頁面的當前位置，則圖像將在預覽中正確呈現。

每個模式的選項卡位于編輯器面板的左下方。要切換模式，請單擊要查看的模式的選項卡。

編輯器模式選項卡

1.3屬性和大綱視圖

HTML和JSP Web Designer特性集包括針對所有HTML、JSP、JSF和Struts標記的自定義屬性編輯器以及結構化的Outline視圖。當在Source面板、Design面板或Outline視圖中選擇相應的標記時，自定義屬性編輯器將自動激活并顯示在Properties視圖中。

屬性視圖

Outline視圖提供Visual Designer內容的結構化樹狀視圖。Outline視圖中的節點可以添加、刪除、展開和收縮。有關如何打開Properties和Outline視圖的說明，請參見第2節。

大綱視圖

1.4編輯器模式與視圖的同步

為了在所有編輯模式和支持視圖中呈現web文檔當前狀態的準確視圖，可視化設計器維護兩種類型的信息同步。第一個是選擇同步。可視化設計器在“源”和“設計”窗口以及“大綱”和“屬性”視圖之間維護一個公共選擇上下文。第二種形式的同步稱為“設計-源同步”，它發生在“源”窗口的源代碼和“設計”窗口的所見即所得呈現狀態之間。

1.4.1選擇同步

選擇同步使您能夠在“源”窗口、“設計”窗口或“大綱”視圖中選擇任何位置，并讓所有視圖顯示公共選擇上下文。此外，如果公共選擇涉及HTML、JSF或Struts標記，Properties視圖將顯示該標記的自定義屬性編輯器。下圖說明了選擇Login按鈕如何導致Outline視圖滾動到并突出顯示Login按鈕的HTML“<input>”標記，Source窗口滾動到并突出顯示包含按鈕源代碼的源行。

選擇同步

1.4.2設計源同步

“源”窗口是“設計”窗口、“預覽”窗口以及“屬性”和“大綱”視圖同步其狀態的主面板。當在Design窗口、Properties視圖或Outline視圖中啟動編輯操作時，該操作將被路由到Source窗口，在該窗口中應用該操作并更新源。然后，Source窗口向其他面板、窗口和視圖發出特定更改的信號，使它們的表示狀態與Source窗口的表示狀態同步。您可以觀察到源代碼和呈現的設計正在實時更新和同步。

二、啟動網頁設計器，相關視圖和透視圖

要啟動HTML或JSP網頁設計器，請執行以下操作之一:

• 雙擊HTML或JSP文件以啟動Visual Designer
• 右鍵單擊HTML或JSP文件，然后選擇Open或Open With>MyEclipse HTML Designer或MyEclipse JSP Designer。

2.1打開屬性視圖

屬性視圖顯示可視化設計器中所選標記的電子表格樣式編輯器。要打開屬性視圖，請選擇窗口>顯示視圖，然后選擇屬性。Properties視圖在當前透視圖定義的位置打開。

屬性視圖

2.2打開大綱視圖

要打開大綱視圖，請選擇窗口>顯示視圖，然后選擇大綱。Outline視圖在當前透視圖定義的位置打開。

大綱視圖

2.3重置MyEclipse透視圖

MyEclipse Workbench透視圖的視圖安排針對web開發任務進行了優化。默認透視圖包括Properties和Outline視圖以及Image Preview。您可以選擇修改工作臺透視圖的視圖組織。要將任何透視圖重置為其默認視圖，請選擇Window> reset perspective。