Photoshop to Dreamweaver

  1. Create the design of your site on Photoshop. Include all the elements.
  2. Use the Slice tool to slice the design in boxes.
  3. File/Export/Save for Web (Legacy) the slices a HTML and images.
  4. Open the HTML file generated in Photoshop and save it as index.html
  5. Go to Window/Workspace Layout/Standard to set your work environment.
    Screen Shot 2017-02-28 at 8.39.48 AM
  6. Choose to work on Split mode: Design + Code.
    Screen Shot 2017-02-28 at 9.04.27 AM
  7. Go to Window/Workspace Layout/Properties to open the Properties window.
  8. Select an image. The image properties appear along with the Map options appear.
    Screen Shot 2017-02-28 at 8.52.35 AM
  9. Pick the Rectangle or Circle Hot Spot tool and select the area that you want to be interactive.
    Screen Shot 2017-02-28 at 8.53.26 AM
  10. Link the Hot Spot area to an HTML file. Don’t worry if the files haven’t been created yet. Just make sure you remember the names you used. Note that only the Properties for Map are shown. This is how you know you are linking a mapped area not the whole image.
    Screen Shot 2017-02-28 at 9.10.32 AM
  11. Create as many hot spot areas as needed.
  12. Save the file.
  13. Then, Save As to save copies of this file with the name of the other pages. Or create the other pages as you did index.html
  14. Fix any link that is not working.



Mock-Up Site Tutorial