Basic Tutorial for AutoSites – Build-It-Yourself Website Module
The time you spend in this tutorial will save you much time and provide you greater understanding as you build your own website. Don't feel rushed with it. Do some experimentation. Good websites do not
happen quickly. They take some thought, planning and preparation. So, jump right in and have fun creating a site of beauty that will help you market your products.
Before you start, you will want to choose several pictures to be uploaded into your site. It is very important to size your pictures before uploading them. Please follow these guidelines for resizing your pictures so that they will appear correctly in your site. If you don't have a photo editing program, or want a free and very easy-to-use editor, you may want to try downloading and installing in your computer XnView - click here.
1. Image resolution must be 72 pixels (dots) per inch. This is the optimal resolution for website images -- pictures will look sharp and load quickly.
2. The preferred format for web pictures is .jpg (also known as jpeg). It is recommended to use that format.
3. Pictures for standard pages on your site (such as your home page) should be 143 to 154 pixels wide -- these are rather small, but you can have much larger pictures linked in your picture gallery pages.
4. Pictures for your picture gallery pages should be uploaded in two sizes:
a. Thumbnail - 160 pixels wide
b. Large Image - 480 pixels wide
It is recommended that you create a separate folder in your computer where you may save all your pictures for your website. You should name your pictures so that they are easily recognized. For example, if you have a puppy picture you want to use in the picture gallery, name the smaller sized (thumbnail) version puppy1TN.jpg and the larger version puppy1LI.jpg. The "1" describes it as the first picture and the "TN" reminds you it is the thumbnail picture. The "LI" reminds you it is the large image. Of course, you may name the pictures in other ways, but the important point here is to organize and name the pictures in such a way so that you will be able to quickly identify them when you are ready to upload them into your site.
During the registration process, follow the instructions in this tutorial.
Register now to use the module: Click Here to begin the registration process .
On each of the pages during the registration process you will see a red box with a stage number for the process. Make sure to follow the instuctions in the red box and refer to this page for clarification and other helps.
Stage One - allows you to choose from 33 different templates, each with several color scheme choices. IMPORTANT! Some of the templates have imbedded graphics which cannot be changed, such as landscapes, people in business situations and so forth. We recommend you choose a template without embedded graphics from the following list and avoid the others which have the imbedded graphics.
Preferred templates list: 1, 2, 3, 5, 14, 15, 16, 17, 18, 19, 20
View a template either by clicking on the thumbnail template or View Design. A new window (Stage Two) will open showing an enlarged version of the template with alternate color schemes below it. Click on each of the color schemes to see them.
NOTE: Each template has several layouts available. Some allow for up to three pictures in either the right or left side of the page. Most of the templates allow for a picture gallery layout with many more pictures allowed. You will need to experiment with the templates to find the one that suits your taste. You cannot view the layout options in Stage Two.
Once you have decided upon a template and color scheme click on the gray box, Select this design. Stage Three will appear on your screen. Fill in the blanks. The blank "New Site Name" is very important as that information will appear at the top of each of your new web pages. Remember your password. This information will be emailed to you, but it is wise to keep a separate written record of your activity. Make sure you save and print this email for future reference. Now, click on the gray Submit box.
A new page will open with an Admin Logon box. Enter your password and click on the gray Submit box.
A new page will open displaying the Site Map. While in your site building module, each page will include a red Edit Tip box. It will be time well spent to review the Autosites editing overview later, after you have substantially completed this tutorial.
NEXT RECOMMENDED STEP. In order to simplify the site and reduce confusion, it is highly recommended that you complete this next step. On the Site Map page, locate below the Edit Tip box the phrase About Us and left click on it. A new window will open -- click in the box below Delete Branch and then click on the gray box Proceed. A new box will open asking you to confirm that you want to delete this branch, click on Okay. You will be returned to the Site Map page. (Notice the About Us branch has been deleted. It is further recommended that you do not add branches to your site. In orther words, do not click on the words Insert Branch or New Branch.) If you wish to have an About Us page, you will be able to create one later in this tutorial.
How to Edit Pages
To edit and create pages, use the links below the Edit Tip box in the left hand column.
Edit first your Home Page by clicking on the words (edit page) immediately below the word Home. Your home page in its editing format will appear.
1. Choose page layout - at the top of your page, locate the words Page Type: and the drop down box to the right of it. Click in that box and choose the page layout you wish. (Do not choose Site Map or Contact Form as these pages have already been auto generated for you.) If you choose something other than the default layout, your page will refresh with the new layout design.
HINT FOR SUCCESS -- frequently save your work. There are save links in three places: one at the top of the page, one in the Edit Tip boxes and one at the bottom of each page. If you exit a page without saving your work, the most recent changes will be lost. When you attempt to exit a page, you will be asked if you want to save your work. If have already saved it, ignore the prompt. If you haven't saved your changes and you want them saved, this is another opportunity to save.
2. Begin to add text (we call it content) to your page. Each of the fields has a preset font size, style and color. As an experiment, type a few words in the Page Title, Subhead and Body text fields. Click on Save Page and let the page reload. Then, in the Edit Tip box, click on Preview. A new window will open and you will be able to view the text you wrote in the default fonts. You may change the font type, size and color by using the WYSIWYG editing buttons at the top of the pages. The process is similar to most popular word processing programs.
3. Adding Images:
a. Click in the gray box with the bold red letters "Click to insert image". (Note that below the box is a reminder to have the image presized.) A new window will open.
b. Click on the gray Browse button. A window into your own computer will open. Find the file where your pictures are stored and double click on the picture you want to insert. The address of the image in your computer will appear in the box at the left of the gray Browse button. Click on the gray Update button in that window.
c. You will be prompted to click OK when the image appears in a small box on your screen. If it is the correct image, click OK. If not, close the box and choose another image. After clicking OK, in a few seconds, the image you selected will appear.
d. Add an Image Caption by entering text in the field below the image. If you wish to change the font, you may do so using the the WYSIWYG editing buttons at the top of the page.
e. Save the page and click on Preview to view your work.
Description and Keyword Meta-tags.
These are easy to do and very important for search engines. They help search engines index your site so that it can be found. You will find at the bottom of each page META TAGS FOR THIS PAGE: click on the Help on Meta Tags link for help with this section.
Creating Additional (New) Pages
At your Site Map, under the Edit Tip box, locate the phrase (New Page?) and click on it. A new window will open allowing you to name the page. This name will appear one each page of your site in the navigation bar, so it should be short, from one to four words. After entering the page name, click on the gray Proceed box.
Your Site Map page will be refreshed and the new page title will appear in the column. To edit that page, click on (edit page) beneath the name of the newly created page. The new page will open.
1. Choose page layout - at the top of your page, locate the words Page Type: and the drop down box to the right of it. Click in that box and choose the page layout you wish. (Do not choose Site Map or Contact Form as these pages have already been auto generated for you.) If you choose something other than the default layout, your page will refresh with the new layout design. If you desire pages to feature more than three images, choose the Picture Gallery layout.
2. For standard, non-gallery pages, follow the instructions above for How To Edit Pages.
3. For Picture Gallery layouts:
a. enter a title for the page.
b. If you choose to include introductory text, that text will appear on each page of this particular gallery. A Picture Gallery can have dozens of picture, six images per page. When you add more than six images, additional gallery pages will be automatically generated with links to each page.
c. It is recommended that you do not click in the Intro page? box. Continue past that and click on Click Here to enter Picture Gallery Editor.
d. A new page will open. Near the bottom of the page, locate the words Album Editor and click on them.
e. A new page will open. You will notice under Album Name the word "Unnamed". To the right of that, click on Edit Name. A new page will open allowing you to name the album. Enter a name for the album and then click on Update Name.
f. When the page refreshes, look toward the bottom of the page, locate and click on the words Visual Editor.
g. A new page will open. Near the bottom of the page, locate and click on the words Add New Image.
h. For the Thumbnail Image, click on the gray Browse button. Locate in your computer the image you wish to upload and double click it. Its address will appear in the box to the left of the Browse button. Enter an Image Title (usually only a few words).
i. For the Large Image, click on the gray Browse button. Locate the large sized image that corresponds to the Thumbnail image you seleted in the previous step and double click on it. Its address will appear in the box to the left of the Browse button. If you wish to enter additional descriptive information for that image, do so in the box to the right labled Image caption.
j. When you have completed these steps, click on the highlighted box named Update Image. Very briefly, a small window will appear showing the uploading progress of the images. Then, your page will refresh showing the thumbnail image. To see the corresponding large image, either click on the thumbnail or, to the right of it, click on Click to view. A new window will open with the larger image.
k. To add another image, look toward the bottom of the page and click on Add New Image. The process for additional images is the same as steps "h." through "j." above.
l. To view your progress with the Picture Gallery, locate near the bottom of the page Preview Page and click on it.
Once you have completed these steps, you should have the general idea of what it takes to create a basic website. It
may take some experimentation to get the right look. All the tools you need for a very professional looking website are included in this module.
EXTREMELY IMPORTANT!!! You have been creating your website in the "Trial Sites" module. When you are ready to have your site "go live" or be published so that others can see it, you must contact by telephone Dean Hamill at BreedersClub.net. He will convert the site from a Trial Site to a Real Site. Phone Dean at 541-997-0131 during normal business hours, 9am to 5pm Pacific Time.