Dream Weaver 8 Tutorial Design Document

Dreamweaver 8 Tutorial
Design Document
Leo Primero
Senior Web/UI Designer/Developer/Instructor
Design Document: Dreamweaver 8 Tutorial -1Last 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 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.
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.
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: 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 Creating a new site Adding new page Uploading site to the Internet
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
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
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.
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
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
Content: The lesson will include: 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
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 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 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

Dream Weaver 8 Tutorial Design Document

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Dream Weaver 8 Tutorial Design Document

Caricato da

Copyright:

Formati disponibili

Dreamweaver 8 Tutorial

Web Based Training Outline

Potrebbero piacerti anche