Using your paint program, create a new graphic which is 1200 pixels wide by 5 pixels high. Why 1200 pixels wide, you ask? The reason for that is when your browser loads a background image it automatically "tiles" it or repeats it to fill the entire view. Most browser windows will be set less than 1200 pixels wide; so the graphic will not tile horizontally, but will fill the entire screen width. Ok, is there a reason for 5 pixels high, you ask? No, the 5 pixels is really arbitrary. You can make it 10, 15, 50 or whatever fits your needs, but try to keep it small so the file size stays small. You want to let the browser tile this image from top to bottom.
Now you will probably notice that the text on your page now slightly overlaps your new edge. To fix this we can use one of two different methods.
Notice the use of three pairs of unordered list commands <UL> and </UL>. Three pairs were necessary for this page in order to indent the body far enough to the right. More or less unordered list commands could be used if necessary. A word of caution, check the resulting page with both Netscape Navigator and Internet Explorer. They have a way of looking different which is why this is not the preferred method. The first half of this tutorial was indented with this method.
|
Second Method, <TABLE>:As you guessed it, the second method uses the <TABLE> statement. The second half of this page was formatted using this method. The idea is to create a table around your whole page and then center it. The HTML code looks like this:<BODY BACKGROUND="edge.gif"> <CENTER><TABLE WIDTH="650"><TR><TD> "This is where the contents of your page go." </TD></TR></TABLE></CENTER> </BODY> If you are unfamiliar with the <TABLE> tag, please review the Table Tutorial. Notice the use of <CENTER> and </CENTER> to center the entire table. Also, notice the use of the WIDTH attribute. The width was set to a fixed value of 650. Why you ask? I'm glad you asked that question! For some viewers on the Internet, 800 by 600 pixels is their maximum resolution. For others it might be much greater depending upon their monitors. Setting the WIDTH="650" ensures that the left border will not be covered with text no matter what screen setting (800 by 600, 1024 by 768 or 1240 by 1024 pixels) Another variation of this is to set the WIDTH equal to a fixed percentage of the browser window width. This works very well with higher level browsers such as Netscape and MS Internet Explorer. <TABLE WIDTH="80%"> would work good for this page and many others. You might have to play with the number a little to fine tune it.
That's all there is to it. Now just FTP transfer (or HTTP is your service provides it) your edge file and
your HTML page file over to your home page directory and your done. |