|
||
Outline |
||
1. PrefaceThis document was written using Sun JDK 1.4.2, Eclipse 3.2.2 and MyEclipse 5.5. All screenshots are based upon the default user interface settings for Eclipse, MyEclipse Enterprise Workbench, and Windows XP. If you experience difficulty with the instruction of this document, please see the User Feedback section for how to provide feedback to the MyEclipse documentation team. |
||
2. IntroductionThis tutorial shows the concepts and features most important to HTML editing using the "Classic" editor. It will cover the available modes of the editor, its associated views, and preferences. When you first bring up the HTML editor, you will notice it has the following two modes:
The Design mode is the default when opening any HTML file. You can change modes by simply clicking on the appropriate tabs on the bottom of the editor. The design mode has a source panel attached to it. The following two views are linked to the design mode of the HTML editor
Both the outline and properties views are active by default in the MyEclipse perspective. If they are not visible in your workspace you can show them by going to Window->Show View->Other... then select outline or properties view as shown in Figure 1.
|
||
3. Preview Mode
The preview mode allows you to quickly see how your page will
look in a browser. This mode gives an IE preview as well as a Mozilla preview. The preview mode loads the current
source from the design mode, even if the editor contents have not
yet been saved. The HTML source will be rendered in
the preview page and will be "rooted" at the
location of the resource. So if the images in the HTML
document are relative to the current location of the HTML page,
then the images will be rendered correctly in the preview.
|
||
4. Design ModeThe design mode has a dual panel view with Design Mode in top panel and Source Mode in bottom panel (See Figure-3). The design mode is WYSIWYG visual editing mode. The design canvas allows web UI controls to be selected, copied, cut, pasted, and repositioned using drag-and-drop operations. This mode includes an embedded toolbar with text styling operations and a design palette that contains UI web controls that you can add to the design canvas. The source mode is a source code editor for HTML code that includes smart content-assist, line numbering, syntax colored highlighting, format operations, real-time validation, marking of problematic source as you type, and code formatting.
Figure 3: HTML Design Mode |
||
4.1 Source ModeThe source mode is the default mode when opening an HTML file. It allows you to edit the HTML source directly. It provides many productivity features including the following:
|
||
4.1.1 Smart Code Completion and Content AssistThroughout the source, the editor will provide content-specific code assistance.
|
||
4.1.2 HTML ValidationThere are two types of HTML validation: "As you type" and "Resource changed"
|
||
4.1.3 Source Formatting and Cleanup
HTML documents can be formatted quickly by just running the
"Format Document" command, located on the editor's
context menu as shown in Figure 9. The formatter doesn't
modify the HTML tag elements internally. It only
adjusts indentation and spacing of HTML elements.
Figure 10: HTML Source Cleanup Document Action |
||
5. Outline ViewThe outline view provides a real-time tree view of the HTML document. Each node in the tree represents an HTML element. By clicking on any tree node, the corresponding HTML element will be selected in the source editor and the element will be activated in the properties view as shown in Figure 11.
If you right-click any HTML element, you will see a list of actions that are enabled for that particular element as shown in Figure 12. The contents of each of these menus are context-sensitive based on the type and location of the HTML element. For instance, in the following example, the actions for a <tr> tag in the "Add Before" menu show only those HTML tags that make sense in the parent <table> context.
Figure 12: Context sensitive HTML Tag Actions from Outline View |
||
6. Properties ViewThe properties view allows editing of all of the valid attributes for any selected HTML element as shown in Figure 13.
Figure 13: Integrated Properties View for HTML Source Editor |
||
7. Preferences PageThe preference page for the HTML editor can be easily accessed by simply right-clicking the editor and selecting "Preferences" as shown in Figure 14. Also, you can find them under Window->Preferences->MyEclipse->Files and Editors->HTML. The common editor preferences, which are used by all MyEclipse editors, applies to the HTML editor.
The HTML source page has specific options to HTML editing such as format rules, content assist, tag names and cases.
Figure 15: HTML Source Preferences |
||
8. FAQWhy isn't there a Preview tab on Linux? / Why doesn't the Web Browser view work in Linux?
Why isn't there a Design tab on Linux?
What differentiates the "Classic Editor" and the "Visual Web Designer" ?
|
||
9. User FeedbackIf you have comments or suggestions regarding this document please submit them to the MyEclipse Documentation Forum. |