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
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
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.
| Step 3
| Step 5
| Step 7
| Step 9