Working in the Source page

Working in the Source page

The Page Designer Source editor enables you to directly edit HTML and other markup text, such as JSP pages and embedded JavaScript™. Any changes you make in the Page Designer Source page are also reflected in the Design page.

The Source page can also be displayed by clicking the Split tab. The Split page displays both the Design and Source pages split vertically or horizontally. If you add or update an attribute value in the Source page and the Properties view is visible, the Properties view refreshes as well.
The Page Designer Source editor, unlike the structured text editor that can be invoked from outside of Page Designer, supports the use of Quick Edit view .
The Page Designer Source editor has the following text-editing features:
Table 1. Features of the Page Designer Source editor
Feature Description
syntax highlighting Each tag type is highlighted differently, enabling you to easily find a certain kind of tag for editing. For example, if you create a page from a page template, the common area of the page cannot be edited and is highlighted in gray.
unlimited undo and redo You can incrementally undo and redo every change made to a file for the entire editing session. For text, changes are incremented one character or set of selected characters at a time.
content assist Content assist helps you to finish tags or lines of code and insert macros. Choices available in the content assist list are based on tags defined by the tagging standard specified for the file being edited. In some cases, content assist opens automatically. Press CTRL + Space to invoke content assist.
user-defined macros You can access user-defined templates (chunks of predefined code) with content assist to help you quickly add regularly used tagging combinations
element selection Based on the location of your cursor, the element selection indicator, located in the vertical border on the left area of the Source page, highlights the line numbers that contain the elements being edited.
pop-up menu options From the editor's pop-up menu (accessed by right-clicking the mouse at a specific position in the editor), you have many of the same editing options available in the workbench
Edit menu.
drag and drop Objects from the Snippets view, Palette view, and the Gallery view (in conjunction with the Thumbnails view) can be dragged and dropped in the Source page at the cursor position. In addition, when colors from the Color view and style sheets are dropped in the Source page, the appropriate tagging is applied to the files, although display the Design view to see the resulting effects. Objects can also be dragged in from outside sources (such as from Microsoft® Internet Explorer or from a file system).
copy and paste You can copy text from any of the editors or views that offers text copy ability (such as the source editor and the Design page in Page Designer) and paste them into the Snippets view to create a new snippet.
validation You can turn on or off and configure an option on the preferences page to also validate your code as you type. Select

Window | Preferences | General | Editors | Structured Text Editor and select the
Report problems as you type check box.
customization You can customize the appearance of the editor. (

Window | Preferences | General | Editors | Editors (or Structured Text Editors)) or

Window | Preferences | Web and XML | HTML Files | HTML Source)

There are several ways you can enter, insert, or delete tags and text in the Source page.

Type tags in directly.

Use content assist to receive prompting for valid tags.

Select menu items.

Select toolbar buttons.

Change tags using the Properties view.

To edit an HTML or JSP file in the Source page, follow these steps:

Open the HTML or JSP file that you want to work with in Page Designer. Typically, all that you will need to do to open the file is to double-click on it in the Enterprise Explorer view. You might need to click the
Source tab.

Edit the code as necessary, using any of the available features. You can use smart double-clicking behavior to select attribute values, attribute-value pairs, and entire tag sets to quickly update, copy, or remove content.

At intervals, you can format individual elements or the entire document to restore element and attribute indentation to see nesting hierarchies more clearly in the file.

Save the file.

Related concepts

Page Designer

Related tasks

Working in the Design and Split pages
Creating Web pages
Creating a Web page template
Switching between Design and Preview panes in the Split page

Feature	Description
syntax highlighting	Each tag type is highlighted differently, enabling you to easily find a certain kind of tag for editing. For example, if you create a page from a page template, the common area of the page cannot be edited and is highlighted in gray.
unlimited undo and redo	You can incrementally undo and redo every change made to a file for the entire editing session. For text, changes are incremented one character or set of selected characters at a time.
content assist	Content assist helps you to finish tags or lines of code and insert macros. Choices available in the content assist list are based on tags defined by the tagging standard specified for the file being edited. In some cases, content assist opens automatically. Press CTRL + Space to invoke content assist.
user-defined macros	You can access user-defined templates (chunks of predefined code) with content assist to help you quickly add regularly used tagging combinations
element selection	Based on the location of your cursor, the element selection indicator, located in the vertical border on the left area of the Source page, highlights the line numbers that contain the elements being edited.
pop-up menu options	From the editor's pop-up menu (accessed by right-clicking the mouse at a specific position in the editor), you have many of the same editing options available in the workbench Edit menu.
drag and drop	Objects from the Snippets view, Palette view, and the Gallery view (in conjunction with the Thumbnails view) can be dragged and dropped in the Source page at the cursor position. In addition, when colors from the Color view and style sheets are dropped in the Source page, the appropriate tagging is applied to the files, although display the Design view to see the resulting effects. Objects can also be dragged in from outside sources (such as from Microsoft® Internet Explorer or from a file system).
copy and paste	You can copy text from any of the editors or views that offers text copy ability (such as the source editor and the Design page in Page Designer) and paste them into the Snippets view to create a new snippet.
validation	You can turn on or off and configure an option on the preferences page to also validate your code as you type. Select Window \| Preferences \| General \| Editors \| Structured Text Editor and select the Report problems as you type check box.
customization	You can customize the appearance of the editor. ( Window \| Preferences \| General \| Editors \| Editors (or Structured Text Editors)) or Window \| Preferences \| Web and XML \| HTML Files \| HTML Source)