Lesson 1: Back to Basics
 
   
top Elements of Good Web Design 
 
 

One should acknowledge some basic constraints of delivering information on the Web. These come in the form of both hardware and software. With a 28.8 modem, our recommended minimum expectation, a 300KB size file will take approximately 2 minutes to download. This kind of constraint requires us to be conscious of the size of our graphics and the cumulative size of our pages.

GIF, or Graphic Interchange Format, is most effectively used with stylized, drawn or line-art images, text graphics, or those with large areas of single colors. The JPEG standard, created by the Joint Photographic Experts Group, is most efficiently used with photo realistic or gradient images.

The GIF and JPEG formats handle color differently. JPEG works in RGB (Red, Green, Blue) color, handling up to 24-bit color or 16777216 colors. GIF, on the other hand, works in indexed color and uses 8-bit color, 256 colors, or less. GIF images save a particular palette of colors based on the image within the file. This can be an adaptive (nearest color) palette, a Web-based palette, an exact match palette, or a system palette.

Colors that appear the same when viewed by different browsers and across different platforms are known as web-safe colors. Conventionally, 256 colors are considered web-safe, though Dreamweaver recognizes only 212 web-safe colors. All of the color pickers in Dreamweaver use the 212-color web-safe palette, assuring that you create your page with web-safe colors.

Low color resolution monitors aside, with the JPEG format, the quality of the displayed image is proportional to the size (in KB) of the file. High quality display images will often have a large file size. The trick is to find the balance between acceptable quality and small file size.

JPEG format is considered a lossy compression due to the loss of data once the file is compressed. GIF compression, on the other hand, is a loss-less compression format.

As mentioned from the beginning, the size of your graphics is of utmost importance. Not only the actual size on the screen, nothing should be wider than 600 pixels due to those with 640x480 resolution monitors, but also the file size in bytes or kilobytes. I do not mention megabytes here because, remember, a one megabyte file would take approximately 30 minutes to download over a 28.8 modem. Preferably one's graphics should be under 10 to 20 kb in size. This will speed loading for the user and allow you to deliver your pages in the most efficient manner possible.

   
top The Basics of HTML 
 
 

HTML is a set of logical codes (markup) in parentheses that describe the appearance of a web document and the information it contains.

<B> This text would appear bold in the browser </B>

The codes are enclosed by less than "<", and greater than ">" brackets. These bracketed codes of the markup are commonly referred to as tags. HTML codes are always contained inside these brackets and are case-insensitive; meaning, it does not matter whether you type them in upper case or lower case. However, tags are easier to recognize in a web document if they are capitalized.

There is an opening element (tag) and a closing element (tag). The closing element is distinguished by the "/" inside the "<" opening bracket, as in to end where the text is in bold.

The first word or character that appears inside the "<" opening bracket is called the element. An element is a command that tells the browser to do something, such as .

Words that follow the element and are contained inside the ">" closing bracket are called attributes. Attributes are not repeated or contained in the closing element (tag). Confused? Attributes are another way of describing the element's properties. For instance, a t-shirt can have several properties or "attributes" - the t-shirt's color, size, material etc. are all attributes.

Attributes that appear to the right of the element are separated by a space, and followed by an equal sign. The value of the attribute is contained in quotes. In the following example, the element is FONT, the attribute is COLOR, and the value of the attribute is BLUE.

Most HTML elements have more than one attribute:

<FONT COLOR="BLUE" SIZE="+1">This text would be blue and one size larger than normal.</FONT>

   
top Dreamweaver & WYSIWYG
 
 

Dreamweaver is a WYSIWYG editor. WYSIWYG is an acronym for `What You See Is What You Get'; that is, the way documents are displayed is how they're going to look in the Web browser.

Actually, you'll quickly realize that WYSIWYG, in Web tools, is more like WYSISOWYG ('What you see is sort of what you get'). You'll have to preview your work in a couple of different browsers, to make sure you're on track