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}
  • div.pageheader = selector
  • position: left: top: width: = properties
  • absolute, 12px, 20px, 466px = values
  • Then in body of page place a div with the logo image:
    <div class=”pageheader”><img src=”images/logo.gif” />
    </div>
  • REMEMBER: Every Open tags needs a Close tag.