Shunko Muroya, Japanese Advisor, Curriculum Branch, Alberta Education
Email: shunko.muroya@gov.ab.ca          Tel: +1-780-415-6165          Fax: +1-780-422-3745

Uploading a Web page with images to the server
     Introduction
     Uploading the “index.htm” file
     Creating a subdirectory at the server
     Uploading images to the server

It is always a good idea to have a folder and to save all images you are going to use for your Web site in the folder so that you know exactly where you can find them. This will make it very easy when you need to insert them into your Web pages.
 
To create a new folder on the desktop, go to the desktop. Click the “Show Desktop” button in the “Quick Launch” just next to the Windows “Start” button (see “Before we start” in the Week 1 Instructions). On the desktop, move the cursor to where there is nothing and right-click. A menu appears. Click on “New,” then click on “Folder”.  A new folder will appear.
 

Rename the “New Folder.”
 
Right-click on the “New Folder,” click on “Rename” in the menu window, press the “Delete” key to delete the folder name (“New Folder”) in the box, type in a name (any name will do as long as you remember it. We name it “Images”here), then press the “Enter” key.
 

 
This process for renaming a folder can be applied to rename any folder or file. Renaming files and folders will come in handy later on, so please remember how to do it.

Making copies of photographs is necessary so that you don’t lose the original photographs.
 
Copy photographs you are going to use and paste them into the “Images”folder. (Please copy at least three photographs for practice sake.)
 
Open the folder where you keep your photographs, right-click on a photogrph, click on “Copy.”  Open the “Images”folder (if it’s already open, then click on the open window button of the “Images” folder at the bottom (see “Week 1— Before we start”), move the cursor in the folder, right-click, and then click “Paste.”
 
If you have more than one photograph in a row that you want to copy and paste, the following way would be more effective.
 

1. Highlight the photographs you want to copy. Move the cursor to point A (just outside the file name), click and drag to B (keep pressing the button down, move the cursor to B and release the button).
   　

2. Right-click and click “Copy.”
   　

3. Move the cursor to the “Images” folder. Right-click and click “Paste.”
    
   

Photographs and images can be displayed in several different ways in the folder. If you click “View” in the taskbar, you will see several display options. By clicking one of these options, you can switch the display mode.
 
“Details” display mode is handy as you can see the file size (xxxKB) of each photograph/image. You need to know the file size of photographs so that you know a proper reduction rate when you reduce the photographs.
 

 
“Thumbnails” display mode is also very handy because you can see what the photographs and images look like without opening them.
 

There are other image file types, but only “.jpg,” “.png” and “.gif” files are permitted on the contest Web sites (See “Contest Guidelines, C. Technical Regulations, 3”).
 
“.jpg” and “.png” files are usually for photographs and “.gif” files are usually for illustrations.
 
You need to be careful about using photographs on your Web site because photographs can be very large (which means a long loading time for viewers and a lot of server space) if you use them right out of your digital camera.

With newer or high-end digital cameras, some photographs can be easily over 1,000KB, which is too heavy for Web page use. It would be better to keep the file size of a photograph no more than 100KB.
 
We will use a program called Microsoft Paint to reduce the size of a photo without losing too much of the photograph quality. “Paint” comes with Microsoft Windows, so all the computers running on Microsoft Windows should have “Paint.”  By using “Paint,” you can reduce the size of a photograph easily (both physical size — length x width, and file size — kilobyte or KB).

1. Click “Windows Start” button, click “All Programs,” click “Accessories,” then click “Paint” to launch the program.
   　

2. In the “Paint” taskbar, click “File” and click “Open.”
    
   
   　

3. The “Open” dialogue box will appear. Click ▼ at the end of “Look in” box to open the pull-down list.
   In the pull-down list, click on “Desktop”
    
   
   　

4. Double-click on the “Images” folder to open it and then double-click on the photograph you are going to work on.
    
   
    
   Like the display option function in Step K-4, you can choose the display options in the “Open” dialogue box as well.
   
   If you need to know the file size, click on “Details” in the “View Menu.” If you need to know what photographs/images look like, click on “Thumbnails.”
    
   
   　

5. The photograph you chose will appear in the “Paint” screen. Click on “Image” in the taskbar and click on “Stretch/Skew.” The “Stretch and Skew” dialogue box will appear. Type in an appropriate reduction rate in % in both “Horizontal” and “Vertical” boxes and click “OK.”  The photograph will reappear in the reduced size you designated.
    
   
    
   Just pick a photograph and change it to different sizes to see how it works.
   
   See the following chart for approximate file size and dimensional change

   Original Size	Reduction Rate	New File Size	Approx. Dimensions (mm)
   1,347KB 600mm x 450mm	40%	139KB	240mm x 180mm
   	30%	85KB	180mm x 135mm
   	20%	44KB	120mm x 90mm
   	10%	19KB	60mm x 45mm

6. After reducing the size, you need to save the photograph. Click “File” and click “Save As.” The “Save As” dialogue box will appear. Type in a new name in the “File name” box. Only Roman letters in lower case and numbers without spaces are allowed for Web page file names. So please make sure to name the photograph with lower case Roman letters and numbers with no spaces. If you are going to use numbers, it would be a good idea to make them serial numbers starting at 001. After you type in the name, make sure the file type is indicating “JPEG” in the “Save as type” box and click “OK.”
    
   
    
7. You can do the same (minimizing/reducing) to any image files by following Steps 1 to 6 above.

You probably have seen small size photographs that you can click to open a new window with a larger photograph of the same image. These small size clickable photographs are called thumbnails.

Thumbnail photographs are used so that viewers don’t have to wait for large photographs to load on their browsers, and they get to choose the photographs they want to look at. A thumbnail is a photograph with reduced physical size (dimensions) as well as file size (KB) (usually less than 10KB).
 
Please note that when you are editing a Web page, you can change the physical size (dimension) of a photograph any way you want, small or large. But changing the physical size of the photograph appearing on the editing screen doesn’t mean that the actual file size (KB) has been changed. The file size (KB) of the photograph remains the same unless you change the file size (shown in K-6 above).
 
To make a thumbnail photograph, just follow Step K-6 above. Reduction size should be somewhere between 5% and 10%. The file size should be less than 10KB. When you save it, name it the same as the original but add “small” so that you know immediately the original and the thumbnail pair.
     Example:     pic001.jpg  and  pic001small.jpg
 
Q: How do I make the thumbnail photograph clickable so that a larger photograph will appear?
A: We will learn this in “Session 5 (Week 5) — Hyperlinks.”

“.gif” images/illustrations are the most commonly used image file types for Web pages, whereas “.jpg” and “.png” are the most commonly used photograph file types for Web pages.
 
Only “.jpg,” “.png” and “.gif” image files are allowed to be used on the contest Web pages. So when you download images and clips from the Internet or any other sources, such as CD-ROM, please make sure you save images other than photographs as “.gif” files.

You might want to use images you find on the Internet for your Web site. Or you might want to use images from a CD-ROM or other sources. As long as the image is copyright free, you can use it on your Web site. (We will learn how to find copyright-free images, such as clipart and wallpaper, on the Internet in K-10 below.)
 
First, let’s learn how to download and save images so that you can use/insert them on your Web page.
 
You need to have the contest logo in the top left-hand-side corner of every page of your contest entry Web site (see Contest Guidelines Section E, Item 10). So, let’s try to download and save the Japanese Web Page Contest logo in your “Images” folder.
 
Go to the Contest Web site (www.japaneseWebpagecontest.com), move the cursor on the logo at top left corner, right-click on the logo and click on “Save Picture As.”
 

 
The “Save Picture” dialogue box will appear. In the “Save in” box, choose the right folder (“Images” here) from the desktop. Make sure “Save as type” indicates “PNG” (if not, click on the pull-down menu and choose “PNG”) and click “Save.”
 

 
The logo should be in the “Image” folder. Go to the desktop and double-click the “Images”folder icon.
 

 
This procedure for downloading and saving an image can be applied to any image. So please remember how to do it.

There are many Web sites on the Internet that offer free downloadable images, such as clipart and wallpaper. Please make sure that the images and clipart you download and use on your Web site are copyright free.
 
Check out the “Links” page of the “Nihongo Memo” Web site (www.nihongomemo.com). There are some good Web sites listed under the “Online language teaching illustration sites” and “Free downloadable clipart” sections.
 
You can also use search engines, such as Google (www.google.com) and Yahoo (www.yahoo.com) to look for Web sites offering downloadable images. Use key words, such as “free clipart” and “free images,” and then you can also narrow it down to “free clipart cat” and “free images soccer, for example.”
 
Search engines such as Google and Yahoo offer “Images Search” service. You can look for images only (no documents and texts) by clicking on “Images” above the search box and typing in what you are looking for. Again, please be careful and observe the copyright laws when you use images downloaded from the Internet.

Let’s try to download and save an image of a cat from a Web site.

1. Go to “UVic's Language Teaching Clipart Library (http://Web.uvic.ca/hcmc/clipart/)” and find an image of a cat on this Web page. Use either “Topic Galleries” or “Keyword Search” to locate an image of a cat.
    
   
   　

2. Right-click on the image and click “Save Picture As.” The “Save Picture” dialogue box will appear. In the “Save in” box, choose the right folder (“Images” here) from the desktop; make sure “Save as type” indicates “GIF” (if not, click on the pull-down menu and choose “GIF”), and click on “OK.” You don’t need to change the “File name” as long as the name doesn’t have space, capital letter and symbols, and there is no file with the same name in the folder. (This process is the same as K-9.)
   　

3. Open the “Images” folder on the desktop and check if the cat image is saved in there.
    
   
   　

There is a lot of drawing software that you can buy. But if you want a very simple drawing program without purchasing it, “Paint” does a good job. It comes with Windows so it’s already installed on your computer.

1. To launch “Paint,” click “Windows Start” button, click “All Programs,” click “Accessories,” then click “Paint.”
   　

2. This software is pretty much self-explanatory, so just try and create some drawings yourself. If you don’t see the “Tool Box” and/or “Color Box,” click “View” in the taskbar and check them. You can also change the dimensional size of the area you work on or the size of the window by dragging the bottom right-hand corner.
    
   
   　

3. Remember to save the drawing that you created as a “.gif” type file (only “.gif” files, “.jpg” and “.png” files are allowed for images on the contest Web sites). The default file type is usually set as “.bmp,” which tends to be a very heavy file.
   　

4. The beauty of the “.gif” type file is that it’s a very small file size (KB). But it also has a drawback. The number of colours you can use for the “.gif” files is limited (256 colours). Sometimes certain colours turn into different ones. If you need to save the original colours, save the drawing as “.jpg” file (the file size will increase a little bit).
   　

5. When you save the drawing you created, you need to minimize the area of the illustration. If you save a drawing as you see below, you are saving the whole area surrounded by the red square. If you use this image in your Web page, a big white empty area will also appear in the page. 
    
   
   　

6. Here’s how you avoid the problem above.
   
   Press “Area selection” button and select an area by dragging A to B. The selected area will be indicated by the dotted line. Move the cursor in the selected area, right-click and click “Cut.” The selected area will disappear.
    
   
    
   In the same window, right-click again and click “Paste.” The selected area will reappear at the top left corner.
    
   
    
   Minimize the area by dragging from A to B. Then save the drawing.
    
   

Adding text/caption to a photograph might be a little tricky. Here’s how to do it.

1. Open a photograph on “Paint” and leave it open.
    
   
   　

2. Open another “Paint” window, type in text in the empty “Paint” window. Press “A (Text button)” in the Tool Box, designate an area for the text by dragging, type in the text, then press “Enter” key. If you need to change font type, size, colour, etc., use the “Text Toolbar.” If you don’t see the “Text Toolbar,” right-click in the text area and click “Text Toolbar.”
    
   
   　

3. Select the area and cut the text (click “Select” button, drag A to B, right-click and click “Cut”).
    
   
   　

4. Go back to the photograph window (Step 1), and paste the text (right-click, click “Paste”) onto the photograph. The text should appear at the top left corner. Right after pasting the text (don’t do anything yet), you should be able to move/drag it anywhere on the photograph. Place it in a desirable location and click once. Don’t forget to save it.
    
   

There are a lot of other things you can do to image files using “Paint.” Try to click all the buttons in the “Tool Box” and see what you can do. The following are some examples you might want to try:

For normal MS Word documents (.doc), you can simply copy and paste images, or drag and drop images. These methods are not recommended for html documents (Web pages) as they either don’t work very well or Web page appearances on browsers are often not satisfactory.
 
In order to place images in a Web page, we will use “insert” function instead.

1. Open the “school name Web site” folder on your desktop, right-click “index.htm” file and click “Edit.” MS Word will launch and open your “index.htm” page.
    
   
   　
2. In session 3 (Week 3), we learned how to use a “table” for Web page layout. Please make sure you have a table on this page for the layout purpose. If you don’t use a table, the images may appear in different locations than the ones where you originally placed them.  
    
   
   　
3. Move the cursor to where you want to place the image. Click on “Insert” in the task bar, click on “Picture” and click on “From File.”
    
   
   　
4. The “Insert Picture” dialogue box will appear. Choose the “Images” folder from the “Look in” pull-down menu (▼), click “logo” and click “Insert.”
    
   
   　
5. The contest logo should appear on the “index” page. The image might be smaller than the original size (don’t ask me why because I don’t know). You can adjust the size by dragging a corner of the image.
    
   
   　
6. Save the “index” page. Click “File” and click “Save” (not “Save As”). Or you can do the same by clicking the “Save” icon in the taskbar.
    
   
   　
7. When you insert an image into a Web page, MS Word automatically creates a folder named “xxxx_files” (xxxx is the name of the file you are editing). Here it’s “index,” so the name of the folder should be “index_files”). MS Word also gives the image a new name (“images00#.jpg, images002.gif, etc.) and keeps it in the “xxxx_files” folder.
    
   Open the “school name Web site” folder and have a look. There should be “index­_files” folder in it. Open the “index_files” folder and you will find “image001.png” in it. Don’t worry about “filelist.” If you resized the logo in step 5 above, there should be another file “image002” as well.
    
   
    
   You don’t have to do anything to these folders and image files in it. Just close them by clicking “X” in the top right corner of the folder.
   　
8. Check if the logo image appears correctly. Open the “index” file using a browser (Internet Explorer, etc.) by opening the “school name Web site” folder on the desktop and double-clicking “index” file.
    
   You should be looking at the following:
    
   
    
   If the logo image doesn’t appear, please go over steps 1– 8 above.

1. Place the cat image in the cell right beneath the contest logo cell. Place the cursor in that cell, click “Insert” in the taskbar, click “Picture” and click “From File.”
    
   
   　
2. The “Insert Picture” dialogue box will appear. Choose the “Images” folder from the “Look in” pull-down menu (▼), click “cat-vb” and click “Insert.” The cat image should appear as follows:
    
   

The cat image is to the right of the cell but we want the image to be in the centre of the cell.
 
Click on the cat image. The image will be indicated by a black square. This black square for images works the same way as when you highlight text. It means that the area is ready to be edited.
 
Click the “Centre” button* in the taskbar. The cat image should move to the centre of the cell. You can place the cat image to the right of the cell by clicking the “Align Right” button.*
 

 
* If you don’t see the “Centre” button or “Align Right” button, right-click an empty part of the taskbar, and make sure “Standard” and “Formatting” are checked in the taskbar function menu.
 

 
　

This time we’ll place a photograph in the cell beneath the cat cell.
 
We’ll use the photo that we reduced, but it might still be too big for the cell. So let’s make the cell larger by merging the cell next to it.

1. Move the cursor to the cell beneath the cat cell and drag it to the next cell to the right. Two cells should be highlighted.
    
   
   　

2. Click “Table” in the taskbar and click “Merge Cells” in the “Table” menu. The two cells should be merged.
    
   
    
   
    
   You can do this cell merging action either horizontally or vertically or both at the same time.
   　

3. Insert one of the photographs in the merged cell.
    
   Move the cursor in the merged cell, click “Insert” in the taskbar, click “Picture” and click “From File.”
    
   The “Insert Picture” dialogue box will appear. Choose the “Images” folder from the “Look in” pull-down menu (▼), click the photograph you want to use here and click “Insert.”
    
   The photograph should appear as follows:
    
   
   　

4. Insert the drawing you created using “Paint” next to the cat image.
    
   Move the cursor in the cell next to the cat image, click “Insert” in the taskbar, click “Picture” and click “From File.”
    
   The “Insert Picture” dialogue box will appear. Choose the “images” folder from the “Look in” pull-down menu (▼), click the image you created, and click “Insert.”
    
   The image should appear as follows:
    
   
   　

5. Save the “index” page.
    
   Click “File” and click “Save” (not “Save As”). Or you can do the same by clicking the “Save” icon in the taskbar.
   　

6. Let’s check the “index_files” folder and see if the images on the “index” page are saved in there correctly.
    
   Open the “school name Web site” folder and open the “index_files” folder in there. There should be at least three “imageoo#” files and “filelist” in there. Some numbers might be missing.
    
   Don’t worry. When you resize an image, or replace an image with another one, MS Word automatically names those image files with numbers in sequence, and the numbers of the images that you deleted or replaced are the ones that are missing. 
    
   
    
   
   
   At this point, check the “index files” folder name carefully.
   
   For those who are using MS Word English version:
    
   Your folder name should be “index_files” (index underscore files). If so, you don’t have to do anything. Just close them by clicking “X” at the top right corner of the folder, and move on to next step 7.
    
   For those who are using MS Word Japanese version
   or the folder name is appearing as “index.files” (index dot files) :
    
   If your folder name appears as “index.files” (index dot files), click here and follow the instructions in the “Solution for folder name” page before you move on to next step 7.
    

7. Check if the photograph appears correctly. Open the “index” file using a browser (Internet Explorer, etc.) by opening the “school name Web site” folder on the desktop and double-clicking “index” file.
    
   You should be looking at the following:
    
   

We are using MS Word to create Web pages, and as we saw in Section L “Inserting images into a Web page,” MS Word automatically creates a folder to keep the images for the page.
 
What we need to do is create, at the server, a directory environment which is exactly the same as your Web site folder (“school name Web site” folder).
 
Your “school name Web site” folder and the Geocities server are at the same directory level.
 
You have “index.htm” in the “school name Web site” folder. So you upload “index.htm” to your Geocities server.
 
You have the “index_files” folder in the “school name Web site” folder. So you need to have a folder/subdirectory named “index_files” in your Geocities server.
 
You have some “image00#” files/images in the “index_files” folder in the “school name Web site” folder. So you upload some “image00#” files/images in the “index_files” subdirectory in your Geocities server.
　

Every time you edit (make changes) a Web page, you need to upload the page to the server. You have done this in Session 2 (Week 2) and Session 3 (Week 3) already, so you should be familiar with the process by now.

1. Go to Yahoo! Canada (http://ca.yahoo.com/), click "Geocities" in the left-hand menu and sign in. Then go to the "File Manager" page.
   　
2. Click “New” under “Subdirectories.”
    
   
   　
3. The “Create Subdirectory” page will appear. Type in “index_files” in the box and click the “Create Subdirectory” button. PLEASE BE CAREFUL WHEN YOU TYPE IN THE SUBDIRECTORY NAME. It must be exactly the same as the name of the folder in the “school name Web site” folder. It’s case sensitive as well. The underscore (_) cannot be replaced with hyphen (-). To type underscore, press the “Shift” key and the “hyphen” key at the same time.
    
   
   　
4. “Index_files” should appear subdirectory on the File Manager page.
    
   

1. Click “index_files” (see the illustration above). The “index_files” subdirectory page will appear. Click “Upload To” button.
    
   
   　
2. The “EZ Upload” page will appear. Upload all the files/images in the “index_file” folder. The way you upload images is exactly the same as uploading htm files. Please make sure that the “Automatically convert filenames to lowercase” box is checked.
    
   If you need more than five boxes, choose a number in the “Number of Files to Upload” box and click the “Display” button. You can upload up to 25 files at a time.
    
   
   　
3. Make sure all the files/images are uploaded in the “index_files” subdirectory.
    
   
   　
4. Let’s check if all the images appear on the “index.htm” page on the Internet. Right-click your Web site URL and click “Open in New Window.” This will launch a new window of the browser (Internet Explorer).
    
   
   　
5. If you see the following page on the Internet, you are done. I you don’t, please go over M-1 to M-4.
    
   
   　

Also type in the following information in the text area:

Copy the following email address and paste it into the recipient address area (To…).
      shunko.muroya@gov.ab.ca