1 / 13

WDV 331 Dreamweaver Applications

WDV 331 Dreamweaver Applications. Troubleshooting CSS Dreamweaver CS6 Chapter 10. Analyzing CSS with Dreamweaver. Dreamweaver includes a Check Browser Compatibility tool. It doesn’t work . The information it provides is outdated. Live view. You can’t change a page in Live view

Download Presentation

WDV 331 Dreamweaver Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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”

More Related