Final Note (Things Happen!)

If you're using SiteMachine for the very first time,
and you do not have the design you wanted, click here.

Introduction
SiteMachine is designed to be a small application that is easy to use. In spite of its simplicity, it also has features that allow sophisticated formatting for advanced users.

This "Help" page assumes that the user has a basic understanding of using a PC on the Web, as well as basic knowledge of text and picture editing applications.

Exploring and experimenting with SiteMachine is the best way to learn how to use it. If you have questions not answered in this document feel free to email us at support@vm7.com

This FREEWARE version allows you to build a complete 3 page website. For a low cost you can upgrade to the 5 or 10 page version. The upgraded versions have more designs and more features as well as more pages. The 3 page FREEWARE creates a great starter site, but if you need a full website for your business consider our 5 and 10 page builders.

Or if you need to sell products from your website you should check out our E-Commerce builder. You can find out more information here.
http://www.vm7.com/

[TOP]

Getting Started
After you've gone through the online "Quick Tutorial" (available at the website from which your copy of SiteMachine was downloaded) it's recommended that you explore the software by clicking on as many buttons as you can find, simply to see what happens.

Then try filling some text into one of the editable sections, and click the "Save" and "Save/Preview" buttons to view the page to see what you did.

An important thing to remember is that a page must be saved AND previewed in order to complete a change or addition to the webpage.

By this point you should now know that the numbered buttons in the upper left of the SiteMachine window represent the pages of your website.

Select the "1" button, or click on the "Edit Page" tab to build what is commonly referred to as the "Home" page. In the panel that appears, you will see a mockup of the website with the "Edit" buttons positioned over the editable sections of the page.

Clicking on an edit button pops you into the Section Editor's "Edit Mode." In "Edit Mode" you enter your text and pictures. When you're done, click on the "Save" button and then the "Save/Preview" button to see how it looks.

It is normal to edit and save many times until you get the look and spacing that you want.

[TOP]

Naming Pages
Click on the "Name Pages" tab in the upper right of the main panel. In this section you will see text input boxes listed by page number. Type the names of the pages as you want them to appear on your site.

Each page must be saved and viewed before its link will be active.

Some site designs accommodate longer names better than others. You may need to experiment to get the right length that works best for your design.

If you need to use long names, test them in your current design to see how they will fit. If the names you have chosen cause the design to push apart in different sections, or make the name wrap in an undesirable way, you should choose another design and then test it also.

Page names can be changed as often as you like to suit your needs of your content as it changes.

[TOP]

Meta Tags
Meta tags are an important part of your website, and are the only "invisible" parts with which a beginning user needs to be concerned.

On the "Main Menu," click on "Meta Tags." The instruction panel at the bottom will change into three text input boxes. From the top to the bottom, these are:

Keywords
Description
Title

The keywords are a list of words, separated by commas, that you make up based on what your site is about. The search engines sometimes use these to match your site to a search that someone might make to find specific information.

The description is a paragraph that describes the most important concept about your site. These are sometimes used by search engines to describe your site to a potential visitor.

The title is the name of your site and appears in the title bar at the top of your browser window. It is also used when someone bookmarks a page on your site. Some search engines also rate your site by your title when someone is searching for keywords.

Meta tags must be entered for each page of your site. They can be the same or different as those used for "Page 1." Don't forget to save and view your pages to confirm that any change or addtion has been saved.

Study other websites to see how they use meta tags. Go to a popular search engine, type in a search for keywords about your site and see what comes up in the top 10 found sites. Then go to one of the sites, right click on the page and choose "View Source." Near the top of the page of code that opens in your text editor, you will find the meta tags. Compare them to yours and make adjustments.

[TOP]

Text Formatting

Text can be entered into a section by typing directly into the Section Editor window. It can also be entered by copying text from another source, such as a text editor, like NotePad, or another webpage, and pasting it into the Section Editor window.

Text is also formatted in the Section Editor panel. Choose the text to be formatted by placing your cursor at the end or beginning of the text that you want to format. Hold down your left mouse button and drag across the text to highlight all of the text that you want to format.

While the text is selected, you can choose from the many standard formatting items found in the menu bar. These include selections for typeface, color, alignment, bolding, etc.

LINE SPACING
Double spacing between paragraphs is done by hitting your "Enter" key once. Single spaced lines can be made by holding down "Shift" and then hitting on "Enter."

Test the results until you get the desired look.

All designers must experiment with formatting to get the right look for their website. The best rule to follow is consistency: Make all headlines the same size, color and typeface, and do the same with all other kinds of text throughout the entire site.

Many formatting options will require you to experiment in order to find the look that works best for your page. Most menu items are similar in name and use as in many popular text editing applications. Check out other websites for examples.

Finally, don't forget to use the spellchecker !

A NOTE ABOUT HEADLINES
You can select a variety of headline styles by choosing one of the "Header" format menu items under "Format" found on the menu bar. Headlines are treated differently from other text in ALL webpages. Styles can not be mixed within a "Header" formatted line of text. More importantly, most Web browsers add extra space above and below the headline sacrificing your ability to control the spacing.

Experimentation is always the best plan. Most often you can achieve the desired larger-text style, and with greater flexibility and control over spacing, simply by bolding larger sizes of text.

[TOP

Adding Pictures
If you already know how to make pictures for the web, skip to PLACING A PICTURE.

CREATING AN IMAGE FOR THE WEB
Before adding pictures to a webpage, they must be in either the "gif: or "jpg" formats.

If you've received pictures taken by your camera and put onto a CD by your photo developing company, you can take the smaller versions of those pictures and put them directly into your website, provided they are formatted as "gif" or "jpg."

To determine if your image editor will output files to gif or jpg format, go to its "File" menu, pull down to "Save As", and let go. When the "Save As" window opens, click on the triangle button next to the "Save As Type" input box.

Gif images usually work best as non-photographic images such as drawings or clip-art, images that have large areas of solid color. Use jpg if you're going to place photos or images that have fading or feathered areas. They will give you a smaller file size (NOT dimensions -- file size is equal to download size) and more colors.

SIZING
In addition to outputting your pictures in the proper format you will want to size and crop them in the image editor. Your image editor software will explain how to do these things. Primarily what you need to know at this point is the optimal width of picture fits best in the column in which you want it to to appear. To discover this you will have to experiment.

SiteMachine can help you with this by allowing you to size your images in the Section Editor. Just click on the image and drag one of the corner handles to the width you need. Distortion may occur. Sizing the final image in your image editor to the desired width is the best solution.

SiteMachine websites are most commonly designed with two content columns: a narrow and a wide column. The wide columns were designed to look best with a horizontal picture. Vertical pictures look best in the narrow column. Experimentation and paying attention to what works on websites that you have seen will help.

TIP
Remember where you saved your images! Create a special directory for working on pictures.

NAMING PICTURES
Picture names should not have spaces or punctuation or special characters other than an underscore ( _ ) or a dash ( - ) . Keep the names as short as possible but unique enough to remember easily. Using a name that is relevant to the site is helpful for some search engines to catalog your site. Names like "picture1.jpg" can not be used to your advantage.

PLACING A PICTURE
Select the page you want to place the image on by clicking on a page number. Choose the section of the page where you want to place the image by clicking on an "Edit" button.

If there is already text in this section, position your cursor where you want the image to appear. You may want to make an empty line for the image by hitting your return key and placing your cursor in the space created. This is where the image will appear. You can create a single-line space by holding down your "Shift" key and then "Return" or "Enter."

Now click on the "Add Picture" button or choose "Add Picture" from the menu bar at the top of the SiteMachine window. Find the name of the picture in the directory window in the "Add Picture" panel, and select it by clicking on it once. Once you've clicked on the picture once to select it, you should see the picture in the space at the bottom of the panel.

Once you've found the image you want, click on "Add It." You should now see the image as it will be associated with the text and other images in that section.

To see how your image looks in the webpage, click on "Save" then "Save/Preview." Even the best web designers must adjust spacing and placement to get the desired look of the page.

TIP -- WRAPPING TEXT TO AN IMAGE
SiteMachine is designed to be a small, easy to use application, but it also has the power to allow you to use many sophisticated formatting features of webpage design.

To have your text wrap around a picture, do this: While you're in the section editor, click on "Switch Mode." You are now looking at the HTML code and the text that makes up that section of your website.

Scroll through the code and text until you find the image you want to wrap the text around. A sample of this could look something like this:
<IMG src="yourpicturename.gif">

To make the text wrap to the right of the image, add this: align="left" so that our sample code tag now could read:
<IMG src="yourpicturename.gif" align="left">

To make the text wrap to the left of the image, add this: align="right" so that our sample code tag now could read:
<IMG src="yourpicturename.gif" align="right">

Obliviously the name you gave your picture will be substituted for "yourpicturename.gif" and the extension will be either ".gif" or ".jpg"

Experiment!

[TOP]

Switch Mode
Switch Mode is a feature provided for advanced users. It allows you to edit the html at the source code level. If you are just beginning to make webpages, you may want to peek into "Switch Mode" to see what is happening in the HTML code. Viewing the code is the best way to learn more about controlling the formatting of your sections.

[TOP]

Making A Link
Links are what make the Web the Web. To put a link on your site to another site you must be in the Section Editor. Highlight the text to be made into a link by placing your cursor next to the text and dragging across it until it is all highlighted.

From the menu bar, choose "Add Links" and pull down to "Links..." The dropdown box has many types of links in it. The pre-selected one is "http://" This is a basic webpage to webpage link. After the "http://" type in the address (URL) to the website you are linking to. Be sure to test it when you're done!

Another common link is the "mail to:" link. Select text to make a link, choose this link type, and type in an email address. When that link is clicked on, the visitor's email will open with the "To:" box already filled in.

[TOP]

Upload/FTP Help
To publish your pages to your website you will need one or more of the following: your FTP address, your user name, and your password. These should have been given to you by your site host. You will also need to be online, connected to the Web.

To begin, go to the Main Menu panel of SiteMachine, then click on "Upload Your Website." Fill in the text input boxes with the associated information. Then click "Upload Your Site."

If you've entered the wrong information you'll see a pop-up message telling that you were unsuccessful. Try again. If you still can't get in, check your access information.

If you've entered the correct information, the FTP client window will open, indicated by the tab at the top center of the panel which says "Upload Site."

There are three main parts to this panel:

The left window is a directory list that contains all the files that make up your site as it is on your computer.
The right window is a directory list that contains all the files that are currently available to visitors on the Web.
Between these is a preview window that will help you to see a file that you have selected by clicking once on that file. Use this window to locate picture files in your website directory that you no longer need.

Depending your the host service you will be using, you may also see a smaller window above the right directory window that contains various sub-directories. This should contain a "Web" sub-directory, commonly named "www" or "htdocs" or "web," that you'll need to click on and open in order to upload the site.

If you see a file called "index.html" you're probably in the right place, unless you uploaded the site into the wrong directory previously. If you upload your site and you do not see it when you check it, live on the Web, chances are you'll need to upload it again into the "Web" directory.

To complete the upload, click on "Upload ALL Files" or select files on the left, one at a time, and click on "Upload Selected Files." Once the upload activity has ended, go to your favorite browser, type in your website address (i.e.: URL or domain name).

Your website's new content is now live on the Web!

You can also keep your host space clear of unused items by selecting those items one at a time in the right window, and clicking on the "DEL" button on the right. FYI: "DEL" stands for "delete," "CD" for "change directory," "RD" for "remove directory," and "MD" for "make directory."

[TOP]

Change Site Design
Your initial install of SiteMachine may or may not contain the desired design that you would like to use. If it does not, follow the steps below before building your site for the first time.

If you've already built your website but would like to change the design, read this entire section before downloading a new design.

SiteMachine was created to make for a smooth transition from one site design to another.

Subtle differences between designs may cause certain designs to be better choices than others. The navigation bars on some sites are horizontal and some are vertical, and some have wider columns than others.

With these things in mind, you may need to make some adjustments to the formatting of your sections or you may need to shorten some of your page names in order to use that design. You'll know what you'll need to adjust once the final change has been made because things may not line up or fit properly.

Follow these steps:

Click on "Change Your Design." This opens your browser to an online site with more designs for your website.
Click on the link for the design you would like to have. This opens a "File Download" dialogue box. Check the box next to "Run this program from its current location."
You will be asked, "Do you want to install and run this design" Click on "Yes."
A "Design Update" window will appear to confirm the directory location of your site on your computer. If the directory location is correct, click "Save." If not, browse to the correct location, then click "Save."
Return to the VM7SM window that is still open on your desktop by choosing it from the task bar. You will notice that it has changed since you began your download.
Click on "Go." You should now see the mockup picture of your site in the large window.
Click on "Click to update your pages" and watch SiteMachine change the design of each page right in front of your eyes!

[TOP]

Hosting
Once your web site is completed you will need a place to put it online. This is called hosting. VM7SM will work with any server and any hosting solution. We also have aranged for special low cost hosting directly from VM7 Inc. if you wish to have us provide hosting for you then click on the link below to signup
http://www.vm7.com/

Final Note (Things Happen!)
Website design is not an exact science. The HTML that makes webpages can be very forgiving and flexible.

The most common thing that can go wrong with your site is to have the navigation panel or the website seem to "come apart."

If you suspect this is happening because things don't line up as they should, it's probably because something, such as a long line of text without a space, or an image that is too wide, was put into that column. You can make adjustments to keep this design if you want, or download a different design and try it.

Also, the download size of your page equals the sum of the "file" size of all the pictures and text you've added, combined with the file size of the blank page that you've started with. SiteMachine blanks are designed for fast downloading so you're off to a good start.

In the end, it's all up to the Web connection, the browser software (i.e.: Internet Explorer, Netscape, etc.) and the computer of each of the visitors to your website. They can differ widely, so stay flexible and experiment!

Have fun!