To Temple College Class logo R. Craig Collins > Web Page Design > Instructor Notes: Tutorial 3

Instructor Notes: Tutorial 3 © R. Craig Collins, 2005/6

As I have separate 'lecture' material on most of these topics, I will try to avoid duplicating information; but I still want to comment on some of the content :)

Session 1

I hate working in black and white for 5 weeks, so as a class, we began using color much earlier than Tutorial 3. You were also introduced to number theory, and hex a previously, so you had access to more color choices than the 16 word colors. (My color chart is at colors, hex theory is at numbers.)

You may then use the color numbers, as we have been learning, to define millions of different color schemes, using
<body bgcolor="#rrggbb" text="#rrggbb" link="#rrggbb" vlink="#rrggbb">
...
<body>

Yet another extension to the <body ... family is background=, which will allow you to place an image behind your text, basically covering up the bgcolor. (Choose a similar bgcolor and use it, even with background=, in case the image doesn't download... your contrast is protected.) Background images should be small, to download quickly. If the image does not cover the web page, it will repeat until it does cover the page. The image should also not be so busy as to interfer with reading the constrasting colored text.

The book also mentions some other addons for <body..., such as bgproperties="fixed" so an background image does not scroll, or specifying in pixels a bottommargin, topmargin, leftmargin, or rightmargin.

Fonts

Aside from deprecated fonts, something that can always change the face successfully is to use <tt> </tt>, which displays the text as a typewriter would, using a monospace font, such as Courier New, which is made to look like Courier New by using the <tt> </tt> in my code.

Another similar trick is to use <pre> </pre> (preformatted). This will display as typewriter text, but will also display the text as typed in Notepad, including line breaks, spaces, and tabs. But avoid overdoing typewriter text, it is harder to read, as it is any monospace font.

Another useful tag is the non-breaking space... this can be entered into your html to accomplish what hitting the space bar cannot, as spaces and other white space are usually ignored.
Example:      the space to the left was created with several &nbsp; tags.

Please note, the font tag is deprecated, meaning there are newer ways to do this in HTML 4.x. That's fine, we'll learn some of those news ways later... but this is a quick and simple way to do things now, and is still widely used.

Session 2

We have been using the <img src=" " alt=" "> for awhile, but we can also use
<img src=" " height=" " width=" " align=" " alt=" "> to control how big the image displays and where; but if the display is huge, requiring us to lower the height and width just to see the entire picture without scrolling, it probably means to file size is big. A file of over 20 or 30 KB will take longer to download, and a file of 1MB will drive dial up users away from your site. We need to be able to acutally adjust the image.

About Graphics
Imaging background info
Using Photoshop (Trail Version of Photoshop), GIMP (Free download of GIMP) or a similar graphic editor, to adjust images for web pages requires you to use just a few menu items...typically:

File          Edit     Image           Select
Save          Copy     Adjustments     Deselect
Save As       Paste    >Auto...       
                       >Brightness...
                         
Save for Web           Crop


Other linked readings will introduce you to making backgrounds, gif animation, editing digital images, optimizing pages.

Session 3

Image maps will be discussed more fully later.
At least know that an image map places invisible hotspots on an image... and these hotspots are links to web pages.
Example from any of my lab pages:

If you click on Discussions, or Dropbox, or Quizzes below, you link to relevant pages. Click anywhere else, such as locker and nothing happens.
D2L navigation D2L Dropbox notes D2L Quizzes Notes D2L Discussion Notes

The three kinds of hotspots are rectangle, circle, and polygon.
Again, image maps will be discussed more fully during the run up to lab 7, where at that time you may refer to Image Maps.