Step 5e: Creating your home page in Macromedia Dreamweaver

Select File New Window. Next Select File, Save As index.html under your c:\website directory.

Now lets use a table to layout our web page. Select Insert, Table and do a table with 3 row and 2 columns, 712 pixels.

The dotted outline of a table appears on your screen. Check out this tool floating above your window which is called the Property Inspector.

The property inspector allows you to create links, change fonts, align text and a lot more. Click on the table to select it and look toward the upper right of the window where it says, Align. Change the alignment to Center for the table so that it is in the center of our screen.

I know that I want to add my header in the first row of the table. There are two columns there and I would like to combine the columns into one column. Click in the first row and keep holding the mouse down as you slide over into the second column. You can see that both columns are selected. Now click on the property inspector where you see the solid rectangle towards the bottom left. Clicking on this combines the cells to create one cell. Now let's insert the header. Click in the first row and from the menu select, Insert Image, and navigate to your header.gif file which should be in c:\website\images\header.gif.

Go to the third row and do the same thing, that is combine the two cells and insert the bottom header. Your page now looks like this:

Now the second row on the left should have my buttons and the right area on the second row should have my page text. There is too much space on the left side of the column so lets reduce the space. Click in the left column (on the second row) and look at the property inspector. Next to the W which stands for width, type in 100. This moves the tables dotted line. Now insert your buttons by Selecting Insert Image and Select home.gif from c:\website\images. Next hit Enter to insert a blank space between your buttons. Do the same with about.gif and contact.gif. Do an extra blank space after contact.gif. Your page should look like this now:

That's a good start, now lets center our buttons. Click on the home button and look at the Property Inspector. Click on the align Center button . Do the same for the about and contact buttons. This is looking pretty good. You can see that a website is forming. Now we can input our text onto the home page. Add your home page text in the second column. If you have your text in a word processor you can copy the text and paste (CTRL + V) it into Dreamweaver or you can type it in yourself. Now let's save our work. From the menu select File Save. The alignment of the text and buttons should be at the top of the cells but they are at the default. Click in the left column on the second row and look at the Property Inspector. You'll see the Vert (Verticle) alignment says default. Let's change this to Top. Do the same with the right column. Let's put a return in front of the home button so that it's not so close to our page header. Just get in front of the home button and hit enter.

We are nearly done with this page. Let's link up our buttons. Click on the home button. Look at the Property Inspector. Do you see the window that says Link? Type index.html in this window. This makes it so that when your visitor clicks on the home button they can return to your index.html page. Now look at the property inspector again and toward the right of the Inspector, you see a window called ALT. Add the words Return to Home here. When your visitors hold their mouse over the Home Button the message they will get will be Return to Home. Now let's do the same for the About Button. Click on it and type in about.html in the link window and About Us for ALT in the Property Inspector. Click on the Contact Button and type in contact.html in the Link window and Contact Us in the Property Inspector. Save your work.

Now go to the bottom of the table and hit enter one time. Let's add some text links to our site so that the search engines can easily index our pages. Type in:

home | about | contact

The text is to the left, so let's center it. Highlight the text and look at the Property Inspector. Click on the Center Alignment button. Now let's link up our text. Click on the word home. Look at the Property Inspector and in the Link Window, type in index.html. Now click on the about word and look at the Property Inspector and type in about.html in the Link Window. Do the same with contact and type in contact.html. Our page does not have a title yet. It says Untitled Document. Let's add a title by right clicking with our mouse and selecting Page Properties. Save your work. Everything is looking good.