Docstoc

Dreamweaver 8 Tutorial Design Document

Document Sample
Dreamweaver 8 Tutorial Design Document Powered By Docstoc
					                                      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: leo@primero.ws | Cell: 732.742.4927
                                         Document Contents


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

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

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

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

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

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

     Application of Gagne’s 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.




Design Document: Dreamweaver 8 Tutorial                -2-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
             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.




Design Document: Dreamweaver 8 Tutorial                -3-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
         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


Design Document: Dreamweaver 8 Tutorial                -4-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
             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 week’s 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



Design Document: Dreamweaver 8 Tutorial                -5-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
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 Gagne’s 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


Design Document: Dreamweaver 8 Tutorial                -6-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
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.



Design Document: Dreamweaver 8 Tutorial                -7-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
         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 Dreamweaver’s 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




Design Document: Dreamweaver 8 Tutorial                -8-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
             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


Design Document: Dreamweaver 8 Tutorial                -9-                            Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
         Content: The lesson will include:

             An illustration of Dreamweaver’s 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

         Learning Activities: This is a simulated Dreamweaver 8 environment where

in the student will learn the fundamentals of creating a new web page 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.


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:


Design Document: Dreamweaver 8 Tutorial               - 10 -                          Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927
             Highlight the site

             Click the “blue up arrow”

             Click on the OK button

         Length: 2 minutes

         Content: The lesson will include:

             An illustration of Dreamweaver’s 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

         Learning Activities: This is a simulated Dreamweaver 8 environment where

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

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.




Design Document: Dreamweaver 8 Tutorial               - 11 -                          Last Updated: August 3, 2007
                      Prepared by: Leo Primero | Email: leo@primero.ws | Cell: 732.742.4927

				
DOCUMENT INFO