Join Joseph Lowery for an in-depth discussion in this video Creating a two-column, fixed-width, full-width header layout, part of Layouts with CSS in Dreamweaver.
It's often difficult to convince clients and designers coming from other mediums…of the value of variable size web pages.…For many, that's a ceding too much control.…A nice compromise is to incorporate a full width header which expands to fill…the browser window with a fixed width content area centered beneath it.…Let me show you how that's done.…Let's start by going to File>New and creating a New Blank Page, HTML page type…layout <none>, click Create, and let's go ahead and create our CSS rules first.…
I am going to close up the Insert panel a bit here for the time being and we'll…start by building the outer wrapper.…So I will click New CSS Rule, change the selector type to ID and enter in # and…the name outerWrapper, click OK, and since this is a fixed width design, I will…go to the Box category and enter in a pixel value of 960.…
I also want this design to be centered, so I'll deselect Same for all under…Margins, and in the Top field enter 0, in the Bottom also enter 0, and we will…set Right and Left to auto.…
- 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.