Liquid or fluid layouts change width based on the user's unique device viewing size. These types of layouts have always been possible with tables but offer new design challenges as well as opportunities when built with CSS. This book, for experienced Web designers with some CSS experience, outlines how to do this successfully.Designers will learn the benefits of flexible layouts and when to choose a liquid, elastic, or hybrid design. They will learn not only how to build a liquid layout from scratch using standards-compliant and cross-browser compatible (X)HTML and CSS, but will also learn how to design and slice their graphic comps in a way that makes flexible design achievable. This book will show designers that flexible layouts do not have to be visually boring or difficult to build when planned and built correctly. Even those who do not intend to build liquid layouts can use the concepts and techniques taught in this book to improve their fixed-width CSS designs, because they will learn how to design for the inherent flexibility of the web medium, instead of the rigid qualities of print media or table grid-based layouts.
Author(s): Zoe Mickley Gillenwater
Edition: 1
Publisher: New Riders Press
Year: 2008
Language: English
Pages: 337
Tags: Библиотека;Компьютерная литература;HTML / CSS / JavaScript;
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
