Photoshop to Dreamweaver
- Create the design of your site on Photoshop. Include all the elements.
- Use the Slice tool to slice the design in boxes.
- File/Export/Save for Web (Legacy) the slices a HTML and images.
- Open the HTML file generated in Photoshop and save it as index.html
- Go to Window/Workspace Layout/Standard to set your work environment.
- Choose to work on Split mode: Design + Code.
- Go to Window/Workspace Layout/Properties to open the Properties window.
- Select an image. The image properties appear along with the Map options appear.
- Pick the Rectangle or Circle Hot Spot tool and select the area that you want to be interactive.
- 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.
- Create as many hot spot areas as needed.
- Save the file.
- 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
- Fix any link that is not working.
Mock-Up Site Tutorial