Dreamweaver CS6 For Dummies by Janine Warner

Author:Janine Warner
Language: eng
Format: epub
Publisher: Wiley
Published: 2012-03-27T00:00:00+00:00

Photo by Ken Riddick

Figure 6-5: When you select the name of a CSS layout, a preview appears in the top-right corner.

4. From the Layout CSS drop-down list, choose the type of style sheet you want to create as you design the page:

• Add to Head creates an internal style sheet and includes all the styles for the layout in the Head area of the new document.

• Create New File creates a new external style sheet with all the page styles as you create the new document with the design.

• Link to Existing File adds the style sheet information for the new document to an existing external style sheet.

Note: You can always change how the style sheet is set up later by moving styles from an internal style sheet to an external one or from one external style sheet to another. (You can find instructions for creating external style sheets and moving styles at the end of Chapter 5.)

5. Click Create.

The new page is created and opened in the main workspace.

6. Choose File⇒Save to save the page and styles.

If you saved the styles in an external style sheet, a second box prompts you to save the style sheet separately. If the styles are contained in an internal style sheet, they’re saved automatically when you save the page.

Save all the pages of a website, including external styles sheets, in your local site folder. (For more about defining a website and specifying a local site folder in Dreamweaver, see Chapter 2.)

Why Dreamweaver’s CSS layouts use class styles instead of ID styles with <div> tags

Although there’s no hard and fast rule, the common practice is to combine ID styles with <div> tags to create the main sections of a page when you create a layout using CSS. The differences among style selectors are covered in more detail in Chapter 5, but essentially, ID styles are best used for elements that will appear only once per page, such as the main sections of a page, which are commonly identified as the container, header, and footer of a page.

In contrast, class styles can be used multiple times on each page, so they are more versatile and ideal for styles you want to use over and over, such as a style for the caption under a photo, or a style that adds alignment to elements.

If you study the code behind web pages on the Internet (you can do this by choosing View⇒Page Source in Firefox or View⇒Source in Internet Explorer), you’ll quickly discover that web pages are created in many, many different ways; not everyone follows the same rules. The designer who created the CSS layouts in Dreamweaver decided that it was simpler and more versatile to create these layouts using class styles, so you won’t see ID styles in the style sheets at all.

Again, it’s not wrong to use only class styles, but that approach is different from the one many people use on websites these days. To help you appreciate both approaches, this chapter shows you how to edit the class

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.