Notes for a short course as part of JICA's E-commerce Trainings in the "Economic Impact of E-commerce strategies for the marketing small and micro tourism businesses" conference. 9-10 February, 2004 in Suva, and 12-13 February, 2004, in Lautoka. Please don't use this for anything other than these two sessions without first asking Christopher Robbins at robbins_c@usp.ac.fj

Overview

In this short course (4 hour tutorial, 2 hour practical), we cover how to perform general maintenance of an existing web site, including editing text, changing and adding images, and uploading your changes so that they are live on the World Wide Web. Participants should have some basic internet skills such as emailing and web browsing, but do not need any experience in designing and developing web sites.

Some new terms we will cover include HTML, WYSIWYG and FTP. Although these terms probably mean very little to you now, they should make perfect sense by the end of the course. Everything is designed for people without web development skills, so everything will be explained in simple, every day terms, and will include step-by-step instructions you can follow to do the work on your own after the course is finished.

We will not cover how to design or code a web site, manipulate images, or start a web site from scratch. The course focuses on making minor updates and adjustments to an existing web site, so you would still need to hire someone to create your site in the first place and to make major o=changes. This course gives you the power to keep the site fresh and accurate without always relying on a web designer.

In order to make the course as applicable as possible to your own circumstances, we will be making edits to a copy of an actual web site for a guest house in Fiji. This web site was designed by Vikash Gounder of the University of the South Pacific for a Jica project.

The Scenario

This is the situation we are preparing you for:

You have hired a web designer to create a site for your guest house. The site is functioning fine, but you want to change some prices and update some images. You don't want to pay the web designer every time you need to make changes, so you want to go online and make these minor edits yourself. How do you do this?

The Internet, Uploading and Downloading

The Internet is a bundle of networks, many computers all connected to each other.

When you log on to the Internet, you are connecting to that bundle of networks, so that you can access files on the computers in that bundle of networks. That bundle of networks is the Internet, and the files you connect to make up web sites.

When you purchased web space for your web site, you payed a hosting company to give you space on one of their computers that is always connected to the Internet. Your Web Designer then created a set of files that make up the pages of your web site. The Web Designer then uploaded those files onto the hosting company's computer, part of the bundle of networks that make up the Internet. That is, he or she copied the files from his or her computer onto the hosting company's computer so other people could see them on the World Wide Web.

In order to make any changes to your web site, you first need to download a copy of that web site from the hosting company's computer on the Internet to your own computer.

Once you make those changes, you can view your changes on your own computer, and then upload them back to the company's computer on the Internet. Only then will the rest of the world be able to see the changes you made.

To review, you pay a hosting company for space on their computers, which are connected to the Internet. Uploading means moving files from your own computer "Up" to the Internet. Downloading means moving files "Down" from the Internet onto your own computer. To make any changes to a web site, you first need to download the files to your computer. Then you can edit the files on your own computer before uploading those files to the Internet, where anyone browsing the World Wide Web can see them.

FTP

A popular way of downloading sites from the Internet for edits is called FTP, or File Transfer Protocol. There are many free FTP programs available that allow you to download and upload files from and to the Internet. Similar to how you copy files from one computer to another, or from one directory to another on your own computer, the FTP programs let you copy files from computers on the Internet to your own computer, and vice-versa.

However, in order to keep just anybody from copying and changing files on the Internet, every web site has a password to protect it. Your web site at your hosting company has a password, so in order to download your site with your FTP program, you need to find out your user name (also known as your login) and your password. You will also need to know your FTP address, which tells the FTP software which web site to download. Your web designer or hosting company should have this information. As I do not know your user name or password, I cannot give you this information.

So, lets do that now. We will go online, download a free FTP program, and then use it to download a copy of the web site to our own computer. To do this to your own web site, you will need to know your own user name, password, and FTP address.

Download the FTP Software

We are going to download the free software AceFTP.

Using a web browser such as Internet Explorer, Netscape, Opera, etc, go the web site http://freeware.aceftp.com/download.html. Then, click one of the download links at the bottom of the page. If one link doesn't work, try another. We have circled the four appearing on this page.

Install the FTP Software

Once you have downloaded the software to your computer, install it by double-clicking the icon named aceftp3free3.exe or aceftp3free3.

Click through the steps to install the software. Exit all other software and click Next.

Agree to the terms and click Next.

Click Next again.

Decide if you want an icon to appear on your desktop, and if you want the program to start immediately after installation and click Next again.

Now you have installed the software.

Registering the FTP Software

This is only an evaluation version, so to keep the free ftp software for more than 30 days you will need to register on their web site. This is free. Enter your information into the form provided when you start the program and your registration code will be emailed to you.

Starting up the FTP software

To begin using the software, double-click the icon AceFTP 3 Freeware.exe or AceFTP 3 Freeware.

When you launch the software, you will see a registration window. If you didn't register when you installed the software, you can click the Get your FREE registration code * and enter your details to register online. If you have already received your code by email, you can enter it into the windows provided. Otherwise, you can just click Skip and enter the registration email and code another time. Remember, you have thirty days to register before the software expires.

Once you have the software running, you may be faced with the window below. Check don't show this confirmation again and click Yes.

Connecting to your web site using FTP

First, we want to use the FTP software to connect to your web site (the files on the hosting company's computer). In the upper left hand corner menu, click File and then Connect.

To enter the ftp address, user name, and password for your site, click New Site Profile:

First, decide on a name for the site. This is just for your personal use, and will not affect the web site. For now, lets use the name My Site.

Now, enter your ftp address, user name, and password. As we covered earlier, your web designer or hosting company should have this information. As I do not know your user name or password, I cannot give you this information. Be sure to ask specifically for your ftp user name and password, as opposed to your email user name and password. I do not recommend clicking Save Password, as then anybody using your computer could change your web site files.

Once you have entered in the appropriate information, click Finish.

Now you should see a new entry when you click File > Connect. Underneath New Site Profile, you should find an option called My Site. This is the profile we have just created. Double-click it to connect to your web site.

Since we chose not to save your password, you will see a window asking for your password. Enter it and click OK. The password appears on screen as asterix (******) so that if anyone is watching, they won't be able to see it.

Once you have entered in your password you should be connected to the site. this can take several minutes if your connection is slow, so be patient. Once you have connected to your site, the main console for uploading and downloading from your site will look like this:

On the right-hand side are the files on your web site on the Internet, and on the left are the files on your computer. We are going to select the files we want to download on the right, and move them to the left. This will copy those files from the web site on the Internet to our own computer.

First, lets make a folder on our computer to hold these files. Along the left side of the left box of the console are a series of the icons. Click the icon circled below to make a New Folder.

Name the new folder Website Download

Now double-click the folder we just created on the left hand side to open it. We are going to select all of the files on the web site, and copy them to the left, to the folder we just created on our computer.

On the right hand side, select all the files you want to edit, and press the button with an arrow pointing to the left, called Copy to Left. We have circled the button below.

This will copy files from the web site on the Internet to your own computer. Depending on how many files you are copying, and how big they are, this could take a very long time, from several minutes to several hours! You will see the window below, showing you the progress as the files are downloaded.

Once the download is complete, you should see copies of the files you downloaded from the web (on the right) in your folder on your computer (on your left).

Now that we have copied the web site to our own computers, we can start to edit it! Since we will be editing files on our own computer, we don't need to be connected to our web site anymore. So, exit from your FTP program by choosing File > Exit.

Editing the site

Backup your work

The first thing I do before making any changes whatsoever is to backup my website. To do this, we will make a copy of the files we have just downloaded to our computer. We will never edit this copy. It is there as a safety back up in case we make a mistake while editing the site.

To do this, you must first locate the files on your computer. If you cannot quickly find them, run a search for the folder name "Web site Download." The function key f3 starts a search on most pcs. Now, right click your folder and choose copy.

Now, right click outside of the icon and choose Paste.

You should now have two copies of your web site, one named Website Download and one named Copy of Web site Download. The Copy of Web site Download is your backup, and you should not edit any files in this folder. All of your changes should be to the files in the folder called Website Download.

File formats for the web

Lets take a look at the files we just downloaded from our web site:

In this site, most of the files are HTML and CSS files.

HTML

HTML stands for Hyper Text Markup Language, and is the most popular coding language used on the web. Almost every web site on the Internet uses HTML. We will not be learning how to code HTML, but will learn how to edit HTML using a program (called a WYSIWYG) without coding.

CSS

CSS stands for Cascading Style Sheets. These files change how a web site looks. It can change the color and font of text, the background color, and much more. We will not be learning any CSS in this course. For now, if you want to change anything major about how your site looks, you will need to talk to your Web Designer.

Images

In addition to code, your web site likely has image files. usually, we store all of our images in their own folder, titled img or images. In this case, the folder is called img. So, if we open the img folder inside the Website Download folder, we find a set of files that are GIF and JPEG or JPG.

If you see a GIF or JPG file, you know it is an image. If you see an HTML or CSS file, you know it is code.

Editing your site with a WYSIWYG program

Now that we understand what the files we just downloaded are, lets start editing them. There are two ways to edit web sites, coding HTML by hand and using WYSIWYG programs. WYSIWYG stands for What You See Is What You Get, and refers to software that allows you to edit the web site while looking at it in a browser. Instead of changing code, you can just edit the text or move around images as you might in Microsoft Word or page layout programs. The WYSIWYG programs alters the HTML code for you.

The WYSIWYG program we will use today is Netscape Composer, which comes free with Netscape Navigator. Other, more advanced WYSIWYG programs include Dreamweaver and Golive, but those cost several hundred dollars. So, today we will work with the free Netscape Composer.

Download Netscape Navigator

We are going to download the latest version of Netscape Navigator, currently 7.1. Type in this web address into whatever browser you currently use: http://channels.netscape.com/ns/browsers/download.jsp . Click the large Download button. If you have troubles downloading and installing it this way, try the link below that says Offline Installer.

Choose to Save the file NSSetup.exe. This is the application that will install Netscape onto your computer.

Once you have saved NSSetup.exe to your computer, double-click it to start the installation process. It will most likely be on your desktop. Otherwise, run a search on your computer to find it. The function key f3 starts a search on most pcs.

Click either Recommended or Full and press Next.

If you chose Reccomended you may see the option to install Sun Java 2 or Winamp. Neither of these programs are necessary for editing our web site, so just click Next again.

HTML

Click Next through the next two windows. None of the options here make all that much of a difference.

Once you have finished choosing all of your options, the last window shows you a summary of what will be installed. Click the Install button.

Installation now begins. You can watch the progress as the program downloads, but it will likely take over an hour. Sometimes we lose our connection while downloading the software. If this happens to you, or if the installer program does not work once downloaded, try again. With slow web connections, it can take a few attempts to get it to work. You can also try the link below the Download button that says Offline Installer.

Opening Netscape Navigator

Once the installation is complete, you can use Netscape Composer to edit the pages you downloaded. But first we will open Netscape Navigator to view the pages. Netscape Navigator is used to view pages, and Netscape Composer is used to edit them. Locate the icon to run Netscape, which will be on your desktop, or in your programs folder. If you cannot find it, run a search for Netscape on your computer. The function key f3 starts a search on most pcs. It will be called Netscape 7.1, unless you have downloaded a different version (which is okay). Double-click the icon to open.

Viewing the web pages you have downloaded

Now that you have Netscape Navigator open, we are going to view the web pages we have downloaded in Netscape Navigator. When you use a browser to view web pages on the Internet, you usually type an address into the bar at the top of the browser. Since we are viewing a file located on our computer, we are going to open that file by choosing File > Open File from the menu on top.

Locate the files we just downloaded with our ftp program. Remember, we want to edit the files in the folder called Website Download, not Copy of Web site Download, which is our backup. Lets choose the index file (which may appear as index.html or index.htm) and then press Open.

Now we are looking at the home page of the site we just downloaded. When a file is called "Index," it will be the first page a browser will open in a web site. Unless you specifically choose another page, a browser will look for a file titled "index" and will open that file first.

Notice the address on the top of the browser, where you would normally type a web address. It probably begins with something like file///C:/ and ends with index.html. This is different from web addresses you normally see, which start with http://www.

That is because this is the address of the file we just opened on your computer. It is not on the Internet, and so does not start with http://www. Since your computer is not part of the Internet, people on other computers will not be able to see these files.

So, if you made some changes and emailed this link starting with file///C:/ to a friend, he or she would get an error message when trying to view it from their own computer. Changes you make to these files only affect the copies on your own computer. The original version on the web will not be changed by our edits on our computer until we use the ftp program to upload the files back to the web. In other words, we can change the files all we like on our own computer without changing the files on the web. Once we copy the files from our computer over the files on the Internet using an ftp program, then people all over the world will be able to see our updates.

The page we want to change is the Rates page, so click the link called Rates to take a look at the page.

Opening pages with Netscape Composer

Now that we are viewing the Rates page in Netscape Navigator, we want to edit it, so we need to go to Netscape Composer, the free WYSIWYG program that comes with Netscape Navigator. Netscape Navigator is made for viewing web pages, while Netscape Composer is made to edit them.

Go to Window > Composer in the menu on top of Netscape Navigator.

Now lets open up the rates page in Netscape Composer. Choose File > Open File from the menu on top. You can also press the Open icon directly beneath the menu.

Locate the Website Download folder, and this time open up rates (which may also be called rates.html). If you are doing these edits to your own site, the file names will likely be different, but the process will be the same.

Great! Now we have our rates page open in Netscape Composer. It looks a little different, with red boxes around certain elements.

Editing Text with Netscape Composer

Lets raise the prices a little, shall we? Lets raise the rates for Self-Contained, Units 4-sleeper Units (one double 2 single bed) from $50.00 per night to $60.00 per night. Select the price with your mouse and change it to 60.

Now, save your changes by choosing File > Save File from the menu, or by pressing the Save icon directly below the menu.

Viewing your changes in Netscape Navigator

Your can view your changes in Netscape Navigator by pressing the Browse button in Netscape Composer.

If you don't see the updates, press the Reload button in Netscape Navigator to reload the page's changes.

Great! Now you see how the changes look in Netscape Navigator.

Working with Images in Netscape Composer

So far, we have downloaded our site from the web to our computer and edited some text. The changes we have made so far will only be visible on our own computer. In order to make those edits visible on the World Wide Web, we need to upload our file to the web with our FTP program.

But first, lets make a few more changes on our local copy. The most frequent edits you'll be making are text edits, but often you need to change images. While we won't learn how to create or manipulate images, we will learn how to move images around, add new ones, or delete them.

Go back to Netscape Composer by selecting Window > Composer from the menu on top. Now, scroll down to the images at the bottom.

Lets change the image on the right. Double click the image. A window will popup. To replace the image with another image click Choose File...

Locate your Website Download folder, and then open the img folder. On your own site, the names may be different, but what you want to do is find the folder that holds your images. In this case, we are going to swap our image for the coffee_break image in the img folder. Select coffee_break and press Open.

Notice that the thumbnail in the lower right has changed to match our new image. Click Okay to swap the images.

There we go! We have swapped images!

Image Location

Although we have swapped images in Composer, we must understand something more about image location in order for our changes to work on the web. In Composer, double-click the image we just changed and take a look at the Image Location part of the window.

Notice that it says img/coffee_break.jpg. This is the path to the image; it tells the browser where to locate the image. In this case, it fells the browser to open the file called coffee_break.jpg inside the folder called img. This is working on our computer because we have an image called coffee_break.jpg in that folder. But, if that image is not on the hosting company's computer on the Internet, then our image will not appear when we view our updated rates page on the web. If the image's name is slightly different, or if the folder is not exactly named img, our image will not appear either.

So, it is very important that your copy of the web site on your computer match exactly the copy on the Internet. For instance, lets say you have just received some new digital photos of your guest house. Before placing them on your web page in Netscape Composer, you must put them within your images folder (here called img) in your Website Download folder. This way, when you upload the folder called Website Download, you can be sure it contains all of the images you need. If you link to a folder somewhere else on your computer, everything will appear to work in Netscape Composer, but will not function once you upload the page to the web.

Alternate Text

Now, look at the section of the window called Alternate Text.

Every image can have Alternate Text associated with it. This text will appear while the image is loading. It also appears instead of the image if a person has turned image-display off in his or her browser to make the site load faster. People using screen-reader browsers that dictate the words on a web page out loud will hear this Alternate Text, so it helps blind people use your site as well.

Also, search engines such as http://www.google.com look at Alternate Text when searching for pages. So, Alternate Text can be a powerful tool for making your web site easier to find with search engines. For all of these reasons, it is very important to specify Alternate Text for all of your images. This is something many people overlook, and as it is easy to do and powerful, we will learn how to add or change Alternate Text.

Simply click the option for Alternate Text and type in some descriptive text about the image. I have entered Dining under the thatch at Deuba Inn, Fiji Budget Accomodation. This choice of words is good because it accurately describes the image, and because it contains keywords your prospective customers are likely to use when searching on the web, such as Fiji and Budget Accomodation. Where it makes sense, try to include important keywords for your own site in the Alternate Text for every image.

It is also useful to use these keywords where possible in the text of your web pages. The more you use the keywords, the higher a search engine will rate your site.

However, this is true only to a point. Some Web Designers have tried to exploit keywords by typing them over and over in a page, even when they don't make sense. Others put in keywords unrelated to their site in the hope of bringing in more visitors. Search engines are programmed to recognize these shady practices, so while you should be sure to include important keywords within your web site, don't get carried away. Use keywords only where they are honest and where they make sense.

Inserting New Images

To insert a new image in Netscape Composer, place the cursor where you want the image to be and press the Image button at the top of the page.

Press Choose File... in the window that pops up, and select another image from your images folder. Here we have selected kitchen.jpg from the img folder. Don't forget to add some Alternative Text!

The new image will appear where you had placed the cursor prior to pressing the Image icon.

Deleting Images

Deleting images is easy as well. Simply drag your mouse over the image and press the delete key on your keyboard.

Working with links

Text and images are very important elements of web pages, but the element that truly makes a web page a web page is the hyperlink. Hyperlinks are bits of text or images that open different files when clicked. You have probably seen blue underlined links all over the web. The two major types of links are links to other documents, and links to email addresses. You can link almost any document, html pages, image files such as jpg and gif, pdf files, even word, excel and power point files.

To make a bit of text or image into a link, you select the text or image with your cursor and press the link button.

Let's take a look at the contact link. Select the link that says contact and press the link button.

you see that it links to contact.html. this means that if you press this link in a browser, the browser will open the file called contact.html. You can change the file it links to by pressing Choose File... and locating the file you wish to link to, just as we did for the images. Remember, just as images need to be saved in the Website Download folder and uploaded to the Internet to function properly, so do all other documents you link to.

If you want to link to a document on another web site, type the web address in the field where contact.html is.

Most likely, the type of links you will need to update most often are email addresses. To link to an email address you need to precede the email with the word mailto, followed by a colon (:). this tells the browser to use an email program to open a message addressed to the linked email address.

Let's take a look at the email at the bottom of this page. Scroll down the page, select the words theislander@connect.com.fj, and press the Link button at the top fo the page.

Make sure the email address is preceded by the word mailto, followed by a colon (:). If it isn't, add it yourself. If you are working with your own web site, the address will be different, but the approach is the same.

Testing in other browser

Once you are happy with your changes, save your file and press the Browse button to view the web page in Netscape Navigator. It is also important to test out your page by viewing it in other browser such as Internet Explorer before uploading the page to the Internet. Different browsers display web pages differently. Usually these differences are minor and unimportant, but sometimes they will require you to make additional fixes. So, it is very important to test your site in several browsers before uploading it to the Internet.

Going further with Composer

Now we have finished our edits to the web page. We have changed some text, some images and some links. These are the most frequent changes you will need to do. If you would like to learn some more advanced features of Netscape Composer, read an online tutorial such as http://www.hoboes.com/html/NetLife/WebSimple/WebSimple.html .

A little knowledge can be a dangerous thing, so be careful. A good Web Designer understands principles of design, and puts a site through rigorous testing before publishing it on the web. Good Web Designers test their sites for usability, web standards, valid HTML, and other considerations with which you are likely not familiar. There are many browsers and users on the Internet, so it is hard to ensure that your web site will work for all of them without testing and experience. While an awkward site is not a major problem if it is for your personal use, you could lose customers if mistakes make a professional business site hard to access.

With this short course you should feel confident enough to maintain your web site, keeping it fresh and up to date. However, for major design changes and for creating brand new professional sites, it is still safest to liaise with a Web Designer.

Uploading the site

We're almost done! We downloaded the site, made our changes, tested our site in Netscape and Explorer, and now we are going to upload the changes back to the web for all to see.

Start up your FTP software and connect to your web site by selecting File and then Connect.

Choose the profile you created when you downloaded the site, My Site.

Enter your password when requested

Once you have connected (this could take a few minutes), you will see the console again, with files on the left and right. On the right-hand side are the files on your web site on the Internet, and on the left are the files on your computer. Last time we downloaded files by copying them from the right (the web site on the Internet) to the left (the computer). This time we are going to copy files from the left (the computer) to the right (the web site on the Internet).

The only html file we changed was rates, so we are going to take the new version of rates from our computer, and copy it over the old version on the web site. Make sure that rates is appearing in both the left and right console and select the rates on the left (your computer). Then press the button with the arrow pointing right (copy to right).

Since we are copying over an existing file, replacing the rates on the web site with the one from our computer, the software will warn us. Choose Overwrite to write the new version of rates over the old one.

If you have added any new images to the web site on the computer, make sure you copy them to the image folder on the web site on the Internet (here it is named img). Similar to what you did with rates, move the image from the img folder on the left (your computer) to the img folder on the right (the web site on the Internet).

View the web site on the web

Once you have finished uploading all of your changes to the Internet, type the web address in your browser to check that everything worked. Since the site we are checking is on the Internet and not your computer, the address should start with __http://www__.

You're done! You have downloaded a site, edited text, images and links, tested the site on your computer in Netscape and Explorer, uploaded the site to the Internet, and tested the site on the Internet in Netscape and Explorer.

Summary Outline

To summarise one last time, these are the steps necessary to make edits to an existing web site that we covered today:

1. Download and install AceFTP, free FTP software from http://freeware.aceftp.com/download.html
2. Download and install Netscape Navigator, free web site browsing and editing software from http://channels.netscape.com/ns/browsers/download.jsp
3. Use your FTP software to download a copy of your website. You will need to know your FTP user name, password, and FTP address. You can get these from your Web Designer or Web Hosting Company.
4. Edit the website on your computer using Netscape Composer, part of Netscape Navigator
5. Test the site in several browsers on your computer before uploading to the Internet
6. Upload your edited website to the Internet using the FTP software
7. Test the website in several browsers on the Internet

Further Reference

If you are interested in learning more about web design, here are a few good sites for learning how to become a well-rounded Web Designer:

• http://www.alistapart.com/
• http://hotwired.lycos.com/webmonkey/
• http://www.useit.com/
• http://www.w3c.org/

Followup on Questions

How to put a last modified note?

Editing the HTML with Notepad, simpletext, wordpad, etc, or else using the HTML Source tab in Netscape Composer, paste this Javascript into your page:

<script language="javascript" type="text/javascript"> document.write("Last Modified " + document.lastModified) </script>