Website Design: Part Six

DESIGNING YOUR OWN WEBSITE

Vicky Vickers

PART SIX: MORE ON IMAGES
Graphic Bars & Lines
A page of text without any graphical breaks, will not appeal to most persons browsing the web. You need something to break up the information into manageable chunks so it doesn't look so intimidating. One way to do this is to put a bar or line graphic between the sections. While you can design your own bars (if you are artistically talented) there are lots of sites on the web where they are archived.

To place a bar into your page use the following formula:

This will use the default settings of align left and no space around the graphic. If you wish to have the bar align center, use the following formula:

You need to put a paragraph break<P> at the end of the previous paragraph and after the bar, or the bar will end up in the middle of a line of text.

Bullets
While there is a way to produce large round bullets with a hanging indent, which we will cover sometime in the future, they are rather boring, because just about everyone uses them. While, from a design standpoint, it would be overkill to use graphical bullets in place of a hanging indent, they create a nice emphasis for headings, subheadings, lists of links, etc. The basic formula is the same as the one above for bars. Again, you can find a lot of bullets archived on World Wide Web sites.

You may want to put a little space around the bullet to separate it from the text. Also, if you wish to have the text appear beside it, don't put a line break <BR> or a paragraph break <P> after the graphic. A typical formula would look like this:

Just for interest sake, lets look at what each of the elements in the above image tag stands for: IMG = image, SRC = source, HSPACE = horizontal space, VSPACE = vertical space.

TIP
When you are designing a website, plan for continuity, simplicity, cleanness of line and a design theme. The background, bars and bullets graphics which you use should blend into your colour scheme, not shout at it. Do not use multiple moving graphics, not only are they annoying to the eye, but they cause the page to continuously load and on some systems can cause major computer crashes.

Tip #2:
It is a common practice to put the height and width (size in pixels or percentage) into IMG tags as well. One trick you can do with this is put the width="100%" in your line or bar IMG tag. This will cause your line to run across the entire length of the page regardless of how wide (or narrow) your viewer's browser window is set to. If you do this, make sure that you specify the height in the actual pixel amount the image takes. If you forget the height and put in the width at 100%, then anyone viewing your page with images off will be confronted with an image placement box that is as high as it is wide. Very annoying. (Thanks to Paul Evád for this tip)

Acknowledgements
This article was published in the August 1996 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line" and in the Fall 1996 issue of the Web Enthusiasts Association of Victoria's quarterly on-line newsletter.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index

Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)