GoLive 5
HomeFree ChapterExample FilesTipsExtensionsLinksAuthorsGoLive 5 Site Opens in New WindowSearch

Outline Mode: Top Ten Tips

The Outline mode in GoLive 6 is a unique and powerful feature that makes tedious web authoring tasks a breeze and helps ensure better quality code. Below is our list of the top ten features, tips, and tricks for Outline mode!

Tip #1: Viewing Document Structure
Outline mode displays a fast and easy-to-use structural view of the markup of a document. However, Outline mode isn't just a pretty way to look at your code. It's also a great way to edit and add to your pages. Did you kow you can drag and drop objects from the Objects palette right into Outline mode?

Outline Mode
Figure 1

Tip #2: Learning HTML
Outline Mode is a great way to learn about source code within a structured editing environment which minimizes the tedium and mistakes of hand-coding. In the screenshot below you can see how easy it is to study anything from the structure of tables to the attributes of images. This is a powerful tool for trainers teaching HTML basics and web design fundamentals.

Learning HTML in Outline Mode
Figure 2

Tip #3: Selection cuing
If you select an object (such as an image, table, or text) in Layout mode and switch to Outline mode the code for that object is still selected and cued up in Outline mode. This makes it easy to jump from Layout mode to Outline mode for a quick editing without finding your place in the page again. In fact, this selection cuing feature works seamlessly back and forth between Layout, Frame, Source, and Outline modes!

Selection Cuing Between Editing Modes
Figure 3

Tip #4: Adding Attributes
It's easy to correctly add attributes to objects even if you don't remember the attribute names or syntax. Just select the required attribute for the selected element from the pulldown menu in Outline mode.

Adding Attributes in Outline Mode
Figure 4

Tip #5: Editing Attributes
Outline mode makes it easy to edit attributes of a selected object. For example, the LONGDESC attribute is used frequently to add extended accessibility features to images but there is no corresponding field in the Image Inspector when you use Layout mode. Outline mode makes it easy to add and edit these attributes.

Editing Attributes in Outline Mode
Figure 5

Tip #6: Navigating Complex Tables
The structural view of Outline mode makes it really easy to navigate in and out of complex nested table designs as seen below.

Navigating Complex Tables in Outline Mode
Figure 6

Tip #7: Editing Functions are Controlled by DOCTYPE
The list of attributes available for a selected element is intelligently controlled by the current DOCTYPE of the page. That means the list of available attributes for an element might be longer or shorter, depending on the current DOCTYPE. This is not only a great learning tool but a helpful way to ensure better quality code. Below in Figure 7 is an example of the new attributes available for tables under HTML 4 Transitional as compared with what was available under HTML 3.2.

DOCTYPE Controls Available Attributes
Figure 7

Tip #8: Finding Errors
The Links Warnings feature in Outline mode makes it easy to find obscure errors such as missing single pixel GIFs. In Outline mode just click the Link Warnings button in the toolbar and all the broken link and missing image errors are instantly revealed and highlighted.

Errors Highlighted in Outline Mode
Figure 8

Tip #9: Toggling Unary/Binary
You can easily toggle an element in Outline mode from unary (no closing tag) to binary (closing tag) and back with the contextual menu or the Toggle Binary button in the Outline mode toolbar. This feature is very helpful when people make the mistake of not closing necessary tags. Note in Figure 9 below that GoLive is smart enough to correctly guess where the closing tag of a binary pair should be located in the page? Amazing!

Binary Toggle in Outline Mode
Figure 9

Tip #10: Changing Case and Attribute Quoting
If you Control-click(Mac)/Right-click(Windows) on an element in Outline mode you'll discover a useful but hidden feature called Change Element as seen below in Figure 10. This geeky feature allows you to easily change the case of elements and attributes between all UPPERCASE, all lowercase, and Capitalized. You can also control how attribute values are quoted. If you want this command to work on all the nested elements and attributes make sure the Work recursively option is enabled.

Change Element in Outline Mode
Figure 10

Conclusion
We hope this tutorial has exposed you to new features in Adobe GoLive 6 that will make you more productive. For more free tutorials, tips, and tricks visit the Tips page.

Home | Free Chapter | Example Files | Tips | Extensions | Links | Authors | GoLive 5 | Search

Contact the authors via email: authors@golivein24.com