Join Joseph Lowery for an in-depth discussion in this video Reviewing the box model, part of Layouts with CSS in Dreamweaver.
When it comes to CSS layouts, it's key to fully understand how the Box model works.…If you don't, you're doomed to countless hours trying to figure out why your…pages appear broken, either across-the-board or in particular, browsers.…The Box model is the CSS way of specifying how the Box-level elements are…displayed on screen.…Box level elements include many of the standard tags;…div, all six heading tags, p for paragraph, and all list-related elements,…unordered list, ordered list, list item, definition list, definition term, and…definition description.…
Let's take a look at how the screen real estate is calculated with the CSS Box model.…Here is a div tag with a width of 500 pixels.…It has a border of five pixels on all sides.…What's not obvious is the amount of padding and margin assigned to the div.…Here is a more visual representation.…The content area is shown in light blue.…This width in the Box model is the CSS declared width, which in this example is 500 pixels.…
Although of course, depending on the size of the video window you're watching…
- 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
Site Navigation with CSS in Dreamweaverwith Joseph Lowery3h 24m Intermediate
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Dreamweaver CS5 Essential Trainingwith James Williamson15h 22m Beginner
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.