6. Example
To make the BabyBlue normal page template, we first opened a new,
blank page (File
| New | Page - Normal Page).
Then we decided how the page was going to be laid out. We decided to
use a series of nested tables. The main overall structure would be a
table that stretched the length and width of the screen with four cells.
Then we would create tables within those cells.
Main Table
 In
our blank page, we inserted a table (Table | Insert | Table) with
2 rows and 2 columns. We set everything to 0 but specified
the width to be 100%.
Now there was a table on our page. We right-clicked on the table and
selected Table Properties. We specified the height to be
100%.
Tip: Margin-less Web Pages
HTML pages default so that there is a margin
between the edge of the screen and anything on the page. If you
are trying to make a full-screen theme, you have to set the page
margins to zero. Right-click and select Page Properties,
then set the margins to 0.
However, this only works on Internet Explorer. If
you want your margins to be 0 in Netscape, you'll have to go into
the HTML. Go into HTML view and find the "body" tag. It will look
something like this:
<BODY TOPMARGIN="0"
LEFTMARGIN="0">
Change it to this:
<BODY TOPMARGIN="0"
LEFTMARGIN="0"
RIGHTMARGIN="0"
MARGINWIDTH="0"
MARGINHEIGHT="0">
Now you won't have margins in IE Explorer or
Netscape!
 *Important:
We highlighted all four of the cells, then right-clicked and selected
Cell Properties. The dialog box looked like the one on the left. We
unchecked the specify width box. (If you don't, you'll have
problems when you're trying to get your cells to be the right size.)
Then we highlighted the left column. (Bring your mouse to the top of
the table and you'll see the cursor change to a thick down arrow. Click
and the column should be highlighted. You may also click and drag across
the cells you want to highlight) We specified the cell width (under
Cell Properties) to be 147 pixels. Our main table was ready
to be filled with content!
Table 3
We'll jump ahead to Table 3. In the main table, we inserted another
table in the top-right cell with 3 rows and 1 column,
100% width. We specified the height for the top and bottom cells to
be 28 pixels. Then we set the background color of the cells to be
a light blue (under Cell Properties). We inserted the page banner into
the middle cell, and we inserted horizontal navigation buttons into the
bottom cell. As for the top cell...
Tip: Colored Table Cells and Netscape
Netscape has problems displaying empty table
cells -- they will usually show up as completely empty, without
any background color. Also, sometimes Netscape has problems
showing background colors.
To make sure that your table cells with
backgrounds show up correctly, do these two things:
-
Create a small background image for the table
cell in a graphics program (Photoshop, PhotoDraw, etc.). We made
a 1x1 pixel light blue image (
- enlarged so that you can see it). Right-click on the cell and
select Cell Properties, then set the background image of the
cell (browse to find it on your computer). Now you won't have a
problem with the background color not showing up.
-
Create a "transparent gif" to use as a spacer
in a graphics program. To make it easy for you, we've included
one here:
The actual image is 1x1 pixels, but we enlarged it and put a
border on it so that you know where to click. Right-click on the
square and save it to your hard drive (it's called "spacer.gif").
Spacers are great for getting pages to lay out properly because
you can resize them to any shape you want. In this case, insert
the spacer into the "empty" table cell. Highlight it,
right-click, and select Picture Properties. Click the
Appearance tab and set the border to 0. Then uncheck the
Keep aspect ratio box and type in the new dimensions. We
usually make it the same size as the table cell. Now that the
table cell is no longer empty, Netscape will display it
properly.
We inserted the spacer graphic into the top cell and resized it to be
560x28 wide. Now, Table 3 was ready.
Table 4
In the bottom left cell of the main table, first we inserted vertical
navigation bars. Then we inserted Table 4, which was a simple table with
2 rows and 1 column at 100% width (Note: this means
that the table is 100% wide relative to whatever it is inside. Since
it's inside a table cell that is 147 pixels wide, this table will be 147
pixels wide also!).
The top cell used a background image:
(which we had to create in a graphics program). The bottom cell didn't
have anything special in it.
Table 5
Table 5 was pretty simple to make, as well. In the bottom right cell
of the main table, we inserted Table 5, which had 1 row and 2
columns and specified 100% width. Then we made the left cell
to be 100% wide (under Cell Properties) and the right cell to be
150 pixels wide. In the left cell, we put in the body content.
Read on to find out what we did with the right cell!
Summary of "extra" graphics we had to create for this page layout in
a graphics program
- spacer image
-
blue background
- checkered background
- multicolored checkered background
 |
- picture of cute baby, no bigger than 130 pixels wide. Create this
in your favorite image editor (we used Photoshop). |
Next: Thin-Bordered Boxes
Back: Page Templates
|
