Use Page Designer to add and modify HTML, JavaScript, and JSP content

Page Designer

In Page Designer, you can work with HTML, XHTML, JSP, and Faces JSP files as well as with embedded JavaScript code. Within Page Designer, you can move among three representations of each page: Design, Source, and Preview.

Each page provides a different way to work with the file that you are editing. You will probably want to switch between the editor pages by clicking on the tabs at the bottom of the editor. These pages work in conjunction with a variety of other views that are included in the Web perspective, such as the Outline and Properties views, toolbar buttons, menu bar options, pop-up (right-click) menus, and palette components.

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.

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:

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

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

  1. 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 Project Explorer view. You might need to click the Source tab.

  2. 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.

  3. 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.

  4. Save the file.

Note: When you select Edit > Paste on the Source page of Page Designer, you may get an unexpected string, such as 'None'. To work around this problem, close the Properties view.

Note: When you open Page Designer and switch to the Source page, sometimes a gray window is displayed. To work around this problem, resize the window slightly so that the Source page is redrawn.

Working in the Design page

The Design page of Page Designer is the WYSIWYG mode for editing HTML and JSP files. As you edit in the Design page, your work generally reflects the layout and style of the Web pages that you build without the added complexity of source tagging syntax, navigation, and debugging.

Although many tasks can also be performed in the same way in the Source page, the Design page provides full access to Page Designer menu options, context menu actions, view-specific GUI options (such as those in the Styles view), and drag-and-drop behavior. Note that dynamic data will not be displayed correctly in the Design page; you must run it on a server using the Run > Run on Server option.

The Design page also provides support for frames and free layout mode, which enables you to easily create more complex Web pages. You can see the immediate impact of design decisions more quickly than you would using a text editor. You can change the composition and attributes of pages, tags, images, and effects efficiently and precisely.

Many actions available through the Page Designer menus are also available from design element pop-up menus, which you access by selecting a page object and right-clicking.

Note: You can configure how certain objects, for example comment and script symbols, are displayed in the Design page by selecting Window > Preferences > Web Tools > Page Design > Appearance or Editing Symbols.

Professional hosting     Belorussian informational portal         Free SCBCD 1.3 Study Guide     Free SCDJWS 1.4 Study Guide     SCDJWS 1.4 Quiz     Free IBM Certified Associate Developer Study Guide     Free SCJP 5.0 (Tiger) Study Guide     Free Mock Exam Engine     Free SCWCD 1.4 Study Guide     IBM Test 000-287. Enterprise Application Development with IBM WebSphere Studio, V5.0 Study Guide