| Lastly,
and finally we will add the finishing touches
with the background color, a content table,
some content, and if you prefer a footer table
to round it off. |
|
|
Continuing from the Setting
Dimensions page.
Take a breath... The hard parts over and
it's easy sailing from here on out.
Let's review what we have done so far. We
created a logo table at the top, added two cells, put
a logo image into the left column and a tag gif into the right
column and set these cells Bg color
to match the logo, and the position properties to bottom and
right for the tag.
Then we created a large table to hold the
content and navbar. We nested a table inside of this<
one to hold the navbar table, then nested the navbar table
inside of this one.
We then added our buttons and set our outer
nav table properties to expand the larger table and
set the inner tables properties to shrink around thier content
and deleted the unwanted spacer gifs and rows added by Dreamweaver.
Now we will set the Bg color to the larger
content table so it will match the design, draw in a table
for the content, and add some content.
Bg Color/Content Area
Select the large
table by clicking in the huge expanse in the middle of the
screen. In the Properties
Inspector
set the Bg to the same color as the logo and tag cell, #996666.
We will now draw a new Layout Table in the area for the content,Select
the Draw
Layout Table icon and draw
a new Layout
Table to fill this open area, and
set the Bg to white and the cellpadding to 10.
You can't add content directly into a Layout
Table, only into Layout Cells. Draw
a Layout Cell to completley fill the content area. Notice the cursor
is "offset"? That is the 10 pixel cellpadding.
It was added to give some breathing room for the text.
Select this new
cell and in the Properties Inspector set the Bg to white #FFFFFF.
We can now add content to this area. If you wish you can type anything into
this area, or just copy
and paste anything from this page for testing purposes. After
you add some text Press F12 to preview this page in a Browser.
See the line at the bottom? Yep...spacer
gif. When you added the content table a spacer gif was
added to the larger table. Another way to remove spacer gifs
which will be ok in this instance is to select the double line in the table header above the nav
buttons and choose "Remove all Spacer Gifs"
If you have a gap to the top right of your
page you can add a snipit of code to the body tag eliminate this.
Click the Show Code View icon in the upper left of the Dreamweaver screen
Scroll to the top and type this: rightmargin="0"
into the code like the example below.
<body bgcolor="#FFFFFF" text="#000000"
leftmargin="0" rightmargin="0"
topmargin="0"
Switch back to Show Design View. 
You could stop here and have a perfectly
fine page layout that flexes according to the content
that you add, or you could continue and instead of putting
in the Layout Cell we just drew, you could draw in its place several cells, or yet another Layout
Table within another Layout Table etc...
You get the idea. The possibilities are endless.
Footer Table
I'd like to show you how to put a footer
table in the design. They can serve for additional
navigation, copyright info, advertising, or just simply just
to encase the page with some color.
In the remaining
space at the bottom draw in another Layout Table. It
doesn't matter the size
because we will autostretch it anyway.
Click the number in the column header and choose
autostretch. If you are prompted to insert a spacer
gif choose "no". Set the
Bg color to whatever
you want. I used #666666.
Draw a Layout Cell
the complete width of the table and insert a spacer.gif inside
of it. Set the
height to the value that you want. I used 34. If you
find yourself adjusting the height of this or
any other table and you can't seem to get rid of the extra
space left behind you can go into the
table header and choose clear cell heights. This will remove
any unwanted space at the bottom.
That's it!
* Click on the pic to see the final
result.
|
copyright
2001 all rights reserved 4Level Webs
|
|
