This explains the use of the blue gradient behind the
tabs, providing a transition between the dark orange stripe and the white masthead area
when the site is displayed wider. Without this, the jolt between these two elements would
be too harsh. This also explains the lack of fixed-width elements elsewhere in the design??”
images are floated right and recently added items are displayed in a linear fashion. With a
liquid layout, displaying these three containers as columns wouldn??™t be entirely straightforward
(although it could be done by replacing the images with divs that have background
images large enough to cater for changes in column width; however, at narrow
widths, the images would be cropped).
In terms of imagery, the logo was exported, as was a portion of the gradient image (which
was tiled horizontally). Had I been working entirely from scratch on this layout, the tab
states would also have been included in and exported from the mock-up, but I took those
directly from the drop-down exercise from Chapter 5. The inline images in the document
are all just a single gray square saved as temporary-image.gif. Clearly, in an actual site, all
of those images would show items for sale!
PUTTING EVERYTHING TOGETHER
379
10
Putting the storefront together
When working on this layout, I made use of techniques shown in the following exercises:
Creating a maximum-width layout (Chapter 7)
Placing columns within a wrapper (Chapter 7)
Manipulating two structural divs for liquid layouts (Chapter 7)
Creating a sidebar with faux-column backgrounds (Chapter 7)
Creating a boxout (Chapter 7)
Creating breadcrumb navigation (Chapter 5)
Creating a multicolumn drop-down menu (Chapter 5)
Open index.
Pages:
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484