WebSiteRobot™ is designed to simplify the process of turning a collection of web pages into a web site. Developers who use WebSiteRobot™ can easily create complex web sites that have a professional look and feel. Using WebSiteRobot™, a developer creates a hierarchy of files and identifies the root folder of this hierarchy in WebSiteRobot™. Without changing the developer's files, WebSiteRobot™ creates additional HTML pages that wrap around the original files and include a navigation tree linking the files.

The MicroHard Example Solution provides an amusing illustration of what can be done with WebSiteRobot. It is also used to motivate the exercises in the tutorial. You can view the MicroHard Example Solution by selecting 'MicroHard Example Solution' from the 'WebSiteRobot' program group on your Start Menu.

A great way to get a jump-start on completing the tutorial is to steal the content of your practice web site from this example. Select 'MicroHard Example Source' from the 'WebSiteRobot' program group on your Start Menu to take a gander at the content pages we used in the MicroHard Example Solution. Copy thes files to the Desktop if you wish to use them as the content pages of your practice site.

You don't absolutely need to author HTML pages to make a web site. A terrific project-team Intranet site could be comprised entirely of Word documents and Excel spreadsheets (and navigation frames made by WebSiteRobot!). To see an example of a web site made entirely of office documents and other non-HTML content, select the 'Office Documents Example' from the 'WebSiteRobot' program group on your Start menu. To learn more about constructing this example from scratch, select 'Spreadsheets on the Web' from the 'Contents' page of this help file.

You don’t absolutely need to author HTML pages to make a web site. A terrific project-team Intranet site could be comprised entirely of Word documents and Excel spreadsheets (and navigation frames made by WebSiteRobot™!). However, if you do want to include some HTML pages in your site (like 99.99% of the sites in the Universe), you will need to select an HTML editor. If you are not too picky about the formatting and alignment of text and images in your pages, then any editor will do. Netscape Composer and Microsoft Word (’97 or later) make good choices because they are already widely available (Composer is free and everyone owns Word, right?).

If you are picky about formatting, then you might be unsatisfied with the limited power and control that popular HTML editors deliver. Many of these editors are too clunky and clumsy for professionals to tolerate. The pages of the MicroHard Example Solution were managed using a customized Excel Workbook that offers more control over HTML formatting than Netscape Composer or Microsoft Word. If you want to use our workbook to edit the content of the MicroHard Example Solution, you can find it in the same folder as the MicroHard Example Source. (Select ‘MicroHard Example Source’ from the ‘WebSiteRobot’ program group on your Start Menu.)

Before using WebSiteRobot™, you must create the files that will comprise the content of your site. Usually these files will be HTML pages. We begin this tutorial by creating a collection of files that might represent the content for our imaginary startup’s business web site:

1. Create a folder on the Windows desktop named ‘workspace’, and another folder inside ‘workspace’ named ‘content’.

2. Use an HTML editor (e.g. Netscape Composer, Microsoft Word, or our Excel Workbook discussed in the ‘Choosing and HTML Editor’ page of this help file) to create 5 HTML web pages named ‘Home.htm’, ‘Contacts.htm’, ‘Products.htm’, ‘WebBlaster.htm’ and ‘WebMasher.htm’ (or copy these pages from the Example Source).

3. Edit these files so they look like a typical home page, contact page and products pages for an imaginary hi-tech startup and save them inside the ‘content’ folder.

4. (Optional) You might want to make sure the background color for these pages is some shade other than pure white so they will be distinctly offset from other frames in the site we will create.

WebSiteRobot™ turns web content into a web site by creating navigation frames that wrap around the original content files. The basic steps for initiating this process are simple.

1. Turn on WebSiteRobot™.
2. Click the ‘…’ button next to the ‘Content Folder’ entry field.
3. Navigate to the ‘content’ folder, which is the root folder for the web pages we created.
4. Double-click this folder and then click ‘Select’ to return to the main screen.
5. From the ‘Publish’ menu, select ‘Publish Site’.

If your computer did not catch fire during the last step, then it is very likely that you have successfully generated a web site from the pages inside the ‘content’ folder. The navigation frames for the generated site can be found inside a folder named ‘wRobot’ located within the ‘workspace’ folder. The root file for your new site is named ‘index.htm’ and it can also be found inside the ‘workspace’ folder. Let's have a look.

Lets imagine that our hi-tech startup wants to organize its site so that the pages defining specific products (like ‘WebBlaster.htm’ and WebMasher.htm’) are logically subordinate to the page that summarizes the general product strategy of the company (‘Products.htm’). To keep the site organized, we should define a folder called ‘Products’ inside the ‘content’ folder and store the pages defining individual products (e.g. ‘WebBlaster.htm’ and ‘WebMasher.htm’) inside this ‘Products’ folder.

1. Create a folder ‘Products’ inside the ‘content’ folder.
2. Move ‘WebBlaster.htm’ and ‘WebMasher.htm’ inside the ‘Products’ folder.
3. In WebSiteRobot™, click the ‘Refresh Page Index’ button next to the ‘Organization or Company’ entry field to rebuild the index for your site. The new folder and files should appear now in the file tree window.
4. From the ‘Publish’ menu, select ‘Publish Site’.
5. WebSiteRobot™ will now ask if you would like to create a folder definition for the ‘Products’ folder. This folder definition is a web page that will be associated with the ‘Products’ folder. It will be displayed in the content frame when the user has navigated to the ‘Products’ folder in the navigation frame. WebSiteRobot™ can not publish your site unless all exposed folders have an associated folder definition.
6. Click ‘OK’ to create the default folder definition.
7. Open ‘index.htm’ in your favorite browser. The changes in content and structure of your site should be evident.

The folder definition created by WebSiteRobot™ is called ‘wrFolder.htm’ and it is stored inside the Products folder. You can open the file in an HTML editor to customize its look or create your own HTML page from scratch and save your page in the same location with the same name. The content we want displayed by the ‘Products’ folder definition already exists in ‘Products.htm’ we merely need to replace the content of ‘wrFolder.htm’ with content from ‘Products.htm’ and destroy the original ‘Products.htm’ file.

1. Open ‘wrFolder.htm’ file in an HTML editor and edit it so that it contains the same content as was originally inside ‘Products.htm’, then delete ‘Products.htm’, which is no longer needed. (Alternatively, delete ‘wrFolder.htm’, then rename ‘Products.htm’ as ‘wrFolder.htm’ and move it into the ‘Products’ folder.)
2. Refresh the page index and re-publish the site. The new structure of your site will be evident when you refresh your browser.

Banners are a great way to add even more elegance and organization to your site. You can define a unique banner for each exposed folder in your site. A file named ‘wrBanner.htm’ or ‘wrBanner.html’ in an exposed folder is assumed by WebSiteRobot™ to be the associated banner for that folder. This banner will be displayed above the content frame for every page in that folder. You can create banners on your own or WebSiteRobot™ can create these files for you.

1. From the ‘Publish’ menu, select ‘Check Completeness’.
2. WebSiteRobot™ will now congratulate you for having created appropriate folder definitions.
3. Next, WebSiteRobot™ will display a list of exposed folders that have no associated banner, coercing you to create default banners for these folders.
4. Click ‘OK’ to generate default banners.
5. Open ‘index.htm’ in your favorite browser. The banners generated by WebSiteRobot™ should be evident.
6. The banner pages created by WebSiteRobot™ are called ‘wrBanner.htm’. Open these files in an HTML editor and edit them so they complement the content pages with an appropriate text and style.

There are many ways to control which files and folders are exposed in the navigation frames of your site. This list enumerates some strategies you might employ.

1. Use the arrow buttons between the ‘Recognized Folders’ list and the ‘Ignored Folders’ list to specify the names of folders that should always be ignored. For example, if you have many folders named ‘images’ that should all be ignored, then you can move ‘images’ from the ‘Recognized Folders’ list to the ‘Ignored Folders’ list.
2. Use the arrow buttons between the ‘Recognized Extensions’ list and the ‘Ignored Extensions’ list to specify which types of files should be always ignored. For example, if you have many ‘gif’ image files (e.g. ‘logo.gif’) that should all be ignored, then you can move ‘gif’ from the ‘Recognized Extensions’ list to the ‘Ignored Extensions’ list.
3. Lastly, you can change the visibility setting of a specific file or folder by selecting it in the file-tree window and then clicking the ‘Recognize’ or ‘Ignore’ button in the ‘Selection’ control group.

1. Move the ‘Products’ folder from the ‘Recognized Folders’ list to the ‘Ignored Folders’ list and re-publish your web site. What do you notice?
2. To continue with the tutorial, move the ‘Products’ folder from the ‘Ignored Folders’ list back to the ‘Recognized Folders’ list.

By default, WebSiteRobot™ arranges files and folders in alphabetical order. To alter this order, you can select any file or folder in the file-tree window and use the ‘Raise’ and ‘Lower’ buttons in the ‘Selection’ control group to adjust its position.

1. Select the ‘Home’ file in the file-tree window.
2. Click the ‘Raise’ button in the ‘Selection’ control group to raise its position above the ‘Contacts’ file.
3. Re-publish your site. The ‘Home’ file should now appear above the ‘Contacts’ file in the navigation frame.

The title associated with a file is used in the generated navigation frames to identify that file. By default, WebSiteRobot™ uses the file name (or folder name) of a file (or folder) as the title. To edit the title associated with a specific file or folder, you can select the file or folder in the file-tree window and click the ‘Override’ button next to the ‘Title’ entry field in the ‘Selection’ control group.

1. Select the ‘Home’ file in the file-tree window.
2. Click the ‘Override’ button next to the ‘Title’ entry field in the ‘Selection’ control group.
3. Change the title from ‘Home’ to ‘Home!’
4. Click ‘OK’ to close the editor.
5. Re-publish your web site. The ‘Home’ file should now be listed as ‘Home!’ in the navigation frame.

The home page of your site is the page that appears selected when you open ‘index.htm’. By default, WebSiteRobot™ chooses the home page of your site for you. To specify a new file or folder as your home page, you can select this file or folder in the file-tree window and click the ‘Select As Home Page’ button located in the ‘General’ control group.

1. Select the ‘Home!’ file in the file-tree window.
2. Click the ‘Select As Home Page’ button located in the ‘General’ control group.
3. Re-publish your site. The ‘Home!’ file should now appear selected when you open ‘index.htm’.

Nearly every HTML file in the universe contains a header. An HTML header describes the file that contains it. HTML headers do not affect the look or behavior of an HTML page. They are principally intended to help search engines remember key words that should be associated with the file. If you want your site to be indexed by search engines you should define associated keywords for each page of your site. WebSiteRobot™ defines default headers for every navigation frame it generates. To edit the header of a specific navigation frame, you can select a file or folder in the file-tree window and click the ‘Override’ button next to the ‘Header’ entry field in the ‘Selection’ control group.

1. Select the ‘WebBlaster’ file in the file-tree window.
2. Click the ‘Override’ button next to the ‘Header’ entry field in the ‘Selection’ control group.
3. Add keywords ‘fast’ and ‘powerful’ to the list of keywords enumerated in this header.
4. Click ‘OK’ to close the editor.
5. Re-publish your web site. The new keywords are embedded in the navigation frame for the ‘WebBlaster’ file.
6. Wait six months and then search for keywords ‘fast and powerful’ at any popular Internet search engine. A link to the ‘WebBlaster’ page of your site will appear at the top of the list of related files.

It is a good idea to save your work before closing WebSiteRobot™. This way, when you want to add a new page to your site, you won’t have to reenter all the changes you have just made. You can simply turn on WebSiteRobot™, then open the file where your settings are stored, and re-publish your site.

1. From the ‘File’ menu select ‘Save As’.
2. In the ‘Save As’ dialog box, enter a distinctive name as the title for your work and click ‘Save’.

It is possible to completely control the ordering of pages on your site as well as the titles of those pages without using the title ‘Override’ button or the ‘Raise’ and ‘Lower’ buttons in the ‘Selection’ control group. The alternative is to use title controls. With this approach, you must first rename files and folders so that their alphabetic ordering coincides with the order you desire in the navigation frame. Secondly you must specify how many characters are used in file names simply to control the alphabetic ordering. Lastly, you must define a variety of character sequences that are assumed as substitutes in file names for characters that are not permitted in file names. A short example should clear up any confusion.

1. Change the names of files and folders in your ‘content’ folder as follows:

‘Home.htm’ => ‘aHomeXX.htm’

‘Contacts.htm’ => ‘bContacts.htm’

‘Products’ => ‘cProducts’

‘WebBlaster.htm’ => ‘aWeb_Blaster.htm’

‘WebMasher.htm’ => ‘bWeb_Masher.htm’

2. Select ‘New’ from the ‘File’ menu to clear all settings from WebSiteRobot™.
3. Use the ‘…’ button next to the ‘Content Folder’ entry field to identify the root content folder of your site (This is the ‘content’ folder). The default ordering of files in the file-tree window, which is alphabetic, is now exactly as we desire.
4. Change the ‘Ordering Chars’ field from ‘0’ to ‘1’ so that the assigned titles will not contain characters used to control alphabetic ordering. Most assigned titles now appear exactly as before.
5. In the ‘Title Controls’ control group, edit the field following ‘Additional Proxies’ so it reads ‘XX’. And edit the next field so it reads ‘!’.
6. The assigned title for the ‘Home’ file is now ‘Home!’, as we desired. This is because the title controls are now set to convert occurrences of ‘XX’ into the character ‘!’.
7. Notice that the assigned titles for ‘Web_Blaster.htm’ and ‘Web_Masher.htm’ are ‘Web Blaster’ and ‘Web Masher’. This is because the title controls are set (by default) to convert occurrences of ‘_’ into the space character.

Just because these controls exist does not mean you have to use them. They are an alternative to using the ‘Title-Override’ button and the ‘Raise’ and ‘Lower’ buttons in the ‘Selection’ control group. Most people just fidget with these controls when they are bored because they like to see the file-tree change. Happy fidgeting!

Every HTML file generated by WebSiteRobot™ has a background color associated with it. These colors are specified in the entry-fields in the ‘Color Settings’ control group (Click the ‘Advanced’ tab to view the ‘Color Settings’ control group). The format for the color definition in these fields is the same as in the HTML markup specification. Each color is defined by concatenating a ‘#’ character with three hexadecimal numbers in the range 0 to FF (0 to 255) to specify the red, green and blue luminescence, respectively.

The ‘TOC Background Color’ setting specifies the background color for the table of contents, which fills up the navigation frame. The ‘Folders Background Color’ and ‘Banners Background Color’ setting specify the background color for generated folder definitions and generated banners respectively. Because WebSiteRobot™ protects user edits to folder definitions and banners, WebSiteRobot™ can only update the background color of these files if the user deletes such files and then instructs WebSiteRobot™ to generate the files from scratch (using the ‘Check Completeness’ function.

1. Change the ‘TOC Background Color’ to ‘#FF8080’.
2. Change the ‘Banners Background Color’ to ‘#BFBFBF’
3. Delete all files named ‘wrBanner.htm’
4. Click the ‘Refresh Page Index’ button next to the ‘Organization or Company’ entry field in the ‘General’ control group to rebuild the index for your site.
5. From the ‘Publish’ menu, select ‘Check Completeness’.
6. When WebSiteRobot™ displays the list of exposed folders that have no associated banner, click ‘OK’ to generate default banners.
7. Open ‘index.htm’ in your favorite browser. The banners generated by WebSiteRobot™ should now be light gray (#BFBFBF) and the table of contents in the navigation frame should be light red (#FF8080).

The navigation frames generated by WebSiteRobot™ have many attributes that can be controlled to further customize the look of your site. The entry fields in the ‘Frame Attributes’ control group specify the associated attributes for these frames. By editing these fields, you can widen borders separating the content, banner and navigation sections of your site or change the relative sizing of these sections. Consult an HTML reference source to learn more about the <FRAMESET> and <FRAME> HTML tags.

1. Edit the ‘Outer Frameset Attributes’ to change the COLS attribute from "25%,75%" to "40%,60%".
2. Edit the ‘Inner Frameset Attributes’ to change the ROWS attribute from "80,*" to "40,*"
3. Re-publish your web site. The table of contents should now stretch across 40% of the window (instead of 25%) and the banner should be 40 pixels tall (half as tall as before).

The table of contents generated by WebSiteRobot™ uses different fonts to identify files and folders that are parents or siblings of the selected file as opposed to siblings of parents of the selected file. WebSiteRobot™ emphasizes parents and siblings by using a larger, stronger font. By editing the entry fields of the ‘TOC Font Attributes’ control group, you can change the specification for this font.

1. Edit the ‘Open Tag’ field associated with ‘Font for Emphasized Nodes’ as follows:

‘<FONT SIZE=3><B>’ => ‘<FONT SIZE=3 COLOR="RED">’

2. Re-publish your web site. The items in the table of contents window that are parents or siblings of the selected file should now appear red.

The graphic portion of the table of contents generated by WebSiteRobot™ is actually composed of an ellaborate mosaic of very small image files called ‘tree elements’ and one larger image called a ‘sitemap image’. You can change the scale of the table of contents by adjusting the display size of the three elements and sitemap image.

1. Change the ‘Height’ field associated with ‘Display Size for Tree Elements’ from 20 to 30.
2. Re-publish your web site. The table of contents inside the navigation frame should now appear much longer than before.

Because WebSiteRobot™ uses HTML frames to wrap around the content files you create, it is easy to include Excel spreadsheets, Word documents and other files in your site. Simply adjust the file visibility settings in WebSiteRobot so that these files are recognized and re-publish your site. When visitors navigate to these documents in Microsoft's Internet Explorer, the content will be embedded in the content frame just like ordinary HTML pages. When visitors to your site navigate to these documents in Netscape Navigator, the documents will appear embedded in the content frame or they will open in an external viewer depending on the 'Navigator Helper Application' settings of their 'Preferences File'.

To see an example of how embedded documents behave inside the browser frame, you can select 'Office Documents Example' from the 'WebSiteRobot' program group on your Start menu.

You can reconstruct this example yourself very easily. Start by making a workspace folder folder on your desktop. Select 'Office Documents Source' from the 'WebSiteRobot' program group on your Start menu. Copy (do not move!) the content folder into your new workspace folder. Turn on WebSiteRobot and select this content folder as the root content folder for your web. Adjust the 'File Visibility Settings' so that the extensions document types you want exposed are 'Recognized Extensions'. Select 'Publish Site' from the 'Publish' menu and you are done. You have duplicated the Office Documents Example.

A technical support contract is not included with the purchase of WebSiteRobot™. However, if you do have technical questions about our product, we will do our best to respond as quickly and completely as possible. Be sure to include your registration key (Use the ‘About…’ function of the ‘Help’ menu in WebSiteRobot™ to remind yourself what key was issued to you) with your question. Our support staff can be reached at:

To submit suggestions for ways that we can improve WebSiteRobot™ in the future, please contact a design-team representative at:

Unregistered copies WebSiteRobot™ limit web site size to just ten pages of content (including folder definitions). Additionally, an unregistered copy of WebSiteRobot™ will embed an extra content page in your site that advertises our product. Registering WebSiteRobot™ obliterates the size limit as well as the embedded advertisement. Registration takes only a few minutes and does not require re-installation of the product.

Registration is not expensive or time consuming. And it helps us recover some of the costs of developing our unique product. Register WebSiteRobot™ now and get started today building the site your friends and colleagues will rave about tomorrow!