Module 1: Dreamweaver Tutorials

Module 1: Overview

In this module students are introduced to Dreamweaver 4.0 the WYSIWYG (What you see is what you get) editor. Students are first led by the instructor through Dreamweaver's own introduction to the program. Students then are asked to apply their skills and the features of the software in brief Dreamweaver lessons. In the next module, Module 2, they will then apply these same skills to their Personal Web Site.

Module 1: List of lessons:

• Lesson 1: Instructor Led Overview of the Dreamweaver 4.0 Program (Lesson length 60 minutes)
• Description: Using a projection device the istructor leads the class through the Dreamweaver 4.0 Guided Tour pausing when appropriate to allow student to actually do what they observe.
• Learner Outcome: The student will be able to-
• locate and describe basic features and functions of Dreamweaver 4.0 workspace.
• use the Dreamweaver program to perform the basic file functions such as open, save, and preview in browser.
• apply key panels, and inspectors to a web document.
• demonstrate the benefits of creating a site folder and using the site functions to maintain a web site.
• Activities:
  • Instructor briefly describes the nature of WYSIWYG editors, their relative advantages/disadvantages to code based editors and who in industry might use the program under what circumstances. (See on line resources listed below.)
  • Students and instructors open the Dreamweaver 4.0 program.
  • Instructor guides students through the Guided Tours 1 through 5 in the Help menu of Dreamweaver 4.0.
  • At appropriate intervals instructor asks students to apply what they have observed.
• Handout/Resources Needed:
  • HTML Editor Roundup--an article by Matt Mickiewicz at Sitepoint.com that explains the differences between WYSIWYG and code editors
  • HTML Editors Indepth reviews of all major HTML editors. --reviews (by various reviewers) of many popular editors on Sitepoint.com including Dreamweaver 4.0
  • Dreamweaver 4.0 on all student and instructor work stations
  • A projection device
• Suggested Assessment: Check student monitors as formative or ongoing assessment.
• Lesson 2: Dreamweaver 4 Lessons (Lesson length 120 minutes)
• Description: Students view and practice four of the seven Dreamweaver lessons. When the dreamweaver lessons provide an option to "open the Practice Pages," students should do so and apply their newly learned skills to the mock travel agency site. In the next module students will apply these same skills to their Personal Web Site.
• Learner Outcome: The students will be able to-
• create an image map using Dreamweaver 4.0
• create a disjointed rollover using Dreamweaver 4.0
• insert tabular data using Dreamweaver 4.0
• add Flash objects (buttons) using Dreamweaver 4.0
• Activity:
• Have students do the Applying Dreamweaver 4.0 Exercises.
• Handout/Resources Needed:
• Dreamweaver 4.0,
• Browser
• Suggested Assessment: Check student monitors as formative or ongoing assessments to confirm that they are able to apply the skills.