AGI: Dynamic Learning Dreamweaver CS3

108

Dynamic Learning Dreamweaver CS3
Page 8

Colors in HTML

X-Ray Magazine v4n3 Job Jackets QuarkXPress 6.5 and 7 have a number of built-in web tools. To learn more, click here to read X-Ray Magazine v3n3: Rollover Isn't Just for Beethoven Anymore (PDF download).

In Dreamweaver's various panels and in your code, each color is referred to by a six-character code preceded by a pound sign. This code is called hexadecimal code, and is the system that HTML pages use to identify and use colors. You can reproduce almost any color using a unique hexadecimal code. For example, you represent dark red in HTML as #CC0000.

The first, middle, and last two digits of the hexadecimal code correspond to values in the RGB spectrum. For instance, white, which is represented in RGB as R:255 G:255 B:255, is represented in HTML as #FFFFFF (255|255|255). Choosing colors is easy in Dreamweaver, thanks to a handy Swatches panel, which you can find in many places throughout the work area.

AGI: Dynamic Learning Dreamweaver CS3 Figure 30

The Swatches panel makes it easy to work with colors.

Case sensitivity and whitespace rules

HTML is a flexible language that has very few rules regarding its own appearance. Based on how strict you wish to write it, HTML can be either very specific about whether tags are written in upper- or lowercase (called case sensitivity) or not specific at all. To see how HTML treats whitespace, follow these steps.

Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. (If you have not done so already, click here to download the resource files for this lesson.) Select the Whitespace.html file, then press Open.

If your file is not in Split view, press the Split button in the Document toolbar, so you can view both the layout and the code. You'll notice three seemingly identical tags beneath line 9 in your code:

AGI: Dynamic Learning Dreamweaver CS3 Figure 31

All of these tags are valid, even though they have very different case structures.

All three tags use a completely different case structure, but all are valid and are treated in the same way. Take a look at the text that reads This is one sentence. This is another. The code shows lots of space between the two lines, but the Design view shows no space at all. This is because whitespace or line returns between two pieces of text or tags are not recognized.

AGI: Dynamic Learning Dreamweaver CS3 Figure 32

Despite the large amount of space between the two sentences, they appear side-by-side in the Design view.

To create a line return, or a new paragraph, you need to enter the HTML tags necessary to do so. In the Design view at the bottom, position your cursor after the word sentence, then press Shift+Enter (Windows) or Shift+Return (Mac OS) twice. This creates two line returns — you can see that each line return is created in your code by a <br> (break) tag.

AGI: Dynamic Learning Dreamweaver CS3 Figure 33

To create a line return, hold down the Shift key while pressing the Enter/Return key.

To create a new paragraph, position your cursor before the phrase, This is another, and press Enter/Return. The text is separated by a line above and below, and is wrapped inside a set of <p> (paragraph) tags.

AGI: Dynamic Learning Dreamweaver CS3 Figure 34

Dreamweaver creates a new paragraph each time you press Enter/Return.

Other than a standard single space (such as the ones used in between words), several consecutive spaces created by the Space bar are ignored, and are still be displayed as only one space in Design view and in a browser.