NetObjects SiteStyles API

This document outlines the fundamentals of creating and packaging SiteStyles for easy integration into NetObjects Fusion 7.5 and higher

• Designing SiteStyles
• Packaging SiteStyles for Online Distribution
• Creating a Preview Page
• Creating the XML Source
• Adding an XML Source to Fusion

Designing SiteStyles
Required tools
[1] The latest version of NetObjects Fusion
[2] Graphics editing software - Adobe Photoshop® is recommended

1. A style consists of several graphical elements such as buttons, banners, background, etc. All elements must be included in a style before it can be added to a style library. Using graphic editing software generate each of the elements needed, keeping a consistent theme across all elements.

2. Once you have created the graphical elements necessary for a style launch NetObjects Fusion and create a blank site. Navigate to the Style view and create a new style. In NetObjects Fusion selecting the ‘Active SiteStyles’ node and then clicking ‘New Style’ from the control bar.

3. When prompted to name the new SiteStyle use a creative name that is indicative of the target audience (ex. Football Fanatic). If creating a suite of styles with various color variations use a hyphen to separate the style name and the variation (ex. Football Fanatic - Orange & Blue).

4. Now assemble each of the graphical elements by double-clicking the ‘Not Specified’ placeholders and then browse to the corresponding element. Once each placeholder is replaced use the Style Properties palate [F3] to format the text portion of the Buttons and Banner.

5. Finally move to the ‘Text’ tab and specify the typography settings for the style. Apply the style to the current site to assure the style is applied properly.

Packaging SiteStyles for Online distribution
Required tools
[1] ZIP utility - WinZip® is recommended
[2] Text editor - TextPad® is recommended

1. Styles created in ‘Active SiteStyles’ will be stored in the Styles folder of the current site open in Fusion. (ex: C:\NetObjects Fusion 7.5\User Sites\Sample Site\Styles). The style folder and contents should be compressed into a ZIP format, maintaining the folder structure created by NetObjects Fusion.

Creating a Preview Page
Required tools
[1] HTML editor
[2] Graphics editing software - Adobe Photoshop® is recommended

1. To conserve processing cycles and bandwidth each SiteStyle is buffered with a preview page. This HTML page is a general mock up of what the style will include once installed, the suggested look can be seen here:
http://www.netobjects.com/nof/styles/OnlineStyles/A_La_Carte/Blue-Yellow/preview.html

However the look and feel is not limited to this design. Though keep in mind the bandwidth that will be consumed with any purposed design.

As seen in the above URL it is recommended that each style be given its own folder. The same holds true with each variation, also the variation should be stored within the parent style folder. Finally a consistent name should be used for preview pages (ex. preview.html).

Creating the XML source
Required tools
[1] Text editor - TextPad® is recommended

A sample of Fusion compatible XML can be seen here:
http://www.netobjects.com/nof/styles/OnlineStyles/OnlineStyles75.xml

1. The first few nodes specify the base URL from where styles will be distributed. The remainder of the XML should use relative paths when specifying resources. Each individual style will be defined within the <nof:style> tags.

2. The style folder, name, description and author values should match the corresponding values used when the style was created with Fusion.

3. The next node <nof:archive src="./Example/archive.zip" /> Specifies the path to the ZIP. Notice the filename is archive.zip this is another recommendation that all ZIPs be named consistently and stored with the preview page.

4. The path to the preview page is the next node. <nof:previewurls graphics="./Example/preview.html" text="./Example/preview.html" /> Notice there are two attributes, graphics and text. In future Fusion releases support for independent previews will be supported. Currently their values should be the same.

5. The style is then closed </nof:style>

6. If a style has multiple variations then a container can be created to group the related styles. To accomplish this encapsulate the styles you wish to group with the <nof:stylesgroup folder="Example Group"> tag. Then the group is closed with </nof:stylesgroup>

7. Once the XML, Previews and Styles are complete publish them to the medium of your choice. The preferred method of distribution is a Web Server. To test the files add the XML source to Fusion.

Adding an XML source to Fusion

1. Launch Fusion and open a site.
2. Click the Style button from the control bar.
3. Select ‘Style’ from the toolbar, then ‘Add SiteStyles Source...’
4. For an Online source select ‘Online SiteStyles’ and click ‘Next’.
5. Specify the URL to the published XML file.
6. Click Test to verify the document.
7. Once verified click Finish and proceed with a QA cycle.
8. You are now ready to add/distribute your custom SiteStyles.