Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Designing Websites from Photoshop to Dreamweaver

via LinkedIn Learning

Overview

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.

Syllabus

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

Taught by

Sue Jenkins

Reviews

4.5 rating at LinkedIn Learning based on 22 ratings

Start your review of Designing Websites from Photoshop to Dreamweaver

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.