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.
Dreamweaver CS4 ~ Dreamweaver CS3 ~ Dreamweaver 8 ~ Dreamweaver MX 2004
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
Table Layouts
Adding Images to Pages
CSS Layouts
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
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
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)
Image Maps
JavaScript
Digital Future (Forms)
Dreamweaver Site Reports