#Dreamweaver cs6 media queries tutorial code#
Dreamweaver generates all of the browser-specific code that is necessary for browsers (old and new) to use this code that is, every action that you set causes Dreamweaver to generate CSS code that’s easy to understand. The code that Dreamweaver generates is simple, too, because the behaviors that it describes are taken care of by concise CSS3 code, not verbose JavaScript. Once you’ve got down how they work, you can build spiffy actions, such as rollovers and other movements pretty simply. Still, you can now make some changes in code while the Live view is enabled and see your changes reflected in the Design pane, something you couldn’t do before.ĭialog box for new CSS Transitions tool.A new palette and associated dialog box help you create CSS Transitions, which are motion effects that do not require JavaScript (or Flash, of course). Also, Dreamweaver’s Live view is improved, in that the visual representation of what your Web page will look like in a real browser is closer to reality (but only closer to what webkit-based browsers–meaning, Safari and Chrome–will look like Firefox and Internet Explorer may look dramatically different). Dreamweaver’s interface has new, useful buttons at the bottom of its Design window that you can click on to show smartphone, tablet, and desktop screen viewports, and those are very helpful to see how your content will appear. I found Fluid Grid Layouts easy enough to create, but I found that resizing the containers worked a little sluggishly, and the undo function frequently didn’t work. Does the content on the page just sit there as you resize, or does it reflow, based on the size of the window? If it reflows, then it’s probably an HTML5-based site, and it will likely work well on any kind of device.
This is known as adaptive design, and you can test it on any website by opening it in a desktop browser and then resizing the browser window, from smartphone size to standard desktop size. That is, you build your content once, and then the Web pages on which that content lives will reconfigure themselves to display the content properly on any size screen. Fluid Grid Layouts are supposed to give you a starting point for an adaptive design.