Layouts are achieved by using a combination of positioned and/or floated elements. This week, you will learn how to construct each of these reliable page layouts. Once you have mastered each, you can adapt each one to meet many moods and requirements simply by adjusting the styling.
This week's lecture is a little different from past lectures—it is a series of hands-on lessons and you are encouraged to create the layouts while following the steps in the lecture.
This week's Lab exercise is based on the HTML markup used in the following lessons.
I suggest that you first read the
Lab assignment
,
and then proceed with the lessons,
saving each layout as you complete them.
When you have completed all the lessons,
you will have a choice of completed templates to use for the Lab!
There are two primary types of layout:
- Liquid (aka Fluid)
- If you widen or narrow your browser window, you will notice that the width of the content area of this lecture widens or narrows correspondingly. This is known as a liquid layout. Liquid designs make the most effective use of the browser window.
- Fixed-width
- A fixed-width layout specifies the width of the columns in the layout. The page contents maintain a fixed width, regardless of the browser window's width. Thus, the layout renders consistently regardless of the size of the browswer window.
Liquid and Fixed-width layouts each have their advantages and disadvantages. We will be discussing the merits of each in week 10.
We will start with a basic two-column layout and progressively build upon the basic design.
The examples in this lecture are mostly liquid layouts, with the last
example being a
fixed-width layout
.
Simple Column Layouts
Column Layouts with Headers and Footers
