BORDER BACKGROUND LAYOUT

Design your web page by using tables. This tutorial instructs you on making your design using an inside table.

  • Replace the name Outer Edge Background, and Inside Background to read the image names that you have saved to your hard drive.

  • Replace the bgcolors, red and white,  and bordercolor="#COLOR"  to read your six digit HTML color  that  is close to each background color. Why do we want to add this.  Well some people may view your site with their graphics enabled, if you do not show a bgcolor they will see the default color white.  But what if your text happens to be white on a black background.  You got it!!!  Your visitor cannot read it and so off they go.  Oh, also bordercolor  works with the IE browser but shows up as grey on some other browsers.

  • The table widths and Cellpadding sizes can be changed. Experiment with different sizes and pick what's right for your page.

  • When you look at what you copied you will see that the area for adding your text, buttons, etc. looks so small. Trust me, once you begin to add your information in the area marked (The contents of your page goes here) surprise, this area will grow. Oh the magic of tables..

  • Last point, if you are a newbie you may not know what an invisible.gif is. I call mine vspacer.gif. It is like it says, a spacer and it's invisible. If you don't have one as yet, download it here invisible image and use it to add a space. This little gif can be sized to whatever you need. You will notice here that I have included a vspacer  on my layout.  Please do experiment with it.  Change the sizes to suit your page.  If you feel you don't need it, just remove it.

  • OK READY ..... Copy and paste the following into a Blank document.

    <html>
    <head>
    <title>Title of your page</title>
    </head>

    <body bgcolor="red" background="Outer Edge Background.jpg" text="black" link="blue" vlink="yellow" alink="blue"><br>
    <IMG SRC="vspacer.gif" WIDTH=1 HEIGHT=25>
    <div align="center">

    <TABLE BACKGROUND="Inside background.jpg" BORDER="0" Bgcolor="white" bordercolor="#COLOR" WIDTH="80%" cellpadding="20" cellspacing="0">
    <tr><td>

    <IMG SRC="vspacer.gif" WIDTH=1 HEIGHT=15>
    <br>

    The contents of your page goes here; images and text.

    </TD></TR>
    </TABLE>
    </div>
    </body>
    </html>

    Background  and tutorial was created and is the property of Dorothy Rheaume.  All rights reserved.