Portfolio Website (Next Steps)

You have designed your template in Photoshop. By Monday, Mr. Machtay will return your Photoshop files with comments and suggestions about adjustments.

  • Please be mindful of design elements like alignment and repetition (for instance make the gutters between columns the same width).
  • Use actual text to indicate the placement, size and typeface of the type. Text that will be typed in (not done in Photoshop) must be either Verdana, Trebuchet or Times New Roman.
  • If you are able to create rollover buttons you can make your links in Photoshop. If you do not have the skill to create rollovers, use text for your links.

Once your design is finalized, it’s time to adapt your design into a web page.

  1. Create a new folder 5lastnamemywebsite.
  2. Inside that folder create a folder called “images” (all lower case).
  3. Make sure any images you will use on your website are either JPGs or GIFs (NO PSDs) inside the images folder.
  4. In Dreamweaver create a new HTML page called index.html that is saved inside your mywebsite folder.
  5. You can copy and paste the Stylesheets from earlier in the semester (brooklyn webpage) and adapt the styles.
  6. Figure out the X and Y coordinates and the width of each DIV on the page. Define the DIVs in the Stylesheets in the head of the file. Apply the DIVs in the body of the file.