From Photoshop to CSS-P


Now you have a completed Photoshop design for your webpage.

  1. Re-size your images and save as JPGs in images folder (that is inside your Brooklyn folder).
  2. Save your page logo as a JPG in images folder.
  3. Now place GUIDELINES along the left, right, and top of each DIV (a DIV is a rectangular shape on your webpage in which you can place content).
  4. How many DIVs on your page? 
  5. Using the RULER set to PIXELS measure the X (left), Y (top) and W (width) of each DIV.
  6. Start a new HTML page using Dreamweaver CS6.
  7. Place STYLESHEETS in the head of your webpage (between close TITLE tag and close HEAD tag).
  8. Define each DIV. For example: div.topofpage {position:absolute; left:10px; top:0px; width:620px }
  9. When naming DIVs be careful not to use any “RESERVED WORDS” (words that are used in coding HTML/CSS, for instance: left, top, middle, font, etc.); in naming do not use any spaces or commas, or parentheses or pound signs.
  10. In the body of the page you will call out the DIVs. Type in <div class=”nameofdiv”>Then the content that goes into the DIV. At the end of the content you need a close DIV tag.</div>



You are going to design a webpage in Photoshop. Then when the design is complete, you will take measurements and construct the page using CSS-P (Cascading Stylesheets Positioning).

Inside your “web1” folder there is a folder called “brooklyn.” Open the file brooklyn.psd with Photoshop CS6.

All of the assets for the webpage are on layers.

  • There are 3 images. You do not need to use all 3. Change the sizes of the images as you need in order to design the page.
  • There is a layer called “logo.” This is simply the word “BROOKLYN” typed in. Change the typeface, the size and the color. Design this so it’s a logo fro the top of all the webpages on this site.
  • There is a layer called “links.” These are written on one line. You can make the links go across the page like this. Or, you can add line returns and place the links in a column on the left side of the page. Change the typeface, the size and the color. You could also design buttons around the links. Make sure buttons are user friendly. This means that users can easily find the buttons.
  • There is another layer called “article.” This is the main body of text for the page. Change the typeface and size. Make sure the column is not too wide (or your eye won’t be able to scan the lines). Your choices for text on webpage (text that will be typed in) are: Verdana, Trebuchet, Times New Roman.
  • There is another layer called “sidebar.” This is like the article, but shorter. Decide on a location for the sidebar and change the typeface and size.



Finish your design on Tuesday. On Wednesday we will begin constructing the CSS-P version of this page.

Your page will be easier to construct if you place things in columns.