IT tutorials
 
Graphics
 

Adobe Dreamweaver CS5 : Creating and Applying Styles (part 4) - Editing and managing style sheets

4/16/2013 3:05:40 AM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

5. Editing and managing style sheets

Style sheets, like most elements of a Web page, are almost never set in stone. Designers need to be able to modify style rules — whether they're embedded or from an external style sheet — at a moment's notice. Through the CSS Styles panel's Edit Styles mode, Dreamweaver provides near-immediate access.

5.1. CSS Styles panel

As discussed earlier, the CSS Styles panel in All mode displays all the styles attached to the current page, whether embedded or external. Presented in a collapsible outline (see Figure 7), Dreamweaver shows the styles in the order in which they are defined in the code. The Class list is more than just a pretty display — it's a direct pipeline to editing each style. You can select any style and click the Edit Style button, and Dreamweaver displays the CSS Rule Definition dialog box with the current style's settings.

Figure 7. Both embedded and external styles are shown in the Edit Styles mode of the CSS Styles panel.

Applying CSS Hacks

As any designer beginning to work with CSS knows, not all browsers are created equal. In fact, browsers vary wildly in their CSS support. To achieve cross-browser compatibility with CSS, designers have resorted to using what are referred to as CSS hacks. A CSS hack is the use of CSS code in an unintended fashion to make CSS elements unavailable to certain browsers. In other words, a CSS hack acts as a filter. Dreamweaver includes two of the most common hacks that allow you to hide CSS from two of the most problematic browsers: Netscape 4.x and Internet Explorer 5 for Mac. Both hacks are available only from within Code view through the context menu; commands for applying and removing each hack are included.

To hide a CSS rule from Netscape 4.x, use the Caio hack. In Code view, select the CSS code you want to make sure that Netscape 4.x does not attempt to render and right-click (Control+click). From the context menu that appears, choose Selection => Apply Caio Hack. Dreamweaver wraps your selection with the following code:

/*/*/
/* */

The first line starts hiding code from Netscape 4.x and the second line stops the hiding.

You can hide CSS rules from Internet Explorer 5 for Mac in a similar fashion with the Backslash-Comment hack. To hide particular rules, select them and then right-click (Control+click) to bring up the context menu. Choose Selection => Apply Backslash-Comment Hack; Dreamweaver wraps your selection with the following code:

/*Start hiding from IE Mac \*/
/*Stop hiding from IE Mac */

To remove either of these hacks, select the entire code block, including the opening and closing hack lines, and choose Selection => Remove Backslash-Comment Hack or Selection => Remove Caio.


If you'd prefer to work directly with the CSS code, double-click the style. Dreamweaver goes to the style selected in the editing option of your choice, as defined in the CSS Styles category of the Preferences. You can choose between using the Edit CSS dialog box, the Properties pane, or Code view.

Modifying or deleting a style in an external style sheet causes that style sheet to open. Dreamweaver does this so that the modification or deletion can be undone. You can force the style sheet not to open by unchecking the Open CSS Files When Modified option in the CSS Styles category of the Preferences; but, if you do, changes to the style sheet cannot be undone.


If you have an external CSS editor such as TopStyle or Style Master defined — and the Use External Editor option selected — double-clicking a style opens the style sheet in that editor. Access the Use External Editor option by right-clicking (Control+clicking) in the CSS Styles panel or by selecting the CSS Styles panel menu.

To delete a style, select the style and click the Delete CSS Rule button.

NOTE

If you're looking for a single reference on CSS hacks, check out CSS Hacks and Filters written by me and published by Wiley. For more details, visit www.idest.com/csshacks/.

5.2. CSS Styles panel Properties pane

Although the CSS Rule Definition dialog is helpful when establishing CSS rules, it's not the most direct route for modifying them. Dreamweaver supplies a much quicker facility for viewing and changing existing styles: the Properties pane of the CSS Styles panel (see Figure 8).

To change the value of a property, click into the corresponding field on the right of the CSS Properties tab. Color-based properties, such as background-color, include a standard Dreamweaver color picker to simplify your selection; properties requiring a URL offer both Point-to-File and Browse-for-File icons. Those properties that use specific keywords, such as display, provide a list of acceptable values. In all cases, the value can also be entered by hand. This is especially useful when working with properties that accept compound values, such as border, for which entering the values in proper order (style, color, width) is valid. Hover over a property value to see a code hint. After you've inserted your new value, press Enter (Return) or click anywhere to confirm the change; Dreamweaver immediately renders the results.

Figure 8. Insert a new property directly into a rule through the Properties pane's Add Property link.

To add a new property to an existing rule in the Properties pane, follow these steps:

  1. In the Properties pane, click Add New Property.

  2. Enter the property in the blank field that appears. Alternatively, you can choose a property from the drop-down list.

  3. Press Tab or Enter (Return) to move to the second column.

  4. Enter the value for the new property.

To remove a property from the Properties pane, select it and press Delete.

Rather than type out the whole property, you can enter just the first few letters and press Alt+down arrow (Option+down arrow). Dreamweaver goes right to the first matching property. Press Enter (Return) after you've found your match to move to the second column to enter the desired value(s).


You can add new properties through the CSS Styles panel in either All or Current modes. All mode works best when you're editing CSS from a top-down perspective. If you'd prefer a bottom-up approach, switch to Current mode and select the tag containing the existing style rather than the style itself.

5.3. Toggling CSS properties

Have you ever had to pinpoint which circuit breaker controlled which part of your home? Typically, you end up turning them off and on, one at a time, to see which lights went out when. Similarly, it's easy to lose sight of what properties in the various rules are having what effect and temporarily removing them is a good testing technique. Dreamweaver provides a point-and-click method for easily disabling and enabling any CSS property.

Move your cursor over the far-left column of the properties in the CSS Styles panel and you'll see the universal "no" symbol (a circle with the line through it) appear in gray. Click once to turn the symbol red and disable the associated property (see Figure 9); click again to enable the property again. The ability to enable/disable CSS properties is available in the Properties pane for both All and Current mode, as well as the Current mode's Summary pane.


Figure 9. Temporarily disable a CSS property to better understand how it affects your page.

When you disable a property, Dreamweaver comments it out of the code using a special syntax. For example, let's say there is a background-color property that is coded like this:

background-color: #fff;

If you disable the property in the CSS styles panel, the code changes to this:

/* [disabled]background-color: #FFF; */

In CSS, surrounding your code with /* and */ converts it to a comment. Within that comment, Dreamweaver inserts the [disabled] keyword to distinguish any toggled-off property from any comments entered manually in the code. But what if you already have a comment following a property? CSS doesn't permit nested comments, so Dreamweaver will take code like this:

background-color: #fff; /* Make sure the bg is white */

and comment out just the property and value, thereby leaving your comment intact:

/* [disabled]background-color: #FFF; */ /* Make sure the bg is white */

Should you enable the property again, Dreamweaver removes its comment indicators and restores your code as before.

Any property that has been disabled is also identified with the universal "no" symbol in the Code Navigator.


If you have disabled a number of properties in a CSS rule, you can re-enable them all at once with a single command. Simply right-click (Control+click) any properties in the rule or the rule itself and choose Enable All Disabled in Selected Rule from the context menu. This option is also available from the panel menu button in the upper-right of the CSS Styles panel.

Conversely, let's say you've completed your testing and you've discovered a number of properties that have no impact and are currently disabled. You can clean up your CSS rules by removing these unneeded properties, in one operation. Bring up the context menu for any selected rule via the panel menu button or right-clicking (Control+clicking) the rule or property and choosing Delete All Disabled in Selected Rule.

5.4. Managing CSS rules

The development of the CSS rules for a site is an evolutionary process. The designer may start by embedding CSS layout rules in the basic page and, when the design is locked down, elect to move the rules to an external sheet. Or, before publishing the final style sheets, the designer may prefer to clean them up, grouping similar styles together for added clarity. Dreamweaver offers a number of key tools to help designers manipulate their CSS rules however they choose.

Managing your CSS rules in Dreamweaver is both intuitive and fast. You can, for example, simply drag and drop a CSS rule from one location in your style sheet to another — right in the CSS Styles panel. Highlight any rule while in All mode and drag it to its new location. Rules can easily be moved to any embedded or attached style sheet; any unopened style sheet affected is opened and marked as modified. You can move a single rule at a time or select any number of them to drag to a new location.

CSS rules can also be moved to an unattached or new style sheet. Right-click any selected rules and choose Move CSS Rules to begin the process. When the Move To External Style Sheet dialog box opens, as shown in Figure 10, you have the option to choose an existing style sheet or store the selected rules in a new one. If you decide to use a new style sheet, a Save Style Sheet As dialog box appears when you click OK.

Figure 10. Move any style rules selected in the CSS Styles panel to a current external style sheet or a brand-new one.

The Move CSS Rules feature is also available in the Coding toolbar along with another powerful, albeit more specialized, CSS management command: Convert Inline CSS To Rule. As the name implies, the Convert Inline CSS To Rule feature moves style attributes within a tag like this:

<div id="legalDisclaimer" style="font-size: smaller;">

to a separate rule, like this:

#legalDisclaimer { font-size: smaller; }

The Convert Inline CSS To Rule command is terrific for cleaning up legacy pages where the use of inline styles in absolutely positioned <div> tags was the rule rather than the exception.


The contextual menu in the CSS Styles panel offers a number of other management tools in addition to the Move CSS Rules command. Beyond the traditional cut/copy/paste options is the Go To Code feature. As you might suspect, Go To Code goes directly to the CSS code defining the selected rule, whether the rule is in the current page or an external style sheet. Go To Code lets you dive right into the heart of your CSS, quickly and easily.

The Duplicate command is another CSS rule management power tool and one that I personally use all the time. Often I find that a rule I need to create has similar properties to an existing rule — and it's much faster to duplicate the rule than re-create it. When you choose to duplicate a selected rule, a dialog box with all the options of the New CSS Rule dialog appears (see Figure 11). This featureset allows you to copy the properties of any rule and, if you choose, change the selector to anything you desire. You could, for example, duplicate a rule with an ID selector and save your new rule as a class. You can even save the duplicated rule in a different style sheet or the current page. Once you select the name of your duplicated rule as well as the selector, the style is added to the specified location; however, unlike when creating a new style, the CSS Rule Definition dialog box does not appear.

Figure 11. Duplicate any rule to quickly repurpose already defined properties under a different name, selector, and/or location.
 
Others
 
- Adobe Dreamweaver CS5 : Creating and Applying Styles (part 3) - Applying, changing, and removing a style
- Adobe Dreamweaver CS5 : Creating and Applying Styles (part 2) - Applying styles through the Property inspector, Attaching an external style sheet
- Adobe Dreamweaver CS5 : Creating and Applying Styles (part 1) - Generating new styles
- Adobe Illustrator CS5 : Working with Objects - Using the Shape Builder Tool
- Adobe Illustrator CS5 : Working with Objects - Creating Grids
- Adobe Photoshop CS5 : Additional Selection Commands
- Adobe Photoshop CS5 : Basic Selection Tools
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 3) - Three-slice technique for content containers
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 2) - Round-trip editing
- Adobe Fireworks CS5 : Fireworks and Dreamweaver (part 1) - Copying and pasting to Dreamweaver
 
25 Inspiring Game of Thrones Quotes
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS