WDV 331 Dreamweaver Applications

1. WDV 331 Dreamweaver Applications Troubleshooting CSS Dreamweaver CS6 Chapter 10

2. Analyzing CSS with Dreamweaver • Dreamweaver includes a Check Browser Compatibility tool. • It doesn’t work . • The information it provides is outdated.

3. Live view • You can’t change a page in Live view • you can edit the HTML, CSS, and JavaScript in Split view ( Code View ), and Live view will reflect those changes.

4. Live view- Inspect

5. Live view- Inspect mode • Inspect mode of live view lets you see your page as it appears in a web browser • Browsers based on WebKit • The visual engine behind Apple’s Safari and Google’s Chrome. • You can interact with JavaScript-driven page effects, such as a drop-down menu in a Spry menu bar and analyze the CSS of page elements that aren’t normally visible in Design view.

6. Live view- Inspect mode • Thing happen in Live viewInspect mode • Highlights a tag’s box, padding, and margin • Tag Select displays html structure • The CSS Style panel updates.

7. Following Links in Server-Side Pages

8. Following Links in Server-Side Pages • The Browser Navigation toolbar acts like the toolbar you see in web browsers. • You can • refresh a page, • go backward or forward through the links you’ve visited, • even type a URL in the address bar. • The toolbar only appears when you’re in Live view, and it’s most useful with server-side pages.

9. CSS Problems 1 • Clearing and Containing Floats pg 499 K10728 • Add a clearing element at the bottom of the containing div. • add a tag — like a line break or horizontal rule — as the last item in the < div > containing the floated element (that is, right before the closing </ div > • < br /> (XHTML) — before the closing </ div > tag and add a class to it: < br class =“ clearfloat”>. • create a CSS class style .clearfloat{clear:both;}

10. Float the containing element • Float the containing element <div>to fully include the floated elements inside it. • the div’s entire box — right down to its background and borders — expands to fit everything inside it, including the floated elements. • add a clear property to whatever element follows the floated container so the following element drops below the container.

11. Use overflow:hidden • Add overflow:hidden to the tag that wraps around the floated elements. • It forces the containing block to expand and contain the floated elements. In general, this technique works very well. • any absolutely positioned elements inside the container, they may not show up. • the CSS hides the “overflow,” it hides the stuff that appears outside the container also.

12. Avoiding “Float Drops” • It takes only a single pixel or two to ruin a design. When the width of floated elements are just a hair wider than their containing block the last floated element drops below the others. • The actual width of an element combines many CSS properties. • Adjusting any of the elements by removing a bit of width, padding, or margins can solve the problem. • If it won’t fit it won’t float !!!!!!!!!!

13. Avoiding “Float Drops”