Converting a web page for use with Synthesis is easy, and can be done by anyone willing to write some simple HTML. You paste the appropriate HTML <object> tags into the page, and set a few <param> tags indicating what you want done with the new content. The tags you add are proper HTML, so you can continue to use your favorite tools as you like.
One of the nice things about converting an existing site to Synthesis is that it can be done incrementally. Start by automating the parts of your site that change the most. If this is sufficient for your needs, you don't need to do a full conversion. You can also choose to wait until a section must be updated to convert it. Typically, the changes are so quick, that it is as fast to convert the page before the update, as it is to update it alone.
Note: We recommend that you also read the section on Site Development before doing your first conversion.
Setting up Synthesis requires partitioning your site's content into
two directory trees: the Site tree (contained in the 
Site panel) and
the Library tree (contained in the 
Library
panel). The Site tree contains the web pages that will be
uploaded to your web server. The Library tree contains
information, in the form of linked web pages, that is dragged to the
Site for publishing. Synthesis will be easier to work with if
you understand a bit about how links are maintained.
During a conversion, your existing web site will be used to populate the Site directory, and the Library will be empty. As you convert your site, you'll add Processing Folders to your Sites pages, and add files to the Library that can later be dropped into your Site's Processing Folders.
Throughout this section, we'll create an example site by converting the ewink website. We begin by setting up the Site Directory and Library Directory by using the Options panel. The Options panel can be reached through the Tools>Options menu selection.
The Generator Tab after we've set the Site Directory and Library Directory through the Tools>Options menu selection.
Since your site exists, you don't need to do much for the initial
conversion. We can import the whole site from where it currently exists,
and start from there. To import the site we use the 
Import Panel
illustrated below.
This example imports the existing web site (with the home page at C:\_eric\web\ewink\index.html) into the new site directory (C:\_eric\ewink). We've specified three files: favicon.ico, index.html, and robots.txt. We don't need to specify the pages that index.html links to, as they will be included automatically.
Just before we import the ewink site. Note that we've only specified three files. Files linked to these three will be imported automatically.
If your site has pages that are not reachable by clicking links starting from the home page, you'll need to import them as well. This isn't a common case, but can happen if you have sections that require a specific file in the URL to reach.
While the files are being imported, they are analyzed for potential rollovers. (Rollovers are the images that change as the mouse moves over them.) Unfortunately, information about the rollover image is not contained in the page's markup, and cannot be reliably determined automatically. When an image is suspected of being a rollover, a window will be popped up to allow you to identify the other image.
Specifying the rollover image for star6-blue.gif. After selecting rollover image button the OK button will save this information to the file. Cancel continues without changing anything.
Here is the Generator tab after we've completed importing the ewink web site. The file and directory structure is the same as it was in the site we imported. Random pages, that cannot be reached through links from the home page, may be missing, so you should check that you have everything you expect.
The Generator tab after the ewink web site has been imported. You should check the new site, to ensure you have everything you need.
Before importing information into the Library, we need to discuss the different ways that Synthesis treats links. While importing an existing site into the Site tree doesn't present any problems, randomly importing Library content can cause problems.
Note: Everything said about the information imported into the Library applies to new content created directly within the Library.
We can characterize the links between web pages as being Structural Links , or Content Links.
So, Structural Links stay where their pointed, and Content Links move around to follow their referenced information.
Now that you know something about links, we can discuss the Library and the Site.
The Library contains pages that are connected to each other by Content Links.
Any link between two pages in the Library will be maintained as a Content Link. While this may not be what the creator of those pages intended, we can't determine this from the page's markup. For this reason you should avoid including Structural Links in the pages you create for the Library.
While this may seem a bit restrictive, it actually makes life easier for you:
If you absolutely must include a structural link in your library content, you should do one of two things:
The Site contains all the pages with Structural Links, along with information and pages dragged over from the library.
Links between two pages in the Site will be maintained as Structural Links provided that those pages do not have copies within the Library. What this means, is that the Site's navigational structure (home page, contact page, etc..) must exist in the Site, and not in the Library.
When you imported the your old site into the Site tree, the links were all treated as structural links. Content links will start to be created as you start dragging content from the Library during updates.
Now that you know the type of content you should keep in you library,
you can import (or create) some Library content. For a start, you can use
the information you cut out of your pages when you add some generators
(below). If you have files that can be imported, use the Import Panel
we used to import the site.
The Generator tab after importing the Site and Library content.
The next step is to create the Processing Folders by inserting Generators for the sections of the site we want to automate. Start with a section that must be updated frequently. While there are a number of Generators available (see the Development section for a list) the replace generator will cover most situations.
We'll convert the Adventure section of the ewink website as an illustration. The original page is shown below. We'll leave the "Adventure" title and link at the top of the page, as well as the "More..." link at the bottom, and use the replace generator to replace the information in the middle.
The Adventure section from the ewink web site. We're going to automate replacing the text between the "Adventure" link at the top and the "More..." link on the bottom.
Here is the HTML code for the Adventure section of the web site before modification:
<div id="adventure-layer"> <h1><a href="adventure/adventure.html">Adventure</a></h1> <p>Visit the West Face of Cerro Torre. Located on the edge of the Hielo Patagonico icefield, many people feel it is one of the most difficult mountains in the world.</p> <h3><a target="_top" href="adventure/rio-tunel/index.html">The Approach - Rio Tunel</a></h3> <p>Interactive image map and slide show of the journey up the Rio Tunel and across the Hielo Patagonico icefield to the remote West Face of Cerro Torre.</p> <h3><a target="_top" href="adventure/cerro-torre/index.html">The Climb - West Face of Cerro Torre</a></h3> <p>Interactive image map and slide show of our ascent of the awesome West Face of Cerro Torre.</p> <h2><a href="adventure/adventure.html">More...</a></h2> </div>
After removing the markup we don't want anymore, we add the target (<div id="adventure-target"></div>) for the replace generator. The key piece here is the target, as this is the part of the web page that the generator will modify.
Here is the HTML code that replaces the Adventure section displayed above:
<div id="adventure-layer"> <h1><a href="adventure/adventure.html">Adventure</a></h1> <div id="adventure-target"> </div> <h2><a href="adventure/adventure.html">More...</a></h2> </div>
After these changes, the Adventure section will look like this:
The Adventure section of the Home page. Note that the empty <div> doesn't display anything, exactly as if it wasn't there at all.
Finally, we add the replace generator to the <head>
section. You can cut and paste this code from the Replace
Generator documentation. The only changes you need to make are the
title in the <object> tag, which labels the Generator's
folder (
), and the value in the <param
name="targetId"> tag, which identifies the <div> we inserted
above.
<head>
...
<object declare classid="HTMLDropOps" title="Adventure (replace)">
<param name="drop" value="replace">
<param name="sourceTag" value="body">
<param name="targetId" value="adventure-target">
</object>
</head>
Note: After completing these changes, we save the file with an
'.htmg' extension so that Synthesis recognizes that this is a Generator
file. Before the changes will take place you need to press the refresh
links button (
), so that Synthesis will notice the new file, and
then reset the generator through the right-click popup:
Now, when you drop a source file into
Adventure (replace) folder, the contents of the source file's
<body> tag are used to replace the contents of the pages <div
id="adventure-target"> tag.
The Generator Tab showing the new home.htmg file, ready to accept the dropped rio-tunel-teaser.html file from the Library.
We'll test the new Generator by dropping a file from the library into it. The results are shown below.
The updated Adventure page showing the page we dropped into the new generator.
Now we can update the Adventure section by dropping files into the
Adventure (replace) folder.
We can continue automating the site by adding generators as needed. For more details on the ways you can automate your site see the Development section.