WDV 331 Dreamweaver Applications

WDV 331 Dreamweaver Applications Advanced CSS Dreamweaver CS6 Chapter 8

CSS Styles Panel • The CSS Styles panel has two views: • All and Current. • The CSS Properties pane is available in both views, but you access it slightly differently when you’re in Current view • All  you can click any style from the list of CSS styles and use the Properties pane to add and edit properties. • The pane’s “Show only set properties” view, which you access by clicking the icon ** at the bottom left. • Provides a clear view of properties the style uses. You can delete or edit them. • Click Add Property link and selecting the new property’s name from the resulting menu.

CSS Styles Panel • Current Selection mode  the views for the middle pane — Property Information (top) and Cascade (Middle right Icon) — are mostly the same. • Property Information shows the style and style sheets Dreamweaver uses to define the property. • Cascade view, however, is far more useful. You can get the same information as in the Property Information view simply by mousing over a CSS property in the Summary pane. • Set UP Unfortunately, out of the box, Dreamweaver thinks you should be looking at the Property Information pane, • Click the Current button at the top of the CSS Styles panel, and then click the Show Cascade button. Dreamweaver remembers which view your in. • Line Through a selector means it is overridden by another

Moving and Managing Styles • Between two style sheets • Select a single style or group of styles • Drag and drop

Moving and Managing Styles 2 • Embedded styles to External • Moving internal styles to an external style sheet is a two-step process. • First, select the styles you want to move and right-click to select “Move CSS Rules.” or select the “Move CSS Rules” command from the Option menu on the CSS Styles panel. • Second, tell Dreamweaver where you want the style to go. • Dreamweaver moves the style(s) the external sheet and deletes them from the embedded style • Leaves <style> </style> in html code

Code Navigator  Steering Wheel Icon • The Code Navigator displays a list of CSS styles applied to any element on a page. In fact, it can show more than just CSS; if you’re working with templates (see Chapter 19) or dynamic, server-side web pages (see Chapter 21), the Code Navigator lists other files that impact the current document, such as a template file or a file with server-side programming. • Alt + click on element brings up Code Navigator • Click SteeringWheel Icon • See book 397 for other ways • STOPPED Night 2

Previewing Media Styles not in CC • The Style Rendering toolbar lets you see styles that match the media type you selected when you attached the style sheet to the page. It also includes buttons to attach a Design Time style sheet and to hide all the styles. • This last option is particularly useful when you create complex CSS-based designs. The Toggle CSS Display button temporarily hide the styles and display just the simple, unadorned HTML. • Print sheet tips pg405

Tips for Printer Style Sheets • Override properties from another style sheet. • Text size and color. • Hide unnecessary page elements. • Adjust margins and widths. • Take advantage of !important. • Book Page 403. Kindle page 4764

Design Time Style Sheets • Format → CSS Styles → Design-Time. • Quickly try different CSS style sheets as you develop web pages. • Hide (external) style sheets you’ve attached to a web page and substitute new ones. • Book page 405 Kindle 8815

CSS Transitions • HTML 5 All current browsers + IE 10 only • complete list of valid, animate-able properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties?redirectlocale=en-US&redirectslug=CSS%2FCSS_animated_properties • Homework tutorial does a good job describing and demoing how transitions work • Book page 405

Why this Code? • -webkit-transition: color 0.5s ease; • Safari and Chrome Dreamweaver  Live • -moz-transition: color 0.5s ease; • Firefox • -o-transition: color 0.5s ease; • Opera • -ms-transition: color 0.5s ease; • Internet Explorer • transition: color 0.5s ease; • Future

Common CSS3 Properties • Text-shadow • Box-shadow • Border-radius • Gradient • Transforms • Dreamweaver only adds through the CSS properties panel  Add Property under show only set properties (two **)

Responsive Design • DW Creative Cloud CC • http://tv.adobe.com/watch/creative-cloud-for-web/enhanced-responsive-design/ • DW CS6 • http://tv.adobe.com/watch/creative-week-how-tos/dreamweaver-cs6-for-responsive-design/

WDV 331 Dreamweaver Applications