visual css editing in dreamweaver

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1

Visual CSS Editing in DreamweaverDavid Powers | Author & trainer

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Introductions

Who’s this guy? Author of books and video courses on

web development, CSS, Dreamweaver, and PHP

Lecturer at Middlesex University, London

Star-studded TA team

2

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

What’s changed in Dreamweaver’s CSS management?

Everything Well, almost everything

What was wrong with the existing setup? Conceived when IE 6 was king Disjointed Limited support for media queries Difficult to add support for CSS3

3

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Going, going, gone

R.I.P. CSS Styles panel Media Queries dialog box (site-wide media query files) Multiscreen Preview

Limited access New CSS Rule dialog box CSS Rule Definition dialog box

4

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Introducing the new regime

CSS Designer Consolidates CSS management in a single panel Visual tools Strong support for media queries CSS3 properties and values User configurable

5

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Agenda

Set up lab assets Explore CSS Designer Basic usage Move elements into position visually CSS gradient tool Media queries Bling—rounded corners and drop shadows

6

© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2013 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.