Enter your Sign on user name and password.

Forgot password?
Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!

Table of Contents

I. Web Page Design Mockup
Reviewing the Design

2m 46s

Planning Your Conversion

6m 23s

Getting to Know Wireframes

4m 3s

Creating Wireframes

4m 19s

Creating a Style Guide

4m 33s

Defining CSS

3m 44s

II. Slicing
What Is a Slice?

4m 50s

Slicing with Photoshop

10m 40s

Slicing with Photoshop Elements

5m 28s

III. Optimizing Images
Understanding Optimization

4m 44s

Image Formats for the Web

10m 19s

Optimizing Images in Photoshop

8m 4s

Optimizing Images in Photoshop Elements

10m 21s

IV. Planning Page Layout
Planning the Design Layout

6m 7s

Web Typography

7m 53s

Documenting Decisions

5m 57s

V.Exporting Images
Setting Up the Export with Photoshop, Part 1

11m 27s

Setting Up the Export with Photoshop, Part 2

12m 22s

Setting Up the Export with Photoshop Elements

10m 12s

VI. Getting Organized
Creating the Root Folder

7m 32s

Defining a Local Site

4m 17s

Exploring the Interface

5m 8s

Creating a Web Page

6m 46s

Inserting an Image

6m 30s

VII. Understanding CSS
Formatting Text with CSS

9m 20s

Using the Box Model

7m 3s

Creating DIV Tags with IDs

9m 2s

VIII. Building the Web Page
Building the Boxes

11m 25s

Adding Text to the Page

8m 34s

Adding Images Within DIV Tags

6m 48s

Customizing Box Backgrounds

7m 38s

Using CSS Background Images

8m 32s

Correcting Box Placement

9m 37s

IX. Customizing Page Structure with CSS
Testing CSS Properties

4m 40s

Positioning Upper Content

12m 8s

Creating Columns on the Page

10m 52s

Issues with Floats

8m 30s

Using Tracing Images

8m 5s

Adjusting Box Positioning

11m 18s

X. Creating the Look of the Web Page with CSS Properties
Positioning the Photos

4m 19s

Defining Font Stacks

10m 21s

Customizing Text with CSS

6m 14s

Finishing Font Definitions

8m 45s

Correcting Background Colors

6m 51s

Nudging Content Areas

10m 22s

Positioning Lower Columns

8m 49s

Creating Curved Boxes

5m 51s

Using CSS Classes

10m 7s

XI. Adding New CSS3 Properties
Adding Drop-Shadows

6m 57s

Creating Gradients

7m 50s

XII.Testing the Design
Previewing Pages in Browsers

3m 7s

Adding Column Separators

5m 24s

Finalizing the Web Page for Chrome

4m 27s

Finalizing the Web Page for Firefox

11m 5s

Fixing Page Content Alignment

6m 26s

Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Photoshop Designs to Code
  • Discussion

  • Study Guides

  • Table of Contents

Start Learning Now

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

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • 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 lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Using CSS Background Images

  • We will use background images in order to show images on our pages
    Educator®

    Please sign in for full access to this lesson.

    Sign-InORCreate Account

    Enter your Sign-on user name and password.

    Forgot password?

    Start Learning Now

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

    Sign up for Educator.com

    Membership Overview

    • Unlimited access to our entire library of courses.
    • 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 lesson files for programming and software training practice.
    • Track your course viewing progress.
    • Download lecture slides for taking notes.

    Use this form or mail us to .

    For support articles click here.