Recreate the following design:
All the graphics you need for the exercise, including the above layout graphic, are available for download from the "Download Exercise Files" links below.
Not only will you need to derive the positions of the upper-left-hand corners of the various elements on this page, but you will ALSO need to derive the dimensions of the various DIV boxes.
Deriving the dimensions of the DIV boxes is easily done in Photoshop using the Marquee tool and the Info palette. Simply use the Marquee tool to draw a selection box around a given DIV box. Then look at the width/height indicator in the lower-right-hand corner of the Info palette for dimension information on what you've selected with the Marquee tool! Note: If you're not getting integer values, you've got the Mouse Coordinates units set wrong in the Palette Options dialog for the Info palette; make certain you've set it to PIXEL units.
Here is a screenshot, illustrating the Marquee Tool and Info Palette procedure:
In the above illustration, you can see that the blue box is 250 pixels wide and 20 pixels tall!
To derive the color of the boxes, use the Eyedropper tool to pull the color from the GIF, then double-click on the foreground color box near the bottom of the Tool palette to bring up the Color Picker. In Photoshop 5.5 and better, you'll see the hex code color in the Color Picker. All of the box colors in this design are web-safe hex code values.
The background color for the BODY is #FFFFFF.
The paragraph holding the text has been set to Times/Times New Roman/serif, 12px, #000000 in the CSS declaration for the P tag. The DIV holding the text is set to be 110px wide.
Mac Files (.sit -- 26K)
PC Files (.zip -- 26K)
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.