In the early days of Web design, most page layouts on the Web were created with tables. By merging and splitting table cells, and even adding background images, you can create complex Web designs with tables. CSS expands upon this concept by adding many new design options, including the ability to precisely add margins and padding around elements, and better control how and where background images appear.

Cascading Style Sheets, better known by the acronym CSS, also enables you to keep formatting information separate from content, making it possible to use less code and create pages with smaller file sizes that download more quickly. Using CSS also makes pages easier to update because you can change formatting in a more streamlined way. You can read more about CSS in the upcoming section, "Designing with Cascading Style Sheets."

Figure 4.3 provides an example of an old-school site created with the HTML table tag. To help you appreciate how this page was created, I altered the original design to display the table borders although most designers turn off table borders when using tables to create cleaner layouts. Setting the table border to 0 (instead of 2 as I did here to show you the borders), makes it possible to turn off the border of a table so that it doesn't interfere with the design.

Figure 4.3. In the old days, the only way you could create a complex Web page design was to use an HTML table to control text and image placement.

Although tables are no longer recommended for creating page layouts, they're still considered the best way to format tabular data like you'd find in a spreadsheet program. That means that you can use tables to format a consistent collection of information, such as the photos and names in the list of winners from the Chocolate Game Rules site shown in Figure 4.4.

Although I recommend that you redesign sites like the one shown in Figure 4.3 with CSS and div tags, I do understand that many designers still find it easier to create layouts with tables, and not everyone has time to redesign their Web sites right away. I have to admit, I've been guilty of leaving a few sites online designed with tables long after I knew better. That said, I recommend using only CSS today for all your Web page layouts except when you are creating a layout for tabular data. Even then, I still urge you to use CSS to add any styling, such as background colors or padding, that you might want in your tables.

Figure 4.4. Tables are still considered the best way to display tabular data like the information on this contest pag.

You won't find any instructions in this book for creating Web sites that use frames, such as the Pink Flamingos site shown in Figure 4.5. Frames enable you to display multiple Web pages in one browser window. Among Web designers, Frames are a little like those plastic pink flamingos stuck in the front yards of so many homes in South Florida; some people love how kitsch they are, and others just think they are tacky. Although Frames are still used on the Web, most designers don't like them because they can make navigation confusing.

Figure 4.5. Frames enable you to display multiple Web pages in one browser window.

Dreamweaver MX, MX 2004, and 8 had a button for the layer feature, and it offered an easy way to click and drag boxes using divs that were positioned with precision on a page. In later versions of Dreamweaver, the name was changed to AP Divs. Divs are simply XHTML tags that serve as dividers in a page. Essentially, they create boxes around content that make it easier to position sections of text or images independently. Don't be confused by the fact that I (and most other Web designers today) recommend using Div tags with CSS to create your page layouts. We just don't recommend that you do so with the AP Divs.

AP Divs, as the name implies, are Div tags that include styling information that adds absolute positioning. That means that when you place an AP Div in a Web page, it stays where you put it, no matter how much space you have in the browser window. That may seem like a good idea at first, and AP Divs were popular among some designers for a while because they are so easy to use and so similar to many of the features in desktop publishing programs (such as Adobe InDesign). But because layers create such inflexible layouts, they don't adapt well to the changing environment of the Web where different sized monitors and other display variations can lead to text getting cut off and other undesirable results.

To cut down on the confusion caused by the term layers, Adobe changed the name of this feature from layers to AP Divs (short for Absolutely Positioned Div tags) in later versions of Dreamweaver, including CS3 and CS4. Many designers use AP Divs on occasion to add fixed position elements to a layout, but creating an entire design with this feature is no longer recommended.

A Web site designed with CSS separates content from design. Keeping the site content (such as the text and headings) separate from the instructions that tell a browser how the page should look benefits both the designers and your site visitors:

Most professional Web designers today recommend creating Web page designs by combining XHTML and CSS. How the two work together can get a bit complicated, but you essentially:

Similarly, you use XHTML to insert images and create links, and then add styles to change formatting options, such as removing the underline from your links or changing the color that appears when someone rolls a cursor over a link.

The key to understanding how CSS works in page layout is to think in terms of designing with a series of infinitely adjustable containers, or boxes. Indeed, this approach to Web design is commonly referred to as the box model. Think of the box model this way: First you use HTML tags, such as the <div> (division) tag or <p> (paragraph) tag, to create a box around your content. Then you use CSS to style each box, using attributes to control the position and alignment of each box, and specify such settings as margins, padding, and borders.

Although you can use any XHTML tag as part of your page layout, the <div> tag is used most often to create the boxes for main sections of a page, such as the banner area, main content area, sidebars, and footer of a page. Think of <div> as a generic container — designed to hold text, images, or other content — or to make a division on the page, to separate one section of content from another. Unlike other HTML tags, <div> has no inherent formatting features. Unless CSS is applied to a <div> tag, it can seem invisible on a page, yet the tag has a powerful purpose because any content surrounded by opening and closing <div> tags becomes an object (or a box) that can be formatted with CSS.

I used the box model to create all the templates in this book. As a result, to change the size or positioning of a section of a Web page in one of the templates featured in Chapters 7—9, you need to edit the corresponding style. When you create or edit a style that corresponds to a <div> tag ID, you can specify properties such as alignment, border, margin, height, and width to control how the <div> tag is displayed on the page. In the template chapters, you find step-by-step instructions for adding your own images and text to these templates, and for making minor changes to the styles of the page. To edit the styles that control the positioning, width, and other display options of the <div> tags that make up these pages layouts, read Chapter 6, where you find instructions for editing a CSS layout.

Each <div> in the page templates has an ID, which corresponds to a style in the style sheet. The ID appears in the HTML within the <div> tag brackets so that the browser knows which style to use to control the formatting of that <div> when it displays the page. For example, all the templates have a <div> with the ID container that controls the overall size of the design area. If you look at the code, the <div> looks like this:

<div id="container"></div>

In the corresponding style sheet, which you can easily access through the CSS Panel in Dreamweaver, you'll find a style called #container, which controls the width and other settings for that <div>. If this all seems a bit confusing, don't worry too much at this stage. When you put all this theory into practice with the templates in Chapters 7—9, it makes a lot more sense, and you find more detailed instructions for editing CSS layouts in Chapter 6.

To learn more about CSS, you can find many more lessons on how to create, define, and edit styles in my book Dreamweaver CS4 For Dummies (Wiley).

One of the first things you need to understand when you create new styles is which selector to use for which job. The selector determines the kind of style you will create. Each selector option has different naming restrictions and purposes. If you're completely new to working with styles, this may not make much sense yet, but this is a fundamental part of work with styles, and I encourage you to read through all these descriptions of selectors so that you can appreciate your options before you move on.

Class selectors

The class selector is the most versatile selector option. Class styles can be used to format any element (from text to images to multimedia), and they can be used as many times as you like on any page in a Web site.

Class style names always begin with a period, and you can create class styles with any name as long as you don't use spaces or special characters. Note: Hyphens and dashes are okay. Thus, you could create a style called caption for the text that appears before your pictures.

.caption

Dreamweaver helps you with the opening period (or a dot). If you choose class as the selector type and forget to include a dot at the beginning of the name, Dreamweaver adds one for you. Note: Don't include any space between the dot and the style name, though.

One other thing that can make styles confusing is that when you apply a class style to text or another element, the dot doesn't appear in the name when it's added to your HTML code. Thus, if you applied the .caption style to a paragraph tag to format the text under an image, it would look like this:

<p class="caption">This is a photo of an Egret in flight.</p>

Note

Class styles must be applied to an element, such as the paragraph tag shown in this example. Class tags can even be added to elements that are already defined by other styles.

When you create a class style in Dreamweaver, the style is displayed in the CSS Styles panel on the right side of the workspace (shown in Figure 4.7). You can apply class styles by using the CSS drop-down list, also shown in Figure 4.7.

Figure 4.7. Styles created with class selectors are available from the CSS drop-down list and can be applied to any element and used as many times as you like on any pag.

One more thing about styles for now: It's common to create styles to align images and other elements to the right or left of a page, and styles with the names .float-right and .float-left are included in all the templates included with this book. These styles commonly include margin spacing to create a little white space between an image and text when text is wrapped around the aligned image, as shown in Figure 4.7.

For more details and step-by-step instructions for creating and applying styles with class selectors, see Chapter 6.

ID selectors

Think of ID styles as the building blocks of most CSS layouts. What's special about ID styles is that they should be used only once per page. This makes them ideally suited to formatting <div> tags and other block-level elements that are used to create distinct sections in a design and only appear once per page.

ID styles must begin with a pound (#) character. Similar to class styles, Dreamweaver adds # to the beginning of the style name automatically if you forget to include it. And, like with a class style, don't include a space between # and the style name.

The ID selector option is a new addition to the CSS Rule dialog box in Dreamweaver CS4. (In CS3, you had to choose the Advanced option to create an ID style.) Similar to class styles, you can name ID styles anything you like as long as you don't use spaces or special characters (again hyphens and underscores are okay). An ID style used to identify the sidebar section of a page could look like this:

#sidebar

Similar to class styles, # isn't used in the HTML code when a style is applied to an element, such as a <div> tag like this:

<div id="sidebar">Between these tags with the sidebar ID style, you would include any headlines, text, or other elements in your sidebar.</div>

In the predesigned CSS layouts included in Dreamweaver, all the designs are created by combining a series of <div> tags with ID styles using names like #container, #header, and #footer to identify the main sections of the design. In Figure 4.8, you can see how a collection of ID and class styles are displayed in the CSS Styles panel after they're created.

Figure 4.8. Styles created with the ID selector should be used only once per page and are ideal for creating a CSS layout.

Tag selectors

The tag selector is used to redefine existing XHTML tags. Select this option if you want to change the appearance of an existing XHTML tag, such as the <h1> (heading 1) tag or the <ul> (unordered list) tag.

In many cases, redefining existing XHTML tags with CSS has advantages over creating new styles. For example, content formatted with the heading 1 tag is well recognized on the Web as the most important text on a page. For that reason, many search engines give priority to text formatted with the heading 1 tag. Similarly, the hierarchical structure of the <h1>—<h6> tags helps ensure that, even if a visitor to your site changes the text size in his Web browser, text formatted with the heading 1 tag is still larger relative to text formatted with an heading 2 tag, which is larger than text formatted with the heading 3 tag, and so on.

The ability to change the appearance of headings and other tags with CSS makes it possible to retain these advantages while still being able to use the font, size, color, spacing, and other formatting options that you prefer in your Web design. When you use the tag selector, the style definition is applied automatically to any text or other element that's been formatted with the corresponding tag. Thus, if you've formatted a headline with an <h1> tag and then create a new <h1> style, the formatting you used to define the style will apply automatically to the headline as soon as the style is created.

When you choose a tag selector type, all the XHTML tags become visible in a drop-down list in the New CSS Rule dialog, making it easy to choose the tag style you want to create, such as the H1 tag shown in Figure 4.9.

Figure 4.9. You can redefine the appearance of any XHTML tag by creating a style with a tag selector.

Creating compound styles

The compound selector can be used to combine two or more style rules to create a style definition that displays only when one style is contained within another. Compound styles are useful when you want to do something like use the heading 1 tag multiple times to format headlines in different ways on the same Web page. For example, you could create one style for headlines that appear in the main story area of a page and then create another style for headlines that appear in the sidebar on the page and still use the heading 1 tag to format both.

Compound styles are created by combining ID, class, or tag styles and look like this:

#sidebar1 h1

See Figure 4.10 for an example of how an <h1> style defined like this within a #sidebar1 ID style looks in the New CSS Rule dialog box. Note that you must include a space between each name or tag in a compound style and that you don't include the brackets around tag in a style name. In this example, the style definition will apply only to <h1> tags that appear within another element, such as a <div> tag with an ID style #sidebar1.

Figure 4.10. Use the compound style selector to combine styles.

If a compound style combines more than one tag, it's written like this:

#sidebar1 h1 a:link

Again, you must include a space between each name or tag. In this example, you see a style that defines the appearance of the active link tag only when the link is located inside an element formatted with the <h1> tag that's also inside an element formatted with the #sidebar1 ID. A compound style like this makes it possible to create links that look different when they appear in a headline in the sidebar of a page than when they appear in another part of the sidebar.

After you figure out the differences among these style selector options and when they're best used, you're well on your way to mastering the art of creating Web pages with CSS in Dreamweaver. (Find more information about compound styles in Chapter 6.)

In CSS, you have the option of creating internal, external, or inline styles. You can even use a combination of these options, or attach multiple external style sheets, to the same Web page. Here's an explanation of these options:

At the bottom of the New CSS Rule dialog box, shown in Figure 4.11, you find a Rule Definition drop-down list. Use this list to specify where and how you want to save each new style that you define. The options are

Figure 4.11. When defining a new CSS rule, save it in an internal or external style sheet.

Why so many fonts?

Although you can specify any font you want for text on your Web pages, you don't have complete control over how that font appears on your visitor's computer because the font you apply is displayed properly only if your visitors have the same font on their hard drives. To help ensure that your text appears as you intend, Dreamweaver includes collections of the most common fonts on Windows and Macintosh computers, grouped together in families, such as Arial, Helvetica, sans serif, and Georgia, Times New Roman, Times, and serif.

Here's how it works. When you apply a collection of fonts like these, the browser displays the formatted text in the first font available in the list. For example, if you choose the font collection that starts with Georgia and your visitors have Georgia on their hard drives, they'll see your text in Georgia. If they don't have Georgia, the text is displayed in the next font on the list that your visitors do have — in this case, Times New Roman. If they don't have that font either, the text is displayed in Times; and if they don't even have Times (which would be very unusual), the browser looks for any serif font. (In case you're not familiar with font terms, serif describes fonts, such as Times, that have those little curly things on the edges of letters; sans serif means no curly things, which is what you get with a font like Arial.)

You can create your own font collections by selecting the Edit Font List option from the bottom of the Font-Family drop-down list in the Property inspector or the Type category of the CSS Rule definition dialog box. In the Edit Font List dialog box, shown here, use the plus and minus buttons at the top of the Edit Font List dialog box to add or remove a font collection. To add individual fonts to a collection, select the font name from the bottom right of the dialog box and use the double-left arrows to add it to a font list. (Use the double-right arrows to remove a font from a collection.)

The only way to ensure that text appears in the font you want is to create the text in a graphic in a program, such as Photoshop or Fireworks, and then insert the graphic with the text into your page. That's not a bad option for special text, such as banners or logos; but it's usually not a good option for all your text because graphics take longer to download than text and are harder to update later.

Even if you prefer not to look at the code behind your Web pages, it's helpful to at least have some familiarity with different kinds of tags, CSS, and other code that Dreamweaver creates for you when you design Web pages. The following examples show what the CSS code in an internal or external style sheet would look like in Dreamweaver for the following styles:

#container {
          width: 780px;
          margin-right: auto;
          margin-left: auto;
}
.caption {
          font-family:  Verdana, Arial, Helvetica, sans-serif;
          font-size: small;
          font-style: italic;
          font-weight: bold;
}
H1 {
          font-family: Arial, Helvetica, sans-serif;
          font-size: large;
}