General Design Considerations 5

Graphics

Size matters

The size of a picture or other graphical addition to your web page is a product of the number of pixels in both width and height and of the number of bits used to describe the colour of each pixel. For example, a picture 1200 pixels by 900 pixels with 24 bits per pixel (16.7 million colours) takes up 3240000 bytes. This is unacceptable as it would take at least 9 minutes to download at dial-up speeds.

Formats

Compression can greatly reduce this number. The two compressed graphic formats used on a web page are GIF and JPG (or JPEG). Usually JPG is used on photographs and the like, while GIF is used on line drawings. However, try both and see which you like and which has the most compression. NOTE:-use '.gif' and '.jpg' in your HTML! Capital letters should be avoided like the plague in your html.

Size reduction and processing

Cutting the size of the picture down to 200 pixels by 150 pixels cuts the number of bytes (and therefore, the download time) by 36. Some definition is lost, but the look of the picture can be enhanced by using a sharpening process in your graphics program.

Production

The simple mechanics of production

The first step is to write your template page. Put this in a new folder called website (or web_site). You also need to avoid spaces in the names of files and folders. If you must seem to have spaces use the 'underscore' character.

You will need some dummy text to show you how the layout works out. Now you can open the template page. Re-save it immediately as the page that you want to work on. That way you will not save it as your template when you have made additions to it. After this you all you need do is click on the save icon.

Getting your template page right saves having to put the same detail in all your other pages one after the other.

Another advantage of using a template page is that it gives you a chance to practice your HTML!

Most of the tags use both an on-tag and an off-tag. The on-tag holds the attributes (all the extra details about size, colour etc.), which these days has been mainly replaced by CSS (cascading style sheets). All the off-tag holds is an initial '/'. It pays to add the appropriate off-tag immediately after an on-tag. Put in a return and you can add the bits that go between them. This way you stand a chance of nesting your tags correctly. :-)

Now you are ready to start on a real page. Usually this is your home page and is usually named 'index.htm' (or '.html'). As this exists already as the template page, when you click on it in its folder under my computer, the page is displayed in your browser. If your browser is Internet Explorer, click on the view menu and select source. This will bring up your page as raw HTML in your selected text editor, whether it be Notepad or another.

Make your addition or alteration and save your page as 'index.htm'. Minimise your editor and click on the refresh button on your browser's toolbar. The change you've made appears immediately. Click on the task bar to bring up the editor and either correct the change you've made or get on with the next change.

Previous Lesson previous lesson next lesson Next Lesson