This chapter is from the book
This chapter is from the book
This chapter is from the book
Designing with CSS
Dreamweaver MX 2004 makes it easy to design a Web page using CSS styles. The primary way to access CSS design features is through the CSS Styles panel. You can toggle this panel off and on with Shift+F11.
Creating a CSS-based design may require you to think differently about how you assemble a Web page. To start designing, create an HTML page, but don't assign it any specific HTML styles such as colors or alignment—you'll set those with CSS styles. Use HTML tags such as <h1> or <strong>, which give meaning to the text they surround, but avoid those which grant only appearance changes such as <font>.
After you've got your content in your HTML page, you can start adding CSS styles. The creation process has four steps:
Create a style sheet file.
Define the styles you want to use.
Apply the styles to the HTML page.
Test the styles in a variety of Web browsers.
Dreamweaver MX 2004 makes it easy to step through this process, automating your choices and doing the work of writing the CSS language for you.
Create a Style Sheet
To create a new style sheet in Dreamweaver MX 2004, start by defining a style. Go to the CSS Styles panel in the Design panel set, and click the New CSS Style button—it looks like a plus (+) symbol next to a document. This opens the dialog box shown in Figure 10.2.
){kind=small}
Figure 10.2 Creating a new style sheet in Dreamweaver MX 2004.
You have three options for the type of style to create: a custom style, a redefined HTML tag, or a CSS selector. Custom styles, despite the name, are easiest to use; redefined HTML tags and CSS selectors are covered later in this chapter. By default, Dreamweaver MX 2004 names the first custom style .unnamed1, as you can see in Figure 10.2.
All custom styles have a single-word name, which identifies that style. Custom styles begin with a period, and if you don't add it in, Dreamweaver MX 2004 will remind you. In your HTML markup, the class attribute will be set to this style name to identify it, minus the leading period. A custom style can also be thought of as a class style, or a CSS style with a class selector.
TIP
You can name a class style anything you like; it's basically just an arbitrary word used to group these items. A descriptive name is good, especially one that describes the function instead of presentation details. For example, class="detail" makes more sense than class="bluetext". Why? Well, you may want to change your styles later, and what if the details are no longer in blue? You should also avoid using style names that are the same as HTML tags or attributes, simply to avoid confusion.
In the sample style sheet in Listing 10.1, I created a class called .person by entering that class name in the New CSS Style dialog box.
The other option when creating a new style is to choose the file in which the style is defined. There are initially two options: defining the style in a new style sheet or defining it within the HTML document. The option This Document Only creates an embedded style sheet, which is covered later in this chapter. To make a new style sheet, select New Style Sheet and click the OK button. You will be prompted for a style sheet filename and location.
Your CSS file should be named with a .css extension because that's the commonly used extension for style sheets. Technically it doesn't need to follow this naming convention, but there's no good reason to go against the grain here.
Define Your Styles
After you've given a filename to your style sheet, you'll be presented with a window to set the options on your style. As shown in Figure 10.3, there are eight sets of options, and by default, you start on the Type option. You can set any number of text options at this point; in the example, I've chosen to make the text bold and change the color to teal.
)
Figure 10.3 Setting the text options to create bold, teal text.
After you've set the options you desire, click the Apply button. Later in this chapter, I'll cover each option and explain what effect it has on your styles. When that's done, you've created your first style!
You can create more styles by selecting New CSS Style again; you won't need to create a new style sheet, because you can store them all in the same style sheet file.
Apply Your Styles
Dreamweaver MX 2004 gives you new ways to apply CSS styles to your Web pages.
In your HTML file, choose the text that you want to receive the style. Highlight the section with the mouse, and then in the Properties Inspector, choose the style you want to apply by choosing the style name in the style drop-down menu (see Figure 10.4).
You can remove the style by highlighting text and choosing None in the style drop-down menu in the Properties Inspector.
)
Figure 10.4 Highlight text and then apply a style using the Properties
Inspector.
Three other ways exist to set the style of HTML text. You can select a style from the CSS Styles option on the Text menu; you can highlight the text and right-click (or Ctrl+click) and apply it via the context menu; or you can edit the HTML directly in code view and add an appropriate class attribute.
Test Your Designs
After you've applied your styles, you'll want to test how they look in a browser. Dreamweaver MX 2004's design view will show you the effects of some styles, but not all of them; to get a real test of your new styles, you need to test in several browsers. Remember that not all browsers treat CSS the same way, so you will need to test in a variety of browsers to make sure your designs look decent and can be used reliably.
Use the Preview in Browser option from the File menu—or the equivalent toolbar button, which looks like a globe—to display your HTML page and style sheet in a browser. The screenshot in Figure 10.5 shows how the browser interprets the CSS file and applies it to the Web page.
If your styles work on the first try, congratulations! In most cases, you may need to do some editing and changing based on the results of testing in a variety of browsers. Don't worry, that's common; it's an unfortunate fact of life for CSS designers that browser testing is an essential chore.
)
Figure 10.5 Our styles have been successfully applied to the HTML file, as shown
by Netscape 6.