Lesson 16
Using A Framed Background
If you designed a framed background so that it would fit in a page using the
screen resolution of 800X600 leaving 100 pixels on each side your image
would need to be 600 pixels wide. But when you consider someone using a
screen resolution of 1024X768, they would view the image with 212 pixels on
each side of the image. And as you go higher there will be more side than
there would be image, for example 1280X1024, you would have 600 pixels of
framed background to 240 pixels on each side of the frame, then 1600X1200
would give you 500 pixels on each side of the frame. So when you
design your image you want to keep in mind that you will need a certain
portion of the top and bottom image that can be used for extending the
background. This can become very complicated if you are not careful about
how you design your original graphic.
My original 600X600 graphic was cut down to nine graphics, seven of which
are 15 pixels wide and one each of 255 pixels and 75 pixels wide. Add the
nine together and they don't even add up to 600 pixels in width and they
represent 3 rows of graphics which if you used all of your original graphic
they would total 1800 pixels wide. This is quite the size difference and
will make a page that would load much faster than using the entire size of
the original graphic. The finished project can be found
here and a screenshot of the original graphic
created can be found here.
Below shows the 9 graphics needed to create the framed background.
Now to create the table and place the graphics into each cell.
The steps below are used to create the framed background page I created, you
may need to modify the instructions for your template.
-
Click on Table then Insert and then Table
-
In the New Window that pops up choose 3 columns and 3 rows, Alignment
Center, Border Size 0, Width 80%
-
You should now have three equal columns and three equal rows.
-
Going to the HTML View will make the changes needed for each cell much
easier. The HTML for the table so far is as follows:
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="80%" id="AutoNumber2">
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
<tr>
<td width="33%"> </td>
<td width="33%"> </td>
<td width="34%"> </td>
</tr>
</table>
</center>
</div>
-
Now as I said above there are 7 graphics that are 15 pixels wide, two of
which will go into the top 3 cells, the first and the third, but we are also
needing the Height of these graphics because the top row of graphics are a
fixed size. The graphic below gives us the information needed to fill the
table.
Image7_1x1.gif, Image7_1X2.gif and Image7_1X3.gif will go in the top row,
the height of all 3 is 114 pixels and we will enter that information in the
top row along with 15 pixels for the left and right sides. The center image
will not have a width provided as this image will grow and get smaller with
the individual viewers screen resolution. Below is what the first line will
look like
<td width="15" background="Image7_1X1.gif" height="114"> </td>
<td background="Image7_1X2.gif" height="114"> </td>
<td width="15" background="Image7_1X3.gif" height="114"> </td>
-
The second row will consist of Image7_2X1.gif, Image7_2X2.gif and
Image7_2X3.gif. This time we will not worry bout the height as the center
piece of these three is where the content of the page will be written and it
will determine the height of these three cells, again the width of the
center cell will not be entered. So the next 3 lines will
appear as follows:
<td width="15" background="Image7_2X1.gif"> </td>
<td background="Image7_2X2.gif"> </td>
<td width="15" background="Image7_2X3.gif"> </td>
-
And finally the last row will consist of the final 3 graphics
Image7_3x1.gif, Image7_3X2.gif and Image7_3X3.gif and the height again will
be needed.
<td width="15" background="Image7_3x1.gif"
height="57"> </td>
<td background="Image7_3x2.gif" height="57"> </td>
<td width="15" background="Image7_3x3.gif" height="57"> </td>
-
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:
collapse" bordercolor="#111111" width="80%" id="AutoNumber2">
<tr>
<td width="15" background="Image7_1X1.gif" height="114"> </td>
<td background="Image7_1X2.gif" height="114"> </td>
<td width="15" background="Image7_1X3.gif" height="114"> </td>
</tr>
<tr>
<td width="15" background="Image7_2X1.gif"> </td>
<td background="Image7_2X2.gif"> </td>
<td width="15" background="Image7_2X3.gif"> </td>
</tr>
<tr>
<td width="15" background="Image7_3x1.gif" height="57"> </td>
<td background="Image7_3x2.gif" height="57"> </td>
<td width="15" background="Image7_3x3.gif" height="57"> </td>
</tr>
</table>
</center>
</div>
-
You can now switch back over to Normal View and add a background to the rest
of the page, add text and graphics into the center cell and save your page
and it's done.
-
As you can see with my finished project, the three middle graphics extend to
the width of the table. Although I saved only one butterfly on the top
middle and one butterfly on the bottom middle, more than one appears on the
finished page, the amount showing will depend on the screen resolution of
the viewer. No matter what size the screen resolution, the frame itself will
always be 80% of the screen.
Lesson 17 shows you how to create a more
complex framed background.
