Module 9: Building Sample Sites

The Web site should be designed such that the home page consists of the company profile, and below the profile, there are three links.. The frame on the left should contain four links: A

Contents

Overview 1

Lab 9.1: Designing and Creating a Web Site

Lab 9.2: Designing and Creating a Web Site

Lab 9.3: Designing and Creating a Web Site

Module 9: Building Sample Sites

to represent any real individual, company, product, or event, unless otherwise noted Complying with all applicable copyright laws is the responsibility of the user No part of this document may

be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation If, however, your only means of access is electronic, permission to print one copy is hereby granted

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property

 2000 Microsoft Corporation All rights reserved

Microsoft, BackOffice, FrontPage, Internet Explorer, Internet Information Server, MS-DOS, Notepad, and Windows 2000 are either registered trademarks or trademarks of Microsoft

Corporation in the U.S.A and/or other countries

The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted

Other product and company names mentioned herein may be the trademarks of their respective owners

Program Manager: Steve Merrill

Development Lead: Basabjit Chakrabarty (NIIT)

Instructional Designers: Sangeeta Nair, Vijayalakshmi Narayanaswamy (NIIT); Veena Nambier,

Yatinder Walia (NIIT)

Technical Contributors: Scott Swigart (3 Leaf Solutions); Gary Gumbiner (Great Barrier

Technologies, Inc.)

Graphic Artist: Scott Serna (Creative Assets)

Editing Manager: Jennifer Linn

Editor: Reid Bannecker

Production Manager: Miracle Davis

Production Coordinator: Linda Lu Cannon (The Write Stuff)

Build Coordinator: Eric Wagoner

Testing Lead: Eric Meyers

Testing: Bryan Urakawa, Chris and Edward

Lead Product Manager, Internet Services: Hilary Vandal

Manufacturing Manager: Rick Terek

Operations Coordinator: John Williams

Manufacturing Support: Laura King; Kathy Hershey

Lead Product Manager, Release Management: Bo Galford

Group Manager, Courseware Infrastructure: David Bramble

General Manager: Robert Stewart

Instructor Notes

This module provides students with three varied scenarios for building sample Web sites Divide the students into small groups (Instructor can also choose not

to divide the class into groups), and let each group choose a scenario based on which, they will build a Web site A group that finishes a scenario in the stipulated time can take up another scenario Students can also devise their own scenarios and develop a Web site for the scenario

After completing this module, students will be able to design and create a Web site for a given scenario

Materials and Preparation

This section provides you with the required materials and preparation tasks that are needed to teach this module

Required Materials

To teach this module, you need the following materials:

! Microsoft PowerPoint file 1912A_09.ppt

! Module 9, “Building Sample Sites”

! Lab 9.1, “Designing and Creating a Web Site for a Product-Based Company”

! Lab 9.2, “Designing and Creating a Web Site for an Educational Organization”

! Lab 9.3, “Designing and Creating a Web Site for a Web-Based Company”

Preparation Tasks

To prepare for this module, you should:

! Read all of the materials for this module

! Complete the labs

! Prepare pointers for students to help them create a solution

Presentation:

10 Minutes

Lab:

110 Minutes

Module Strategy

Use the following strategy to present this module:

! Lab 9.1, “Designing and Creating a Web Site for a Product-Based Compan” For this scenario, guide the students o design a simple Web site for a product-based company The Web site should be designed such that the home page consists of the company profile, and below the profile, there are three links Clicking on each link takes the user to a new page that displays the relevant product information, as well as a link to go back to the home page Suggest the students to use static Web pages to display information on three product categories Students can include images and other text to enhance the look and feel of the site Students can also optionally use frames instead of creating static Web pages In addition, if the students want more challenge, suggest them to design the site such that the product information in each category page can be accessed from a database

! Lab 9.2, “Designing and Creating a Web Site for an Educational Organization”

For this scenario, suggest the students to use frames The Web site should be designed such that it contains two frames The frame on the left should contain four links: Addition, Subtraction, Try some calculations, and Home Page The Home page should be displayed on the right frame On clicking the links, the respective pages should display on the right frame Students can enhance the look and feel of the Web site by adding images and using style sheets

! Lab 9.3, “Designing and Creating a Web Site for a Web-Based Company” For this scenario, suggest the students to use frames The Web site should be designed such that it contains two frames The frame on the left should contain two links: Home Page and Feedback Form On clicking the links, the respective pages should display on the right frame When the user submits the form, the data is added to the company database and the data from the database is displayed to the user Students can enhance the look and feel of the Web site by adding images and using style sheets

# Overview

! Lab 9.1: Designing and Creating a Web Site for a Product-Based Company

! Lab 9.2: Designing and Creating a Web Site for an Educational Organization

! Lab 9.3: Designing and Creating a Web Site for a Web-Based Company

This module consists of the following three projects in the form of labs, each of which presents a scenario for a prospective Web site:

! Designing and creating a Web site for a product-based company

! Designing and creating a Web site for an educational organization

! Designing and creating a Web site for a Web-based company The scenarios are designed to give you an opportunity to apply the concepts you have learned in this course You can pick any one of the preceding scenarios to build a Web site, or you can devise your own scenario — an assignment for your office perhaps — and work on that instead

After completing this module, you will be able to design and build a Web site implementing the concepts you have learned in this course

Slide Objective

To provide an overview of

the module topics and

objectives

Lead-in

In this module, you will

choose a scenario and build

a Web site for the chosen

scenario

Lab 9.1: Designing and Creating a Web Site for a Product-Based Company

Objectives

After completing this lab, you will be able to:

! Create a Web site with static Web pages for a product-based company

Scenario

ProElectron, Inc, a product-based company, deals with the manufacturing of home appliances, electronic goods, and car accessories The company wants to launch a Web site that will contain information about the products they manufacture This will lead to an increase in the number of consumers they currently have The home page should contain the company profile and three links below the profile The links should indicate the category of products they manufacture, such as home appliances, electronic goods, and car accessories When a link is clicked, a new page opens displaying a list of products in the selected category and the price of each product In addition to displaying the list

of products, each page that opens when a link is clicked, should also include a link, called Home Page, which will bring the user back to the home page containing the company profile

The two key steps involved in implementing the scenario are:

! Creating the home page

! Creating the category pages

Starter and solution files

The starter file for this lab is in the folder <install folder>\Labs\

Lab09.1\Starter There are no solution files associated with this lab

Slide Objective

To introduce the lab

Lead-in

In this lab, you will create a

Web Site for a

product-based company

Explain the lab objective

To create a Web site with

static Web pages for a

product-based company

Creating the Home Page for ProElectron, Inc

! Create a home page

• Create the home page for ProElectron, Inc

The home page for the site will have a short paragraph such as

Manufacturer's of home appliances, electronic goods, and car accessories for consumers as the company profile, which will appear on a

background image, <install folder>\Labs\Lab09.1\Starter\

background_green.gif In addition, the home page will contain 3 links,

Home Appliances, Electronic Goods, and Car Accessories, which

indicate the categories of products ProElectron, Inc deal with

Creating the Category Pages for ProElectron, Inc

! Create the Home Appliances page

• Create the Home Appliances page for ProElectron, Inc

The page should resemble the following illustration

! Create the Electronic Goods page

• Create the Electronic Goods page for ProElectron, Inc

The page should resemble the following illustration

! Create the Car Accessories page

• Create the Car Accessories page for ProElectron, Inc

The page should resemble the following illustration

Lab 9.2: Designing and Creating a Web Site for an

Educational Organization

Objectives

After completing this lab, you will be able to:

! Create a Web site with server-side validations and calculations for an educational organization

Scenario

Encyclopedia International, an educational organization, creates tutorials for the Web The company wants to launch a Web site that will contain an online mathematics tutorial for kids The home page should contain the company profile and four links The links include:

! Addition, which brings up a page explaining how to add two numbers

! Subtraction, which brings up a page explaining how to add two numbers

! Try Some Calculations, which brings up a form where you specify two numbers On submitting the form, you see the results of adding and subtracting the two numbers in the form of a table

! Home Page, which takes you back to the company profile page

The three key steps involved in implementing the scenario are:

! Creating the home page

! Creating the addition, subtraction, and try some calculations pages

! Creating the ASP file that processes the data submitted through the form in the try some calculations page

Slide Objective

To introduce the lab

Lead-in

In this lab, you will create a

Web site for an educational

organization

Delivery Tip

Explain the lab objective

In this lab, you will create a

Web site with server-side

validations and calculations,

for an educational company

Starter and solution files

The starter file for this lab is in the folder <install folder>\Labs\

Lab09.2\Starter There are no solution files associated with this lab

Creating the Home Page for Encyclopedia International

! Create a home page

• Create the home page for Encyclopedia International

The home page for the site will have a short paragraph such as “We teach

kids simple and interesting math.” as the company profile, which will

appear below the logo image, <install folder>\Labs\Lab09.2\Starter\Math.wmf In addition, the home page will

contain four links: Addition, Subtraction, Try Some Calculations, and

Home Page

Creating the Calculation Pages for Encyclopedia International

! Create the Addition page

• Create the Addition page for Encyclopedia International

The page should resemble the following illustration

! Create the Subtraction page

• Create the Subtraction page for Encyclopedia International

The page should resemble the following illustration

! Create the Try some calculations page

1 Create the Try some calculations page for Encyclopedia International

2 The page should contain two text boxes, Number 1 and Number 2 and a Submit button

The page should resemble the following illustration

Creating the ASP file

! Create the ASP file

1 Create the ASP file for processing the data submitted by the form in the Try your own calculations page of Encyclopedia International

2 The file should validate the data entered in the two text boxes, Number 1 and Number 2, to check if they are numeric value Then, it should add and subtract the numbers entered in the two text boxes and display the results in

a tabular format to the user

Lab 9.3: Designing and Creating a Web Site for a Web-Based Company

Objectives

After completing this lab, you will be able to:

! Create a Web site with a feedback form for a Web-based company

! Display the data from a database

Scenario

Adventure Works, a Web-based company wants to launch a Web site The company is on the lookout for new ideas and suggestions from the Web surfers Create a Web site of two pages The home page should contain the company profile and two links to access the home page and feedback form When the link feedback form is clicked, a page opens displaying a form with the following fields: First Name, Last Name, E-mail Address, and Your Suggestion When a user submits the feedback form, his particulars are stored in a database maintained by the company The data from the database is then displayed to the user

The process will contain the following main three steps:

! Creating the home page

! Creating the feedback form

! Creating the ASP file for processing the feedback form

Starter and solution files

The starter file for this lab is in the folder <install folder>\Labs\Lab09.3\Starter There are no solution files associated with this

lab

Slide Objective

To introduce the lab

Lead-in

In this lab, you create a Web

site for a Web-based

company

Explain the lab objective

In this lab, you will create a

Web site with a feedback

form, for a Web-based

company

Creating the Home Page for Adventure Works

! Create a home page

• Create the home page for Adventure Works

The home page for the site will have a short paragraph on the company such

as “Have some wacky and new ideas for a Web site, then what are you

waiting for! Send us your valuable suggestions We are here to make your dreams come TRUE If your idea, suggestion or opinion is just IRRESISTIBLE then you win a trip to HAWAII So just fill and click

SUBMIT.” as the company profile along with the image, <install

folder>\Labs\Lab09.3\Starter\logo.wmf In addition, the home page will

contain two links: Home Page and Feedback Form

Creating the Feedback Form for Adventure Works

! Create the Feedback Form

! Create the Feedback Form for Adventure Works The form should contain three text boxes: First Name, Last Name, and E-mail Address, a scrolling text box: Your Suggestions, and a Submit button

The form should resemble the following illustration

Creating the ASP file

! Create the ASP file

1 Create the ASP file for Adventure Works

The file should validate the data entered in the feedback form and store the

data in the company database, <install folder>\Labs\Lab09.3\Starter\Feedback.mdb Then, it should display all the

data from the database to the user