Design Document: A Lesson In Learning How To Construct A Basic Website

Building a Basic Website Design Document 1

Design Document: A Lesson in Learning How to Construct a Basic Website

Ruth Jenkins

Submitted to Dr. Chuck Lombardo College of Professional Studies Graduate Education The University of West Florida In partial fulfillment for the requirements of the course EME 6414C

March 10, 2005

1 Building a Basic Website Design Document 2

Design Document: A Lesson in Learning How to Construct a Basic Website

Introduction

This design document provides the rationale, framework and structure for an instructional product on the topic of designing a website using editing software. This lesson is to be presented in web-based instruction.

The purpose of this Instructional Courseware is to teach students how to create and publish a basic website. In this course, a website will be designed. It will contain concepts of applying effective layout (use of space and color), adding and formatting text, inserting images, adding background color, and how to FTP (File Transfer Protocol) the files to the web. The website will be published in the learners students account on the server at the school.

Upon completion of this course, students will be able to create a basic website that will present a variety of personal information. The students will be required to insert a picture and/or cliparts, and add an annotated list of hyperlinks to his/her favorite websites. The students will be able to upload his/her page via file transfer protocol.

I. Audience Analysis

Learner

The instruction of this paper will be directed towards learners in middle schools as well as high school. These learners will be designed for web based instruction. These learners come with all levels of experience. At the beginning of this course, learners will have a pre-test to test their knowledge of basic computer, exploring the internet, use of digital cameras, web designing, and other related computer concepts as needed. The learners will also be given several websites for resources to refer to during the course.

This project will take the learners through the planning and designing process until the website is completed and ready to be published online.

The experience in technology is very challenging to all of the learners, as their background knowledge is very different. Some of the learners will be able to adapt quickly to the lesson with relative ease, and due to lack of experience, some will have difficulties with the lesson. Learners that have experience in designing a website will able to assist as well as motivate other learners to attain the goal completing a website.

Environment

The instruction is to be delivered to middle and high school learners in order for them to plan, design and publish a website. This instruction is to be delivered in a web- based learning environment in which learners should have some background knowledge about the basic usage of a computer. Each learner will need to have a computer to effectively complete the lesson as well as publish the website. This instruction should take approximately three class sessions of 55 minutes each.

Like any effective teaching plan requiring time and resourcefulness, it is no different when you create a website for your students to access. However, if you have an extensive, well organized plan, the computing part is easy and getting easier everyday.

Using an editor such as Dreamweaver, makes it easier to design a website without spending much time and frustration.

A well-designed website will greatly enhance communication between you and your students. One of the great benefits of a website is the increased communication

3 Building a Basic Website Design Document 4 between you and the parents of your students. This means of communication also allows parents an easy way to stay in contact with school related issues.

Instructional Needs

Through this planning and designing process, we will demonstrate to students how to design a website using an editor such as Dreamweaver. In part this will be accomplished by sharing common tips and techniques as well as common mistakes.

As a result of this instruction, the learner will be able to generate a story board

(blue print of website), use editing software (Dreamweaver), demonstrate knowledge of building a basic website, and publish website using File Transfer Protocol.

Instructional Objective

1. Students will be able to demonstrate prior knowledge of creating a basic

website using a desired web editing software (i.e. Frontpage, Dreamweaver,

2. Students will be able to generate a basic website using web editing software

3. Students will create additional pages of the website

II. Design Metaphor

This instructional product will be created around a more in-depth “Whom Am I” activity. The website will consist of several items describing the learner’s view on the topics. Information included in this activity will be creating an attractive index page, personal biography with a digital photo, statement of technology experience, a list of favorite sites, and any other details that will make the website more attractive.

Outline and Objectives

Given Dreamweaver or similar HTML editing software, the student will create a basic web page with a title. The learner will be required to create an attractive index page, personal biography, statement of technology experience, add graphics and a digital photo, a list of favorite sites, and a “Contact Me” link. All items on the website will be functioning at 100% accuracy.

Title: A Lesson in Learning How to Construct a Basic Website

 Lesson 1 –Review o Section A – Introduce Resources of Computer Concept Knowledge . Basic Computer Skills . About The Web & Web Pages . Publishing using File Transfer Protocol . Using a Digital Camera o Section B –Introduction to Dreamweaver Environment . Section A - Dreamweaver Layout  Icons  Toolbars  Help Menu  Lesson 3 – Getting started constructing a Website o Section A – Creating and Organizing Website folders o Section B – Saving A Web Page o Section C - Inserting Text o Section D - Formatting Text o Section E - Creating a Hyperlink o Section E - Inserting a Graphic  Lesson 4 – Preparing to Publish Your Website o Section A – Viewing Your Website in a Browser . Netscape . Explorer o Section B - File Transfer Protocol (FTP)  Lesson 5 – Publish Website o Section A – Email the Link to your Website

Lesson Lesson Outline Assessment Tool Learning Levels Assessment Criteria Feedback 1 1. Learners will Demonstrate prior Knowledge/Use Define and identify Instructor will effectively knowledge vocabulary (property facilitate demonstrate inspector, icons, question/answer prior View resources toolbars, document session through knowledge, that are available window, etc.) online chat/thread for viewing discussion throughout Module 1 lesson

2. Learners will Develop a Topic Knowledge Submit topic for Instructor email develop a for Website website response topic for their identifying problem website areas and suggesting ways of improve topic

2 1. Learners Create a index page Knowledge/Use First page of your Instructor email will generate website website response pages for identifying problem website Edit the areas and Background / Presentable color for suggesting ways of Color background improve the content of the Edit Font Type, Presentable font type, webpage Color, and Size color and size 3 1. Learners Write a personal Use Required content is Instructor email will continue biography and identified response creating pages insert a digital identifying problem for the photo areas and website suggesting ways of Write a brief improve the statement of content of the technology webpages experience

Create a list of favorite sites

IV. Instructional Analysis:

Instructional Goal: At the end of this lesson the learner will be able to design a simple website using Web Designing Editing

software. Write a Write a brief Develop Create new Demonstrate prior Yes Edit the page personal statement of knowledge of web Topic for page background/ biography and your designing Website color insert a digital technology photo experience

Open the In the personal Identify you’re Review the Choose a editor bio, include your basics of topic that you software your name, a experiences, building a are familiar digitized photo your likes and webpage with. of yourself, and a dislikes about brief description technology of your interests.

Create a list of Publish Proofread your your favorite website using webpage for hyperlinks File Transfer errors Protocol

V. Design Strategy

Gagne’s Events of Learning Potential Strategies for Constructing a Basic Website Instruction Processes 1. Gaining Attention To gain attention, the learners will choose a topic that attention attracts attention 2. Informing the Expectation The learners will be told what the objective of the course learner of the is at the beginning of each class meeting via Web-Based objective Instruction 3. Stimulating Retrieval to The instruction will stimulate recall of prior learning by recall of prior working memory reviewing the basics of web designing and then building learning on that skill. 4. Presenting the Pattern recognition; The stimulus will be presented in the interface of Web- stimulus selective Based Instruction (After reviewing the lesson, the material perception learner will conduct their assignments in their choice of web designing editing software.) 5. Providing Assistant; encoding The instructor will assist the learner by guiding the Learner learner through the process of designing a website with Guidance ease. The instructor will create a display of a sample website to be viewed by the learner 6. Eliciting Retrieval, The learner will be given the opportunity to submit links Performance responding to webpages throughout the development. 7. Providing Reinforcement, Feedback will be given to the learner via email to Feedback error correction individual learners. This feedback will assist in correcting any errors on the website. 8. Assessing Responding, As stated in above feedback will be given to the learner Performance retention via email to individual learners during the performance of completing the lessons. 9. Enhancing Retention, The learner in this situation will have the opportunity to Retention and retrieval, use what is taught daily in his/her work environment. Transfer generalization This should enhance retention of the instruction.

VI. Evaluation

Upon completion of designing websites, the students’ website will be critique by other members of the class. The students will distribute their critique through group email or threaded discussion to the entire class. In the critique, the students will discuss what did or did not work on the website, background color, font size and color, graphics, and suggest ways to make the website more attractive. The input from the critiques will be used to improve the development of building a website.