---

1) Introduction	3) HTML and Javascript
2) Equipment Used	4) Graphics
2) Conclusion	4) For More Information

---

Introduction

Have you ever seen a webpage design you really liked and wondered just how the author managed to make it? Although the design and structure of this "web brochure" was purposely kept very simple, knowledge of some of the techniques used in its creation may help you make your own webpages better.

Equipment Used

This page was written on an Apple Power Macintosh 6100/60 using a shareware program called PageSpinner. (Incidentally, 60% of all websites on the internet are made with Macintosh computers.)

HTML and Javascript

This document uses very basic HTML. There are no frames, dynamic HTML, or any other buzzword-type features you may have heard tossed around lately. The only semi-complicated element of HTML used is tables. In HTML, tables can serve two purposes: 1) arrange information in a format the user will understand, and 2) as a tool for aligning combinations of other HTML elements together (images and text, for example). The list of HTML tutorials in the second section of this document is an example of purpose #1, while the simple icon-button style user interface found at the bottom of every page is an example of purpose #2.

Style tags are used throughout the document to turn link underlining off. When viewing these pages, if your browser is capable of understanding style tags, none of the links will be underlined (except on this particular page, where I wanted the links to be very obvious). Font tags are used to change the default font (which I think is ugly and hard to read) to something a little nicer.

No Java is used in this brochure because Java is slow. On these pages, it was unecessary anyway. Some Javascript is used, though, to change the window status when a user moves the mouse over a link. Move your mouse right here (but don't click!), look at the bottom of your browser window, and you'll see what I mean. This allows the user to gain more information about a link before following it- a feature most people will appreciate.

Graphics

I'm not much of an artist, so most of the graphics used in this website were taken from public domain Clip Art Collections. The image of the Saint Mary's Husky (which is not public domain), was "borrowed" from the SMU Athletics page. It was then modified slightly (I erased the "M") and resized. Finally, the bit depth was reduced from 16 bit to 4 bit as a means of keeping the file size down. The image of the stick man in the first section of the tutorial was drawn by yours truly. The fonts used in the title image are L VAG Rounded Light for lower case words and Courier for uppercase ones. The image in the second section is a composite- the inkwell is a public domain clip art image, while I drew the spiderweb. I thought that overlaying them would create a nice effect. The image of the book and candle, found on this page, was taken from a clip art site. Finally, all of the navigation icons (the house, the letter, arrows, etc.) were drawn by me.

I guess the actual point of this discussion is simply that it's possible to use nice images that aren't fancy or really large in size. This is important- if a user has wait a long time for your pages to load because your images are too large, she or he will get bored and go somewhere else.

Conclusion

I hope that this particular page- "About this Document" will become a standard add-on for webpages at Saint Mary's University. To have an author share openly the techniques used to create a webpage could be very useful for others who are also trying to make university webpages. Sharing this information also benefits the original author because it shows him or her to be a person open to feedback and constructive criticism. So if you think this is a good idea, or have any thoughts about this web brochure that you would like to pass along, please email me.
 

---

	Questions about this site? Email the maintainer of this site.
	Click here to go back to the Computer Services homepage.