Join Joseph Lowery for an in-depth discussion in this video Using the Multiscreen Preview panel, part of Layouts with CSS in Dreamweaver.
The Mobile Web is growing by leaps and bounds.…One study states that by 2014 web sites will be viewed more through…mobile devices than through desktops and many of these devices have…screens of different sizes.…To handle this proliferation of screen sizes CSS3 included a feature…called Media Queries.…A media query allows specific CSS rules or an external style sheet to be…applied conditionally.…You can, for example, use one set of CSS rules if the width of the display…screen is at least 320 pixels like an iPhone, and another if the screen is at…minimum 768 pixels, like an iPad or other tablet.…
How does one design for multiple screens?…By using Dreamweaver's Multiscreen Preview feature.…So I have open here the trails.htm and this same folder will be used for all the…videos in this chapter as we build out the CSS necessary for different devices.…First, let's open up the Multiscreen Preview by clicking on Multiscreen here.…Now this very large dialog box has three distinct areas, one for Phone, one for…
- Exploring HTML5 templates in Dreamweaver
- Understanding document flow
- Using floats properly
- Resetting CSS styles
- Creating a 1-, 2-, or 3-column layout
- Deciding on a fixed width versus variable width design
- Coding layouts for HTML5 and CSS 3
- Incorporating floated elements
- Applying the faux column technique
- Using Spry widgets
- Using Multiscreen Preview
- Modifying desktop layout for tablets
- Developing smart phone layouts
Skill Level Intermediate
1. Dreamweaver Example Layouts
2. Layout Concepts
3. Basic Layouts
4. Interior Layouts
5. Alternative Screen Layouts
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.