Designing Websites from Photoshop to Dreamweaver

This course shows you how to turn designs from Photoshop into a fully functioning website using Dreamweaver. Learn how to slice mockups, apply HTML and CSS, test code, and more.

Introduction

• Welcome
• What you should know
• Using the exercise files

1. Setting Up Your Workspace

• Set up Photoshop
• Set up Dreamweaver

2. Creating a Photoshop Mockup

• Branding and content
• Layout and navigation
• Work with content
• Add color
• Adjust fonts
• Challenge: Type legibility
• Solution: Type legibility

3. Optimizing Web Graphics

• Slice graphics
• Web images
• Optimize web graphics with Photoshop
• Use image optimization tools
• Create a favicon
• Challenge: Web graphics
• Solution: Web graphics

4. Creating Dreamweaver Bootstrap Files

• Create a Bootstrap file
• Create rows for page content
• Customize the navigation menu
• Menu styles
• Menu alignment
• Add a carousel
• Use the Photoshop extractor
• Create custom CSS, part 1
• Create custom CSS, part 2
• Code for SEO and accessibility
• Error checking with the Validator tool
• The Clean Up HTML tool
• The Link Checker panel

5. Building Site Pages

• Build and style pages
• Use Glyphicons
• Create custom styles
• Make a gallery
• Challenge: Carousel
• Solution: Carousel

Conclusion

• Next steps