Flexible Web Design: Creating Liquid and Elastic Layouts with CSS

Table of Contents......Page 6
Introduction......Page 8
CHAPTER 1 Understanding Flexible Layouts......Page 12
Types of Layouts......Page 13
Challenges of Liquid and Elastic Layouts......Page 24
Choosing the Right Layout Type for Your Page......Page 29
CHAPTER 2 How to Design Flexible Layouts......Page 34
Design Principles for Flexible Layouts......Page 35
Before and After: Our Non-compatible Design, Fixed......Page 68
CHAPTER 3 Preparing Your Design for Construction......Page 72
Setting up Your Graphic Comp......Page 73
Slicing Graphics for Flexible Design......Page 81
Site-Building Exercise: Preparing the Beechwood Animal Shelter Comp for Construction......Page 86
CHAPTER 4 Building Liquid Layout Structures......Page 96
Preparing the Page for CSS Layout......Page 97
Creating Liquid Columns Using Floats......Page 101
Keeping the Layout from Spanning the Whole Viewport......Page 126
Site-Building Exercise: Creating the Shelter\'s Inner-Page Layout Structure......Page 135
CHAPTER 5 Building Elastic Layout Structures......Page 144
Switching Dimensions to Ems......Page 145
Creating Elastic Columns Using Floats......Page 149
Site-Building Exercise: Creating the Shelter\'s Home Page Layout Structure......Page 168
CHAPTER 6 Putting Limits on Flexibility......Page 176
Building Hybrid Layouts......Page 177
Adding Minimum and Maximum Widths......Page 195
Alternative Ways to Limit Flexibility......Page 209
Site Building Exercise: Limiting the Flexibility of the Shelter\'s Pages......Page 215
CHAPTER 7 Creating Spacing for Text......Page 220
Matching Units of Measurement......Page 221
Mixing Units of Measurement......Page 233
Site Building Exercise: Adding Spacing to the Home and Inner Pages......Page 241
CHAPTER 8 Adding Background Images and Color......Page 260
Blending Background Images......Page 261
Creating the Appearance of Equal-height Columns......Page 273
Site Building Exercise: Adding Backgrounds to the Home and Inner Pages......Page 283
CHAPTER 9 Creating Flexible Images......Page 296
Dynamically Changing Images\' Screen Area......Page 297
Creating Flexible Collections of Images......Page 307
Site-Building Exercise: Adding Flexible Images to the Home Page......Page 320
B......Page 324
C......Page 325
E......Page 326
F......Page 327
H......Page 328
I......Page 329
L......Page 330
O......Page 331
S......Page 332
T......Page 333
W......Page 334
Z......Page 335
Credits......Page 336