2. Viewing Web Pages

In this section, you will open and view a web page in the JSP editor. You will learn how the Workshop source editor, design editor and compound editors allow you to easily work with your web pages. Make sure to expand the site folder in the project before beginning this section, so that you can access all of the files which are used in the exercises.

Background

Workshop provides an advanced visual editor which allows you to compose web pages visually through a design editor or through direct manipulation of markup in a source editor. Workshop also provides a compound editor mode in which the source editor and design editor are available simultaneously. This allows for source-level editing but still provides real-time visual feedback of design changes as you edit your web page. You will spend more time learning how to use Workshop to edit your web pages in later exercises.

Activating the different editors

  1. In the AppXplorer view, open the node site (Web App Root) and double-click home.jsp
  2. By default the compound editor is activated (Notice that the Design/Source tab is selected).

  3. Take turns clicking on the Design and Source tabs.
  4. Notice that the corresponding editor is activated.

  5. Click the Design/Source tab.
  6. Both Design and Source editors display.

Click one of the following arrows to navigate through the tutorial:


Still need help? Post a question on the Workshop newsgroup.