|
|
Linkware Notice:
|
THE MENU
Full Border BackgroundThe goal is In this example I have created a small frame image like the one on the right:
I then sliced it into nine sections, three rows across, three rows down to create these individual tiles:
In this example, the corner tiles are 50 pixels square; the top and bottom center tiles are 50 pixels high and 30 pixels wide; the left and right center tiles are the reverse, 30 pixels high and 50 pixels wide; and the center square ("I'll take the center square to block, Peter," sorry...bad joke) is 30 pixels square. You will need to be aware of these dimensions, as some of them will be used in the construction of your tables; others will not be used. First of all, you will need to set up your HTML page. It is preferable to use the following in your body tag: marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" Depending on the structure of your bordered/framed page, you
may or may not want to include these attributes. What this does
is get rid of all the margins so that the borders/frames/tiles
will fit snuggly against the top and sides of your browser. If
you will be using this framing system only as a small part of
the page to highlight certain items as in this example (Sample 1), then this is not
necessary. In this instance, you will want to include a background
tile to match the outer edges of the frames, in this instance,
this image: Next, you will want to set up the table that will contain the tiles and content. Below is a representative diagram of the content of your table.
Below is the HTML you will need to set between your <body></body> tags to create the table: <table border="0" cellpadding="0"
cellspacing="0"> Please note where I have tagged items as either images (img src="tile-03-03.gif") or tiling table cell fills (background="tile-03-02.gif"). If you will not be placing any images in the cells with the background tiling patterns, such as a row of buttons or a banner, add a non-breaking space ( ). If you do not do this, the background tile will seem to disappear in your browser. Please be extra careful to include height and width tags for the table cell attributes in the corner cells. Failing to do so will cause extreme funkitude! Be aware that in Environments that contain items that will go into the cells with background fills, I will create no buttons or embellishments that are wider than the respective right or left columns that they go in. These are to be stacked vertically (in a nested table if necessary), or else that will throw the table fills off. Likewise, I will make no top or bottom banner, button, embellishment higher than the top or bottom table cell. These are to be inserted horizontally (in a nested table if necessary) or else that too will throw the table fills off. If you follow these instructions, your page will now look like this (Sample 2). When you add your content in the center cell where I marked <!--insert your content here in this middle cell-->, your page will fill out, expanding the variable width cells. You will want to include a background tile (see above) to match the outer edges of the frames if your page content is minimal as in Sample 1. In this case, you may also want to limit the width of the table as I did in Sample 1 where I centered the table and set the table width to 70%. Note, however, if you want your background to completely fill out to the edges, even if you have minimal content, you must add width="100%" height="100%" in the <table> tag The End! |
If you are interested in creating your own frames and borders, The Dingbatcave offers stunning dingbat fonts to help you do just that, with dingbats specifically created for the web designer. Take a look at the large selection of both web and border dingbats as well as square and tiling dingbats. Below are visual examples of what can be created with Framemaker, just one of many font families available. Tutorials
|
to create a
page with a border around the entire content of the page that
appears frame-like. The key to doing this is to set up your page
in tables and to apply a repeating pattern as a background in
the center cells of the table. Ultimately, your page should look
something like 
Copyright © 1996-2008 Ann Stretton. All Rights Reserved. No part of this website may be copied or reproduced. Permission is not given under any circumstances to use any of the graphics or art on this site for any purpose whatsoever with the sole exception of the items offered in the webgraphics area in accordance with the terms of use. |