Editing CSS Layouts in Dreamweaver CS5

Dreamweaver CS5 includes a new collection of CSS layouts you can customize to create webpage designs. These layouts are designed to work well in a variety of Web browsers, and they can help you avoid common problems with CSS. This tutorial shows you how to edit these layouts to make them your own.

1 CREATE A NEW PAGE
To use a CSS layout in Dreamweaver, create a new document by choosing File>New. Then, choose Blank Page from the left column and HTML from the Page Type column. Choose one of the more advanced options—such as ASP.NET, PHP, or ColdFusion—only if you’re working on a dynamic site. (If you’re not familiar with these technologies, stick with HTML.) From the Layout column in the middle, click to select a CSS layout and a preview of the layout is displayed in the top right of the dialog.

2 CHOOSE A FIXED OR LIQUID LAYOUT
Dreamweaver includes several layouts designed with two distinct approaches to CSS. When you create a new page with one of these layouts, the first thing you must do is decide which type you want to use. Essentially, you have two options: Liquid layouts are designed to expand and contract depending on the size of the browser window; fixed layouts are centered within the browser and set to a width of 960 pixels. Although there are some advantages to the flexibility of liquid layouts, you’ll have more design control with fixed layouts. We chose the 2 Column Fixed, Left Sidebar, Header and Footer layout.

3 SPECIFY HOW TO SAVE THE STYLES
When you save a CSS layout, Dreamweaver generates all of the CSS styles to create the layout as it creates the page. You can choose to save the styles in an internal style sheet or an external one. The Layout CSS drop-down menu includes three options: Add to Head creates an internal style sheet with all of the styles saved in the Head area of the file; Create New File saves all of the styles in a new external style sheet linked to the page; and Link to Existing File lets you add the styles to an existing external style sheet.

4 SAVE THE NEW PAGE AND STYLES
Click Create to open the page in the main workspace. If you chose to save the styles in an external style sheet, a dialog will first prompt 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. With the new page open, choose File>Save to save the page and the corresponding styles at the same time. It’s also good practice to add a page title as soon as you create a new page so you don’t forget to replace the words “Untitled Document” in the Title field.

5 EDITING TEXT IN A CSS LAYOUT
To add text, just click and start typing. You can replace any of the text in the page or simply delete it. Just be careful as you delete and replace text that you don’t remove the formatting unintentionally. Keep in mind that there is code behind the Design view and if you delete too much, you may turn a headline into plain text by accident. If this happens, just use Undo (Command-Z [PC: Ctrl-Z]) to restore the formatting, or use any of formatting features to format the text as you prefer. You format text in these layouts as you would format any other text on a page in Dreamweaver.

6 EDIT STYLES IN CSS STYLES PANEL
When you work with CSS layouts, the style information is saved in an internal or external style sheet. Either way, you can edit the styles in the CSS Styles panel. Choose Window>CSS Styles to open the panel. Make sure you have the All button selected at the top of the CSS Styles panel to view all of the styles. Click the triangle (PC: plus [+] sign) next to the style sheet name to open the style sheet and view the list of style names.

7 CHANGING THE WIDTH OF A CSS LAYOUT

The CSS layouts in Dreamweaver follow a common practice of using div tags as dividers (or boxes) around each element on the page and then using styles to describe how those boxes should be displayed. Each layout includes a div tag with a class style named .container that surrounds everything else in the layout. To change the width of the overall design, click on .container and change the Width in the CSS Styles panel. The fixed width of CSS layouts in version CS5 is 960 pixels wide, which is the recommended width for most pages on the Web today.

8 CLASS STYLES VS ID STYLES
In versions CS3 and CS4, layouts in Dreamweaver used a combination of Class and ID styles, but the layouts in CS5 use only Class styles. All of these layouts follow the rules of CSS, but they were created by different designers with different philosophies about CSS. ID styles can only be used once per page and are commonly used for the container, header, and footer styles in CSS layouts. Class styles can be used multiple times per page so they are more versatile. The designers who created the CS5 layouts preferred this option for all of the styles in these layouts.

9 REVIEW CSS STYLES
If you’re new to CSS, the layouts can be confusing at first because you can’t just change the colors or sizes of elements in the design area of Dreamweaver. You need to create new styles or edit the style that’s already associated with an element to change the color, width, or other formatting. A good way to start is simply by clicking on each style in the CSS Styles panel to get familiar with the rules defined in the style sheet. You can double-click on a style name in the CSS Styles panel to edit it in the CSS Rule Definition dialog.

10 EDIT PAGE-WIDE SETTINGS
To edit page-wide settings, such as the background color of the page or the main font face, size, and color of the text used throughout the page, double-click on the style named body in the CSS Styles panel. In the CSS Rule Definition dialog, select the Type category from the left to change font settings. Select the Background category and use the color well in the Background-Color field to specify a color for the entire background of the page. If you prefer, you can enter any hexadecimal color code in the Background-Color field. Click OK to save the changes.

11 ADD AN IMAGE TO THE HEADER
You can insert images into any section of a CSS layout just as you would any other page in Dreamweaver. To add an image into the header area, you should first delete the placeholder image with the text “Insert_logo (180 x 90).” You can insert an image of any size into the header area of the page. First, click to place your cursor in the header area, then choose Insert>Image and select any image on your hard drive and click OK. If the Image Tag Accessibility Attributes dialog opens, enter a brief text description in the Alternate Text field and click OK again.

12 EDIT THE SIDEBAR
You can change the color and width of the sidebar by editing the style named .sidebar1. Double-click on .sidebar1 in the CSS Styles panel to open it in the CSS Rules Definition dialog. Click on the Background category on the left to change the background color. To remove the background color, delete the hexadecimal color code from the Background field and leave it blank. To change the width, choose the Box category on the left, enter the width you want in the Width field, and choose a size option, such as pixels. Click Apply to preview the changes; click OK to save them.

13 EDIT LINK STYLES
The color, size, and style of the links in the left sidebar of the CSS layouts in Dreamweaver are controlled by three different style rules. The top border and bottom margin are defined in the style ul.nav; the bottom border is defined in the style ul.nav li. The way the links appear in the page is defined in the style ul.nav a, ul.nav a:visited. To change the rollover effect, edit the style name ul.nav a:hover, ul.nav a:active, ul.nav a:focus. Double-click the name in the CSS Styles panel to open any of these styles in the CSS Rule Definition dialog to edit them.

14 ALIGN IMAGES AND OTHER ELEMENTS
All of the CSS layouts that come with Dreamweaver CS5 include styles you can use to align images and other elements to the left or right of the page. To use these styles to align an image, insert the image and then select it. With the image selected, the Properties inspector at the bottom of the workspace changes to the image options. Click to open the Class drop-down menu and select fltrt (to align the selected image to the right using the float right style) or fltlft (to align the selected image to the left using the float left style).

ALL IMAGES BY JANINE WARNER UNLESS OTHERWISE NOTED

Share & Enjoy


Similar Articles

 

  1. [...] Read the original post: Editing CSS Layouts in Dreamweaver CS5 [...]

  2. [...] here to see the original: Editing CSS Layouts in Dreamweaver CS5 | Layers Magazine Related Posts:Download Flexi CSS Layouts for Dreamweaver 1.0.259 Flexi CSS Layouts is a Dreamweaver [...]

  3. [...] more on Layers Magazine [Translate] Categorized under: Tutorials. Tagged with: Dreamweaver, Editing, [...]

  4. Cheap Web Design (Reply) on Tuesday November 9, 2010

    very helpfull thanks

  5. [...] Click here to read the tutorial Posted in Adobe Dreamweaver CS5 | Tags: css, CSS starter layout [...]

  6. 0rion (Reply) on Tuesday November 9, 2010

    LAME and LABOR intensive! Dreamweaver should whole sale drop there out of date “custom” CSS interface get on board with a more direct CSS installation program that actually teaches designers the basics of CSS formatting so they way instead of teaching them “how to use dreamweaver” they can know how to build web pages any where or any time.

    0

    • Joe (Reply) on Tuesday November 9, 2010

      The tutorial is about Dreamweaver CS5 first and foremost. Therefore it is not Dreamweaver’s responsibility to teach designers the basics of CSS, so they could build web pages any where or any time. Learning the basics of CSS is like a puzzle, and one is unlikely to find all the pieces in one stop shop. As designers, we must take in on ourselves to search out the pieces of the puzzle where ever they may be, and piece them together. Only then would our command of CSS would be firm.

    • Timmba (Reply) on Tuesday November 9, 2010

      ……….Orion
      No one will argue with you about needing to be fluent in the underlying languages of web page building.
      However ………….
      Dreamweaver has many powerful functions and timesaving features to get ANY webdesigner experienced or not up and running. Since you are such a hardcore code junkie, please, write us a tab menu, using jquery in notepad, please, or an ajax slideshow with transitions in notepad.!! Oh, and while you’re at it, we’ll want a 3 level deep css dropdown menu, with multiple dropdowns — cmon!!! quick quick! Notepad is waiting!!
      Oh, and you have only 10 minutes to finish and debug it too LOL!
      Websites aren’t about just CSS anymore – they are becoming increasingly user interactive and any webdesigner needs the proper tools to get his/her sites up to speed, especially if there are deadlines to meet. Webdesigners also need to be experienced in multiple disciplines nowadays, plus be able to work efficiently and many times under tight deadlines. and your creaky old P4 computer and notepad just won’t cut it anymore.
      you obviously don’t work for paying customers

  7. Cheap Web Design (Reply) on Tuesday November 9, 2010

    Thank You For Sharing Really Helpful!!.

  8. ?????? (Reply) on Tuesday November 9, 2010

    Very helpfull thanks!!



Planet Photoshop Photoshop World KelbyOne Lightroom Killer Tips Scott Kelby