Step 14: Add Place Graphics To Home Page
Work Hard On The Home And Splash Pages
When creating webs, it's a good idea to work very hard on the splash page and the home page, as you can be sure that every visitor to your web (who comes through the front door) will see those pages. So in this step we continue the enhancement of the home page.
Adding Country Images
In this step, each of the hyperlinked country names on the
home page are changed to images of each country. In the previous
version of the home page, the hyperlinks were aligned by placing
them in a table. In this step, we retain the table, but replace
the content of each cell with an hyperlinked image and hyperlinked
country name. For example, in the case of England, we replace:
<TD><FONT
SIZE="5"><A HREF="england.html">England</A>
</FONT></TD>
with
<A HREF="england.html"><IMG
SRC="binary/stonehenge_small.jpg"
HEIGHT="80" WIDTH="120" HSPACE="5" VSPACE="5"
ALT="Stonehenge" BORDER="0"></A><BR>
<A HREF="england.html">England</A>
This is messy HTML, but there's only a couple of new constructs and these are described in the notes below.
Hyperlinking images: Hyperlinking images is just as easy as hyperlinking text. Just wrap the image in an A tag.
Borders: If you hyperlink an image, by default, most browsers will place a rectangle around the image (in the LINK or VLINK colour) to indicate that the image is linked. This used to be a useful feature to let the user know that the image was linked. However, nowadays, most web users expect images to be linked, and the rectangle just makes the page look ugly. So most web designers remove the rectangle by adding the field BORDER="0" to their IMG tags.
Gaps: You might wonder why two A tags are used to link the image and the text beneath separately. The reason for this is that, if you wrap both in one A tag, some browsers will underline the spaces between the image and the text, and this looks ugly. Thus, as a rule, it's better to separately hyperlink objects, except when they are abutted.
BR: The BR construct breaks to a newline after the image, ensuring that the text will appear below the image. The text will be centred because the enclosing table cell has a ALIGN="center" attribute.
How The Images Were Created
The small country images in the new home page were created by shrinking a larger image, adding a white border, and then applying a drop shadow to the small image within the border. Here are the details:
Start with an image of Stonehenge or whatever Shrink to about 100x67 Expand canvas with white to 120x80 Select the 100x67 image Alien.DropShadow(X=4,y=4,Blur=5,Opacity=60%,Colour=Black).
This step has added an image for each country on the home page. While we are clearly in danger of making the page too "heavy" (too much stuff to load makes the page slow), the results, in this case, seem worth it. We can take a few liberties with speed because the splash page is "light". Take a look at the new home page and see if you agree.
|
