Basic Tutorial for WebUMake – Build-It-Yourself Website Module

Tutorial Index - Review entire Tutorial. Or, click on the topic you need help with.
Introduction	Inserting Text	How to Link an Email Address
Registration	Inserting/Changing Images	How to Link Your Site Pages
Preparation	Change Table Background Color	Inserting a Site Counter
Uploading Images	Saving & Previewing	Customer Support
Create Web Pages from Templates	Creating New Pages

Introduction

FIRST and VERY IMPORTANT - You must be using an Internet Explorer browser such as IE6 or higher. Using a different browser such as Mozilla Firefox, Microsoft Edge, Bing or Google Chrome will not work correctly. If you are having any trouble with the site builder, call me immediately at 541-997-0131. I am generally available Monday through Friday, 9 AM to 5 PM Pacific time.

The time you spend in this tutorial will save you much time and potential frustration as you build your own website. Don't feel rushed with it. When you understand what to do, you can start having fun 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. Once you have completed the steps below, you should have the general idea of what it takes to create a very attractive 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. Most of what you need is describe below. There are other features available, including an HTML editor, if you have the knowledge to use that.

Register to use the module

The username you choose will become part of the website address you will be using. All website addresses in this module start like this: “web.breedersclub.net/username “ If, for example, you choose the username “apple” then your website address will be:

web.breedersclub.net/apple

We recommend you choose a very short username.

Note: the address for your site in this module is not and cannot be preceded with www.

Click here to register now, then, return to this tutorial. (AOL users - special instructions - minimize your AOL screen - do not close it - and log on to the web with your Internet Explorer browser.)

Preparation

Before creating your website, you should have a pretty good idea of what you would like to include in it. If there are certain pictures you want to feature, you should have them sized and cropped correctly prior to uploading them into your site. If you want to include text, such as information about your business, where you are located, etc, then it would be helpful for you to create that text in a word processor and run it through a spell checking program prior to inserting it in your site (though you will be able to edit your text after copying it into the site).

Pictures/Images - preparation

Things to consider:

Pictures/Images – uploading to your file manager

1. Log on to your File Manager page.

Go to http://classifieds.breedersclub.net/cgi-bin/breedersclub/webumake/umm.cgi and enter your username and password. (You should make this page a favorite or bookmark it so you can quickly find it each time you wish to access your File Manager page.) Click on the “Save login data” box and then click on Login. That will take you to your File Manager page.

2. At the top of your page, you will see several icons with their names such as File Manager, New Web Page, New Directory, Upload Files, etc. Click on the New Directory icon - . When your page refreshes, it will show a small field with new in it. Highlight the word new and type over it the word pictures. Then click on the OK box to the right of it. When you page refreshes, click on the new directory pictures that you just created. Your page will refresh showing the following: /home/new .

2. Click on Upload Files.

At the top of your page, click on the Upload Files icon, . After you do this your new open page will show ten browse boxes at the bottom of the page. Make sure all photos are in the prescribed size as described earlier. If you don't size your pictures before uploading them, you will encounter difficulties. If you haven't sized your pictures correctly, please stop the tutorial now and do so. You will be glad you did.

3. Click on the first browse button.

A window will open on your screen showing files on your computer’s hard drive. Search for the image file you want to upload. When you find it, double click on the image name. That action will insert that image address into the browse box. (Some computers require you to click on the "open" button rather than double clicking the image name.)

Continue browsing and adding other images in like manner.

4. Click on the Upload Files button at the bottom of the screen.

When you have chosen some images, click on the large Upload Files button. You may continue to upload the images you wish to include in your site until you have them all uploaded. Or, you may come back at a later time and upload more images whenever you wish. Each time you upload your pictures, a new set of browser boxes will appear.

Create Web Pages from Templates

This tutorial will introduce you to the basic steps of creating an Index Page (home page) and linking it to another page. You will be installing a set of templates into your File Manager. You do not have to use this template set for your website, but you will be working in the templates in order to learn how this build-it-yourself site works.

1. Click on New Web Page . The New Web Page icon is located across the top of your File Manager page, second button from the left.

2. Click on Create from APetSet3

You will find this button in the right hand column of the New Web Page page. This action will install four website templates into your File Manager page. Note: each file on this page has several clickable objects. THE ONLY OBJECT YOU WILL CLICK ON FOR THIS TUTORIAL IS THE BIG BLUE E ICON. DO NOT CLICK ON ANY OTHER ICONS UNLESS DIRECTED OTHERWISE.

3. Locate the line that reads index.html. Look to the right in that line and find the BIG BLUE E icon and click on it. Your page will then refresh. After it has refreshed, click on again. This will open your index (or home) page template. When you are finished creating this page, it will be your home page. DO NOT CHANGE THE NAME -- IT MUST BE NAMED "index.html" in order for your site to work correctly. Keep in mind that everything can change on this page. During the next several steps you will be making changes that will help you learn how to build your website.

IMPORTANT HINT: At the top of your editing page there is a tool bar with many icons. You can learn the function/name of these icons by clicking on the last icon with the "?" in it.

How to insert/change text

How to change/enter text - Highlight the words "Replace with your kennel name ”. (To highlight text, put your mouse pointer at the beginning of the text, hold down the left mouse button, move the pointer across the words until you reach the end of the last word, let go of the left mouse button.) Now enter a few words you would like to feature as the name of your site. For instance: “Welcome to Woodland Puppy Ranch” or whatever you wish.

How to change the text font style - Highlight the words you want changed. At the top of your editing page in the Tool Bar, locate the Font Icon box and click on it. Several font choices will appear. Click on the font style you want. The text appearance will change to the new font.

BOLD - If you want to bold the text, highlight the text, locate in the Tool Bar the icon with the B and click on it.

ITALICIZE - If you want to Italicize the text, highlight the text, locate in the Tool Bar the icon with the I and click on it.

UNDERLINE - If you want to Underline the text, highlight the text, locate the underline icon in the Tool Bar and click on it. NOTE: normally, underlined text in websites means that the underlined text is hyperlinked to a different location. My advice is to avoid underlining words in your text.

CHANGE FONT COLOR - If you want to change colors, highlight the text, locate in the Tool Bar the icon that has a red underlined "A", click on it. Click on a color box and then click Okay. The text will appear in the new color.

TEXT ALLIGNMENT - If you want to change the text alignment (right, left or center), simply click in a line of text, locate in the Tool Bar the icons that have several horizontal lines in them. There are icons for Justify Left, Justify Center, Justify Right and Justify Full. Click on the alignment icon you want applied.

MAKE SURE TO SAVE YOUR WORK EVERY FEW MINUTES

To Save your changes, find the first icon in the upper left hand corner of the Tool Bar (appears as a small diskette). Click on the Save Icon and a "drop down" with five choices will appear. Click on "Save." Your page will refresh and the changes will be saved. If you wish to see how the page will look to others, click on the Save Icon, then click on "Preview." A new window will open on your screen displaying the page as it will appear on the web. Close that screen to continue.

INSERTING NEW TEXT - ALWAYS create a table first! See instructions in next paragraph.

To create a new table, click on the page where you would like your text to be. At the top of your editing page in the Tool Bar, locate the icon that has a small rectangle divided into nine even smaller rectangles. Place your mouse pointer over it and an identifier should appear on your screen naming it as "Table" -- click on it. A new task window will open on your screen, click on "Create Table." In the fields within this window enter the following values:

Rows: 1     

Columns: 1      

Width: 80 percent (recommended but may be different, it depends on how wide you want it - your overall page width should not exceed 800 pixels).    

Height: (leave blank - the table will expand down as you create text to fill it)

Background Color: If you want a different color in the background of this table, click on Color and choose a color, then click Okay. If you are satisfied with the existing background color, skip this step.

Skip to the bottom of the task window and click on OK. The new table will appear as a small box surrounded by gray dotted lines. (NOTE: you may view the page without the dotted line borders around the table by clicking on the "Show Table Borders" icon in your tool bar. That icon is located immediately to the right of the Table icon. It is recommended that you always work on your pages with the table borders showing.)

Then, click inside the new table and begin entering (typing) the text you want.

Text line highlighting - if you want a certain line of text to be featured with a different color, highlight the text with your curser, click on the background color icon (looks like a bucket with a yellow line under it), choose the highlight color you want, click on okay and the text will be highlighted.

Changing the page background - (For more advanced users.) If you would like to change the overall background appearance of your web page, find the icon named "Page Properties" (looks like a page with the corner turned, located immediately to the left of the smiley face icon). Clicking on the page properties icon will open a task window allowing you to choose either a background color or a background image. For the more advanced web designer, you may upload your own backgrounds or other backgrounds available on the web into your file manager. Also, there are many preloaded backgrounds available for you to choose. Click on the Select button to choose a background you wish. A new task window will open allowing you to choose a background. Once you have selected the background you wish, click on Insert. When that task window closes, click on Insert in the remaining task window.

MAKE SURE TO SAVE YOUR WORK EVERY FEW MINUTES

To Save your changes, find the first icon in the upper left hand corner of the Tool Bar (appears as a small diskette). Click on the Save Icon and a "drop down" with five choices will appear. Click on "Save." Your page will refresh and the changes will be saved. If you wish to see how the page will look to others, click on the Save Icon, then click on "Preview." A new window will open on your screen displaying the page as it will appear on the web. Close that screen to continue.

How to insert/change images

ALWAYS create a table first, before inserting an image! This will allow you more control over its placement, size and adding other elements such as a description. You should have already sized, formatted and uploaded some images into your file manager as you were directed to near the beginning of this tutorial. If you haven't uploaded pictures, do so now.

CREATING A TABLE FOR IMAGES - Click on the page where you would like an image to be inserted. Then, follow the instructions above in the To create a new table. IMPORTANT! - if you want more than one picture in a row (horizontally across the page), choose more than 1 column when creating your table. Usually a maximum of 4 columns across is good, depending on the size of your pictures. For every row of pictures you want, create an additional row below for picture description text. In other words, you would create a table with 3 columns (for 3 pictures) and 2 rows (the top row for pictures, the bottom row for the picture description).

INSERTING AN IMAGE - once you have created a table, click inside the table, then locate the "Image" icon in the Tool Bar (appears as a small green and blue square framed picture). Click on the icon and a new task window will open. This window will show an empty white rectangle on the left with image file names in your file manager to the right of it. When you click on an image file, a small version of it will appear in the white rectangle.

Once you have located the image you want to insert, look to the bottom of the task window and click on "Update."

Then, click in the table cell immediately below the picture and enter the description you want.

Working with thumb nail and full size photos.

Uploading and linking thumb nail and full size pictures.

1. Create two sizes for each photo -- save them each with a unique name so you will recognize them. You may want to name the thumbnail (small) photos something like "puppy1TN.jpg" with the TN disignating "thumb nail". Then, "puppy1FS.jpg" could be used to name the "full size" version of the same photo.
2. Upload them into your file manager.
3. Insert the new thumb nail picture in your web page where you wish.
4. Left click on the newly inserted thumb nail photo.
5. In the icon bar, click on the external link icon.
6. In the new task window, click on "Select".
7. A new task window will open, search for the full size version of the photo, click on. That window will close.
8. In the remaining task window, click on "Target" and choose "Blank".
9 Click on "Insert." The task window will close returning you to the page you are currently modifying.

Now, when people are viewing your site, when they click on the thumb nail photo, a new page will open with the full size photo displayed.

CHANGING THE BACKGROUND COLOR of your tables - Click inside a table, then click on the table icon in your Tool Bar. A task window will open, click on the gray COLORS box, a new task window will open. Click on the color you want and a sample of that color will appear in a small square to the left of the menu. When you are satisfied the your color choice, click on "OK" at the bottom of the task window.

MAKE SURE TO SAVE YOUR WORK EVERY FEW MINUTES

To Save your changes, find the first icon in the upper left hand corner of the Tool Bar (appears as a small diskette). Click on the Save Icon and a "drop down" with five choices will appear. Click on "Save." Your page will refresh and the changes will be saved. If you wish to see how the page will look to others, click on the Save Icon, then click on "Preview." A new window will open on your screen displaying the page as it will appear on the web. Close that screen to continue.

How to create a new page

Return to your File Manager page. If you are working on a web page, click on the Save Icon. Then choose "Save and Quit." This will save your changes and return you to the File Manager page.

The easiest way to create a new page is to copy an existing page. To copy a page, find the bluish/white icon that looks like two overlapping sheets of paper, , click on it. A small gray window will open, click "OK" in that window. Your screen will refresh with a new line showing near the bottom of the File Manager with the icon and the copied file name to the right of it. Click on to confirm your copy request. Your screen will refresh with a new file line. YOU MUST RENAME this file by typing in the shaded box. It must be named differently from the name of the file you copied. After giving this file a new name, click on "OK."

The new file (page) will appear in your File Manager in alphabetical order. To open this page, click on the in that line. When your new page opens, it will look exactly like the page you copied. Proceed to make the changes you wish and make sure to SAVE them every several minutes.

How to add an email address link

1. Adding a text email link, such as your-email@your-isp.com is very simple. Click in your web page at the location where you want your email address to appear. Type in your email address. Then, highlight it. Locate the External Link icon in your tool bar (between the yellow underlined bucket and the table icons) and click on it. A new task window will open. Click in the small left hand box and a menu will drop down. Select "mailto." In the box to the right of that, enter your email address exactly as you want it to show. Click in the Target box below that, and choose "blank." Ignore the "Name" box and click on "Update."

2. Adding an email link to an image is very simple. Click in your web page at the location where you want your email address to appear. Insert the image you want to use for your email (see How to Insert Images above). Then, select it by clicking on it. Locate the External Link icon in your tool bar (between the yellow underlined bucket and the table icons) and click on it. A new task window will open. Click in the small left hand box and a menu will drop down. Select "mailto." In the box to the right of that, enter your email address exactly as you want it to show. Click in the Target box below that, and choose "blank." Ignore the "Name" box and click on "Update."

MAKE SURE TO SAVE YOUR WORK EVERY FEW MINUTES

To Save your changes, find the first icon in the upper left hand corner of the Tool Bar (appears as a small diskette). Click on the Save Icon and a "drop down" with five choices will appear. Click on "Save." Your page will refresh and the changes will be saved. If you wish to see how the page will look to others, click on the Save Icon, then click on "Preview." A new window will open on your screen displaying the page as it will appear on the web. Close that screen to continue.

How to link your pages together

Linking pages within a website is extremely important so that visitors to your site can easily navigate from page to page. Each link will have to be checked individually -- there is no way around that. So, plan on checking your links for accuracy on each and every page.

The linking process

1 - Choose where you want your link to show on your page. In the templates, the text links usually show up in the left hand column of your page or horizontally across the page. Enter the text you want linked; usually a brief name for the page you want linked, such as About Us or Home Page.

2 - Highlight the text and click on the External Link icon in your tool bar, a new task window will open.

3 - Click on "Select" and another new task window will open with names of all the existing pages in your site. Click on the page name you want to link to. Click on "Insert" at the bottom of that task window (that window will automatically close).

4 - Then, click on "Insert" at the bottom of the remaining task window. The link is complete.

5 - Now go to the page you just linked to and repeat the process to link back to the page you just linked from.

NOTE: When you organize your links all in one column or row on a page, you may easily copy all your links on that page and paste them into another page. That will save you lots of time.

Inserting a Site Counter

A very simple site counter is included with this website module. It is very easy to install. Locate your curser at the point where you want to insert your counter. In your tool bar, find the icon between the smiley face and the red and green ABC icons. Click on it and a drop down with four choices will appear. Click on "Site Counter" and a small scroll will appear at that point on your page. DO THIS ONLY ONCE PER PAGE. It is extremely difficult to remove duplicates of the counter on a page. When you view the page as a regular visitor you will see the counter.

Customer Support
Should you find you wish to have help with your website, you may call Dean Hamill for direct help. You will need to be online and logged into your File Manager when you call. You will be charged a minimum of $15.00 for consultation. For longer consultation/editing sessions with Dean, the fee is $60.00 per hour. You will be asked for your payment information prior to starting the session. Please have your questions written down and prepared in advance to save time. Dean can be contacted at 541-997-0131 Monday through Friday from 9AM to 5PM Pacific Time. We are closed on most holidays. Due to scheduling conflicts, you may need to make an appointment time to call back.