How to Create Internet Advertisements for your Company

© Jerry Belch

Overview of Project
  • The objective here is for the Sales/Marketing and Information Technology Departments to create three different Internet ads and post them on a web site, janetbelch.com. The project can be done as individuals, the entire group or different individuals can be assigned separate ads
    1. Prepare a timeline to assure successful completion of the all three different types of Internet Ads.
    2. Get approval of overall design/rough draft before converting ads into proper format..
    3. Complete product list to appear in each of the ads.
    4. Get graphics necessary to complete each advertisement.
    5. Come up with special product pricing information. Sell these items for at least 30% off retail price to qualify for a spot on the web site.
    6. Come up with abbreviated written product descriptions.
    7. Print out first draft of each advertisiment.
    8. Proofread first draft. Check for spelling and grammar errors
    9. Make corrections and produce a second draft.
    10. Printout and run final copy
    11. Upload ads to server. Have instructor e-mail ads to jerrybelch@cox.net for uploading to the server.
    12. Conduct company training on the ads.

    • Tutorial

  • The Vice Presidents of Marketing /Sales /Information Technology oversee and assign appropriate tasks
    to specific department staff with clear instructions about design approval and completion.
  • These tasks include design, creation, and production of the Internet ad. Sales, Marketing and Advertising and IT departments all work on this project.
  • The ultimate goal being to identify and determine the products/services that will be advertised on the Internet this year.
  • CEO oversees development of the Internet advertisiments. The CEO finalizes advertisied product offerings CEO also meets with Sales/Marketing/Advertising/IT VPs to determine publishing of the advertisiments..

    Materials to Collect

    1. Printout Company Catalog
    2. Check inventory records or sales of individual items to decide on which items to promote.
    3. Collect samples of Internet advertising Examples
    4. Read article from Wikipedia on Web Banner AdvertisingWikipedia
    5. Find examples of email ads
    6. Find examples of banner ads.
    7. Read article on pop-up ads Wikipedia on Web Pop-up AdvertisingWikipedia .
    8. Project can be done anytime during the VE simulation period, November thru April
    9. Use any software package you wish. Instructions that follow simply use Notpad.and Mixrosoft Paint which are free with Windows.

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

    11. Printout VE Progress Logs from Janet's Web Site Helpful Forms-Forms, Templates and Letters
    12. Print out Advertising Unit and Rubric from VE web site Virtual Enterprise web site

    13. Email ad template

      Teacher's Responsibility

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

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

    16. 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.

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

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

    19. Department heads turn progress logs over to CEO.

    20. CEO turns over progress logs to teacher.
    21. Proof read the advertisiment for errors and content.

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

    23. 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.

    24. E-mail the ad and attachments to jerrybelch@cox.net if you want to have the ad posted on janetbelch.com

    • Step-By-Step Instructions

    Sales/Marketing /IT (E-mail Internet Advertisement Week 1)

    Email ad template

    Using the materials that you printed out we are going to prepare step-by-step instructions (Department Templates) for this project.

    1. Timeline for the project is 6 weeks. Go through advertising unit and other materials.
    2. Teacher gives printout of this week's Department Templates and blank project logs, for each employee in Sales/Marketing/Advertising departments. to CEO. CEO gives material to VP of Sales/Marketing/Advertising/IT. VP distributes the workload among department employees. Each employee fills in their own log with assignments given by the VP.
    4. Meet with department staff to inform them about the project.
    5. Research product/services, prices of viable products for advertisements
    6. Recommended time line for project
      a. E-mail advertisement without an attachment week 1
      c. Banner advertisement week 2
      d. Ads pl;aced with search engine results week 3
      e. Pop-Up Ad week 3
    7. Clearly define to whom you are selling and the objective of the ad
    8. Use the acronym AIDA to evaluate your ad.
    9. All ads will met the following advertising principles a. Truth
      b. Substantiation
      c. Comparisons
      d. Bait advertising
      e. Guarantee and Warranties
      f. Price Claims
      g. Testimonials
      h. Taste and Decency
    10. Address Readership
    11. Address What Makes People Look and Read them Through
    Day 1

    1. Evaluate Ad Appearance
    2. Select products for ad
    3. Determine pricing for advertised products
    4. Get product descriptions
    5. Obtain graphics for ad and determine their size in the layout
    6. Have Marketing layout ad on a piece of paper - white space, headlines, graphics, text, prices and descriptions of products/services being advertised.
    7. Determine size of advertisement
    8. Turn in ad layout to VP at end of day 1

    Day 2

    Creating the advertisement in HTML format

    1. Determine style sheet elements - font family, size, color etc.
      a. Click on the link for the sample ad
      b. Click on View
      c. Click on Source
      d. Print out the Notepad listing of the ad
      e. Save your new listing. Remember to put the .html extension on your file
      f. Click on your new html file to see the advertisement as it is rendered in the browser.
    2. Let's examine the HTML listing
      a. The usual <HTML> and <HEAD> tags appear first
      b. The beginning <TITLE> tag is next followed by the title and its ending tag
      c. We want to create an embedded cascading style sheet in the beginning of our ad so that changes can easily be made
      d. We first need to declare that the style type is :text/css"
      e. We can embedd this style sheet between the Head tags.
      f. em will be used to identify text that we want to appear in bold type.
      We want the font-weight to be bold and the color black
      g. For our headline 1 we use h1 and declare the font family to be used, tahoma. The other font family names are to be used if the first font is not found on the user's computer. It is advisable to end the font list with a generic font family name.
      h. The p for paragraph tag will be used to specify that the font size will be 12 for paragraphs and arial as the desired font.
      i. The .special tag will tell the browser that we want the color of the following text to be royal blue Colors
      j. Pay special attention to the curly braces around style sheet elements.
      k. Next we insert the <STYLE> - ending tag
      l. The <HEAD> - ending head tag is next
      m. Change the fonts, colors weights and paragraph element to see how different this same ad can appear
      n. Turn nf a printout in to the VP in charge at end of day 2
    3. Let's use our style sheet to see how it modifies our advertisement
      a. Let's center our headline with the beginning <CENTER> tag.
      b. <h1 class= "special"> . This line creates an XHTML attribute "class" in an h1 element to apply a style class.
      c. In this style class declared with the (special selector) contains both the properties of the headline font-family, and also includes the royal blue color applied to the headline of our advertisement.
      d. Next we key in our headline followed by and ending </h1> tag.and a stop center, </CENTER> tag
      .
    4. The <BODY> beginning tag is next followed by a paragraph tag
      Day 3

    1. Tables are a good way to organize elements of an advertisement

      a. We begin with the table tag, <TABLE>. Next we set a border in pixels around the table followed by cell padding and cell spacing
      b. CELLPADDING determines the amount of space between a cell's borders and it contents
      c. CELLSPACING determines the amount of space inserted between individual cells.
      d. Experiment with these numbers to see what changes you can make
      e. We now use the beginning table row tag, <TR>
      f. <TD> begins a new cell in our table
      g. Inside the table data cell we want a background color of lightgoldenrodyellow
      h. We want the table to span the two columns that will appear below it
      i. We want to center in the cell our special promotion text using a <H2> headling tag.
      j. Next we turn off the headline font and stop centering
      k. Now it is time for the ending </TD> tag followed by the end of the row tag, </TR>.
      l. Next row and next table data cells <TR>, <TD>.
      m. Set the background color in this cell to yellow
      n. Use headline three for the text, <H3>, Three Day Introductory Offer then end headline 3
      o. The <p class = "special"> tag tells the browser make bold the text that follows and do it in royal blue
      p. The <em> tag is make the following text bold, "No cages just a wide-open place to run."
      q. The <LI> tag is a list tag. It tells the browser to list these items in a bulleted format
      r. Next we turn off bold, </em>
      s. The <BR> are line breaks
      t. The rest of this table data cell, enumerates features at the K9 resort followed by a new paragraph tag.
      u. End the table data cell, </TD>
      v. Our next cell contains the graphic. It is still in the same row and we use white as the background color
      w. A hyperlink to our a web site goes here. You will want to use your URL here to link your ad to the company web site.
      x. Next is the image tag naming the picture and extension. We want a border of 0 width of 300 and a height of 300.
      y. The ALT tag displays "Doggie Day care Web page" when we pass the mouse over the graphic. A click on the graphic takes us to the page.
      z. End the line with </A>, table data cell and table row
      z.1.Begin a new row <TR>
      z.2 Start a new table data cell that spans 2 columns and centers the text that follows.
      z.3 End the centering, table data cell, table row and table
      z.4 End the body with <./BODY> and the entire document with </HTML>.

    Day 4
    1. Experiment with different colors, font changes, graphics
    2. Make certain that the link to your web site is working. You might want to take them directly to the on-line shopping cart page rather than just your front page.
    3. For example, if your home page url is "http://www.ourwebsite.com" and your products page is called "product.html" you can use "http://ourwebsite.com/product.html"
    4. Adjust the size of the graphic if necessary
    5. Try different table data cell arrangments, until you get the desired effect
    6. Turn your final copy to the VP in charge for instructor approval.

      Day 5

    7. Have Instructor evaluate advertisement and submit to Jerry Belch for posting on the web site.
      a. From Notepad, Edit, Select All, Copy
      b. Go into Outlook Express or Email program
      c. Paste the advertisement into the body of the email, CTRL V
      d. Attach any pictures that need to accompany the ad.
      e. Send to jerrybelch@cox.net
      f. In a few days, go to janetbelch.com and click on the link for Internet Advertising
      g. Instructors may want to give extra credit for students ordering advertised items
      h. Sales and marketing staff shoud monitor the effectivenes of the ad on sales of advertised item
    Email ad template

    Printer Friendly Version -Week 1

    Sales/Marketing/IT (Banner Advertisement) Week 2

    Day 1

    1. The template banner ad features five rotating slides.
    2. Each slide represents something you want to convey in your ad
    3. A full banner ad is 648 pixels by 60 pixels - It is long and thin
    4. If pictures or clip art are used it must fit into that area. and the picture must be clear.
    5. I used a number of pictures in each slide. One regular square shaped picture gets skewed way out of proportion.
    6. Printout sample template banner ad &nbdp;Banner Ad Template
    7. After banner loads, click on view, source and then print out the Notepad listing..
    8. Get graphics
    9. Decide which items to promote
    10. Determine sale price.
    11. Decide what text to use.
    12. Layout all five slides in the ad on paper - text only, text and pictures or all pictures
    13. Turn in the layout to your Vp in charge
      .
    Day 2

    1. To create a text only slide, follow these steps
    2. Run Microsoft Paint. It is in the accessory group
    3. Adjust the drawing area to 468 pixels to 60 pixels.
      A. You can drag the bottom right edge to adjust this area Or
      B. On the menu bar, click Image, Attributes, select pixels, set width to 468 and height to 60. Click OK
      C. Select font, size and color and style from text tool box
      D. You can get the tool box by clicking on view and check text toolbox.or right-click drawing area.
      E. Make sure font and text fit in drawing area box. Type your advertising message.
      F.
      G. To save
      H Click on File
      I Pick SAVE AS
      J. Use .jpg format
      K. Use look in box to find directory
      L. Give file a name and save it

    Day 3

    1. The purpose of our banner is to rotate five pictures inside the banner space of 468 pixels by 60 pixels
    2. Take your listing of the banner.html printout.
    3. The beginning tag of <Html> starts the document
    4. The title appears next between the title tags
    5. A array is a list of similar objects.
    6. Instead of referring to each one separately with a different variable name, an index number is assigned to each
    7. Traditionally arrays always start with the first element as element zero
    8. We declare the array first with the statement imgArray = new array(5);
    9. Our arrary for the banner ad contains five elements (0-4)
    10. First we create a new image object and assign the imgArray with an index of 0, imgArray[0] = new image
    11. The next line, imgArray[0], sets the source (src) property of this new object to a file named "slide1.jpg";
    12. The rest of the lines are identical. They create a new object and then assign a picture to it
    13. These files are the ones we create that contain text and pictures for our ad.
    14. The line, index = 0, sets the counter back to zero so that the images will contain to scroll
    15. "function cycle", is a javaScript function that we will go thru all slides in our banner
    16. The function is called when the web page loads. We will talk about the body onload call later
    17. "index++" increments the index by one each time thru the loop
    18. When the index gets to 5, remember our last slide, the index is reset to zero
    19. "setTimeout" is a javascript keyword. We set the cycle function to repeat every 40000 milliseconds
      .
    20. 4000 milliseconds = 4 seconds.
    21. "return"; repeats the cycle function
    22. The next lines are the ones that take you to your website.
    23. It is called "functionGetUrl()". Here is where you put the url of your website. I used janetbelch.com as a location
    24. The next lines end the function and the script part of the web site
    25. </Head> ends the heading section
    26. The "body on load" lines are next. There are number of important lines here between the < and > tags
    27. When the page loads it goes directly to the cycle function, and sets the background color of the page to a light grey"
    28. When people are viewing your banner, you want to find an easy way to direct them to your website.
    29. You can have them click anywhere on the banner ad using the onClick event
    30. You can just have them roll the mouse pointer over it, onMouseOver.
    31. You can have it go to your website when the mouse ponter is moved out of the banner area with ,mouseOut
    32. You can use onMouseOut, and onMouseUP or onMouseDown to achieve the same result
    33. Experiment with these commands to see how they work and decide which one you would like to use.
    34. Next we want to display the first slide of our banner on the screen, <Image src = "urllink.jpg"
    35. We want them to be able to go directly to your web site, by clicking at any time on your banner.
    36. By clicking we call the GetUrl() function which lists the location of our site.
    37. We name our array banner and set the size of it to 468 by 60 pixels. Remember ad sizes from our Wikipedia reading.
    38. We also can put a border around our ad if we wish. Border=0 puts no border
    39. The following tags end the body and the html document..
    40. Insert the name of your first slide into the array lines and the src img space.
    41. Set the url for your site and decide on which method to use to direct readers to your sid,e
    42. Save your file with an html extension and test it.
    43. Turn in a printout of the banner ad listing and demonstrate it to your VP.
    44. Remember your ad is designed to run at the top of someones else's web page.
    45. You would probably like the web page host of your ad to carry merchandise or have services that tie in with your products
      .
    46. A bridal boutique might have a banner ad for honeymoon destinations, a wedding planner, resort destinations, etc
    47. a banner ad would qualify as a "company to company" sale

      Day 4

      1. To put images into our banner ad, we need to adjust the pictures
      2. We are challenged based on the shape of the banner add. It is long and skinny 468 pixels by 60 pixels
      3. Unless we can find one very long and thin graphic we will need to put a couple of pictures in the space
      4. If we divide 468 by 3 we get 156. So we need to size three graphics at 156 by 60
      5. There are a number of software packages that can reduce and adjust picture sizes, if you have one of these packages create your graphic and make it that size.
      6. If you do not have one of these packages you can still create graphics of this size
      7. Right-click on the image
      8. Click Edit
      9. The picture will load into Microsoft's Paint program
      10. Click Image
      11. Use the Select tool, the one that looks like a box
      12. Drag the area you want included in the graphic
      13. Click Edit, Copy
      14. Make a new Paint File
      15. Paste your image to the drawing area.
      16. Click on Image on the menu bar
      17. Click Attributes
      18. Select pixels
      19. Change width to 156
      20. Change Height to 60
      21. CLick OK
      22. Now we need to expand the box. Click on Image, then attributes, set width to 468. Leave other setting alone.
      23. Repeat these steps again for the second and third graphics
      24. If you wish, you can insert text using the text tool in one of the sections instead of another graphic.
      25. Once you have all five slides finished, save the file, give a listing to your VP and then demonstrate how the banner works
      Day 5

      1. Use the last day of the project to check over everything carefully: Spelling, Criteria of 30% off to have ad posted.
      2. Arrange slides in the order you want them to appear
      3. Check on colors, backgrounds, fonts styles and sizes
      4. Check on timing loop speeds
      5. Double check the ad size and make sure that it is 468 pixels by 60 pixels
      6. Get VP and Instructor approval
      7. Inform all members of the company about the promotion.
      8. Make a list of all items in the banner ad, including the names of all the pictures used
      9. If ad is to be uploaded to server, get a digital copy to your instructor to send to jerrybelch@cox.net

        Printer Friendly Version -Week 2

        Sales/Marketing/IT (Pop-Up Advertisement) Week 3

        Day 1

        1. Pop-up ads are a form of online advertising on the Web intended to attract web traffic. They are usually separate windows that contain the ad.
        2. Sometimes these pop-ups are loaded when the page is loaded. Others are set by timer to appear later after the page loads.
        3. Many users want to block pop-ups. There a number of ways to accomplish this.
        4. Internet Explorer has a way to block pop-ups under Tools and Internet Options.
        5. You can add websites to allow popups, play a sound when a pop-up is blocked and to show information about the blocked popup
        6. Google also has an icon on the tool bar to block pop-ups
        7. Experiment with the icon. It toggles back and forth between blocking and not blocking
        8. There is also an option button that offers additional choices
        9. Many sites use pop-ups to display information without disrupting the page that is currently open.
        10. If you were in the middle of filling in a form, you certainly would not want to have that information erased while still working on it if a new form was loaded.
        11. A pop-up could give additional information or guidance in filling out the form
        12. This is the type of pop-up window we will focus on in our studies.
        13. Open the template for this project and list it out in notepad Angel Bakery
        14. After it opens, click on View, then Source. It will load into notepad. Print it out.
        15. This example is a web site for a bakery. The pop-up is included in the form. and pops-up when the control key is held down and the cursor is dragged over the picture of the angel.
        16. By holding down the Control Key you bypass the pop-up blocker. By dragging the pointer over the picture you open the popup window.
        17. You will want to use your own company's web site. Decide which page the pop-up will go on and then proceed.
        18. Turn in a sketch showing your page with the popup information.
        Day 2

        1. Let's look at the code to make the page.
        2. We are going to code your page today
        3. You see in the listing the usual HTML tags in the beginning
        4. There is a line telling the browser that we will be using JavaScript.
        5. The next five lines contain the function to open the popup
               A. First is the function name - displayPopup()
               B. The (marks the beginning of the function.
               C. The windiw.open is the command to open the popup picture file named popup2.jpg
               D. You can then specify the height and width of the window, toolbars, directories, menu bars and the ability to resize or not.
               E. Watch the puctuation carefully when working with this line.
               F. the right curly brace, "}" ends the function.
        6. End the script tag next.
        7. Body can specify background color if you wish
        8. Select font face color and size.
        9. This form is the order form page for a bakery. You can see it contains a place for name address, etc and products ordered.
        10. Our goal here is have a popup display when the user passes the mouse pointer over the picture of the angel
        11. The img file is specified along with font name color and size for the text that appears on the screen
        12. Instructions are necessary for the user to initiate the Pop-up.
        13. By holding down the CTRL key and dragging the mouse pointer over the picture, the popup appears without disturbing the information already entererd on the page,
        14. The Control Key goes around the popup blocker.
        15. If you do not use the control key, make sure tha popup blcoker is turned offf in Windowa or Browser's tool bar.
        16. The onmouseover command calls the fubnction , displayPopup()
        17. Use any picture file for the popup for now
        18. Demonstrate the way the page works to your Vp and instructor
          Day 3

          1. Today we will create the popup window
          2. To create the popup window itself, use Microsoft's Paint, Photoshop or other photo editing software. See banner advertising unit above on how to create this ad in Paint.
          3. The rest of the page is the order form
          4. Turn in a listing of the oppage and demonstrate it to you instructor.
          Day 4

        19. Experiment with different fonts, colors, and actions.
        20. You may want to have the user to click the icon, double click the icon, use keypress, onmouse down, onmouseout , onmouse up, etc
        21. You may want to change the sise of the popup, add scrollbars, etc.
        22. Turn in a new listing with your changes
        23. This ad is for classroom use only and will not be posted on janetbelch.com
        Day 5

        1. Before you start, make sure that the popup blocker software on the browser and in Internet Explorer are disabled
        2. Today let's look briefly at a popup web page that is loaded after a short delay.
        3. It is triggered when the original page loads
        4. Double-clickAngel Bakery with popup that is loaded when page loads
        5. After it loads click on View and then Source, and printout out the listing.
        6. I found the JavaScript code at "The Javascript Source", Editor Ronnie T. Moore and modified it slightly and inserted it into the HTML code for the Bakery.
        7. The same HTML tags are present in the beginning
        8. Right after the script tag we set a variable of closetime to zero
        9. There are two JavaScript functions. One is nested in the other and called from it.
        10. The first function is called in the body onload function. The function is called "TimedPopUP()"
        11. Let's examine this function first. Remember the curly braces encompass the actual function
        12. First we want to key in the URL for the popup site. This is the actual web page address of the window that you want to have pop up.
        13. When using this kind of advertising, the popup ad should have something in common with the original page.
        14. As you can see I chose a bakery that advertises a catering company.
        15. This catering company is located in Goleta, CA and we have used them a numerous occasions
        16. Next we define the size of the popup window using height and width. Experiment with these numbers to obtain the desired result
        17. Next we specify the delay time. Experiment with this number to increase or decrease the amount of time that passes between the loading of the original page and the popup window.
        18. The next line starts the timer.
        19. The middle part of the line, enclosed in parentheses, calls the function above which sets the size of the popup window.
        20. The last part of the line multiplies the delay variable by milliseconds
        21. Looking at the function called Start(URL, HEIGHT, WIDTH) parameters are set for the size and characteristics of the window, They are contained in the variable called winowprops
        22. The next line actually opens the popup window
        23. The next line has to do with closing the window
        24. Turn in a listing of this popup advertisement to your VP and instructor
        25. Demonstrate the way the ad works
        26. This ad will not be posted on janetbelch.com, but is just for your own classroom use

        Printer Friendly Version -Week 3