Home / Design Center / Tutorials

Using and customizing CSS based layouts

Joseph Lowery

This video shows you how to customize the pre-built CSS layouts that are included with Dreamweaver. You learn how to create layouts, customize the content, and check and validate your work.

Requirements

To follow along with this article, you will need the following software and files:

• Dreamweaver CS3
• Sample file (ZIP, 6.7 MB)

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Using and customizing CSS based layouts

1. In Dreamweaver, choose File > New. In the New Document dialog box, choose Blank Page, HTML and the layout 2 Column Elastic, Left Sidebar. Elastic means columns move as the browser window expands.
2. Click Create.

3. In the toolbar above the Document window, choose Design view. You can see that the page is created complete with placeholder content and a full array of CSS styles (see Figure 1).

   

   Figure 1: The preformatted Dreamweaver layouts open with placeholder text.

4. Choose File > Save and name the file.

   Now you can start customizing. To bring the page in-line with the rest of the new site's pages, you'll attach an external style sheet.

5. Choose Window > CSS Styles to open the CSS panel group and choose the CSS Styles panel.
6. In the CSS Styles panel, click the Link icon. This opens the Attach An External Style Sheet dialog box.

7. Choose the css/global.css file. For Add As, choose Link, and click OK. This style includes the basic colors and fonts for the page, which are instantly updated (see Figure 2).

   

   Figure 2: Linking an external style sheet updates the text colors and formatting.

8. Put the insertion pointer between the first and second paragraphs in the main column.
9. At the top of the Insert bar, choose the Common tab, and click the Image button to insert an image in the page.
10. Choose the images/swing.jpeg file.

11. In the Image Tag Accessibility Attributes dialog box, type Dancers in the Alternate Text box. Click OK.

    Now that the image is inserted, you can style it.

12. Select the image in the Document window, and click the New CSS Rule button at the bottom of the CSS Styles panel. This opens the New CSS Rule dialog box.
13. For Selector, type #mainContent img and click OK.

14. Choose Box in the CSS Rule Definition dialog box. Choose Left from the Float pop-up menu and add 10 pixels of right padding. Click OK. The image is styled per your rule (see Figure 3).

    

    Figure 3: Style the image using CSS rules.

15. Choose the #mainContent img tag in the CSS Styles panel. Right-click (Windows) or Control-click (Mac OS) and choose Go To Code from the context menu. Dreamweaver takes you to the place in your HTML file where the style for the image resides (see Figure 4).

    

    Figure 4: View the CSS code in the internal style sheet.

16. Switch to Code view. Notice that the Dreamweaver layout contains a large amount of commented code with tips and reasoning behind certain rules. The comments themselves can be a great learning tool for you.

17. Scroll down to line 98 of the code. Put the insertion pointer after the img src tag (before the closing </p> tag) and type the following:

    <h1>My New Heading</h1>

18. Switch back to Design view. The new heading appears fine (see Figure 5), but in the last step you added the code inside a paragraph tag. This will probably make the markup invalid; you can check it just to make sure.

    

    Figure 5: New code may appear fine in Design view, but validate it before publishing the page.

19. Click the Validate button at the top of the Insert bar and choose Validate Current Document. As you guessed, an error is found in line 98. "The tag: 'h1' is not allowed within: '<p>'."

20. Double-click the error to go to the invalid code. Select the heading and move it to before the <p> tag.

    From here you can continue modifying the page. CSS layouts give you a good place to start.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.