Dream Weaver 8 Tutorial Design Document

8/3/2019 Dream Weaver 8 Tutorial Design Document

1/11

Dreamweaver 8 Tutorial

Design Document

Leo Primero

Senior Web/UI Designer/Developer/Instructor

Design Document: Dreamweaver 8 Tutorial - 1 - Last Updated: August 3, 2007

Prepared by: Leo Primero | Email: [email protected] | Cell: 732.742.4927


2/11

Document Contents

Introduction ................................................................................................ 2

Background............................................................................................ 2

Opportunity Statement.......................................................................... 3

Audience................................................................................................. 4

Goals and Objectives............................................................................. 5

Instructional Strategy............................................................................ 5

Application of Gagnes Principles........................................................... 6

Web Based Training Outline......................................................................... 7

1. Creating a New Site............................................................................ 7

2. Adding a New Page............................................................................. 9

3. Uploading Site to Internet................................................................. 10

Introduction

Background

Dreamweaver 8 is a professional HTML editor for designing, coding, and

developing websites, web pages, and web applications. Whether one enjoys the

control of hand-coding HTML, or prefers to work in a visual editing environment,

Dreamweaver provides with helpful tools to enhance the web creation experience.

The following features are available in Dreamweaver 8:

The visual editing features in Dreamweaver allows quick creation of web

pages without writing a line of code.




3/11

View all site elements or assets and drag them from an easy-to-use panel

directly into a document.

Streamline development workflow by creating and editing images in

Macromedia Fireworks or another graphics application, and then import

them directly into Dreamweaver.

Provides tools that make it easy to add Flash assets to web pages.

Dreamweaver provides a full-featured coding environment that includes

code-editing tools (such as code coloring, tag completion, a coding

toolbar, and code collapse) and language reference material on Cascading

Style Sheets (CSS), JavaScript, ColdFusion Markup Language (CFML), and

other languages.

Fully customizable. Anyone can create their own objects and commands,

modify keyboard shortcuts, and even write JavaScript code to extend

Dreamweaver capabilities with new behaviors, Property inspectors, and

site reports.

Opportunity Statement

Web designing is the procedure of analyzing, planning, prototyping,

conceptualization and execution of electronic media delivery via Internet in the form

of a markup language presented using a Web browser and displayed as graphical

user interface (GUI). As a profession, it has taken a huge leap from doing simple

basic sites composed of a few pages to complicated dynamic corporate business

sites. Many have taken web designing as a hobby that led towards it becoming an

alternate source of income and to a few even becoming their primary source of

income.




4/11

To become a successful and accomplished web designer, one can basically

buy How to Make Web Pages books and study on their own. This approach can be

tedious and take time using much experimentation on how to properly create web

sites. One can also go to school and pay huge amounts of money for a web designing

certificate program that could eventually lead towards the realization of a web

designing profession dream. But a cheaper option and probably the best is through

doing free tutorials offered by many web professionals over the Internet who make

this option available for the purpose of furthering the web designing profession and

to help out neophyte designers become better whether they do it as a hobby or to

become web professionals.

A needs analysis determined that there exists a huge pool of interested

students to a web-based training. As a result, the following tasks will be presented:

Creating a new site

Adding new page

Uploading site to the Internet

Audience

There will be thirty students taken from a pool of two hundred fifty applicants

composed mostly of officers, former officers, or former cadets of the Philippine

Military Academy who want to learn web designing as a hobby or as a potential

secondary source of income all amenable to the a Web-Based Training. The

geographical locations of the students and the subject content are in line with the

WBT delivery.

The minimum requirements they will meet are:

Access to a PC with at least 1GB of RAM and 10GB of drive space

A Hi-Speed Internet Connection




5/11

At least a college student

Been an online user for at least a year

Been a Microsoft Office user for at least a year

Has experience on installing software

Have an existing site is a plus

Good time management skills (this 8-week course can be intensive)

Common sense and attitude to learn, plus stability under pressure as the

lesson requirements accelerate from week to week

Goals and Objectives

The goals of this tutorial are as follows:

Given the initial screen, demonstrates creation of a new site by clicking

the menu bar, selecting Site then New Site, typing in MySite into the

Site name and Local root folder, setup the FTP in the Remote Info, and

clicking the OK button, without assistance.

Given the initial screen, demonstrates creation of a new web page by

clicking the menu bar, selecting File then New, selecting the Basic page,

and saving the Untitled-1 file as index.htm, without assistance.

Given the initial screen, demonstrates upload of the site to the Internet by

highlighting the site and clicking the blue up arrow, without assistance.

Instructional Strategy

The Dreamweaver 8 tutorial is designed that the student will have full control

of the pace of learning. The lessons created that each weeks lesson will build upon

the other as course progress. There will be a total of eight lessons. A new lesson is

introduced each week that culminates with a submission of finished files for upload




6/11

pertaining that week as assignments. Time management will become a factor in

order to become cognizant of the work load required.

A class web site is to be created with limited access allowing only to the

registered students and instructor(s) for use. The class lessons presented each week

will be listed in it for printing and downloading, and the hypermedia tutorial will be

made available for video streaming viewing and an executable version for download.

Each individual student will be assigned a specific sub domain to work through out

the duration of the course. An FTP will be assigned unique per student to allow

upload of their finished home work. The class site and the student sub domains will

be using a server under one of 1stwebs reseller domain hosting.

A class forum and a class chat will be created using Simple Machines Forum

and phpMyChat technologies respectively. Students will be required to submit written

requirements on the forum, upload documents, communicate with the class, and

collaborate with the other students on the lessons at hand. They will also be

encouraged to use the forum to ask questions and be clarified. The chat room is to

be used for synchronized communication. There will be a scheduled bi-monthly chat

to talk about the most current lessons or problems experienced by the class. The

forum and chat will be using a server under one of 1stwebs reseller domain hosting.

An Email List (E-List) will also be created. All students emails are to be

captured and added into it. The E-List will become a back-up means of

communication only to be used for class requirements of the essence. This will also

be using a server under one of 1stwebs reseller domain hosting.

Application of Gagnes Principles

The lessons in this WBT are involved in the instruction of Rules (Intellectual

Skills), specifically the rules regarding the creation of a new local web site, adding of




7/11

a new web page to the site, and the upload of a web site to the Internet.

Additionally, Motor Skills is involved indirectly.

The internal conditions of learning that must be present are:

Intellectual skills: the ability to recall rule presented in the tutorial

regarding how Dreamweaver functions that is of the creation of a local

web site, adding of a web page, and in uploading the created web site to

the Internet.

Motor Skills: the ability to input the information to the computer using the

keyboard and the ability to move the mouse and left click or right click on

the appropriate buttons.

The external conditions of learning that will be applied to these skills are:

Intellectual Skills: discovery is provided through the tutorial. The student

is given the opportunity to perform the rule using the actual Dreamweaver

8 environment to create a local website, to add a new page and upload to

the Internet without any assistance.

Web Based Training Outline

This section provides the outline of the lessons found in the tutorial:

1. Creating a New Site

Goal: Given the initial screen, demonstrates creation of a new site by clicking

the menu bar, selecting Site then New Site, typing in MySite into the Site name

and Local root folder, setup the FTP in the Remote Info, and clicking the OK

button, without assistance.




8/11

Objective: The student will be able to create a local site using the following

procedure:

Click on the menu bar Site then New Site

Click on the Advanced tab then Local Info

Enter Site name

Enter Local root folder

Click Remote Info

Select FTP

Enter FTP Host

Enter Host Directory

Enter Login

Enter Password

Check Save Password box

Click on the OK button

Length: 15 minutes

Content: The lesson will include:

An illustration of Dreamweavers initial screen with the objectives of the

tutorial listed in bullet points

Instructions on how to select the Site then New Site from the menu bar

An illustration of the Site Definition Basic window

Instruction on how to click the Advanced tab in the Site Definition window

An illustration of the Site Definition Advanced window

Instructions on how to rename Site name and Local root folder

Instruction on how to click Remote Info




9/11

Instructions on how to customize the FTP configuration and how to click

the OK button

Learning Activities: This is a simulated Dreamweaver 8 environment where

in the student will learn the fundamentals of creating a local web site without

assistance.

Evaluation: The student will be required to perform the steps listed in the

tutorial and create a local site as an assignment. Upon successful creation, the

student will be required to upload to a designated remote class folder using FTP.

After uploading, the student will email the instructor that the assignment is done for

the instructor to verify the work. Grading is a simple pass or fail. Upon verification by

the instructor, if the student is successful to upload a working site then it is a pass.

Otherwise it is a fail and will be asked to redo the assignment.

2. Adding a New Web Page

Goal: Given the initial screen, demonstrates creation of a new web page by

clicking the menu bar, selecting File then New, selecting the Basic page, and saving

the Untitled-1 file as index.htm, without assistance.

Objective: The student will be able to create a local site using the following

procedure:

Click on the menu bar File then New

Click on the Create button

Enter web page Title

Click on the menu bar File then Save

Enter web page name

Click on the Save button

Length: 5 minutes




10/11


An illustration of Dreamweavers initial screen

Instructions on how to select File then New from the menu bar

An illustration of the New Document window

Instructions on how to click on the Create button

An illustration of the initial screen with the new page

Instructions on how to change the web page title

Instructions on how to select File then Save from the menu bar

An illustration of the Save As window

Instructions on how to enter File name and how to click the Save button


in the student will learn the fundamentals of creating a new web page without

assistance.








3. Uploading Site to Internet

Goal: Given the initial screen, demonstrates upload of the site to the Internet

by highlighting the site and clicking the blue up arrow, without assistance.

Objective: The student will be able to upload a local site using the following

procedure:




11/11

Highlight the site

Click the blue up arrow

Click on the OK button

Length: 2 minutes


An illustration of Dreamweavers initial screen

Instructions on how to click the site then click the blue up arrow (2) to

upload the whole site

An illustration of the prompt whether to put the entire site up and how to

click the OK button


in the student will learn the fundamentals of uploading a whole site to the Internet

without assistance.










Documents

Dream Weaver 8 Tutorial Design Document