Module 9: Building Sample Sites

Contents Overview 1 Lab 9.1: Designing and Creating a Web Site for a Product-Based Company 2 Lab 9.2: Designing and Creating a Web Site for an Educational Organization 5 Lab 9.3: Designing and Creating a Web Site for a Web-Based Company 10 Module 9: Building Sample Sites Information in this document is subject to change without notice. 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. 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 Module 9: Building Sample Sites iii 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 iv Module 9: Building Sample Sites 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. Module 9: Building Sample Sites 1 # ## # 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. 2 Module 9: Building Sample Sites 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. Module 9: Building Sample Sites 3 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. 4 Module 9: Building Sample Sites ! Create the Car Accessories page • Create the Car Accessories page for ProElectron, Inc. The page should resemble the following illustration. Module 9: Building Sample Sites 5 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. 6 Module 9: Building Sample Sites 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. [...].. .Module 9: Building Sample Sites 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... Calculation Pages for Encyclopedia International ! Create the Addition page • Create the Addition page for Encyclopedia International The page should resemble the following illustration 7 8 Module 9: Building Sample Sites ! Create the Subtraction page • Create the Subtraction page for Encyclopedia International The page should resemble the following illustration ! Create the Try some calculations page... 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 Module 9: Building Sample Sites 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... 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 9 10 Module 9: Building Sample Sites Lab 9.3: Designing and Creating a Web Site for a WebBased Company Slide Objective To introduce the lab Lead-in In this lab, you create a Web site for a Web-based company Explain the... processing the feedback form Starter and solution files The starter file for this lab is in the folder \Labs\Lab09.3\Starter There are no solution files associated with this lab Module 9: Building Sample Sites 11 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 . Stewart Module 9: Building Sample Sites iii Instructor Notes This module provides students with three varied scenarios for building sample Web sites. Divide. 10 Minutes Lab: 110 Minutes iv Module 9: Building Sample Sites Module Strategy Use the following strategy to present this module: ! Lab 9.1, “Designing