Hello Students,
You newest assignment is to create a small website (based on your previous html project) using the "Photoshop to Dreamweaver" technique. This is your first graphic based website and will prove challenging. Use class time wisely, missing class time or wasting time will severely impact your ability to complete this project. Your Photoshop design should reflect the class time given for the work. Minimum effort will yield a minimized grade.
I will demonstrate this technique, take notes!
The Photoshop to Dreamweaver Process:
1. You will create a homepage template complete with your name at the top, photo banner and a graphic menu bar. Leave an area below to use for content.
2. Then you will use the "slice tool" to cut up and output an html file and compressed graphics ready to edit into a website with dreamweaver.
3. Add any extra formatting to your template in Dreamweaver, center your page and elements and begin programming your buttons into links. Do not stretch or move any of your image tiles or graphics, this can break up your tables.
4. Create copies of your template and rename into the appropriate file names for your menu navigation. Do not do this step until all programming and edits are made to the template page. Any errors will have to be fixed 4 or more times otherwise.
5. Edit each page for content, such as your home page, contact page, links, about me etc... each page should have unique content to test your navigation.
PSD To Dreamweaver Project Details:
- You must use Photoshop to create your original design and Dreamweaver to insert the proper HTML tags.
- Each page must contain a simple menu at the top for navigation
- Must have a total of 4 pages, more is allowed for extra credit. Page titles can be "Home, About Me, Contact, Favorite Websites" or your choice.
- Include 1 image or photo on each page - IMPORTANT: You must resize your photo to be smaller than your content window or it will disrupt the layout of your tiles
- Include at least 3 links to external websites (for instance your blog, the class blog etc...).
- You must include your email address either on your contact page or in your menu.
- Create rollover buttons for your menu
Extra Credit:
- Create an animated Gif for your page banner
- Create a seamlessly tiled background for your page template
- Use one of the tutorial links below to create your website
Deadlines:
- 2 Days for Graphic Design and Photoshop Work
- 2 Days for Programming and Testing
Inspiration:
Check out these links for help with the PSD to DW technique or if you are looking for some website design inspiration
Workflow Video:
PSD- Dreamweaver Website Part 1 - How to "slice" up a design to prepare for coding
PSD - Dreamweaver Website Part 2 - How to code your sliced up PSD page
