Ted's Computer World HTML & CSS
Tips and Tricks

STREAMLINE YOUR CODE (AND YOUR LIFE) WITH GRAPHICS

The following sample layouts were created using HTML and CSS:

*


*


*


*


*


*

One doesn't need a knowledge of either bridge or Boggle to appreciate that the construction of each of those modules entailed a lot of code — perhaps many dozens of lines of it.  Any one of those things would be enough to clutter an HTML page.

Even more importantly, various browsers can and do display such code in different and possibly strange ways.  That is unacceptable to me, and it should be to you as well.  Perhaps the coding gurus know of a way to compel the various browsers to conform to their wishes; but I do not.  In any case, I don't have to deal with such matters, and neither do you.

Perhaps you already have figured out the elementary solution to this problem; yet the crummy output on many web pages shows that their creators have not done so.  I will state it here, just for them.

Your actual coding methods, whether modern or old-fashioned, are immaterial.  When you are satisfied with a complicated module, simply save it as a graphic file using a screen-capture program.

Having done that, the entire construct can be effortlessly added to any desired page, and it is guaranteed to be displayed more or less exactly as it looked when you captured the image; moreover, placement of the module can be more easily accommodated.  What a deal.

There is another useful application of this method as well.  The sample image of the Boggle layout was designed using a special font that does not reside on all computers.  In such a case, a simple way to ensure that the font you desire is the one that will be viewed is to — you guessed it — save it as a graphic!

(Note: Be sure also to save the code used to create a module if there is any chance that you would wish to edit it later.)

---

YOU SHOULDN'T NEED THIS INFO, BUT...

Countless free screen-capture programs are available, including the ones built into Windows itself.  My personal favorite is Gadwin Printscreen, which optionally loads on startup, then saves your choice of window or specified rectangle to your choice(s) of printer or disk in your choice of image format — BMP, GIF, JPG, TIF, PNG.  Just a suggestion.

Go Back