MRK224: Effective Business Presentation - Week July 5 - 9 -2004
INTRODUCTION

There are an incredible amount of Web Sites on the Internet today.  Selling products or services to business and consumers over the Internet is a lot more complicated than merely putting up web pages and waiting for someone to log on!  In this unit, you will discover how the Internet is becoming the main source of information for individuals and business around the world.

Internet Marketing is an emerging component of an well planned "Integrated Marketing Communications Plan".  It offers marketers great potential to build and establish relationships.   A well developed integrated plan considers the following four components:

a.  Who is your target audience?
b.  What are your specific objectives?
c.  What marketing and communications strategies do 
     you  want to deploy?
d.  Measures effectiveness quickly through the use of 
     technology and quick response rates.

The development of the web as a communications and sales component targets both business and consumers.

Congratulations
What you will learn in week eight
Creating your first web page
NetscapeComposer Guidlines
Using Notepad and HTML
Team Web Site Planning
Team Web Page examples
Submitting Web Pages
File Transfer Protocol
Main Page

WHAT WILL YOU LEARN:
1.  Given a marketing topic students will create a web site by applying screen oriented design principles.
2 Given the web page editor "Netscape Composer", the student will correctly organized and create a folder to save web pages and graphics.
3.  Given a particular marketing situation, students will be able to apply fonts, colours and background to convey strategic marketing communications to the consumer.
4. Given specific graphic files, the student will correctly apply the appropriate file use.
5.  Given a variety of hyper links, email addresses and URL's, the student will be ale to differentiate between linking and/or targeting files.
6.  Given the program WS_FTP, the student will be able to accurately transfer files from their floppy and or hard drive to the server
7.  Given a web page to preview, students will be able to accurately view the page source, copy html code to Note Pad, make adjustments to copy, save as a new web page and publish the page to the server.

Top of Page



CONGRATULATIONS
 
 

You've done a great deal of work in completing the first two projects for this course. I hope you will continue to practice and improve your skills with Power Point and with presentations. We must now move along in order to have adequate time to learn all that you need to know for creating your next two projects.

In this unit, you will learn to apply the principles and concepts of screen design, navigation, content and overall impressions to create a team marketing web sites.

This unit will guide you through the processes of creating web pages through the use of written instruction and hands-on activities to promote practical experience in developing a design, selecting appropriate fonts and graphics and publishing and maintaining a web site  Upon successful completion of the activities in this unit, you will have developed the skills to complete assignment number five.
Top of Page



CREATING YOUR FIRST WEB PAGE

Web Editors
First of all we will go through the steps for creating a web page using Notepad and HTML and next through the way to use Netscape Composer to create a page. If you decide to use Microsoft  Front Page or another web editor, you may do so but you will need to test your pages on the computers in this lab before submitting them and presenting them in class. Front Page uses extensions that may not work with the learn server or with Netscape. In order to design well, it is important to test your work on a number of machines - remember that your target audience (anyone on the Web) will have different versions of browser and perhaps computers that are not as new or efficient as those we have on campus.

Screen Resolution
A computer monitors screen resolution is the horizontal and vertical height and width of the computer screen.  Web pages can be designed to adapt to different screen resolutions.  As the screen resolution changes, the white space between the column expands to accommodate the varying screen width.

The three most common screen resolutions are 640 by 480, 800 by 600 and 1024 by 768.

You will need to view your pages on a machine that has a resolution of 800 by 600 using 256 colours as well as those which have a higher and lower resolution.   As the screen resolution changes, the content remains to the left side of the page, this is known as  fixed resolution design.

The settings for resolution are found in the control panel and display properties. You can set this on your own computer but have no control over it on other computers. It is best to design for the widest audience.

Validation of pages to see if they can be read well by users who have disabilities can be done by submitting your page URL at  Bobby.

Fonts/Typeface
A primary component of a web site which attracts the viewers attention.  Fonts can visually create exciting and interesting web pages.   Choosing the proper typeface can visually convey the meaning of a word while at the same time you must keep in mind that many computers do not have lots of fancy fonts. If you use a fancy one on your web page, the viewers browser will use what ever it has handy if it doesn't have the one you used. So you might want to choose a simple one like Arial.
 

BIG
Elegant
Thin

Keep in mind that people do not like to read a lot of text - so keep it to small paragraphs. Avoid using UPPER CASE for anything but titles because it slows down reading.
Use a normal sized font - 8 to 14 for most things - really large letters look like they are for a kindergarten audience.

Avoid blinking text.  - blinking is considered amateur and is annoying to see.

  Use a small animated bullet or icon to attract attention.

Headings
Using headings encourages viewers to spend time on your web site by providing web pages that are easy to scan and read.  Use headings, subheadings, lists and highlighted sections frequently.
Avoid using colours that suggest a hyper link. Blue is the default colour for an active link, while purple is the default colour for a visited link. Avoid underlining as it suggests a hyper link.

Printing Pages
Just as in Power Point slides - be sure you have enough contrast between text and background - and remember text will change colours if it is a link. So check all of the link colours (under FORMAT). Avoid using really busy backgrounds to make it difficult to read the text.   If you want to print your page and you are using light text on a dark background - you will need to go to File/Page Set Up on the browser and check off black text and black lines to get it to print properly.

Top of Page



NETSCAPE COMPOSER GUIDELINES

1. Create a Folder where you will put your web pages and graphics. For example you could go to My Documents on the C Drive of your computer and create a folder with your name on it. This is where you will save your files.  In order to  preview the page to see if it is working properly,  you'll need to place your web page file and any graphics you use on your page all in the same folder. When you save your page, be sure to give this file a html extension - for example, mypage.html. It is a good idea to be consistent - if you decide to use .htm then use it for all of your web page files and if you use .html, always use .html.  It's best to stick with lowercase letters than to use upper case; again, the idea is to be consistent.

2. Open the Netscape Browser. Under File, select new blank page. OR, under Communicator on the tool bar, select Composer. This is the web editor you will be using to create your web pages. The tool bar along the top has icons you will be using to edit your page. Many of the commands are also in the menus - for example, paste is on the tool bar and it is also under Edit.

3a. Go to Format then Page Colors and Properties and select the General tab, write the name of your web page.

3b. In Format, under the Colors and Background tab, choose a color for your page if you want to have a color. Remember that a dark background needs light text and a light background needs dark text.  You want to be sure to have enough contrast between the background and the text so we can easily read it.
 
4. To place a graphic on the page, first of all save a graphic to your folder. You may want to find one on the web and save it by using the right mouse button to save the image. (Place your mouse pointer over the image, click on the right mouse button. On the menu choose "save image as" and select the folder you have created to save the graphic to).

This picture is saved with the file extension  .jpg
If you have a photo, you will want to scan that photo and save it as a .jpg file - photos are usually saved as Joint Photographic Experts Group -  .jpg files.

This animated graphic is saved with the file extension  .gif
You may want to draw your graphic using the Paint program in Windows. Painted graphics and animated graphics are saved as Graphic Interchange Format files -  .gif files.   These files are best suited for solid colour images such as logos, illustrations and graphics.

This drawing is saved with the file extension   .gif

Portable Network Graphics - .png files, are expected to replace .gif files.  They are currently available only by means of browser plug ins.

You will not be able to use .bmp files which we use in Power Point. They don't work on the web. You will have to convert any .bmp files using a program like Adobe PhotoShop.

When you are ready to place your graphic on the page, put the mouse cursor where you want the graphic and click on the Image icon on the tool bar. Select the file you want to insert from wherever you saved it and open it. Click OK. If you decide to resize the image, it is usually best to do this first rather than changing the dimensions in the editor. The smaller the file size, the less time it will take to download to your page when it is on the web. Adobe PhotoShop and Corel Photo Paint are programs that will help you to make adjustments to your graphics files, for example, to resize them.

5.  Colour on the Web Site enhances the sites personality and purpose.  Warm colours are associated with activity and power, while cool colours suggest tranquility and peace.  Over time, colours have come to symbolize particular qualities such as:
 
 

Impact of Colour
RED
Red
Hot, passionate
 
Brown
Masculine, earthy and comfort
 
Yellow
High impact -catches attention
 
Green
Fresh and healthy
 
Blue
Coldest Colour 
 
Black
Sophistication

Practice:

Think of your audience, what colour can you associate with this group?
Visit different web sites and note the impression colours and colour combinations have on you.

6a.  Putting in Links: You will want to write an introduction to your page and to the links you will put on your page. When you are ready to put links, write the name of the link then highlight it and go to the Link Icon on the tool bar and put in the URL for this site. Remember that you need to use http:// in front of the URL for it to work properly. It is a good idea to give a good description of the site so your visitors will know what they might find if they click on it.  Avoid sing "Click here". This is a meaningless phrase that lacks the power and influence you can apply by using helpful textual or visual clues to move the viewer to the desired destination.

6b.  E-mail Link: To put your e-mail address on the page, write your name and click on the Link icon. In the location box, put mailto:youremailname@yourserver - for example, mailto:angela.zigras@senecac.on.ca- note that there are no breaks in the address and it is all lowercase.  You can also include a predetermined subject line title by adding the following to the end of the e-mail link  mailto:youremailname@yoursercer?subject=What comment you would like to see in the subject line.

7.  Date your page!  Be sure to put the last date that you worked on your page at the bottom of the page. Each time you edit your page be sure to update this date before you save the file.  This practice clearly indicates the currency of your web page.

Check your navigation to be sure your links are working between all of the pages in your site as well as to external sites you have given on your page. You can do this by first saving your page then click on Preview and test the links.

Warning: Be careful not to open more than one copy of your page at a time. It can be very confusing if you have two or more copies of the page open - you will not know which one you have made the changes to if you're not careful with this. It is a good idea to save your work as you go along. If you are unsure about which way you want to do something on the page, save more than one version - giving the page another name like page1.html or  page2.html. Please note that there can be no breaks in names of web page files or the browser cannot read the file correctly.

8. Tables are used to keep the text and graphics lined up on specific parts of the page. You may want to experiment with using a table on your page. You can select to have your table with or without a border, with or without color in the background. Your table can go left right or center and it can  be sized from 25% to 100% of the page width. You can delete tables or columns or rows  but this is about it for modifying a table. If you don't like your table - create a new one and cut and paste items - graphics or text into the new one.
 
 

Table with boarders
Can you see the boarder lines?
This table has one row and two columns

 
 
Table without boarders
Can you see the boarder lines? This table also has one row and two columns

9.  File Transfer
Send your page to  your public_html account on the learn server. When your files are all together in your folder and you have previewed your page and are ready to transfer your files including your graphics (all in the
same folder) so they will show up on the page. You will use WS_FTP to transfer your files (see below). Once you have transferred your files into your public_html directory, go to the URL you have created. (for example) http://learn.senecac.on.ca/~userid/filename.html and have a look!

TIP: It's a good idea to look at your page on different computers with both Netscape and Internet Explorer. Sometimes you will get different results. You can change the preferences for how you see the page fonts by going to Edit and Preferences. You will see an Item called Fonts. You can change the fonts used by the browser here (and so can anyone at their computer who views your page depending on the fonts available on their computer).

REVIEW: Page Making: Using Composer

IMPORTANT: Make sure you save all the file names in lowercase letters without any spaces between words/letters, and ensure that all your file extensions are consistent. Please save the file name index.html or index.htm for your portfolio - do not use it for your team page.

Top of Page


USING HTML AND NOTEPAD

 Can you catch the fish?
Once you catch the fish, you will enter Zita's Scuba page.

Now let's see how well you can create Zita’s Scuba Page!

1. Create a folder in My Document

Click onto the fish and go to Zita's Scuba Page
  • Right mouse click – create folder
  • Name the folder (your name)
  • Did you catch the fish??

    2. Saving Page Elements in Your Folder


    3. Working with HTML in NotePad

  •     In Netscape Browser - Go to View
  •      Select Page Source (for page.html)
  •      Highlight all text
  •      Type Control with C for COPY
  •      Open Note Pad (in Windows Accessories)
  •      Type Control with V for PASTE
  •      Edit Text (Make it Your Page)
  •      Replace every "Zita" with your name
  •      Replace Angela's e-mail address
  •      Put your E-mail address
  •      Save as scuba.html
  •     Replace the date with the current date
  •      Preview Page
  •      In Netscape Browser go to File
  •      Open scuba.html in Composer
  •      Click on Preview
  •      Check text - do links work?
  •      Make revisions
  •      Save

  • 4. Transfer files to your account


    5. See Your Page on the Web


    Review Page Making: Using NotePad

    Did you.....


    Top of Page


    TEAM WEB SITE PLANNING

    REMINDER: All of you need to have a working learn account. Each person's part of the team web page must be in their own account. Please advise me if you are having difficulties with this.

    Getting Started

    Each member of the team decides what theme they will cover on their page for the site. One member will have two pages, the main page and a theme page. This is a big project. Do an inventory of the skills of your team members and plan so that you have all of the areas of expertise covered. Go to the schedule and see what the timelines are. Set deadlines for each part of the work to be done on the project so you can be ready to launch on time. Reread the summary of the project at Assignments and Projects.

    Flowcharting the Site

    This week the focus is on planning your web site projects. There are a few resources that may be helpful to you. There are tools to download for creating flowcharts to map out your site. You decide what you want to try. Paper and pencil works but you might like to learn some new software in the process.
    You might also want to consider using mindmaps. With mind maps you can brainstorm a lot of ideas about what to have on your site. Here are a few resources for mindmaps.
    How to Mind Map
    Examples of mind mapping

    Another approach is to use Power Point to brainstorm. Remember you can experiment with layouts and fonts and graphics and you can move slides all around using the slide sorter view. The main thing is - you need an organized plan.

    Your learn account and public_html directory

    The first thing you need to do to be ready to work on web pages is to be sure you know where you will be placing the files you create.  You will create two kinds of files.

    1. Web page files are saved as .html or .htm (it's best to choose one of these and stick with it - using both can be confusing when you look for an address on the web).

    2. Graphics files are .jpg or .gif.  Photographs are usually saved as .jpg while drawings and cartoons and animated pictures are .gif.  Using .bmp will not work (as in Power Point or WORD).  If you want to use these graphics, you will have to convert them first using a program like PhotoShop.

    3. All file names for the Web need to have no breaks or spaces in the file names.

    4.  All file names must be titled exactly the same in your account as what you called them when you inserted them on your page.  Often when you have a problem with a graphic, it is because the file in your public_html directory is spelled differently from the one you put into your page. Or sometimes there is an uppercase letter in one and not in the other. Using the FTP program, you can see both the files on your computer and the files in your web account.

    Checking your learn account

    On your computer in the lab, go to Internet and WS_FTP. This is the program for file transfer so that you can put your web page on the Web. Each of you has space on the learn server to put your web page files (5 megabytes). The files need to go into your public_html directory.

    1. Go to WS_FTP and be sure the host name is learn.
    2. Put your learn user name where you are asked to do so, then your learn e-mail password.
    3. Click on OK. If you get a message that says "log in incorrect" (look in the lower left corner of the FTP window), you may need to go to SIRIS and change your password. If you need help with this, let me know and I will guide you through the steps.

    When you have connected to your account using WS_FTP, you should see public_html on the right hand side of the program. When you have created files (for pages the files are .html, for graphics they are .jpg or .gif) they are transferred from your computer (a folder you made in My Documents or A drive and a diskette) to your public_html directory.

    IMPORTANT: Each time you edit the page, you will need to resave it and resend it into your account to overwrite the older version. All graphics inserted in your page have to be sent into the public_html directory too.

    If you plan to work at home, then you may want to download an FTP program from the Web. In tools you can go to a site that has WS_FTP LE (free for students) or you can try one like CuteFTP for 30 days for free.

    Top of Page



    TEAM WEB PAGE EXAMPLE

    I hope you are all will enjoy building your team web pages and starting your personal home pages. If you are low on inspiration, see what pages have been done by other students here at Seneca.  If you are feeling adventurous and think you might want to learn more about HTML coding for web pages,  check out Web Page Resources. There are a lot of places on the web with good advice concerning the design of web pages.

    Here are a few team web sites to inspire you.

      ThinkQuest 2000 - sites here were done in competition by young students
      B.C. Women's Institutes - I worked on this site on the internet with people I met in one of my courses on the Web.
     

    As you are planning your team page, you will need to agree on a theme for the site and what part of the theme each member of the team will focus on. For example, if your team chooses to do favourite action heroes, the main page would be about action heroes and each member of the team would do a page on their favourite hero. Have a look at the following example to get an idea of how the site would be organized.

    TIP:  Remember, the focus of the team web site is "marketing" and the goal of the team web site is to create a strong relationship with the consumer.  If you find a layout you like, why not copy and paste it for each page then change the details when you edit the page.

    SUBMITTING TEAM PAGES

    The procedure for submitting TEAM PAGES is as follows:

    NOTE: When you present your team site, you will hand in a print out of the main page and each team members page from the server, but NOT of the external pages created by others outside this class.

    Top of Page


    FILE TRANSFER PROTOCOL

        To Transfer your web page files remember:



    SUMMARY
    As you have seen the creation of  a functional and visually attractive Web site demands a great deal of time and energy.  Your team will have experienced the need for a detailed design plan. In choosing the specific marketing topic for the team Webs site factors such as purpose, identifying target audience, determining specific objectives, content, structure and navigation will have been addressed.

    QUESTIONS? Don't hesitate to ask. You can e-mail me as usual, don't forget to put QUESTION in the subject line of your message.

    mail to:Angela.Zigras@senecac.on.ca

    Top of Page


    Return to Main Page
    Designed by: Selia Karsten and Angela Zigras
    June 2004