Wdv 331 dreamweaver applications
1 / 13

WDV 331 Dreamweaver Applications - PowerPoint PPT Presentation

  • Uploaded on

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

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'WDV 331 Dreamweaver Applications' - keelty

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Wdv 331 dreamweaver applications

WDV 331 Dreamweaver Applications

Advanced CSS

Dreamweaver CS6

Chapter 8

Css styles panel
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 panel1
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
Moving and Managing Styles

  • Between two style sheets

    • Select a single style or group of styles

    • Drag and drop

Moving and managing styles 2
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
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
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
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
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
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
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
    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
    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/