Within
that, there is a masthead and a content area, the latter of which has two columns, formed
from div elements with id values of mainImageContainer and thumbnailsContainer. If
the content were removed, this structure would look like that in the following code block:
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
374
If you??™ve read through Chapter 7, you??™ll see that this layout is formed using techniques
shown in the ???Creating a fixed-width wrapper,??? ???Placing columns within a wrapper,??? and
???Manipulating two structural divs for fixed-width layouts??? exercises.
Within the masthead div is a level-one heading with an empty span element. This is as per
the image-replacement method shown in the ???Image-replacement techniques??? section of
Chapter 3. The CSS applied to the elements (shown later in this section) effectively places
the span over the text and sets the heading image exported from the mock-up as its background.
Pictures of Padstow
In the mainImageContainer div, there??™s an image, a caption, and explanatory text. Note
the id value for the image??”this is a hook for both the JavaScript and CSS, as explained in
the ???Switching images using JavaScript??? and ???Adding captions to your image gallery??? exercises
in Chapter 5.
Pages:
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479