 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
The navigation elements have been placed in their own table, which is nested in a single table cell, to ensure that the spacing between navigation element table cells would not be affected by the stretching behavior of this text cell that would occur when we added these design notes. Also, this text cell was planned to line up with the green grass of the photo above. We retouched the grass in the photo using a web-safe color so that this table cell could be filled with the same web-safe color. As we designed the layout in Photoshop, we took care to use a web-safe blue color in the background so that our GIF and JPEG files would match the HTML-designated web-safe background color which would be used as a page background. The simulated visual effect of overlapping elements (created using Photoshop’s layers) enhances the page design’s visual interest. Even though this page is fairly heavy with graphics, the page weighs only 50K. We could have lowered the quality setting of the large lighthouse image even more (the current quality setting is 35 and the JPEG weighs 18.3K) but the page still falls within the 50K limit that we usually hold a page to. To create some breathing room between the text you’re reading and the edges of the green colored table cell, we nested another table within the original text table cell, and designated a width of 95%. This text is actually flushed left and right against the sides of the nested, borderless table. We can easily change the table width to any percentage, giving us a great degree of control over the effect of indenting text. For indenting, we prefer using this nested table technique over using the HTML <blockquote> tag, which offers no control over the amount of indenting. The <blockquote> tag also can be unpredictable, affecting cell alignment in some cases and pushing apart slices of an image that are placed in adjacent table cells. We wanted the text to be bold and small, but with open line spacing to aid legibility and to create a somewhat unique look for the text. We created a CSS style sheet in which the text is 10 pixel Verdana with a 20 pixel line height (leading). Using pixels rather than points assures greater font size consistency between browsers and platforms.
|