web design logo

  • Design
    • Introduction
    • Visual Design
    • Web Writing
    • Accessibility
  • XHTML/CSS
    • Introduction
    • Coding Basics
    • Color
    • CSS
    • Forms
    • Images
    • Image Maps
    • Javascript
    • Links
    • Lists
    • Tables
    • XHTML Videos
  • Dreamweaver
    • Introduction
    • Videos
  • Fireworks
    • Introduction
    • Image Effects
    • Logos
    • Buttons
    • Animation
    • Videos
  • Photoshop
    • Introduction
    • Backgrounds
    • Image Effects
    • Logos
    • Buttons
    • Videos
  • Links
  • About Me
  • Home
 

Dreamweaver Videos

Through these tutorials, I will be putting together a fictional website.  Several of the locations and the historical web information are based in fact - however, the content of the Dallas locale pages is fictional and has been developed for educational purposes only.  So.... please do not drive down the shoreline of White Rock Lake looking for Willow Bend Cafe:-)

I hope the following videos will encourage, energize, and help you in creating your own websites!

Please note:  I've created these videos for a class I teach at El Centro College. 

Web Design Basics 

Dreamweaver CS4  ~  Dreamweaver CS3  ~  Dreamweaver 8  ~  Dreamweaver MX 2004

Web Design Basics

  • Introduction to Web Design: Visual Design
  • Introduction to Web Design: Text

Videos for Dreamweaver CS4

Dreamweaver - Introduction & Site Map

  • Introduction to Dreamweaver CS4, Part I
  • Introduction to Dreamweaver CS4, Part II
  • Creating the Site Map
  • Uploading

Creating a Basic Page: Lucky Locksmith

  • Creating Meta-tags
  • Creating Basic CSS
  • Enhancing the Text
  • Creating Links, Attaching CSS and Finish Up!

CSS Layouts

  • Annie and Amy's Day Out, Part I
    Starting with the Basics Steps (title and meta-tags) and creating the CSS.
  • Annie and Amy's Day Out, Part II
    Creating the CSS layout and adding the content.
  • Annie and Amy's Day Out, Part III
    Adding the logo and background.

CSS Layouts & Templates

  • Old East Dallas: Part I
  • Old East Dallas: Part II
    Attaching the template to pages, adding the logo to the template, and creating an image map.
  • Creating the Willow Bend Website
  • This site uses a fixed design, a vertical navigation bar and several divisions created by using CSS-P.
  • Creating and Applying the Willow Bend Template
  • Creating and applying the template, along with adding a javascript popup map.

Forms

  • Digital Future: Form Examples
  • Digital Future: Creating the Page
  • Digital Future: Creating the Form, Part I
  • Digital Future: Creating the Form, Part II

Reports

  • Site Maintenance Reports
  • Let Dreamweaver check for broken links, missing ALT tags, and untitled documents.

Dreamweaver CS3

Dreamweaver - Introduction & Site Map

  • Introduction to Dreamweaver 8, Part I
  • Introduction to Dreamweaver 8, Part II
  • Creating and Uploading the Site Map

Dreamweaver Basics

  • Creating Meta-tags
  • Creating Basic CSS
  • Creating the Page

Table Layouts

  • KitKat Spa

Adding Images to Pages

  • Adding Images to KitKat Spa

CSS Layouts

  • Annie and Amy's Day Out, Part I
  • Annie and Amy's Day Out, Part II

CSS Layouts & Templates

  • Old East Dallas: Part I
  • Old East Dallas: Part II
    Attaching the template to pages, adding the logo to the template, and creating an image map.
  • Creating the Willow Bend Website
  • This site uses a fixed design, a vertical navigation bar and several divisions created by using CSS-P.
  • Creating and Applying the Willow Bend Template
  • Creating and applying the template, along with adding a javascript popup map.

Forms

  • Digital Future: Form Examples
  • Digital Future: Creating the Page
  • Digital Future: Creating the Form, Part I
  • Digital Future: Creating the Form, Part II

Reports

  • Site Maintenance Reports
  • Let Dreamweaver check for broken links, missing ALT tags, and untitled documents.

Dreamweaver 8

Dreamweaver - Introduction & Site Map

  • Introduction to Dreamweaver 8, Part I
  • Introduction to Dreamweaver 8, Part II
  • Creating and Uploading the Site Map

Lucky Locksmith

  • Creating Meta-tags
  • Creating Basic CSS
  • Formatting Text
  • Headings, strong, emphasis, extra spaces, line breaks, creating lists, adding the copyright symbol, inserting the current date, and creating INSERT bar favorites.
  • Creating Links
  • Creating absolute, relative, internal, and email links.
  • Attaching CSS
  • Attaching CSS to text using customs class and ID. Adding horizontal rules, spellcheck, previewing your page in a browser and validating.

Table Layouts

  • KitKat Spa
  • Adding Images in Dreamweaver: KitKat Spa

CSS-P Layouts

  • CSS-P: Creating the CSS
  • CSS-P: Creating the Layout and Contents
  • Adding Images in Dreamweaver: Annie & Amy's Day Out

CSS-P Layouts within Templates

  • Creating the Old East Dallas Website
  • This site uses a fluid design, a horizontal navigation bar and several divisions created by using CSS-P.
  • Creating an Image Map for Old East Dallas: White Rock Lake
  • This page includes an image of several locations surrounding White Rock Lake. We'll create links to each of these locations - using one image!
  • Creating the Willow Bend Website
  • This site uses a fixed design, a vertical navigation bar and several divisions created by using CSS-P.
  • Appling the Willow Bend Template
  • Applying the template, adding tables, and adding images.

Javascript

  • Creating a a Popup Map for Willow Bend
  • Javascript popups can be useful - such as creating a popup map to our restaurant!

Forms

  • Digital Future: Form Examples, Creating the Page, Adding an Animated Logo and Rollover Buttons
  • Digital Future: Creating the Page
  • Digital Future: Creating the Form

Site Reports

  • Site Maintenance Reports
  • Let Dreamweavaer check for broken links, missing ALT tags, and untitled documents.

Dreamweaver MX 2004

Dreamweaver - Introduction & Site Map

  • Introduction to Dreamweaver MX 2004, Part I
  • Introduction to Dreamweaver MX 2004, Part II
  • Creating and Uploading the Site Map

Creating Your First Page

  • Before You Start: Checking for XHTML Coding
  • Creating Meta-tags
  • Creating Basic CSS
  • Formatting Text
  • Headings, strong, emphasis, extra spaces, line breaks, creating lists, adding the copyright symbol, inserting the current date, and creating INSERT bar favorites.
  • Creating Links
  • Attaching CSS, Uploading and Validation

Table Layouts

  • KitKat Spa
  • Adding Images in Dreamweaver: KitKat Spa

CSS-P Layouts

  • Annie & Amy's Day Out: Creating the CSS
  • Annie & Amy's Day Out: Creating the Layout and Contents
  • Adding Images in Dreamweaver: Annie & Amy's Day Out

Old East Dallas and Willow Bend (Templates)

  • Templates: Creating for Old East Dallas
  • Templates: Creating for Willow Bend

Image Maps

  • Creating an Image Map for Old East Dallas

JavaScript

  • Creating a Popup Window for Willow Bend

Digital Future (Forms)

  • Examples of Forms
  • Digital Future: Creating the Form

Dreamweaver Site Reports

  • Running Site Reports

Back to the Top

©2001, Linda Baker ~ Last Updated: January 12, 2010