Visual Editing in Design Mode

Studio provides an optional visual editing view, called Design View, which lets you edit HTML code while seeing how the results would look in a browser.

The Design view is most useful for placing images on a page and for creating complex tables and forms without having to code the tags. The code for these elements is generated automatically and is updated as changes are made.

Note The Design view feature requires Microsoft's Internet Explorer 4.01 or later. If you don't have this browser installed, or if you don't intend to use the Design view, you can disable it in the Design pane of the Settings dialog box (F8).

Note To edit a page in Design view:
  1. With a document open in the Editor pane, save your changes then click the Design tab. The Design view opens, showing a browser view of the document that you can also use to edit text, styles, and graphics.
  2. Use the Design view toolbars to edit text, change styles, add colors, or create HTML tables and form elements.
  3. If you've opened Design view and now prefer to cancel any changes, click the Cancel Design View button to discard all changes and return to the Edit view.

  4. Use the Edit and Browse tabs to return to the Edit and Browse modes.
Note To convert Microsoft Word and Excel content:

You can convert content such as lists, tables, and worksheet cells into their equivalent HTML formatting by copying from Microsoft Word and Excel.

  1. Select the content in Word or Excel.
  2. Paste the selection into the Design window at the location you want it to appear on the page.
  3. Edit the new content visually. For example, you can click on a table border and drag a handle to resize it.
  4. To work directly with the code, switch to the Editor.

To explore this feature, you can experiment with inserting different types of content from Office documents and other Windows applications.