Excerpt from
Adobe Dreamweaver CS4
Digital Classroom
Dreamweaver CS4 Jumpstart - continued
Colors in HTML
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, thanks to a handy Swatches panel, which you can find in many places throughout the work area.
|
The Swatches panel makes it easy to |
 |
The color pickers in Adobe Photoshop and Illustrator also display and accept hexadecimal codes, making it easy to copy and paste colors between these applications and Dreamweaver. |
Case sensitivity and whitespace rules
HTML is a flexible language that has very few rules regarding its own appearance. Based on how strictly you want 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.
1 Choose File > Open. When the Open dialog box appears, navigate to the dw01lessons folder. Select the Whitespace.html file, then press Open.
2 If your file is not in Split view, press the Split button (
) in the Document toolbar, so that you can view both the layout and the code. Notice three seemingly identical tags beneath line 9 in your code:
 |
All these tags are valid, even though they have |
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 a lot of space between the two lines, but the Design view shows no space at all. This is because both whitespace and line returns between two pieces of text or tags are not recognized.
 |
Despite the large amount of space between the
two |
3 To create a line return, or a new paragraph, you need to enter the necessary HTML tags. In the Design view at the bottom, position your cursor after the first 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. When rendered in the browser, the <br> tag adds blank lines between the sentences, however the sentences are technically within the same paragraph.
 |
To create a line return, hold down the Shift key |
4 To create a new paragraph, position your cursor before the phrase, This is another, and press Enter (Windows) or Return (Mac OS). The text is separated by a line above and below, and is wrapped inside a set of <p> (paragraph) tags.
 |
Dreamweaver creates a new paragraph each |
| |
Other than a standard single space (such as the ones used between words), several consecutive spaces created by the spacebar are ignored, and are displayed as only one space in Design view and in a browser. |
5 Choose File > Save to save your work then choose File > Close.
Tag hierarchy
HTML tags follow a certain order of weight, or hierarchy, to make sure that everything displays as it should. The tag at the top of the hierarchy is the <html> tag, and every other tag you create is contained within it. Tags such as the <body> tag always hold smaller tags, such as the <p> (paragraph), <img> (image), and <strong> (bold) tags. In addition, structural tags (such as those that create paragraphs, lists, and tables) hold more weight than formatting tags such as <strong> (bold) and <em> (italic). Take this line of code for example:
<strong><p>Big bold paragraph</p></strong>
Although code such as this may work in certain browsers, it isn’t recommended, because the <strong> tag technically holds less weight than the <p> tag. The following code represents a safer and more proper way to include the bold type:
<p><strong>Big bold paragraph</strong></p>
Dreamweaver generally does a great job of keeping tags properly nested, or contained within each other. When you choose to manipulate the code by hand, you should always keep good coding techniques in mind.
XHTML 1.0 Transitional
The latest recommended version of HTML is XHTML 1.0, a stricter version of HTML that makes the language more compatible with newer platforms, such as mobile phones and handheld devices, which require code to be perfectly formed. XHTML combines elements of HTML and XML, a language used to describe data. XML, or Extensible Markup Language, has become a popular method of exchanging information among seemingly unrelated applications, platforms, and systems. By default, Dreamweaver creates new web pages using the XHTML 1.0 Transitional standard.
What’s the difference?
Although tags and attributes remain the same, the structure of the language changes with XHTML, becoming stricter. Whereas HTML was very forgiving of sloppy coding practices such as overlapping or unclosed tags, XHTML requires all tags to be closed and properly nested. HTML doesn’t care which case you use when constructing tags, but in XHTML, all tags must be lowercase.
For example, a <br> (break) tag, which normally doesn’t require a closing tag, now must be closed. You can write tags to self-close by using a forward slash—making sure there is a space between the (br) and the forward slash—and then closing the bracket like so:
<br />
The result is a well-formed language that takes advantage of newer browsers and device platforms, while remaining compatible with older browsers. Working with XHTML in Dreamweaver requires nothing more than selecting XHTML 1.0 Transitional as the Document Type (DocType) when creating a new page.
Explorations in code
Although this book occasionally refers to the code for examples, hand-coding is not a primary goal of the included lessons. The best way to learn how code represents the layouts you are building visually is to switch to the Code view and explore what’s happening behind the scenes.
It’s important to remember that every button, panel, and menu in Dreamweaver represents some type of HTML tag, attribute, or value; very rarely will you learn something that is unrelated or proprietary to Dreamweaver alone. Think of the Dreamweaver workspace as a pretty face on the HTML language.
A look at the Welcome Screen
A common fixture in most CS4 applications is the Welcome Screen, which is a launching pad for new and recent documents. In Dreamweaver, the Welcome Screen appears when the application launches or when no documents are open. From the Welcome Screen, you can create new pages, create a new site definition, open a recent document, or use one of Dreamweaver’s many starter pages or layouts.
 |
The Welcome Screen appears when you launch |
Here’s what you’ll find on the Welcome Screen:
Open a Recent Item: A list of the last few documents you worked on appears in the leftmost column, or you can browse to open a different file using the Open button (
) at the bottom.
Create New: In addition to HTML pages, you can choose from a variety of new document formats, such as CSS, JavaScript, and XML. Dreamweaver is not just a web page-building tool, but also a superior text editor, making it ideal for creating many non-HTML files. You can also define a new Dreamweaver site using the link at the bottom, or choose the More folder for even more new file options.
Create from Samples: If you’re not up to creating a design from scratch, or if you need a little inspiration, Dreamweaver features several starter files, ranging from complete page designs to stripped-down starter layouts. Starter page designs are categorized into several themes, from Health and Fitness to Entertainment, giving you plenty of options for getting started quickly and in style. Basic starter pages include many useful and common layout structures for e-commerce, photo display, and utility forms.
Creating, opening, and saving documents
The lessons throughout this book require that you create, save, and open existing files. You can accomplish most file-related tasks from the File menu at the top, or from the Start page that appears when you launch Dreamweaver.
Creating new documents
Dreamweaver creates text files, commonly in the form of HTML files (or web pages). It can also create files in a variety of text-based languages, including CSS, XML, JavaScript, and even Flash ActionScript.
You can create blank files that you build from the ground up, or get started with a variety of layout templates and themes. You can create new documents from the File menu or from the Welcome Screen.
 |
The New Document dialog box gives you a choice of new |
1 To create a new document, choose File > New. The New Document dialog box appears.
2 Select Blank Page and under the Page Type column, choose HTML. Under Layout, choose <none> to start a new blank document. Leave the DocType drop-down menu at its default. Press Create.
3 Choose File > Save or File > Save As to start the process of saving your document.
4 When prompted, choose a location for your file and assign it a name. Note that you must save HTML files with an .html extension, or they will not be interpreted properly in a browser. This rule applies for files of any type (such as .xml, .css, and .cfm).
Opening a recently opened document
To open a document you’ve worked on recently, Choose File > Open Recent or, from the Welcome Screen, select a document under the Open a Recent Item column.
 |
Choose a file from the Welcome Screen or choose |
Now that you’ve seen what Dreamweaver can do, it’s time to put what you’ve learned into practice. Move to the next lesson so that you can begin building your first Dreamweaver site!
Adobe Dreamweaver Training Class Locations
AGI offers regularly scheduled and private Dreamweaver classes at our training centers. Adobe Dreamweaver Training in or near Boston, Chicago, New York City, Philadelphia, Orlando, and London, England. Visit our Dreamweaver training class locations page.
Additional Resources for Learning Dreamweaver
Adobe Dreamweaver CS4
Digital Classroom
Dynamic Learning:
Dreamweaver CS3
Adobe Dreamweaver CS4
You can purchase the Adobe Dreamweaver software or obtain a trial version of it at from the Adobe web site.
Related Links: AGI Listing