overview

Instructor: Dina Pearlman
wordimagemedia@gmail.com

SUGGESTED READING

1.The Non-Designer's Web Book by Robin Williams,
Peachpit Press Buy from Amazon

2.Teach Yourself VISUALLY Dreamweaver CS3 (Teach Yourself VISUALLY (Tech) byJanine C. Warner Buy from Amazon

Course Outline

week one

INTRODUCTION

  1. Overview of materials: Flashdrive etc
  2. Course Website
  3. Suggested Books (see above)

File Organization Part One

  1. Hosting, Domain Names and Registration
  2. How to organize your files, A.K.A. the most important thing you need to know in Web Development!
  3. Naming conventions
  4. Site definitions using Dreamweaver

Dreamweaver Interface

  1. Palettes
  2. Insert Bar
  3. Properties
  4. Code View vs. Design view

HTML and Dreamweaver

  1. Anatomy of a webpage
  2. HTML- it is not as scary as it looks (Links!!!)
  3. CSS- making HTML look great
  4. CSS templates
  5. Web "safe" fonts and colors

Assignment:

  • Prepare 10-12 images in Photoshop to be no larger in any dimension than 600 pixels.
  • Organize files as follows:
    • folder for site root
    • folder called assets inside site root folder
    • Separate folder called photos
    • Separate folder called PSDs

Preparing for your Website

  • If you don't already have one, please register a Domain Name (cost: $4-10)
  • If you already have a Hosting plan, please find out the user name and password
  • If you don't have a Hosting Plan, and are planning on getting one, purchase it with your Domain Name.
  • If you are going to wait to purchase your Hosting Plan, please check in with your ISP for the availability, username and password of your personal webspace
 

week two

Q and A and review of Dreamweaver Interface, HTML, CSS

Photoshop for image quality and compression

  1. Image compression with Adobe Photoshop
  2. File formats: GIF, JPG, and PNG
  3. Automating tasks (Actions)

Photoshop for Design

    1. Choosing appropriate image and website sizes
    2. Photoshop as a design tool and image slicing
    3. Photoshop as a design tool and Tracing Image

Adding Images to your Dreamweaver Page

Simple Gallery

  1. Tables for quick, custom layouts
  2. Gallery/slideshow with HTML

Assignment in Dreamweaver:

  • Please make a DUPLICATE page and ADD NEW IMAGES into the table
  • create one page per navigation category (BIO etc)
  • Check your file locations carefully

Assignment in Photoshop:

  • Prepare a simple webdesign in Photoshop
  • Plan size of images/ colors/ logo / homepage/ interior page
  • size images in two sizes: thumbnails and main image
  • save all your images into the assets folder

 

week three

Q and A and review of Tables and Simple Gallery

Fancy Galleries

  1. Creating a Flash-style slideshow: iPhoto, LightRoom and/or freeware or shareware software
  2. Modifying the slideshow page using Dreamweaver
  3. Using CSS Layers (if we have time)

File Administration -- making the website “LIVE”

    1. FTP (File Transfer Protocol
    2. Testing on various browsers

Assignment:

    • TBA

     

week four

Q and A , review and continuation of Fancy Galleries and FTP

SEO (Search Engine Optimization)

  1. Marketing, SEO, keywords, Google, other Search Engines and more

Continue work in class with last hour and one-on-one work-time

 

 

Top of this page

 

 

 

 

 

Web DESIGN for
photographers

overview | inspiration | resources | portfolio