Step 13: Add Title Graphic To Home Page
Now that the sidebar background and margin are in place, we can start adding graphics all over the place! In this step, the main text title of the home page is replaced with a graphic.
Replacing The Title Text
Whereas the home page previously had
<FONT SIZE="6">Tarmac Travel Home Page</FONT><BR>
it now has:
<IMG SRC="binary/title.jpg"
ALT="Tarmac Travel" HEIGHT="94" WIDTH="500"
HSPACE="30">
<P>
(To see the effect, look at the old home page and then take a sneak preview of the new home page.
An Explanation Of IMG Fields
There are a few new elements here.
The ALT tag allows you to specify text to be displayed by the browser, if for some reason the browser can't display the image. This tag used to be useful for ensuring that pages could be understood by those with non-graphical browsers, but nowadays most web designers don't design for non-graphical browsers and the ALT tag is mainly useful for giving a hint of what's coming to Microsoft Internet Explorer users. Microsoft Internet Explorer displays the ALT tag while it's waiting for the images to arrive. Thus, it's important to provide something sensible in the ALT tag of every image in your web.
The HEIGHT and WIDTH tags specify the size of the image in pixels. If the image isn't actually the size specified in these tags, the browser will warp the image to fit, so try to get the values right! These tags aren't compulsary, but they speed the perceived page loading speed by allowing the browser to lay out the text of the page before the images have arrived, so it's always a good idea to include them.
The HSPACE tag extends the imaginary horizontal space that the image uses so nothing can come closer than the HSPACE value horizontally. There is also a VSPACE tag which is not used here. Both these tags are optional.
To position the title image in an interesting way, I've added it in above the sidebar margin. This means that the image overlaps the sidebar, which is pleasing to the eye.
How The Title Image Was Created
The title image was created in Adobe Photoshop. I started with a nice green photo and created a new layer for the text. I created the black text and then added noise to create a tarmac texture. Then I applied a drop shadow (using the Alien Skin Black Box filter) to the text. For those who are curious, here are the details:
Start with Kodak free Australia image number 18.
Crop to 500x94, selecting long panorama.
Image.Adjust.Brightness/Contrast(Brightness+=20,Contrast+=40).
Text "Tarmac Travel":
Font=Amco Display SSi, 70pt, AntiAliased, Colour=Black
Noise.AddNoise(Type=Gauss,Amount=25,Monochromatic).
Alien.DropShadow(X=4,y=4,Blur=5,Opacity=60%,Colour=Black).
Creating graphics for webs is a rather involved business which I won't go into in detail in this tutorial. Instead, in the rest of these pages, I'll explain briefly how each graphic was created, and move on.
This step has added the title graphic. Take a look at the home page to see how much better it looks. In theory, the headings of all the pages in the web should be turned into graphics. However, this can be very time consuming, so if you're in a hurry (and who isn't?) it's often best just to do the home page heading and leave it at that.
|
