Join Joseph Lowery for an in-depth discussion in this video Creating a three-column, variable-width layout with a header and footer, part of Layouts with CSS in Dreamweaver.
On one level, I really love the uncertainty of the web, how you can never really…know how your web page is being viewed.…Is it on a desktop with a really big screen, on a laptop with a really small…one, or on a handheld with a smaller screen but a really high resolution?…To me, the medium cries out for variable width web pages that grow and shrink…with the browser window.…The layout that we're going to develop in this video will show you how you can…create such a site complete with three columns, and a header, and footer.…
Let's begin by choosing File>New and create a blank HTML page with no…predesigned layout, I will click Create and go ahead and save this page right…at the outset and I am going to put it in my Chapter 3 folder, the 03_03…folder, and we'll call this 3col-variable-centered.html, click Save and let's…begin with the CSS Rules.…
So from the bottom of the CSS Styles panel I will click New CSS Rule, I will…switch to Selector Type ID and enter in a pound sign that indicates it is an ID…
- 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?
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.