Wdv 331 dreamweaver applications
This presentation is the property of its rightful owner.
Sponsored Links
1 / 13

WDV 331 Dreamweaver Applications PowerPoint PPT Presentation


  • 78 Views
  • Uploaded on
  • Presentation posted in: General

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

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.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/


  • Login