Dreamweaver CS5.5 - HTML5, CSS3 & 3 Screen Preview
Everyone is jumping on the iOS/Android bandwagon. Both the large company as well as the individual entrepreneur that needs to "create once and publish to multiple media" will find that the new tools in DreamweaverR CS5.5 will enhance their workflow.
The Enhanced Multiscreen Preview Panel and Live View
The Live View is one of my favorite features of Dreamweaver. Because Live View is updated with the latest version of WebKit, it can display, in real time, the latest HTML5 and CSS3 such as the new video and svg tags. It is possible to work on three different versions and corresponding style sheets for the same project at the same time within the Multiscreen Preview panel. For example, you can view a desktop, tablet and mobile version of the same project.
You will control these three views via the Multiscreen Preview and Media Queries dialog boxes. In the Media Queries dialog box, you will set the Width and CSS file path for each device's style sheet. Once you have all three Media Queries set in the dialog box, those three layouts will be displayed in the Multiscreen Preview. Another nice touch is that these previews are updated automatically as you edit your code.
I can also easily switch device screen sizes via the Multiscreen's window size menu, which has several new presets. Multiscreen Preview is immediately updated with your new choice of window size and the corresponding media query is applied.
CSS Panel
Dreamweaver now supports CSS3 and HTML5. Customizing the CSS3 styles for your project is easy via the CSS Styles panel where you can easily find any style in the menu list and than customize the properties from within that same panel. For example, you can quickly set up the border-radius properties via the new Corner Radius button that looks like a plus sign with a triangle. This opens the small dialog box with four text boxes just waiting for you to type the number of pixels into each box. These styles are dynamically updated in both the Preview and Live View.
Next →
*Adobe provided a review copy to me free of charge.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
The Enhanced Multiscreen Preview Panel and Live View
The Live View is one of my favorite features of Dreamweaver. Because Live View is updated with the latest version of WebKit, it can display, in real time, the latest HTML5 and CSS3 such as the new video and svg tags. It is possible to work on three different versions and corresponding style sheets for the same project at the same time within the Multiscreen Preview panel. For example, you can view a desktop, tablet and mobile version of the same project.
You will control these three views via the Multiscreen Preview and Media Queries dialog boxes. In the Media Queries dialog box, you will set the Width and CSS file path for each device's style sheet. Once you have all three Media Queries set in the dialog box, those three layouts will be displayed in the Multiscreen Preview. Another nice touch is that these previews are updated automatically as you edit your code.
I can also easily switch device screen sizes via the Multiscreen's window size menu, which has several new presets. Multiscreen Preview is immediately updated with your new choice of window size and the corresponding media query is applied.
CSS Panel
Dreamweaver now supports CSS3 and HTML5. Customizing the CSS3 styles for your project is easy via the CSS Styles panel where you can easily find any style in the menu list and than customize the properties from within that same panel. For example, you can quickly set up the border-radius properties via the new Corner Radius button that looks like a plus sign with a triangle. This opens the small dialog box with four text boxes just waiting for you to type the number of pixels into each box. These styles are dynamically updated in both the Preview and Live View.
Next →
*Adobe provided a review copy to me free of charge.
Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
