Join Joseph Lowery for an in-depth discussion in this video Creating a two-column, left-sidebar, fixed-width, centered layout, part of Layouts with CSS in Dreamweaver.
A great many web sites today if not the majority include multiple columns in the content area.…In this video, we'll build a basic two-column layout with the sidebar on the left.…We'll also position the page to the left instead of centered, so you can see how…that's accomplished.…We'll start by going to File>New and I'm creating a new blank layout.…Let's build up our CSS rules first.…I'm going to close down the Insert panel for the moment and click on New CSS Rule.…
We'll work with a ID Selector Type and start with the #outerWrapper, storing the…definitions in, This document only, click OK and go to the Box tab and let's…give it a standard width of 960 pixels, and this time I'm going to set the…Margin to 20pixels, so it will be the same all around and that will offset it…from the top left corner of the browser window just a bit, click OK.…
Next up, we'll do the contentWrapper, click New CSS Rule, ID, #contentWrapper,…OK, and switch to the Box category, in here because we're inside of the…outerWrapper which is set to 960 pixels the Width will be 100%, and because in…
- 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.