Tiling Images
In this lesson, I will assume that you are already fluent in PhotoShop, enough to know how to flatten an image. This lesson doesn’t include transparencies, but this will work with any type of image, GIF or JPEGs. To get the images together, you flatten your image in PhotoShop, select parts at a time(making sure they will align either left or right perfectly!) and CTRL+N or select New from the file menu to start a new image. PhotoShop will automatically create the new image according to the size of the image on your clip board. Paste the image into that new file, and go back to the original document. Make sure to select right next to the original selected image. If you should mess up, hit CTRL+Z(once in the original file) or select undo from the Edit menu, and it should take you back a step. That trick only works once
Tiling graphics, when used properly can add speed to your site. I had someone ask a question about her site, and it was so long of an answer, I should just put it in a lesson for everyone. Since it is snowing here in Chicago, I have nothing better to do anyway. So this lesson is a long one, everybody.
Problem
We left the border in for the lessons. The problem here is that she wants all the images to line up, but they aren’t doing so good. We are using text fields, which always like to screw everything up. Let’s have a look at the code. I will be interuppting a lot, with bold statements.
<table border=1 cellpadding=0 cellspacing=0 width=481 height=410>
<tr>
<td colspan=3>
<img src=”images/1.gif” WIDTH=481 HEIGHT=57 TABLE BORDER =”0″>
</td>
</tr>
<tr>
<td>
<img src=”images/2a.gif” WIDTH=9 HEIGHT=73 TABLE BORDER =”0″>
( 2a.gif was actually a yellow block made into an image. You can always make a background color inside a table instead of loading an image. td bgcolor=”yellow” )
</td>
<td align=center valign=middle bgcolor=”white” width=234 height=73>
<INPUT TYPE=”text” NAME=”name” SIZE=”10″>
</TD>
<td>
<img src=”images/2c.gif” WIDTH=238 HEIGHT=73 TABLE BORDER =”0″>
</TD>
</tr>
<tr>
<td>
<img src=”images/3.gif” WIDTH=481 HEIGHT=48 TABLE BORDER =”0″>
</TD>
</tr>
( Here we have a major problem with the code. She has colspan=3 in her beginning td tag, but not in all of the tags that don’t have three cells across! You must make up for all missing table data. even if you just put in empty table data fields )
<tr>
<td>
<img src=”images/4a.gif” WIDTH=141 HEIGHT=98 TABLE BORDER =”0″>
</td>
<td align=center valign=middle bgcolor=”white” width=195 height=98>
<TEXTAREA NAME=”comments” ROWS=”4″ COLS=”8″>
</TEXTAREA>
</td>
<td>
<img src=”images/4c.gif” WIDTH=145 HEIGHT=98 TABLE BORDER =”0″>
</TD>
</tr>
<tr>
<td>
<img src=”images/5.gif” WIDTH=481 HEIGHT=75 TABLE BORDER =”0″>
</TD>
</tr>
<tr>
<td align=right valign=top width=243 height=59>
<font size=5>E:</font>
<INPUT TYPE=”text” NAME=”email” SIZE=”10″></TD><td><img src=”6b.gif” WIDTH=238 HEIGHT=59 TABLE BORDER =”0″>
</TD>
</tr>
</table>
There is no rule
that says that you can’t have more than one table. It is much easier to see how things are going when you use more than one. They tile just as easy. If she wanted, she could have a table for each row! But, lets be honest, that could be too hard to read. I re-coded the entire page, to make it easier to read. I have a table going around everything(teal) so I can have more control in the end. Who knows what the resolution is going to be for the viewers, so I want to make sure not to cover the background. I gave an extra table data cell(td) and just put non breaking spacers in it.(you can view my code here-View-Source) Then I separated it into three separate tables, making sure that each lined up before I started a new one. It can be very frustrating to have too many problems at once.
Voila! We have the perfect web page.
Author: Gina Hutchings
Copyright Lunar Media Inc
Chicago Web Design
