SoSaysSunny.com Virtual Photo Frames

Before:

TITANIC: Flying Lesson 		 

After:

TITANIC: Flying Lesson

 

Scroll to the bottom to see the HTML codes I used ...
Return to:     Up to Sunshine Stories       Up to Sunny's Art Gallery       Up to Sunny's Web Development Page       Up to The Sunshine HTML Resource

   Tell me what you think! © Sunny Snaith     Post Office Box 681727, Fort Payne, AL 35968
    http://sosayssunny.com/photomat.html     Last revision:  June 8, 2007     [WELCOME]   [HOME]   [CREDITS]   [PRIVACY]

 

C O D E S : <CENTER> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR><TD BGCOLOR="#A3A3A3" ALIGN="center" VALIGN="middle"> <TABLE BORDER=3 CELLPADDING=20 CELLSPACING=3> <TR><TD BGCOLOR="#FFFFEE" ALIGN="center" VALIGN="middle"> <TABLE BORDER=0 CELLPADDING=4 CELLSPACING=0> <TR><TD BGCOLOR="#99CCFF" ALIGN="center" VALIGN="middle"> <TABLE BORDER=0 CELLPADDING=2 CELLSPACING=0> <TR><TD BGCOLOR="#FFCCDD" WIDTH=130 HEIGHT=105 ALIGN="center" VALIGN="middle"> <IMG SRC="titanic.jpg" WIDTH=130 HEIGHT=105 ALT="TITANIC: Flying Lesson" ALIGN="middle"> </TD></TR> </TABLE> </TD></TR> </TABLE> </TD></TR> </TABLE> </TD></TR> </TABLE> </CENTER> N O T E S : * Using TABLE tags to create virtual photo frames and mats is a browser-safe way to dress up your page: These codes should be ignored by any browser that doesn't support tables and this method does not require loading any extra images -- So, it's FAST and looks great while loading! * Just copy the codes above and customize with your own image & colors. * The outer TABLE sets the medium grey color for the photo frame. If you change this color, parts of the frame will still be grey, so I usually leave it medium grey or make it black. * The next TABLE in has a BORDER of 3 which is the outer edge of the 3D picture frame. CELLSPACING is set to 3, which controls the width of the medium grey part of the frame. You would want to make the BORDER and CELLSPACING bigger on a bigger image. * CELLPADDING is the width of your mat and BGCOLOR is the color. * It's a good idea to close all the TD and TR tags when nesting tables. * Putting the WIDTH and HEIGHT in both the IMG tag and the inner-most TD tag will help the borders to come out evenly. * AESTHETICS: Keep the wide outer mat a neutral color and use the narrow inner mats to pick up brighter colors. The inner-most mat should contrast the edges of the image and should probably be the most narrow. EXAMPLE: Switching the rose and blue mats would not be as effective because the blue would blend in with the sky and because a wide rose mat might be distracting. G O O D L U C K & H A V E F U N ! ! !