Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples


Get Lean with GoLive 6

by Derry Thompson
11/22/2002

Mention WYSIWYG Web creation tools -- be it GoLive or any other tool -- to an HTML purist, and you're likely to hear two outcries of complaint: "I don't use such tools because they bloat my HTML code and create non-standard markup."

Once upon a time, back in the days of GoLive 2.0, there was merit to this resistance. But times have certainly changed, and GoLive 6.0 provides the tools to produce lean and totally compliant markup.

In this article I'll show how to use the GoLive environment to easily create, check, and upload HTML that meets your DTD requirements.

Code Bloat and How to Reduce It

Below is a screen shot of the source code of a typical GoLive-generated page using the rollover objects. As you can see, the markup is very long -- or "bloated." There are good technical reasons why GoLive produces such apparently convoluted JavaScript. If you are interested in finding out why, and what the advantages are, there is an excellent white paper on the Adobe site.

By default, GoLive incorporates the generated JavaScript into the page. However, there is an alternative. GoLive can write the JavaScript to an external .js file and then import it when the page is loaded. The big advantage with this is that all of your JavaScript routines get contained in one file and it only has to be loaded once. This can have a dramatic effect on the size and speed of your pages. Here's how to do it.

Pic 1. Showing the code from embedded JavaScript. (Click on the screen shot to open a full-size view.)
Click for larger view

Select the page icon, go to the inspector and click on the HTML tab. You'll see an option that lets you either a) Write in page or b) Load external CSscript. Select the option to load external CSscript. Now look at the source. See the difference?

Pic 2. Same page after the JavaScript has been exported. (Click on the screen shot to open a full-size view.)
Click for larger view

If we check the file size now, we'll see the size of the document has reduced from 9.7k to 5.2k. This reduction will be repeated in every page that uses this JavaScript routine. You can see that this can have a dramatic effect on the size of your overall site.

Pic 3. Size of file before export.
Size of file before export.

Pic 4. Size of file after export.
Size of file after export.

Wondering where your JavaScript now resides? Look in the site view for a folder called Generateditems. Open it. Look for the file called CSScriptLib.js. This is the external JavaScript library. This is the page that loads to make your rollovers -- or any other GoLive actions that may use (including third-party actions) -- work. (Some third party actions -- like menuMachine -- also use their own external JavaScript file.)

Pic 5. Expanded view showing the JavaScript library.
Expanded  view showing the JavaScript library.

As the CSScriptLib.js file contains the code for every single action that exists in GoLive, it checks in at a fairly hefty 73k. GoLive has a built-in way to reduce the size of that file, too.

Go up the site window, and select Flatten Script Library; GoLive will then parse through the entire site, working out which actions are being used, and remove any unreferenced actions. If we check the file size after flattening, we'll see it has reduced to 5.7K from the original 73k. That's a huge savings.

Pic 6. Expanded view showing the JavaScript library after flattening.
Expanded view showing the JavaScript library after flattening.

Each time you add or modify an action, the file will jump up in size again. Thus, you need to flatten the file prior to uploading it to your FTP server. However, GoLive can automatically flatten the script library for you. To do this, go to the site settings in the site menu, select the script library option, and set it to Import GoLive Script Library. Then select the Upload/Synch Times option, and click on the option to Flatten Script Library. This will ensure that the library is flattened every time you upload to your FTP server using GoLive's Incremental Upload feature. If you just drop and drag files to the FTP window to upload, the automatic flattening will not happen.

Pic 7. The Upload/Synch Times option
The Upload/Synch Times option

There is also a preference setting in GoLive that ensures that an external script library is used on any page you create where an action is used. To set this, go to Preferences > Scripts > Use external library. Once set, all pages that require it will load the external file.

If you have site that you want to convert to external library use, you may find it worthwhile to check out OutActions; they have an extension that will convert an entire site to use an external library.

JavaScript Pocket Reference

Related Reading

JavaScript Pocket Reference
By David Flanagan

Creating Valid Markup

Looking at the source again, you'll see that GoLive is using a bunch of proprietary tags. For example, it's inserting a <csscriptdict import> tag where the script library is imported. Where the rollovers are, it's using a <csob> tag. These tags aren't valid HTML; GoLive uses them internally to identify objects. When you switch to layout view and see a rollover object, it's the <csob> tag that allows GoLive to identify it, show you the right icon, and present you with all of the options for that object in the inspector. Browsers will ignore these tags when parsing the markup, but their inclusion means the pages will fail any validation tests. This can easily be rectified.

In site Settings > Upload/Synch Times, there's an option to strip the HTML code of Adobe GoLive elements. If you have this option turned on, for every page you upload to your server, GoLive will remove all the proprietary tags. This means your page has a much better chance of passing any validation tests.

You can also choose to strip GoLive elements any time you use GoLive's incremental upload feature. When the Upload options box appears, click the button that says Strip Options and you can choose to remove the GoLive elements then.

Stripping out the GoLive elements is just one aspect of producing valid markup. GoLive has several other features that can help you achieve this.

What Is Valid Markup?

Valid markup is markup that passes the recommendations laid down by the W3C, the body that defines (X)HTML. The first important part of writing valid markup is to declare a DOCTYPE. DOCTYPE tells a browser what markup to expect. Including a DOCTYPE in your pages can save valuable processing time because the browser knows exactly what kind of markup to expect, and will display the page accordingly. GoLive helpfully allows to you to set the target DOCTYPE.

Pic 8. Setting the DOCTYPE.
Setting the DOCTYPE.

There are two type of DOCTYPE statement -- long and short. GoLive provides the tools to handle both. To set the target DOCTYPE, select the flyout menu on the top right of your page and select DOCTYPE. By default, GoLive uses the shortened version of the DOCTYPE. For the long version, press Alt (Option) while selecting the flyout. If you'd like to read more about DOCTYPE then read this "Use the Right Doctype" article on the O'Reilly Network.

Pic 9. Example of the short DOCTYPE.
Example of the short DOCTYPE.

Pic 10. Example of the long DOCTYPE. (Click on the screen shot to open a full-size view.)
Click for larger view

GoLive can also configure the object palette to conform to your chosen DOCTYPE. The configured palette will only display objects that are valid for your chosen version of (X)HTML. To configure the object palette, go to the flyout menu at the top right of the object palette, select Configure, and select a DOCTYPE version.

Pic 11. Configuring the object palette for a DOCTYPE. (Click on the screen shot to open a full-size view.)
Click for larger view

Once selected, GoLive will only show valid objects for your chosen DOCTYPE.

Pic 12. The Reduced Object Palatte.
The Reduced Object Palatte.

GoLive has another trick up its sleeve when it comes to producing compliant markup: it can check your markup. Go to Edit > Syntax Check. Then set a DOCTYPE target. In the bottom pane of the palette, elements can be turned on and off. Doing this prior to a Strip Elements upload allows for a page with GoLive elements in it to be validated before uploading.

Pic 13. The Syntax Check window.
The Syntax Check window.

Once you hit OK, GoLive will scan your markup and check it. If there are errors, it will produce a report like the one below.

Pic 14. The error report.
The error report.

Clicking on the error will take you to the error in your markup, as shown in the picture below.

Pic 15. Highlighting the error. (Click on the screen shot to open a full-size view.)
Click for larger view

GoLive now provides you with the tools to produce lean, efficient valid markup. Using them will benefit you and your client. And the next time your friend -- the die-hard hand coder -- tells you that GoLive produces bloated code and invalid markup, smile knowingly and think "Yeah ... Right!"

Derry Thompson is currently co-owner of GloDerWorks with his partner Gloria Hansen. An active participant in the GoLive community and an avid Mac user, he can be found in various airports using his Titanium G4 Powerbook.


Return to the Web Development DevCenter.

Copyright © 2009 O'Reilly Media, Inc.