Monday, August 25, 2008
Build Your Own Web Gallery
A step-by-step guide with screenshots for building your first website
STEP 6: Tweaking The Design
One of the first things this layout needs is proper alignment of the gallery photos. To make them space out evenly, I'll align the left image to the left edge of its cell, the center image to the center of its cell, and the right image to the right of its cell. This is done by adding the "align=" attribute to the cell's tag.
STEP 6a: Adding Alignment To Cells
Inside the <td> tag for the left photo (line 44), I added the attribute align="left", and added the same code (but changed the attribute to "center" and "right"), for each of the two other photos. See lines 44, 45 and 46 in the code.
I also thought the navigation would look better aligned right, so I changed its <td> (see line 53).
Here's our page previewed in Safari with the alignment changes made. Everything is a little more balanced now, but the page title and navigation are too close to the photos. They need a little breathing room. We'll add that with the style attribute called "padding".
Page 15 of 19