Steps in Creating Your Company Web Page

© Jerry Belch

Overview of Project
  • The objective here is to create and publish a web page. The project can be ongoing while specific product line is being developed (new company) or modified (returing company). If you are in a Virtual Enterprise company, the CEO is ultimately responsible to oversee this project and provide needed assistance where needed to meet deadlines, a web page designer should be assigned.
    1. Prepare a timeline to assure successful completion of web page.
    2. Get approval of overall design/rough draft.
    3. Obtain approval of each page's design.
    4. Complete product identification.
    5. Product pricing information. It should match sales catalog
    6. Written product descriptions should match sales catalog.
    7. Make arrangements with the company that will be hosting your web page. If you want on-line ordering capabilities, make sure that they have form mailer cgi scripts.
    8. Design on-line order form. Not all catalog items need to be on web page
    9. Test out order form. The order form appears not to work if you using Windows Live as your email. If this is the case arrange with your web host to set you up with form mail. Another option is to purchase a shopping cart for the products page.
    10. Proofread and spell check all words on the page. If software does not include this feature, do it manually..
    11. Make corrections and produce a second draft of the pages.
    12. Make arrangements for a company or your school to host your web pages.
    13. Test web page. Make sure all links work and that on-line ordering gives you enough information to process orders.
    14. Upload pages to server
    15. If you plan to compete at a Virtual Enterprise Trade Fair, upload the URL to Virtual Enterprise Center to be put on the shopping mall. If you skip this step, you cannot compete in web page competitions. Upload company logo to VEC
    16. If a VE company. conduct company training on the web site.
  • Tutorial

  • If you are in a Virtual Enterprise Program, the Information Technology Department oversees and assigns appropriate tasks to specific department members for the development of the web page.
  • Decide on fonts, layout, logo and colors and content for the web page. Make sure colors reflect the image of your company and product line. The logo should be simple and remind consumers of your product.
  • Decide on which software you want to use to create your web site. If you plan to be in the web competition make sure to read the judging rubrics. There are two competitions at Virtual Enterprise Trade Fairs: Intermediate and Advanced. In Advanced you will do all the programing and develop the HTML tags manually rather than having them generated by the software. Verification of completness of form is coded by you manually.
  • Decide on number of pages: Home page, product pages, on-line order page, contact our company page, etc.
  • Once the product line has been developed you can look for pictures of these items and decide how this part of the page should look.
  • Look for pictures or graphics needed for your pages.
  • If you want pictures of your company members, take digital photos of each person.
  • Decide on type of links used to access othe pages: text or graphics
  • Decide on navigation controls
  • Decide on forms processing method: CGI Form Procesing or MailTo link
  • Use HTML table to arrange each page.
  • Test out web pages in more than one browser.
  • Style sheets can minimize how different browsers see your page, keep content consistent and allow for a number of department members to develop pages that are alike in form, fonts, list items, headings, links etc.

    Materials to Collect

    1. Look at other web sites for your type of business..
    2. If you are a VE company, look on VE web site and printout the competition rubrics for web page design. There is one for the advanced and the other for intermediate competitions.
    3. Project needs to be done before end of week 12 ( before Thanksgiving)
      if you want to enter the Web Page Competition at the Bakersfield Trade Fair.

    4. Print out Cathy's Department Template From Janet's Web Site Helpful Forms-Forms, Templates and Letters

    5. Printout VE Progress Logs from Janet's Web Site Helpful Forms-Forms, Templates and Letters
    6. Printout Job Simulations for JavaScript Shopping Cart, MailTo Order Form Simulation, Presentation Software and Teacher Assignments Web Page from Janet's Web Site. Job Simulation manuals
    7. HTML Categories and their tags

      Teacher's Responsibility

      This section is applicable only if you are a Virtual Enterprise Company.

    8. Fill out the Department Template for each department. -What do you want them to accomplish each week. These Department Templates appear on the right-hand side of your screen if you choose to use these plans.

    9. Make a copy of the Department Template for each department manager and give the Department Templates to the CEO.

    10. CEO gives out Department Template to each department head.

    11. Department head gives out Progress Logs to each employee and from the Department Template and the workflow assigns each employee the tasks for the week.

    12. Employee accomplishes the work assigned and fills in information on the Progress Log.

    13. Completed Progress Logs for each employee are given to the department VP at end of week.

    14. Department heads turn progress logs over to CEO.

    15. CEO turns over progress logs to teacher.

      This section applies to all.

    16. Set up a filing cabinet drawer for these materials, so you won't have to go through this process next year.

    17. Evaluate each week's assignment to see if it is completed. You may need to adjust the amount of time for each week's assignment.

    18. When project is completed, go over rubric to make sure all items are there.

      Additional Assignments

    19. No matter which web software your students use, they can still load their file into Notepad and see how the codes are placed.
    20. They can even modify their page created with another piece of software by adding codes in Notepad.
    21. Next semester you could assign your IT Department this assignment using Notepad for another related line of products.
    22. They can go thru the Javascript Shopping Cart assignment and the Presentation software training manuals to further their knowledge of web page creation and design.

  • Step by Step Plans

    Information Technology Department (Web Site) Week 1

    Using the materials that you printed out we are gong to prepare lesson plans (Department Templates) for this project.

  • Timeline for the project is 7 weeks. I have tried to layout a workable format for this assignment. The assignments are for a department or group of three students, If a Virtual Enterprise program, the VP and two web design assistants. Each department should complete these assignments.
  • If this is a VE class then, the teacher gives printout of this week's assignments (Department Templates) and blank project logs, for each employee in Informaton Technology Departments and to CEO. CEO gives material to VP of Information Technology VP distributes the workload among department employees. Each employee fills in their own log with assignments given by the VP.
  • Meet with department staff to inform them about project. This designed to be a group assignment. One person could do this. It will take more time.
  • If this is not a VE class then just use the Printer Friendly assignments
    1. Each member should create a style and layout template to be used in all pages. These files can be created in Notepad, Dreamweaver, Front Page, Microsoft Visual Web Developer and others.
    2. This week students will turn in a printout of their test file and style file with their progress log .
    3. Click for sampleTest File
    4. Your instructor printed out material that will help you in your job. They all pertain on how to create web pages: JavaScript Shopping Cart, Mail To Order Form, Presentation Software and Teacher Assignments Web Page, HTML Tags. Use them all as a resource.
    5. A template has been created for you called style.css.
    6. To get this file follow these steps
          Click in the text area box above
          Hold down the left mouse button
          Drag mouse down to end of text
          Click Edit
          Click Copy
          Or use CTRL C for Copy
          Open Notepad
          Edit
          Paste
          Or CTRL V for Paste
          Save Your file. Call it style.css
    7. To find Notepad, go the Start, All Programs, Accessories, Notepad.
    8. The purpose of this file is to keep all your web pages consistent as to color, headlines, text, font faces and listings.
    9. The style file is called style.css. The other file is called test.html. click on "Sample" above When the test file is loaded into the browser, the style file changes the test.html file's appearance based on the specifications in the style file. For example, when the browser sees the paragraph tag, <P>, the color of the text will be green font, Times New Roman and aligned at the left.
    10. The background color of the body of text will be wheat.. Notice that the variable, background, and its property, wheat, are enclosed between the left curly brace, {, and the right curly brace }. The variable and its value are separated by a :.
    11. Each time the html file sees the <Body> tag it will make the background the color of wheat.
    12. Double-click on the Test File link above to see how the style modifies its contents.
    13. Follow these steps to get a copy of the test file
          After the file loads, Click on VIEW
          Click on SOURCE
          Click on EDIT
          Click on SELECT ALL
          Click on EDIT
          Click on COPY
          Open Notepad
          Click on EDIT
          Click on PASTE
          Save the file using an .html extension
    14. Most all of the HTML tags come in pairs like <HTML> and </HTML>. These two tags must always begin and end a web-page document. If you are using other commercial software to produce these tags, load the file into Notepad and you will see these tags.
    15. Web pages have head, title, headline, body, paragraph and many other tags. The beginning tag does not contain the backward slash- the ending one does.
    16. The line in the test file that states <LINK REL = STYLESHEET TYPE ="txt/css" HREF="style.css"> is the line that calls up the style file.
    17. The H1, H2, H3 are headline tags and create headline type text. The OL and UL deal with lists. By looking at the test file you can see how they work.
    18. Make a change in the style file and see how it affects the test file. Remember the style file has a".css" extension, the test file".html".
    19. Save it. Just click Save. If creating a new HTML page, in Notepad, you must add the.html extension to the name of the file.
    20. Decide on Fonts - colors and size. There many fonts. Make usre you use only ones that are readable. I only gave you a few fonts in the listing. There are hundreds. Check Microsoft Word for a complete listing.
    21. Decide on colors and faces for headlines H1, H2,H3
    22. Decide when to use unorderd lists, or ordered lists, font face, sizes and colors
    23. Place company logo on test page. See line that says, IMG = surfer.jpg Height=150 WIDTH=100
    24. Each department member should make their own template called, STYLE.css and a TEST.html file. Save that page using ".html" as a file extension when saving web pages in Notepad.
    25. Decide on background for all pages. Colors can be written or listed in the RED, GREEN, BLUE codes. For example black is 00 00 00.
    26. Some sites use a background graphic that in most cases is a .jpg picture format or gif format. The graphic ususally is reduced in size to 100 pixels by 150, for example then repeated to make the background. Use a photo editing program to reduce and soften the picture if needed. There are a number of backgrounds in this tutorial, Lambswool.jpg, Nature.jpg, paper-linen.jpg, etc.
    27. If you want to see how backgrounds work instead of colors, just replace the body tag in the existing style.css file with this one listed here: BODY {background-image: url(Lambswool.jpg); background-repeat: attribute; }
    28. Parts of the HTML code in the test file can be hidden These pair of tags are called, comment tags. To have HTML code ignored, begin with <!-- put in the code that you do not want seen and end with -->. To see code, and have it execute, just remove the <!-- and the -->
    29. I make liberal use of comment codes in the Notepad listings in the test file, describing what the lines do.
    30. At the end of the week a department meeting should be scheduled to look at each person's work and decide on the style for the company web site.
    31. Save this file into each student's folder.
    32. If you are part of a VE company, Follow steps 32-34. Printout your test file and style file and turn them in with your progress log for the week
    33. VP of Technology should decide who is going to host your site. If you want on-line ordering consider a private web hosting company that can support form-mailing with its CGI scripts.
    34. Get approval on style from VP of Technology and CEO.
    35. I created a style sheet for our next assignment called style2.css that works with the file called test.html
    36. Style sheets can be loaded into other sheets to describe these formats.
    Printer Friendly Version -Week 1            Sample Assignment Department Templates Week 1

    Information Technology Department (Web Site) Week 2

    1. This week's lesson is on navigation controls and deciding on overall number of pages for your site.
    2. Each member in the group will complete two navigation pages One with text navigation, the other with graphical navigation controls.
    3. Click for sample Sample of Navigational Text-based
    4. Click for sample Sample of Graphics-based Navigation
    5. Complete the pages with the links for Products Page, Contact Us and About Us
    6. Decide on what links to pages you want. There is probably a bare minimum: Home or Index page, Products Page that includes shopping cart, About Us Page and a Contact Us Page. Of course, there could be many other pages, based on what type of company you have. You can also have links from these pages to other pages to fit your company needs.
    7. All pages need to end with the .html extension so that browsers like Internet Explorer recognize them as web pages.
    8. You next need to know how you want your links for each page to appear, where you want to place them and if they shoud be text or graphical links.
    9. Templates ahve been created for each. The text-link based navigation is in the file called Navigation Text.html.
    10. The graphical one is a bit more complicated and is located in the file called Navigation Graphical.html
    11. Follow these steps to get a copies of these files
          After the file loads, Click on VIEW
          Click on SOURCE
          Click on EDIT
          Click on SELECT ALL
          Click on EDIT
          Click on COPY
          Open Notepad
          Click on EDIT
          Click on PASTE
          Save the file using an .html extension

      Text-Based Approach to Navigational Controls

    12. Let's start with the text-based system first. With just few exceptions Navigation Text.html and Naviational Graphical.html are very much alike.
    13. Let's start with the Navigational Text.html listing in Notepad.
    14. With the listing in Notepad still open, Double-click on the Navagational Text.html file link above to see it in Internet Explorer.
    15. Switch back and forth to make changes in notepad, save the file, go back to Internet Explorer and then refresh it to see your changes.
    16. HTML tags usually come in pairs. The first tag starts with < tag>. The ending tag has a "/" in it and looks like <./tag>.
    17. Beginning HTML tag is present, HEAD tags are in plalce,
    18. Title indicates that this is the home page. In many cases this page is called the index page. The person hosting your site will tell what to call this first page. For now all we are going to do is figure out the navigational controls and where to place them on the page. We will update this page in the next lesson to create our home or index page.
    19. The link to stype.css sheet is OK. Notice that is it linked to style2.css instead of style.css.
    20. You should link it to style.css if this is the file name and its specifications that you all agreed upon to use.
    21. After the link to the style file, there is an ending Style tags and an ending Head tag.
    22. The Body tag indicates the beginning of the area we will be working in today. Notice where its ending tag is located as well as the ending HTML tag.
    23. Remember that all information contained between the comment tags is ignored by the browser. I use these tags to make notes to myself as to what I want to do next.
    24. One of the best ways to organize the layout of a web page is by using tables. Tables keep the different elements on a page form overlapping and getting in the way of each other.
    25. To create a table, begin with the <Table> tag. A table must also have and ending </TABLE> tag.
    26. To change the way a table looks you can use borders, cell padding and cell spacing. and background colors. Experiment with these properties to obtain the look you want.
    27. The next tag, the <TR> tells the browser that this is the beginning of a row in the table.
    28. The <TR> tag is a paired tag. Look thru the listing to find the ending tag, </TABLE> tag.
    29. Tables have rows and cells. To create a table data cell use the tag<TD>.. It also has an ending tag </TD>. The data for this cell goes between these tags.
    30. The next table data cell holds the link to the home page. It begins with the opening tag <TD.
    31. Colors can be assigned to each table data cell. I used dimgray
    32. To create a link to a page called "Home.html", use the following tag, < A href="Home.html">Home</A>.
    33. The anchor tag starts with the <A and provides for a clickable link to another Web resource.
    34. The HREF=URL stands for Uniform Resource Locator, which specifies location of any type of Internet resource, including HTML files
    35. We are directing this link to the home.html page. When we click on this underlined link the broswer will load that page.I set a font face equal to Impact, size 4 before printing "Home" on the screen.
    36. Now we need to end the information contained in this table data cell by using the </TD>.
    37. All of the rest of the table is done in the same format. Each link is enclosed in a table data cell
    38. Since there is only one row in our table, we end the row with the </TR> tag.
    39. We next want to turn off centering, </Center>..
    40. We are going to put an image in now I used a picture of two surfers standing on a beach. You will want to find a picture that goes with your company's products and image. You may want to use your logo here.
    41. To place and image into an HTML document use the <IMG SRC="name of pictue with extension">.
    42. The height and width of the picture can be specified along with a border if desired. HSpace=15 gives some space around the picture before beginning the text. Align equals middle aligns the following text in next to the middle of the graphic
    43. A font is selected color and size before printing out the name of our company. "&nbsp;" stands for non-breaking blank space. It is a way of putting some blank space between"Wipeout Surf Apparel" and "Clothing for the active surfer. Just leaving space between the two does not work.. Next we specify a font for the text that follows," Clothing for the active surfer."
    44. We now need to end the body of the document with and ending body tag </Body>.
    45. Next the ending tag for the entire document is </HTML>.
    46. Change the Title to Home.Page if it is not already that way. The title shows on the top line of the browser along with the folders, and location of the files.
    47. Save your file and call it Home.html. Put it in your folder so it does not conflict with files of department members.
    48. Now we need to see if if template works. If we double-click on it it should load "Home.html" and we should see the links and graphics at the top of the page. This is the page we are working on so it won't look any different..
    49. If we click on the home link it should reload the page we are curently on. Now we need to see if the other links work.
    50. First those links, html pages, need to be created. Let's create the "Products.html" page first. We can use the "Home.html" that we just created, make a few changes and use SAVE AS in Notepad to create this new page called "Products.html".
    51. Change the Title to Products Page
    52. Just before the ending body tag, type :Products Page. We will probably remove this later. This is done so that when the page loads we know we have reached this link.
    53. Leave all the navigation lines and the picture at the end of the table in this file, since we want them to appear on every page in exactly the same way. That is a big deal in the VE judging of your site.
    54. Save as Products.html. Make sure to include the extension of html.
    55. Double-click on this newly created Products page.
    56. Clik on the Home.html.link. Did it work? It should have.
    57. Create templates for the About Us and Contact pages in the same way as instructed above.
    58. Try out all links.
    59. Print out all these files to turn into your instructor.

      Graphics Based Approach to Navigational Controls

    1. Now it is time to try the Navigational Graphical.html approach. Remember that here we use pictures to be the clickable links. I used jpegs picture file format.
    2. Follow the steps listed above under Step 11 to obtain this file or any file from the web site
    3. After this page is loaded into Notepad, print it out. Save this page using the SAVE AS command. Call it some descriptive name that reflects it will be your home page and that it has graphic controls.
    4. Now it is time to decide on a graphic to represent the home page. A picture of a house might work. I used the actual word "Home" and saved it as a picture, .jpg file You will need to use a photo editing program Flash or other program to accomplish this. You may use my graphics if you wish. You will need to modify the background colors in the graphic to match the background of the web page.
    5. To get a copy of any picture on a web page, jsut Right-click the picture then save it as a picture.
    6. The text and graphical approaches are much the same. We just need to change the tags inside the table data tags.
    7. We start with the name of the actual link <A href="Home.html"/A>.
    8. Just leave this link alone. We will use it just the way it is
    9. We begin the next line with the IMG tag put in some spacing, height and width properties. These numbers control the size of the graphic. You can experiment with these to get the graphic the shape you want. Remember look over the graphic. You do not want to radically change the difference between height and width or you can distort the graphic
    10. The information following the SCR is the name of the picture that you are using for your link.
    11. The ALT tag is a special tag. Used as you see here, when the user passes the mouse cursor over the picture, the Words "Home Page" appear. This helps identify the graphic's intention and to clarify the link's name.
    12. Use the ending anchor tag and ending table data tag.
    13. Find the graphics you want to represent the rest of the links: About Us, and Contact us, and Products.
    14. Remember to save each html page.
    15. Each link goes between table data tags
    16. Now we are going to place another picture on the page This picture is not a link Use the Font command to specify how you want the text surrounding the graphic to appear.
    17. Use the <IMG SRC. tag to load the picture. Set a border, height and width for the picture.
    18. Hspace sets some extra space aroung the picture before printing the text, which I aligned with the top of the graphic.
    19. "&nbsp;" is a way to put in blank horizontal space. To get more space, just repeat the command, "&nbsp;"
    20. Set font face and properties for the next section of text.
    21. Turn off that font
    22. Ending body tag
    23. Ending Html tag
    24. Complete the pages with the links for Products Page, Contact Us and About Us Adjust picture size accordingly. Each picture should probably the same size.
    25. When finished, printout the listing for each page and turn into your instructor.
    26. If you are a VE company have a department meeting to decide on which method, text of graphic navigation to use.
    27. If you are not part of the VE program, have a group meeting to decide on which method, text of graphic navigation to use.
    Printer Friendly Version - Week 2            Sample Assignment Department Templates Week 2

    Information Technology Department (Web Site) Week 3

    1. This week's lesson is to create the front page of your web site,
    2. Each student needs to turn in a listing of their home or Index page
    3. Click for sample Sample of Graphics-based Home Page
    4. The front page, Home, or Index page is critically important to the success of your site.
    5. It needs to grab your users attention.
    6. Clearly identify what product or service that you are offering
    7. Offer easy to use and understandable links to the rest of the site.
    8. The page should load quickly into the browser.
    9. If you want to see what I put together for Wipeout Surf Apparel, Double-click on "Sample Graphics-based Home Page" above.
    10. Load the one your department has agreed upon using either the text-based or graphical approach into Notepad and printout a listing. Use it as reference when creating your own home page.
    11. We are going to add lines to the navigational files that you used in the last lesson. - The one your department agreed upon for your home page.
    12. We are going to add some lines to it to make your Index or Home page..
    13. Let's get a listing of the one that I created for Wipeout Surf Apparel
    14. Follow these steps to get a copies of these files
          After the file loads, Click on VIEW
          Click on SOURCE
          Click on EDIT
          Click on SELECT ALL
          Click on EDIT
          Click on COPY
          Open Notepad
          Click on EDIT
          Click on PASTE
          Save the file using an .html extension
      .
    15. Open it in the browser.
    16. Check title, link, Headlines controls, etc.
    17. Regardless of whether you are using the text-based or graphical approach, the instructions for the rest of this lesson would be the same.
    18. Another table might be a good choice to go below the navigational controls. We need to show the user what we are selling . Since the example that I have been using sells surfing sports apparel, I chose to use pictures of some of these outfits.
    19. If a Virtual Enterpr4ise company, contact your Sales and Marketing Department to obtain digital images of a few of the items in your product line. You don't need all of them at this time.
    20. I found many images available on the Internet. If you right-click the picture, you can copy and paste it into your folder.
    21. If part of the VE network, do let Sales and Marketing know that by week 9 you will need the complete product line.
    22. Let's start making changes after the Heading 3 Notation
    23. The next text is centered using ,<Center> command. I used headline 3, " See our Newest Designs" as a title .and then turned off the headline text.
    24. Let's start the table with the table tag <Table border =3 bgcolor="f0f8ff" Cellpadding=3 cellspacing=3 >
    25. Change colors borders and spacing as desired.
    26. Begin the table row with the <TR> tag
    27. Insert the first table data cell tag, <TD>.
    28. I put the logo in the first cell. Set the size and border as you like
    29. The second cell contains a picture of one of our products. The file is called "shorts1.jpg". See how the <Img src="shorts1.jpg"> is inside the table cell.
    30. The next 2 cells contain pictures of other products and are formatted in exactly the same way.
    31. The <P> tag is the paragraph tag. If there were text following it it would be formatted according to the properties of the tag found in the stype.css file. Since it has no text next to it is just a vertical double space.
    32. The last cell in the table contains a listing of the products that Wipeout carries.
    33. A headline two tag, <H2> appears in front of the words "We Carry". Headlines are controled by the style file as to format and color.
    34. In the next table data cell, we will have a numbered ordered list. Remember our style sheet file. This page takes its directive as how to format this list from the style file
    35. To invoke that style we begin with <OL><LI>. and list our first item.
    36. The following items need only have the <LI> in front of them.
    37. Next we end the table data, the ordered list and the table.
    38. The next line talks about our prices. It is formatted by the paragraph tag in the style file.
    39. At the bottom of the page is some copyright information and the last date that this pagte was modified. In this case we wanted the font much smaller than the normal text, so we specify it here with the font tag
    Printer Friendly Version - Week 3            Sample Assignment Department Templates Week 3

    Information Technology Department (Web Site) Week 4

    1. This week's lesson is the creation of the About Us Page of your web site. Included in the About Us Page are four links, Management Team.Organizational Chart, Mission Statement, and Job Descriptions.
    2. Turn in a listing of each of these pages to your instructor.
    3. Click for sample  About Us
    4. Click for sample  Management Team
    5. Click for sample  Organizational Chart
    6. Click for sample Mission Statement
    7. Click for sample  Job Descriptions
    8. If you are not using Notepad as your editor create the About Us page with its links embedded in a table. Make sure to include all links as they are an integral part of this page.
    9. If you are creating the code for yourself, load "About.html" into Notepad, get a printout and refer to it as you create your own page.
    10. Click on the sample, "About Us", to see the results of the listing.
    11. Before beginning the page, make sure that you have the Navigational controls at the top of the page.
    12. You may have already saved the controls under the file name"About.html". If that is the case load that file.
    13. As you can see above, this page describes things about our company: Mission Statement, Management Team, a Picture of our company an Organizational Chart and Job Descriptions.
    14. Regardless of what software you use, we want these Web pages, Mission statement, Organizational Chart, Job Descriptions, and Management Team produced and linked together.. The instructions below describe how to create these pages in Notepad.

    About Us

    1. Check to make sure that title, style sheet link and navigational controls are in place on the page.
    2. Make sure that the picture of the two surfers is not part of the navigational controls. We will use it later.
    3. Remember that the non-breaking space code is after the name of the company Headline one is the title of the page
    4. The next lines are the main portion of this page.
    5. The links are all encompassed in a table with a border of three and a dim gray background with cellspacing and cellpadding set at 3
    6. Inside the first table row is a data cell . ROWSPAN=3 creates a cell that spans three cells
    7. The <A href="Organizational Chart.html> is the name of one of the files to load into this cell.
    8. To put more than one picture or data into one cell use the <P> between the links. There are four objects in this table data cell: Organizational Chart, Logo, Mission Statement link and surfers at sunset picture.
    9. The next table data cell, <TD> holds three objects: Link to the Management Team, Job descriptions link and a company picture.
    10. Examine the listing carefully to see how this is done.
    11. Notice thet the file "jobs.html" occupies a table row as does the company picture
    12. Remember to end the table row and the table

    Management Team

    1. List and printout out the Management Team
    2. Click on the link above to see what the finished product might look like.
    3. Make sure that the link to the style sheet is there along with the navigational controls
    4. After the table, set the desired font face, size and color for the text
    5. Create a headline for the name of the page, Management Team
    6. Begin an unorderd list with each employee and their titles.

    Mission Statement

    1. List and printout out the Mission Statement
    2. Click on the link above to see what the finished product might look like.
    3. Make sure that the link to the style sheet is there along with the navigational controls
    4. After the table, set the desired font face, size and color for the text
    5. Create a headline for the name of the page, Misssion Statement
    6. Set the font for the text of the mission statement
    7. Type in the mission statement

    Organizational Chart

    1. List and printout out the Organizational Chart
    2. Click on the link above to see what the finished product might look like.
    3. Make sure that the link to the style sheet is there along with the navigational controls
    4. After the the name of the company put in a blank paragraph
    5. Turn off centering
    6. Use the image contrrol to put in the picture of the organizational chart
    7. The organizational chart can be made in a many ways. Mircosoft's Powerpoint has a template for one. When I was finished, I just used save as a jpg type file to turn the presentation into a picture file.

    Job Descriptions

    1. List and printout out the job page
    2. Click on the link above to see what the finished product might look like.
    3. Make sure that the link to the style sheet is there along with the navigational controls
    4. After the table, set the desired font face, size and color for the text
    5. Create a headline for the name of the page, Virtual Enterprise Job Descriptions
    6. Use headlines and centering to format descriptions
    7. Type in the Job Descriptions

    Printer Friendly Version - Week 4            Sample Assignment Department Templates Week 4


    Information Technology Department (Web Site) Week 5

    1. This week's assignment is to produce a Contact Us Page
    2. Turn in a listing of the code for the page
    3. This page has a link called Questions and Answers. Print out the listing and Turn it in.
    4. Sample of Contact page
    5. Sample Question and Answers
    6. Make sure that the navigational controls are on the top of the page, the link to the style sheet is correct.
    7. After the sub title, Clothing for the active surfer we put in the title of the page"How to contact us"
    8. Make sure that you put this in between the html title tags
    9. Next we will create a table with three table data cells and one row.
    10. In the first cell we are going to make a link to a view questions and answers page
    11. The next cell contains a way to send an e-mail. Make sure that you change the email address to your company's e-mail address and Wipeout Surf Apparel to your company name
    12. The last cell is a phone call contact. I used a picture of someone on the phone and then just printed the phone number underneath it.

    Question and Answer Page

    1. By now you should be pretty comfortable with HTML
    2. You may create this page on your own of common questions asked by our customers
    3. The example I used is a little more advanced. It is done in Java Script.
    4. It is a template, so all you have to do is substitute your questions and answers. Give it a try.
    5. There are three major parts to this page: The Navigational Controls, The Java Script Code and the section where the questions are input.
    6. Capture the file using the techniques outlined earlier in the tutorial. Paste the file into Notepad and print it out. It is called "questions.html"
    7. Let's skip down to where the questions are input.
    8. Find the line the says <input type="radio" name="q1">What is your return policy?
    9. This is what the line says in plain old English. the input type="radio", puts a radio button on the page..
    10. A radio button is a push button. It is either on or off.
    11. Next we give the button a name, q1
    12. The next part of the statement is the question you want to show on the screen
    13. All you really need to do is change the question to the one you want.
    14. The <BR> makes a break between questions
    15. All the other questions are in the same format. Each question gets a different name. I used q1, q2, q3.
    16. Let's examine the line <Input type="BUTTON" VALUE ="Answer Question" onClick="doSubmit(questionForm);">
    17. The first part of the HTML tag makes a button on the screen. The Value is what you want printed on the surface of the button.
    18. The action you want the button to take is the next part of the line - onClick="doSubmit(question.Form):">
    19. This line calls a function located at near the top of this web page and is where the answers to these questions are located..
    20. The next line is used to clear the form before asking another question
    21. The button is called RESET and when clicked clears the form of all data.
    22. The line below it contains the instruction to the user, to press this button after answering each question.
    23. The remaining tags end the form, body and the page. The form tag will be explained in a minute
    24. Now let's skip to the top of the form to put in the answers to the questions below.
    25. Make sure that the link for the style page is there
    26. Change the title to Questions and Answers.
    27. Put in the tag telling the browser that we will be using Java Script as a scripting language.
    28. The line "function doSubmit(questionForm)" is the function that the computer goes to when the Answer Question button is pressed
    29. The { } start and end the function
    30. The line that says "if(questionForm.q1.checked==true)" looks to see if we are dealing with question 1. Remember the name=q1 in the queston lines below? If that is the button that was pressed then the answer to question one is about our return policy
    31. The equal signs before the word true are double equal signs.
    32. All you really need to do is to change the answer after alert(
    33. Watch the little curly braces. They need to stay in place
    34. Each answer to the questions appears on another line
    35. Substitute your answers for q1,q2 and q3.
    36. You may add as many questions as you want. Just follow the same format.
    37. The return key word is used to return the value from the function
    38. The next tag </SCRIPT> is the ending script tag. All the Java Script language must appear within these tags
    39. The next line is the ending head tag
    40. The beginning body tag is next
    41. The next tag is the form tag and declares the name of the form - questionForm.
    42. For web pages using JavaScript and functions, this tag is critical and must be there. You can change the form's name but remember it needs to be the same when calling and naming the function.
    43. The next part of the page should look familiar, it contains the navigaional controls
    44. After modifying this template, save it and turn in a listing to your instructor.
    Printer Friendly Version - Week 5            Sample Assignment Department Templates Week 5

    Information Technology Department (Web Site) Week 6

    1. This week's assignment is to produce the products page and shopping cart
    2. You will turn in a listing of your products page
    3. You will demonstrate how it works to your instructor.
    4. Sample of Product Page.
    5. You need to get a complete product line from your Marketing Department if a VE company. This includes product name, cost, digital image, color, and sizes available if applicable.
    6. Decide which products to feature on your web page. You probably do not want to put all of them here as the more products the more work in coding your web page. You can add more later.
    7. At this point you may decide to have different department members work on different products.
    8. If you all follow the same format for the development of the product page, you can copy and paste each section.
    9. Load products.html into Notepad and get a printout.
    10. Double click on "Sample of Product.Page" to see how the browser views the file.
    11. Capture the code and print it out in Notepad.
    12. You will see the navigational controls, the link to the style page, picture and headlines.
    13. Next we tell the browser that this is "Our Product Line Page"
    14. We are now going to create some internal page navigational controls. These controls are designed to move you down the page to view the items you are interested in buying. They become very important as the list of products grows.
    15. We are going to arrange the controls in a table. Each link is in a table data cell. There is only one row in the table.
    16. For this product page, you can see the different categories of items that this company carries. Each item category has a link: men's board shorts, women's board shorts, women's sandals, men's sandals. hoodies and T-shirts. There is also a link to the checkout portion of the page.
    17. When you click on a particular link, the screen will show that category.
    18. The target for women's sandals is < A name="#wsandals"></A>. Scroll down until you see this target. Try it out to see how it works before changing the template for your company.
    19. The next line shows the beginning form tag.
    20. <Form Name="form" Action="mailto:jerrybelch@cox.net" enctype="text/plain" Method="Post">
    21. The only thing you need to do to make it work, is to change the e-mail address to the one that you want the information sent to. Be careful, change only the jerrybelch@cox.net part. All other parts are critical
    22. The enctype tells the browser to send the lines in plain text with breaks between them for easy readability.
    23. The form name, form, is included as well as the action statement which is the mailto part..
    24. The line just below would be used if your web host provided form mailing CGI scripts. Of course, it would be different than the one listed below.
    25. Ask your web host how this line should look. If you have already uploaded your web pages to the web host server, they can actually see your code and help you with the necessary lines.
    26. If you use the web host CGI scripts, then leave out the "mailTo:" tag.
    27. Now it is time to organize the first table for the first product. In this case it is board shorts for men.
    28. Find the comment tag to mark where the table begins.
    29. First we need to set the properties of the table, border, bgcolor, cellspacing and cellpadding. We also set the width of the table as a percent of the browsers capability, 90%
    30. We create a new paragraph and then in bold type printout the name, "Men's Board Shorts"..
    31. We begin with the first row in the table. Set the font color to black
    32. The first data table cell contains information about the first product, Quiksilver board shorts for $39.95.
    33. We create a checkbox for the user to click if they want to buy this product. We name the product "Mboard1" and put the name of the product and its price just to the right of the checkbox.
    34. "Mboard1" stands for men's board shorts, our first item in this category.
    35. We insert some vertical space using the <P> tag
    36. Next we display the picture of this item, set the height and width of this picture to 160 pixels and align it at the top of the table data cell.
    37. We insert the picture "Shorts1.jpg".
    38. The next section of this cell contains three radio buttons. These buttons are used so that the customer may buy more than one of the items.
    39. We use the input keyword with the type "radio". We name all these variables "quantityMboard1". This stands for the quantity of shorts ordered for this first item.
    40. You will notice the way the variables are named. Do not use spaces or special symbols as part of the name. Make them easy to copy and paste with the fewest changes possible.
    41. We give each of the variables the same name for each button. If you change the name, the user may select more than one button. We do not want this to happen. They can order one, two or three of this item.
    42. We assign different values to each of these buttons. The first one indicates that the user wants just one of the item
    43. The next five lines are designed to allow the user to select the size wanted. There is a button for each size. Values match the sizes.
    44. As a department decide on variable names for your product line. Remember each one needs a unique name. Don't forget quantity, sizes, color or whatever else you need to retrieve from your customers.
    45. Write these variables down before starting to change the code in the template.
    46. Make a copy of the variable list for each department member.
    47. Assign different product types/products to department members.
    48. Now make a table for each item in your product line that you want included in your web page. Carefully use copy and paste. Remember follow naming conventions as in this first example. Be very careful with assigning names and values
    49. Make sure the name and value describe the item. Remember for radio buttons, each one has the same name to kep users from pressing all of them. Each one has a different value, however.

      Shopping Cart Information

    50. You saw the shopping cart link above. When clicked, the customer information section becomes visible.
    51. These lines are where the customer fills in the information about themselves. First name, last name, street address, city, state and zip code and e-mail address.
    52. Each of the customer data input lines are located in a table data cell. The input type is "TEXT". This statement allows the user to enter letters, numbers, etc. for each of these fields. A maximum length can be set as one of the properties. This limits the number of characters that can be entered. Name your variables carefully. This is the NAME property.
    53. There is a table data cell for each piece of the customer information:: last name, first name, high school, address, city state and zip code and e-mail address
    54. The next line is the internal navigational link to the checkout portion of the program.
    55. The next line is the one used to submit the form to the e-mail address specified in the "mailTo:" tag above .
    56. All information between these tags is bundled and sent to the mailTo tag e-mail address.
    57. <Input Type="Submit" NAME="submitbutton" Value="Submit Order">
    58. The next line clears the form information from the form in case the user wants to start over..
    59. < input type="reset" name= "ResetButton" Value="Reset">
    60. The next line as you can see is commented out. It is used if you use a CGI script provided by your web host. It goes hand in hand with the other line that is commented out just below the beginning form tag <!-- input type=hidden value=janetbelch.com name=recipient-->
    61. </Form> tag ends the form. It must be present for the shopping cart part to work
    62. Copy and paste each portion developed by department members between form tags and save it.
    63. Turn in a copy of the listing of the products page to your Instructor.
    64. Show your page as it appears in the browser to your Instructor.
    65. This page is a simple shopping cart. It does not verify that you have all necessary information to process the order if the user leaves out information.. It wiil send out all information that is checked or filled in.
    66. In another assignment, after the Bakersfield Trade Fair, we can add the necessary code using JavaScript.
    67. You can purchase templates for shopping carts if you wish. PayPal, Visa Google and FedEx are some examples.

    Printer Friendly Version - Week 6            Sample Assignment Department Templates Week 6

    Information Technology Department (Web Site) Week 7

      Testing the Page

    1. Double-click the "Products.html" page
    2. Write down on a piece of paper what the order will consist of. Order one, two or three of each item, include different sizes, colors and styles if applicable.
    3. Order these exact item on the web page.
    4. Fill in the customer information section. Make sure you fill in each field
    5. Click the "Submit Button"
    6. Go to your email program. The one in the MailTo section.
    7. Check to see if the form mail, your order, was delivered to the email address in the "mailTo: address specified.
    8. Here is an example that I ran using my products.html page. The email should read, "Form posted from Internet Explorer"
    9. Remember the data will different based on what you input into your form.
      Mboard1"=on
      quantityMboard1=1
      sizeMboard1=xxl
      lastName=Belch
      firstName=Jerry
      highSchool=Dos Pueblos
      highSchoolAddress=7266 Alameda Avenue
      highSchoolCity=Goleta
      highSchoolState=CA
      highSchoolZip=93117
      eMail=jerrybelch@cox.net
      submitbutton=Submit Order
    10. The email takes a little translation. In the example above I ordered one of the men's board shorts size 2XL.
    11. Check the email with the order you wrote out an a piece of paper.
    12. Make sure all the information checks out with the way it is on the paper.
    13. If it is not the same then you have an error on your web page.
    14. Check each line carefully for errors.
    15. Correct and try the process again
    16. Continue debugging until it works perfectly
    17. If the email does not go through, then substitute another email address in the Mail To tag. Some school districts block email from coming in to their servers.
    18. Upload your files to your web server
    19. Submit the URL to Virtual Enterprise Central Office prior to the deadline. If you do not do this you cannot enter the web page competition.
    20. If you are a VE company, the staff of the VEC will put your URL on the Shopping Mall in the category that best suits your type of business.
    21. Test and retest your pages on the server. Make sure all links work Look for typos and other errors.
    22. Check you web pages against a judging rubric for web competitions to make sure that you have met all criteria.
    23. If part of a Ve company, each person in the company should be familiar with the web site
    24. Check deadline for mail in competitions if you are competing.
    25. If you are a VE company finalist you must defend how you created your web page.
    26. Be PREPARED to defend your VE web site and explain each line of code if you signed up for the advanced division.
    Printer Friendly Version - Week 7            Sample Assignment Department Templates Week 7


  • Janet's Web Site -Helpful forms-Forms and Templates
    Example of a Progress Log for Week 5