Brooklyn Web Page

I. Design Page in Photoshop

  1. Use the elements (images, words) of brooklyn.psd to design your webpage.
  2. Choose a background or color.
  3. Design the page header and menu (any typeface you choose).
  4. Change the typeface of the text (paragraphs) to either Times New Roman, Trebuchet or Verdana.
  5. Resize the images.
  6. Position everything using the principles of good layout (grouping, alignment, repetition, variety).

II. Change your design into HTML Page (in web1 folder)

  1. Place all assets (images, either JPGs or GIFs) into images folder.
  2. Using CSS-P create a div called “top”: define the div in stylesheets code, in body of page insert pageheader.gif into this div.
  3. A div is a box that holds content in a certain position on the page. Using Photoshop rulers set to pixels, figure out the position and size of each div. Define each div in stylesheets code and place content in the div in body of page.