Candyce Mairs

Candyce Mairs

Defining Font Stacks

Slide Duration:

Table of Contents

Section 1: 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

Section 2: Slicing
What Is a Slice?

4m 50s

Slicing with Photoshop

10m 40s

Slicing with Photoshop Elements

5m 28s

Section 3: 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

Section 4: Planning Page Layout
Planning the Design Layout

6m 7s

Web Typography

7m 53s

Documenting Decisions

5m 57s

Section 5: 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

Section 6: 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

Section 7: Understanding CSS
Formatting Text with CSS

9m 20s

Using the Box Model

7m 3s

Creating DIV Tags with IDs

9m 2s

Section 8: 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

Section 9: 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

Section 10: 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

Section 11: Adding New CSS3 Properties
Adding Drop-Shadows

6m 57s

Creating Gradients

7m 50s

Section 12: 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
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • 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!

Defining Font Stacks

  • I will set up our page to use one of these fonts if the user has it, and then default to another if they do not
  • The other font I will replace with one they will have & I will manipulate it to look like we want using CSS
  • We must decide how we are going to handle our fonts & which we really want to use on the web
  • If someone does not have these fonts, the design will not look identical to ours
  • These are Adobe fonts, so anyone with the Adobe suite will have these installed
  • Most users will not have these fonts
  • So how can we handle this
  • We can use other fonts & adjust them using CSS to try & make them look similar to what we want
  • Or we can set up the page so it will search for these fonts first, and then if the user does not have them, set up the page with another font that every user will have
  • We will add the Minion Pro font using a font stack we create in Dreamweaver
  • Go through the Edit Font feature in Dreamweaver for Minion Pro, Georgia, serif
  • For Myriad Pro, we will use Lucida & adjust the font
    Educator®

    Please sign in to participate in this lecture discussion.

    Resetting Your Password?
    OR

    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.