Pet Photos - FRAMED GALLERY Modifications

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" colspan=2 height=90 BGCOLOR="#CCFF99" TEXT="#080000" bgproperties="fixed" background="25a78671esnimw.png"> <div> <FONT SIZE="5" COLOR="#CCFF99" FACE="Arial" ><B>CSB 5 Demo</B></FONT><FONT SIZE="2" COLOR="#000080" FACE="Times New Roman" ><B>  </B></FONT><B>    |     </B><A HREF="http://www.samisite.com/csb5demo/thumbnails.htm" TARGET="_top" TITLE="http://www.samisite.com/csb5demo/thumbna"><B>Photo Sequence Wizard</B></A></div> <div>                                                   </div> <div> </div> </td> </tr><tr> <td valign="top" width=200 BGCOLOR="#336699" TEXT="#080000" bgproperties="fixed" background="1b6c83b3.png"> <div> <A HREF="index.htm" TARGET="_top" TITLE="Pet Photos FRAMED GALLERY Modifications">PHOTOGALLERY HOME</A></div> <div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="1" WIDTH="142" BORDERCOLORLIGHT="#CCFF99" BORDERCOLORDARK="#99CC99" FRAME="HSIDES" RULES="ROWS" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 150 ><NOBR><div> <A HREF="id39.htm" TARGET="TRLX_Middle" TITLE="id39.htm"><IMG SRC="23269780.jpg" border=0 width="105" height="120" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <div> <A HREF="id39.htm" TARGET="TRLX_Middle" TITLE="id39.htm">Spaz</A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 120 ><NOBR><div> <A HREF="id40.htm" TARGET="TRLX_Middle" TITLE="id40.htm"><IMG SRC="233785a0.jpg" border=0 width="120" height="90" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <div> <A HREF="id40.htm" TARGET="TRLX_Middle" TITLE="id40.htm">Si</A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 120 ><NOBR><div> <A HREF="id41.htm" TARGET="TRLX_Middle" TITLE="id41.htm"><IMG SRC="234785a0.jpg" border=0 width="120" height="90" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <div> <A HREF="id41.htm" TARGET="TRLX_Middle" TITLE="id41.htm">Oscar</A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 115 ><NOBR><div> <A HREF="id48.htm" TARGET="TRLX_Middle" TITLE="id48.htm"><IMG SRC="2ac78550.jpg" border=0 width="120" height="85" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <div> <A HREF="id48.htm" TARGET="TRLX_Middle" TITLE="id48.htm">Window Perch</A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 120 ><NOBR><div> <A HREF="id49.htm" TARGET="TRLX_Middle" TITLE="id49.htm"><IMG SRC="2ae785a0.jpg" border=0 width="120" height="90" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <div> <A HREF="id49.htm" TARGET="TRLX_Middle" TITLE="id49.htm">Love the Sun</A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP HEIGHT= 150 ><NOBR><div> <A HREF="id50.htm" TARGET="TRLX_Middle" TITLE="id50.htm"><IMG SRC="2b076780.jpg" border=0 width="118" height="120" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> <div> <A HREF="id50.htm" TARGET="TRLX_Middle" TITLE="id50.htm">Nap Time</A></div> </NOBR></tD> </tR> </TABLE></div> <bR> </td> <td valign="top" height=390 width="100%" BGCOLOR="#CCFF99" TEXT="#080000"> <div> <I><B>Pet Photos - FRAMED GALLERY Modifications</B></I></div> <div>  </div> <bR> <div> <B>I used CSB Photo Sequence wizard to create the pages and the thumbnails.  Quick and easy.</B></div> <bR> <div> <B>Then I modified the resulting pages for a different look once CSB had created the pages.</B></div> <div> <B>With this framed version, there are FAR MORE changes, but in the end, each large image will load into this page body area.</B></div> <bR> <div> <B>This is my personal favorite gallery style.</B></div> <bR> <div> Only one set of thumbnails is necessary, on the main page and only the thumbnails SCROLL leaving the page body in place!</div> <div> CSB built the pages, you just need to reformat a bit and relink. </div> <bR> <div> <B>Try the gallery links (click on images, text) then </B><A HREF="#makegallery" TITLE="Pet Photos FRAMED GALLERY Modifications"><B>read about HOW to make this gallery</B></A><B>.</B></div> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <div>  <A NAME="makegallery"><IMG BORDER="0" SRC="1x1.gif" HEIGHT="1" ALIGN="bottom" WIDTH="1" HSPACE="0" VSPACE="0" ></A></div> <div> <B>HOW TO MAKE THIS GALLERY:</B></div> <bR> <div> <B>NOTE...</B><FONT SIZE="3" COLOR="#0033FF" FACE="Arial" ><B>this is time consuming.</B></FONT><B> And may not be worth it!  You can use photo programs and other software to create this style gallery.</B></div> <div> <B>This demonstration is designed to just show you it CAN be done if you have the inclination.</B></div> <bR> <div> <B>1)  Add a 3 column table to the left border of the main page</B>.</div> <div> <B>2)</B>  <B>Move the images and the text links to the left border table, off this main page body.  Add a link to home page of gallery</B></div> <div> <B>3)  Build a plain page layout. </B> This type of format is needed for the large images.  CSB uses the SAME format for large images and the main (home) page of the gallery.  That won't work well for the framed gallery style.  </div> <div> <B>FORMAT > EDIT PAGE LAYOUT > then choose NEW LAYOUT , give it a new name </B></div> <div> <IMG BORDER="0" SRC="Symb075c002d00f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Make it solid with only the page Title at the top by turning off top and left border (right click on it uncheck the box)</div> <div> <IMG BORDER="0" SRC="Symb075c002d00f000000000.png" HEIGHT="16" WIDTH="24" ALIGN="bottom" HSPACE="0" VSPACE="0">Click finished when done.</div> <div> <TABLE BORDER="1" CELLPADDING="2" CELLSPACING="0" WIDTH="624" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP HEIGHT= 241 ><NOBR><div> <IMG SRC="27a67eb0.gif" border=0 width="615" height="235" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> </NOBR></tD> </tR> </TABLE></div> <bR> <bR> <div> <B>4)  On the map, draw a box around the large image web pages.</B></div> <div> Hold right mouse button down while drawing box</div> <div> <IMG SRC="26e8c9b0.gif" border=0 width="140" height="155" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"> .</div> <bR> <div> <B>5)  Format > Apply  Page Layout, choose the name of the layout you created.</B></div> <div> <B>And check the bullet for ALL SELECTED webpages. Click OK.</B></div> <div> This will apply your new BLANK format to ALL the large image pages at one time</div> <div> <IMG SRC="26f5c520.gif" border=0 width="348" height="338" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <B>6)  Change your links.  Each one must be reset.  TIME CONSUMING.</B></div> <div> Right click a thumbnail picture, choose Create Link to URL</div> <div> <IMG SRC="2700ca40.gif" border=0 width="268" height="420" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> This is the way CSB built the link.  It will cause a FULL page to load.</div> <div> Click BROWSE button to see the page information for this image.</div> <div> <IMG SRC="27190180.gif" border=0 width="400" height="280" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <B>This image is called Spaz.</B> <FONT SIZE="3" COLOR="#003399" FACE="Arial" ><B> Look at the ID number for the page address.</B></FONT></div> <div> The address of the page is <B>id39.htm</B></div> <div> The address for Oscar is <B>id42.htm</B></div> <div> Click cancel to return to the Link properties box</div> <div> <IMG SRC="2757a550.gif" border=0 width="378" height="341" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <B>After identifying the address for the photo you are working with, you can change the link.</B></div> <div> <B>Click the dropdown and change the Link to URL</B></div> <div> <IMG SRC="27690180.gif" border=0 width="400" height="280" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <B>Change the name of the web page</B> <FONT SIZE="3" COLOR="#000000" FACE="Arial" >to the file name noted earlier (id39.htm)</FONT></div> <div> <B>Click the Target dropdown</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B> and change it to </B></FONT><B>TRLX_Middle</B></div> <div> <B>Click OK button.</B></div> <div> <IMG SRC="27790180.gif" border=0 width="400" height="280" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <div> <B>You will get a warning because your file name does not have HTTP</B></div> <div> <B>Click YES</B><FONT SIZE="3" COLOR="#000000" FACE="Arial" ><B>, it is fine!</B></FONT></div> <div> <IMG SRC="278d5180.gif" border=0 width="469" height="280" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></div> <bR> <bR> <div> <B>REPEAT LINK CHANGE FOR EACH THUMBNAIL IMAGE and TEXT LINKS.</B></div> <bR> <div> <B>Need to add more photos?</B>  EASY.... The page design is already ready.  I added 3 additional images to this tutorial by inserting another photo sequence using the wizard.  Then I dragged those thumbnails into more rows of my table and put the large image pages onto the original sequence line. Or, I could have left them in thier own sequence and linked to it instead!</div> <bR> <div> <B>7)  Set your publishing options to use HTML Frames.   File > Publish > OPTIONS</B></div> <div> <B>Check the box to use FRAMES, OK</B></div> <div> <B><IMG SRC="2799df00.gif" border=0 width="413" height="240" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></B></div> <bR> <div> <B>8)  Publish.</B></div> <bR> <bR> <div> <A HREF="http://www.samisite.com/photo/id88.htm" TARGET="_top" TITLE="http://www.samisite.com/photo/id88.htm">Read more about galleries on this page.</A></div> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> <bR> </td> </tr></table></body>