Brooklyn Webpage, part 2 (Dreamweaver)

You’ve completed the layout in the Photoshop file for your Brooklyn webpage. You’ll use this as a model for the webpage.

1. Prepare the images.
Resize the images that were provided in brooklyn > images >
Save the logo and links as transparent GIFs
Make sure all images used on the page (including background image) are in brooklyn > images >

2. Show Ruler, Set as Pixels
Zoom in and take exact measurements of placement for each DIV (block, box of content): x (left), y (distance from top), width

3. Create New HTML Page with Dreamweaver
Copy STYLES from stylesheet.html. Paste into head of your new file.
Save your file as brooklyn.html into brooklyn folder
Change styles to reflect the sizes, typefaces and colors you want to use on your new  brooklyn.html page

4. Create DIVs for Page Layout
Mr. Machtay will demonstrate how to define DIVs within the head of the file. Then use those DIVs in the body of the page.

In the head of page write this code (example):
div.pageheader {position:absolute; left:12px; top:20px; width:466px}

Then in body of page place a div with the logo image:
<div class=”pageheader”><img src=”images/logo.gif” />
</div>