visual css editing in dreamweaver
DESCRIPTION
Visual CSS Editing in Dreamweaver. David Powers | Author & trainer. 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. What’s changed in Dreamweaver’s CSS management?. - PowerPoint PPT PresentationTRANSCRIPT
© 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.