Flexible Web Design

Creating Liquid and Elastic Layouts with CSS

Download Example and Exercise Files

Many of the chapters contain (X)HTML and CSS examples throughout, as well as an exercise at the end that incorporates multiple techniques from the chapter. These exercises allow you to build a flexible site from comp to completion throughout the course of the book. You can download these code examples here to work along with as you read the book and to use as starting point pages in your own web sites later. All files have been zipped.

1. Preparing Your Design for Construction

   1. Exercise (Preparing the Beechwood Animal Shelter Comp for Construction)

2. Building Liquid Layout Structures

   1. Examples
   2. Exercise (Creating the Shelter’s Inner-page Layout Structure)

3. Building Elastic Layout Structures

   Examples
   2. Exercise (Creating the Shelter’s Home Page Layout Structure)

4. Putting Limits on Flexibility

   Examples
   2. Exercise (Limiting the Flexibility of the Shelter’s Pages)

5. Creating Spacing for Text

   Examples
   2. Exercise (Adding Spacing to the Home and Inner Pages)

6. Adding Background Images and Color

   Examples
   2. Exercise (Adding Backgrounds to the Home and Inner Pages)

7. Creating Flexible Images

   Examples
   2. Exercise (Adding Flexible Images to the Home Page)