How The Heck Do I...

Creating Your Home Page

The first thing you need to do is create a HOME PAGE for your site. This is the page people will see first when they click on your site. It is usually called the index page, and in your files it will be called index.html

Let's create a simple home page. Start by clicking on the "Create New File" button.

A box will pop up offering you a choice of templates for your page. You can play around with these later for your site... but right now we'll just focus on getting a HOME PAGE up. (You can change this later if you wish.) Here is what you will see:

You will be able to see a preview of each template on the right as you click on it. (Go on - click on a few to view them - then come back to this.)

We'll choose "columns html" because this one offers you a page that has 3 main columns - two narrower columns (one on the left, another on the right) and a central column that stretches to fit the width of whatever your viewer's screen may be.

It's handy to have columns. You'll be using columns and tables a lot to create your site. You can put special offers and favourite links etc in the columns, and keep your main text for the central area.

In the box that says "save new file as", you'll see it still says "columns.html". You will need to rename this index.htm. This is very important. The web browser looks for 'index.htm' (or index.html) as the home page of your site. After you have renamed your page, click "OK".

A box will pop up to tell you that you have successfully created your page. Just click "OK" and it will send you back to your "My Files and Folders" Directory to keep working on the page.

When you return to your File Manager Screen, you will see that a new file has appeared - "index.html". At the moment, it has in it exactly what was in the template. You will need to edit this to create your HOME PAGE. So... click on the 'edit' link to the right of the index.html page.

Your template looks like this:

You will see that a familiar-looking menu bar has appeared at the top. There are some new things, but this works in a very similar way to Microsoft Word. You should become quickly become comfortable with it.

We'll begin by editing the LOGO. See where it says "Insert Your Logo Here"? We'll enter your name. We will follow these steps:

1. Click inside the box that says "Insert Your Logo Here".

2. SELECT (highlight) the text by dragging your cursor across it. Type in your name.

3. Highlight your name, then click on the ARROW next to the box that says "format". In the drop-down box that appears, choose "Heading 1".

4. With your text still highlighted, choose a colour you like. For this example we'll use yellow. Click on the arrow beside the underlined "A" and click on the yellow box in the drop-down box of colours. (You will choose the colour of any of your text at any time by using the same method.)

That's your logo done. You can change this as much as you like. Experiment with different fonts, size and colour.

Now we'll work on the BODY COPY. Right now it says "Welcome to YourDomain.com". You can replace it with whatever you like.

We'll choose "Hi! Welcome To My Web Site!" Then we'll move to the copy underneath and write "I'm a writer..." etc etc there. This is just a quick example, of course. Write whatever you want to say. Right now, you just want something up there on your home page. You can edit it later.

Well, that's a start. Now we'll add something else. Let's see... tables work well. So we'll insert a TABLE underneath "I'm a writer" and we'll put text in one side of it, and a picture in the other.

To do that, we'll place the cursor in the next line of text, and go up to the "insert table" icon in the menu bar. It's the box with the grid in it and the little blue bar across the top. Click on the icon and a menu will drop down. Choose "Insert Table".

You will see this box:

As you can see, you can specify exactly how your table will appear. You can always modify this later. (I'll show you how in a moment.)

You decide how many rows and columns you want. Width means 100% of the width of the page or table in which you're working. (You can insert tables inside tables.) Choose any background colour (a colour selection chart will pop up). Cell padding refers to how much space there is surrounding your text or picture - that is, the amount of space between the border of the table, and the edge of the picture or text. (If you leave it at "0", your text or picture will butt right up against the edge of your border - not a good look!) Cell spacing refers to how much space between each cell. The higher the number, the more space you'll see. Height you can usually leave blank.

The most important thing you need to change is the Border. If you set this at "1", you will have a narrow, visible border around the edge of your table and cells. If you set it at "2", the border will be wider. If you set it at "0", the viewer will not be able to see a border. Usually, you don't want your visitor to see the border of your tables. Why? Tables are mainly used for layout. They help you organise your text and pictures neatly, but they're out of sight - like the framework of a house.

When you have set the table parameters as you wish, click on "Insert Table". (We'll choose to insert a table with one row and two columns.) It will look like this on your screen... a dotted outline of two cells, side by side:

In the first cell, we'll type some words. I'll just type "Insert Text Here" - you put in whatever you want.

You'll probably notice the columns moving to accommodate the text as you type. The right hand column will become narrow. That's OK - it will enlarge again when you insert something into it.

Now we'll insert a picture into the second cell. Just place the cursor anywhere in the cell - even if it's very narrow when it's empty, just click inside it. Then go up to the toolbar and click on the little square with the picture inside it.

A box will pop up: the Image Manager. At first, it will have NO images in it.

 

You will need to upload the image you want from your computer.

Click the "Upload Image File" button. An "Upload" box will appear, showing a box which lets you browse your computer. Click 'browse", and this will open up a box showing your computer's files. You have to locate the image you want. It is quite likely to be in "My Pictures". (My Documents/My Pictures)

NOTE: Make sure the image is not too big. (Either in actual size or file size.) It should be a jpg file if it's a photo, or a gif file if it's a piece of clip art. You will need to make sure that the photo is the right size BEFORE you upload it. DO NOT upload a normal photo without converting it to a .jpg file first - it will be much too big.

When you locate your image, click 'open' and the location will appear in the box - see example at left.

Click "OK". As long as your file is the right size (and contains no spaces in the file name) you should see a message telling you that your file has been successfully uploaded.

Now you should be able to see your photo or clipart in your Image Manager.

To insert it in the cell on your home page, just click on the word 'Insert" next to it.

You will find yourself back on your web page with the photo inserted in the cell. That's all there is to uploading a picture!

You might want to edit the table properties or the cell properties later. All you have to do is RIGHT CLICK in the cell and choose 'modify table properties' or 'modify cell properties'. (See photo below.) You can change the colour or the size of the cell. But for now, we'll leave it.

Click here to go to Step 3 of Creating your Home Page -
"Creating a Hyperlink and Saving Your Page"

Use BleepSoft to Build a Home Page?
Part 2