IT tutorials
 
Graphics
 

Adobe Dreamweaver CS5 : Creating and Applying Styles (part 5) - Debugging your applied CSS

4/16/2013 3:06:55 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

6. Debugging your applied CSS

Anyone working with CSS for any amount of time has experienced the frustration of seeing their Dreamweaver-perfect page break in one or more browsers. Real-world browser testing is a tried-and-true technique, but a tedious and time-consuming one with no clear solutions. Dreamweaver offers a real alternative: Check Browser Compatibility.

With the Check Browser Compatibility feature, your page is quickly reviewed for 16 different, common browser rendering issues. Better yet, the command offers full relief for the identified problems, both in an immediate form through the Results panel and also in a more full-featured fashion via the Web. Debugging your CSS styled pages just got a whole lot easier.

To begin the CSS debugging process, choose File => Check Page => Browser Compatibility or select Check Browser Compatibility from the Document toolbar. The current page is immediately reviewed and if any issues are found, they are listed in the Results panel, as shown in Figure 12. Each listing displays the line number, name, and a brief description of the problem as well as browsers affected. The Learn More link opens your primary browser to the relevant page on Adobe's CSS Advisor mini-site (www.adobe.com/go/cssi) where a community-recognized solution is available. Users can contribute to the site to help build the knowledge base as new problems and answers arise.

Figure 12. Run Check Browser Compatibility for any page to identify CSS rendering issues in any of the supported browsers.


Crafting a Print Style Sheet

In this Technique, you attach a print style sheet to a page and change the styles so that the document is more printer-friendly.

  1. In the Technique site, expand the 06_css folder and open print_start.htm.

  2. From the CSS Styles panel, click Attach Style Sheet.

  3. When the Attach External Style Sheet dialog box opens, click the Browse button.

  4. In the Select Style Sheet dialog, browse to the styles folder in the root of the site and select print.css.

  5. From the Media list of the Attach External Style Sheet dialog box, choose Print; click OK when you're ready.

To see the changes you'll make take effect, you'll need to switch to print style rendering.

  1. Choose View => Toolbars => Style Rendering.

  2. From the Style Rendering toolbar, click Render Print Media Type, or choose View => Style Rendering => Screen Media Type.

  3. In the CSS Styles panel, make sure you're in All mode; if not, click All.

For your first change to the print style sheet, hide those page elements that are not relevant in print: the header and footer.

  1. In the CSS Styles panel, expand the print.css entry and select the #header style.

  2. Click Edit Style at the bottom of the CSS Styles panel.

  3. When the CSS Rule Definition dialog box opens, switch to the Block category and, from the Display list, choose None.

  4. Repeat Steps 1–3, selecting the #footer style from the CSS Styles panel instead.

Now, you need to adjust certain styles so they are more suitable for print.

  1. In the CSS Styles panel, select the #wrapper style.

  2. From the Properties pane, click in the value column next to the width property and enter auto; press Enter (Return) when you're done.

  3. In the CSS Styles panel, select the h1 style.

  4. From the Properties pane, click in the color swatch next to the color property and select black (#000000) from the pop-up color picker.

  5. Select the value next to the font-size property and enter 14pt; press Enter (Return) to confirm your choice.

  6. Repeat Steps 3–5, selecting the p, td, h style and changing the font-size property to 12pt.

  7. With the p, td, th style still selected, click Add Property and enter line-height; press Enter (Return) and then enter 18pt.



The final step is to add a heading that appears only in the print version of the page. To accomplish this, you'll need to hide the content in the screen-oriented style sheet.

  1. Place your cursor on the first image on the page and switch to Code view.

  2. Press the left-arrow button to move the cursor in front of the <img> tag and enter the following code: <h1>Relative Realty</h1>. Return to Design view when you're done.

  3. Place your cursor in the new <h1> tag and, from the Property inspector's Class list, choose printOnly.

  4. In the Style Rendering toolbar, choose Switch To Render Screen Media Type, or choose View => Style Rendering => Screen Media Type.

    You'll notice that the heading — redundant in screen mode — is also visible here. You can change that by adding a style.

  5. In the CSS Styles panel, select the primary.css entry and click New CSS Rule.

  6. In the New CSS Rule dialog box, switch the Selector Type set to Class and change the Name field to .printOnly; click OK when you're ready.

  7. Switch to the Block category and, from the Display list, choose None; click OK to confirm the change and close the dialog box.

  8. Select File => Save All to store all the changes.

You can easily see the differences by switching between the Screen and Print icons on the Style Rendering toolbar.

 
Others
 
- Adobe Dreamweaver CS5 : Creating and Applying Styles (part 4) - Editing and managing style sheets
- 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
 
 
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