Step 12: Add Blue Sidebar To Each Page
The previous steps in this tutorial have created the skeleton of the web (the .html files) and incorporated all the web's textual content. The remaining steps give the web a complete graphical makeover to turn it into a professional looking web.
In this step, we add a blue "sidebar" to each page. To see what I mean, take a sneak preview of the new Africa page. The sidebar serves several purposes:
It adds colour: The sidebar adds colour to every page right throughout the whole page.
It uses up horizontal space: Because browser windows usually end up much wider than they are high, there is usually a great excess of horizontal space. This space has the detrimental effect of making the text too wide to read. Adding a sidebar narrows the page.
It creates a separate zone: Sidebars divide the page into two parts. The sidebar part can be used to position all kinds of navigational buttons and things, if desired, without it being confused with the main page content.
There are a few different ways of implementing a sidebar. The method chosen in the Tarmac Travel web is to add a background image that creates the blue bar, and then include the page content in a table that provides some horizontal offset.
Background Image
To add a background image, simply add a BACKGROUND
field to the BODY tag near the start of the page.
The specified background image will tile to fill the page.
If the background image can't be loaded for some reason, the
browser will use the BGCOLOR field instead
(which is why it's been left in).
<BODY BACKGROUND="binary/sidebar.jpg" BGCOLOR="#FFFFFF"
TEXT="#000033" VLINK="#660000"
LINK="#FF0000" ALINK="#CC0000">
The binary/sidebar.jpg indicates that the sidebar.jpg image is in a subdirectory called binary. For a variety of reasons, it's a good idea to keep your images and other media objects in a subdirectory of the web's directory. (Note: Do not use the name bin as this can cause problems with some FTP servers).
The sidebar image itself was created with Adobe Photoshop. It consists of an image 1200 pixels wide by 140 pixels high that's all white except for a 100x140 rectangle on the left. The rectangle was filled with blue sky using the Adobe Photoshop Render.Clouds filter (and then smoothed off using the offset and blur filters).
Browsers will "tile" background images, repeating them horizontally and vertically until the space displayed has been filled. The wide width of this background (1200 pixels) ensures that we won't get blue bars appearing to the right on large screens.
Margin Table
The second component in the implementation of the blue
sidebar is the creation of a margin table. Now that we
have a sidebar in the background, we need to move the text
on each page to the right so it doesn't overlap the
sidebar. We'd also like to "wrap" the text at a certain
point so that it's not too wide (if the user has their browser
window set wide). Both of these goals are achieved by wrapping
the content of each page in a margin table. Here's how it
works:
<!-- The following table creates a 105 pixel margin. -->
<!-- It also wraps the text it encloses to 380 pixels. -->
<TABLE><TR><TD WIDTH="105"></TD><TD WIDTH="380">
...the page content...
</TD></TR></TABLE>
<!-- End of the margin table -->
The table consists of two columns. The first is 105 pixels wide and is left empty. The second is 380 pixels wide (a good width) and consists of the content of the page.
The Results
In this step, a sidebar background and margin table have been added to every page (except, as usual, the splash page which is a special case). You will see that the addition of this splash of colour combined with the narrower text provides a huge improvement in the look of the pages.
Take a quick look at the sidebar.jpg graphic too so you can see what it looks like. Most browsers will display graphics files directly, as linked below.
|
