All are 170 pixels wide.
They each have a transparency of 37%.
I created these graphics in Adobe Fireworks by ?¬? rst drawing a
60-pixel-high pale gray box (hex color:#CCCCCC;). I then set its corner
roundness to 16 and its transparency to 37% in the Properties
palette. In the Modify menu, I set the Canvas Color to transparent
to ensure the area removed by rounding the corners would reveal
whatever background the box appeared on. Then I cropped the
canvas using the Canvas Size window in the Modify menu to get the
piece (top, middle, or bottom) I needed and exported it as a .png
graphic. Then I used Undo to get back the original box and cropped
it again to get the next bit I wanted, and exported that piece. Total
time to create all three pieces of artwork: about seven minutes.
ADJUSTING THE LEFT COLUMN WIDTH
Before I add these pieces of artwork to the left column, I want to
make the left column wider to create some space around the background
box. Currently, the column is 170 pixels wide, and I want it
to be 200 pixels??”this will give me 15 pixels of margin each side of
the 170 pixel wide box. It??™s easy to adjust the column widths in this
liquid layout, as long as you remember that for each column??™s width
setting there is a corresponding margin on the adjacent column.
BUILDING WEB PAGES 259
#nav {
?¬‚ oat:left;
width:150px;
width:200px;
}
#content {
width:auto;
margin-left:150px;
margin-left:200px;
margin-right:170px;
padding:0;
}
Because this layout is liquid, no adjustment is needed to the outer
wrapper around the layout.
Pages:
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300