Contents

Overview

1 IntroducingWebSiteRobot™!

2 MicroHard Example Solution

3 Office Documents Example

4 Choosing an HTML Editor

Tutorial û Quickstart

5 Tutorial Preparation

6 Publishing Navigation Frames

7 What Happened?

Tutorial û Basic Controls

8 Creating Folders

9 Editing Folder Definitions

10 Defining Banners

11 File Visibility Settings

12 Ordering Files And Folders

13 Editing Titles

14 Defining A Home Page

15 Editing Frame Headers

16 Saving Your Work

Tutorial û Advanced Controls

17 Title Controls

18 Color Settings

19 Frame Attributes

20 TOC Font Attributes

21 TOC Image Proportions

Additional Information

22 Spreadsheets on the Web

23 Customizing TOC Images

24 Instant Intranet

25 Product Support

Registration

26 Benefits of Registration

27 How to Register

Overview

Introducing WebSiteRobot™!

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.

Just take a look at www.WebSiteRobot.com if you want to see a glimpse of the form and style that WebSiteRobot™ can bring to your site.

Overview

MicroHard Example Solution

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.

Overview

Office Documents Example

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.

Overview

Choosing an HTML Editor

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.)

You can also check www.WebSiteRobot.com to see if there is any commercial HTML editor that we currently recommend.

Tutorial ù Quickstart

Tutorial Preparation

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Æ.
  1. 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).
  1. 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.
  1. (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.

Tutorial ù Quickstart

Publishing Navigation Frames

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.

Tutorial:

  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Æ.

Tutorial ù Quickstart

What Happened?

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.

Tutorial:

  1. Using your favorite browser, open æindex.htmÆ.
  2. The left frame of this page contains links to various other pages in your site. Click the links to navigate your new site.
  3. You may notice that the table of contents for this site does not have the same stylish look as www.WebSiteRobot.com. This is because the table of contents depends on a folder of images named æwrImagesÆ, which must be stored in the workspace folder. Not to worry. Just select æwrImagesÆ from the æWebSiteRobotÆ program group on your Start Menu. The folder that you need will appear. Copy (Do Not Move!) this folder into the æworkspaceÆ folder. When you refresh your browser the table of contents should render correctly.

Tutorial ù Basic Controls

Creating Folders

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.

Tutorial:

  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.

Tutorial ù Basic Controls

Editing Folder Difinitions

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.

Tutorial:

  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.

Tutorial ù Basic Controls

Defining Banners

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.

Tutorial:

  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.

Tutorial ù Basic Controls

File Visibility Settings

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.

Tutorial:

  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.

Tutorial ù Basic Controls

Ordering Files and Folders

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.

Tutorial:

  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.

Tutorial ù Basic Controls

Editing Titles

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.

Tutorial:

  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.

Tutorial ù Basic Controls

Defining a Home Page

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.

Tutorial:

  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Æ.

Tutorial ù Basic Controls

Editing Frame Headers

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.

Tutorial:

  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.

Tutorial ù Basic Controls

Saving Your Work

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.

Tutorial:

  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Æ.

Tutorial ù Advanced Controls

Title Controls

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.

Tutorial:

  1. Change the names of files and folders in your æcontentÆ folder as follows:
  2. æHome.htmÆ => æaHomeXX.htmÆ

    æContacts.htmÆ => æbContacts.htmÆ

    æProductsÆ => æcProductsÆ

    æWebBlaster.htmÆ => æaWeb_Blaster.htmÆ

    æWebMasher.htmÆ => æbWeb_Masher.htmÆ

  3. Select æNewÆ from the æFileÆ menu to clear all settings from WebSiteRobot™.
  4. 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.
  5. 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.
  6. In the æTitle ControlsÆ control group, edit the field following æAdditional ProxiesÆ so it reads æXXÆ. And edit the next field so it reads æ!Æ.
  7. 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 æ!Æ.
  8. 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!

Tutorial ù Advanced Controls

Color Settings

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.

Tutorial:

  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).

Tutorial ù Advanced Controls

Frame Attributes

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.

Tutorial:

  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).

Tutorial ù Advanced Controls

TOC Font Attributes

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.

Tutorial:

  1. Edit the æOpen TagÆ field associated with æFont for Emphasized NodesÆ as follows:
  2. æ<FONT SIZE=3><B>Æ => æ<FONT SIZE=3 COLOR="RED">Æ

  3. 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.

Tutorial ù Advanced Controls

TOC Image Proportions

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.

Tutorial:

  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.

Additional Information

Spreadsheets on the Web

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.

Additional Information

Customizing TOC Images

The graphic portion of the table of contents generated by WebSiteRobot™ is actually composed of an elaborate mosaic of 6 small image files and one larger image file. These files are stored in the æwrImagesÆ folder. You can customize the look of your site by editing these images in Adobe Photoshop or Paintshop Pro or any other image-editing tool. Alternatively, you can download updates of these image files from the æImage PacksÆ page of www.WebSiteRobot.com.

Additional Information

Instant Intranet

Do you have documents that you want to share with colleagues at work? WebSiteRobot™ is a terrific way to instantly build a site that exposes these files on your company intranet. Spreadsheets, Word Documents and other files can be exposed by your site just as easily as ordinary HTML pages. And hosting this site with your very own web server is much easier than most people realize. Simply by downloading a free web-server application, you can turn any computer (assuming it is connected by network card to your intranet) into your very own intranet web server to host the sites that you build. The entire process can easily be completed in less than five minutes. For more information on downloading and installing a web-server application, please visit the æInstant IntranetÆ page of www.WebSiteRobot.com.

Additional Information

Product Support

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:

support@websiterobot.com

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

wishlist@websiterobot.com

Registration

Benefits of Registration

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

How to Register

In order to register your copy of WebSiteRobot™, you must obtain a æRegistration KeyÆ and æKey SuffixÆ and enter these in the æProduct RegistrationÆ dialog box that appears each time you select æPublish SiteÆ from the æPublishÆ menu.

Registration keys can be purchased online either through a product reseller or directly from the æRegistrationÆ page of www.WebSiteRobot.com.

Key suffixes are free. They can be obtained directly from www.WebSiteRobot.com. However, you will need to know your assigned key prefix as well as your purchased registration key in order to obtain a valid key suffix. Your assigned æKey PrefixÆ is displayed in the æProduct RegistrationÆ dialog box each time you select æPublish SiteÆ from the æPublishÆ menu.

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!