Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Get Lean with GoLive 6

by Derry Thompson

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.

Pages: 1, 2

Next Pagearrow