Sunshine Pages  

Sunny's Virtual Photo Frames Page

Before:

TITANIC: Flying Lesson

After:

TITANIC: Flying Lesson

Scroll to the bottom to see the HTML codes I used ...


Up to Sunshine Stories       Up to Sunny's Art Gallery       Up to Sunny's Web Development Page       Up to The Sunshine HTML Resource


SCHOOL | FUN | SCIENCE | WEB | TRAVELS | GOD | HOME | CREDITS

CafePress
Amazon.com
Tell me what you think! © Sunny Snaith
Post Office Box 921521, Norcross, GA 30010-1521
http://sunshinehtml.com/photomat.html
Last revision:  February 7, 2002
WebTracker
(Since Jan 16, 1998)

Sunny's Awesome Homepage: CREDITS, with acknowledgements for companies like Amazon.com and CafePress.com.     [PRIVACY STATEMENT]


 

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 ! ! !