Learn how to convert your Photoshop website design into an HTML/CSS file in Dreamweaver. Adobe Certified Instructor Candyce Mairs will walk you through the basic steps of how to take a Photoshop file and set up the design in Dreamweaver in order to easily build a website. Candyce has been in the training industry since 1994, is a Certified Internet Webmaster (CIW) Master Designer and Instructor, and also holds Adobe Certified Instructor and Expert certifications in Fireworks, ColdFusion, Acrobat, and Contribute.

Table of Contents

expand all   collapse all

Section 1: Web Page Design Mockup

  Reviewing the Design 2:46
  Planning Your Conversion 6:23
  Getting to Know Wireframes 4:03
  Creating Wireframes 4:19
  Creating a Style Guide 4:33
  Defining CSS 3:44

Section 2: Slicing

  What Is a Slice? 4:50
  Slicing with Photoshop 10:40
  Slicing with Photoshop Elements 5:28

Section 3: Optimizing Images

  Understanding Optimization 4:44
  Image Formats for the Web 10:19
  Optimizing Images in Photoshop 8:04
  Optimizing Images in Photoshop Elements 10:21

Section 4: Planning Page Layout

  Planning the Design Layout 6:07
  Web Typography 7:53
  Documenting Decisions 5:57

Section 5: Exporting Images

  Setting Up the Export with Photoshop, Part 1 11:27
  Setting Up the Export with Photoshop, Part 2 12:22
  Setting Up the Export with Photoshop Elements 10:12

Section 6: Getting Organized

  Creating the Root Folder 7:32
  Defining a Local Site 4:17
  Exploring the Interface 5:08
  Creating a Web Page 6:46
  Inserting an Image 6:30

Section 7: Understanding CSS

  Formatting Text with CSS 9:20
  Using the Box Model 7:03
  Creating DIV Tags with IDs 9:02

Section 8: Building the Web Page

  Building the Boxes 11:25
  Adding Text to the Page 8:34
  Adding Images Within DIV Tags 6:48
  Customizing Box Backgrounds 7:38
  Using CSS Background Images 8:32
  Correcting Box Placement 9:37

Section 9: Customizing Page Structure with CSS

  Testing CSS Properties 4:40
  Positioning Upper Content 12:08
  Creating Columns on the Page 10:52
  Issues with Floats 8:30
  Using Tracing Images 8:05
  Adjusting Box Positioning 11:18

Section 10: Creating the Look of the Web Page with CSS Properties

  Positioning the Photos 4:19
  Defining Font Stacks 10:21
  Customizing Text with CSS 6:14
  Finishing Font Definitions 8:45
  Correcting Background Colors 6:51
  Nudging Content Areas 10:22
  Positioning Lower Columns 8:49
  Creating Curved Boxes 5:51
  Using CSS Classes 10:07

Section 11: Adding New CSS3 Properties

  Adding Drop-Shadows 6:57
  Creating Gradients 7:50

Section 12: Testing the Design

  Previewing Pages in Browsers 3:07
  Adding Column Separators 5:24
  Finalizing the Web Page for Chrome 4:27
  Finalizing the Web Page for Firefox 11:05
  Fixing Page Content Alignment 6:26

Please sign in to participate in this lecture discussion.

Resetting Your Password?

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.