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

Web page and images
     Introduction
     Web page and images
     Accompanying file folder
     Uploading image

 
Because web pages are written in a special code called “html”, arranging the layout of a page is not exactly the same as other documents/files such as Word document (.doc), PowerPoint (.ppt), Excel (.xls). The easiest way to arrange the layout on web pages would be using tables.

Double-click your “school name website” folder on the desktop and open it. There should be “index.html” in the folder. Right-click it and click “Edit”. It will open as a Microsoft Word document.

We will remake the whole “index” page using a table, so delete the texts you created (the easiest way to do this is to press the “Ctrl” & “A” keys at the same time to highlight/select all, and hit the “Delete” key).

1. click “Table” in the task bar, click “Insert”, then click “Table…”
    
   
   　
2. “Insert Table” dialogue box appears. Change the numbers of the columns and rows as you wish. We’ll set it 3 for columns and 10 for rows for now here then click “OK”.
    
   
   　

3. A table should appear. Note that the table is all the way across the screen.
    
   
   　

4. If the table is spread all across the screen as shown above, you are fine. But you might want to check the following (H-3) to learn how to change the table width.

1. If the table is not all the way across the screen (as seen below), you need to change the Table Properties to make the table wider.
    
   
    

2. Move the cursor on the table, click “Table” in the task bar, click “Select”, then click “Table” to highlight the whole table. Or you can do the same (selecting/high-lighting the entire table) by clicking on the crisscross at the left top corner of the table.
    
   
   　

3. click “Table”, and click “Table Properties” in the task bar. “Table Properties” dialogue box appears. click the “Table” tab, make sure the “Size” box is checked, “Measured in:” is “Percent”, “Preferred width:” is “100%” (use the small black triangles to change) and then click “OK” at the bottom.
    
   
   　

4. Now the table should be all the way across the screen.
    
   

1. Because you are using the table just for layout purposes, you want the table itself to be invisible.
    
   Get the “Table Properties” dialogue box out (Move the cursor on the table, click “Table” in the task bar, click “Table Properties").
    
   In the “Table Properties” dialogue box, click “Table” tab, then click “Borders and Shading…” button. The “Borders and Shading” dialogue box appears. click the “Borders” tab, click the “None” box under “setting:”, then click “OK” at the bottom and click “OK” at the bottom of “Table Properties” dialogue box.
    
   
    

2. The lines of the table should be shaded now on the Word screen. These shaded lines are called “Gridlines”.
    
   
   　

3. If the “Gridlines” are not showing, move the cursor on the table, click “Table” in the task bar, and click “Show Gridlines”.
    
   
    
   When you view this web page using a browser, the table won’t appear, but the contents (text, images, background, etc.) you place in the table will appear as you placed them. click “Save” icon, go to desktop, open “school name website” and double-click “index”. Nothing should appear on the browser screen at this stage. If you still see the table there, repeat the processes H-1- to H-4.

1. You can type in any text in any cell in the table now. Try to type in your website name in the middle cell of the first row. Then arrange the font type, size and color (F-3, 4, 5) and click “Save” icon.
    
   
   　

2. Then try to view the page on the browser. You still have the browser open from the previous step H-4. click “Refresh” button to reload the page (or see process D-1 to D-4). If you can see the text but you don’t see the table, then you are fine. If you still see the table, repeat H-4.
    
   

1. Are you experiencing a problem like the following image (the text breaks into two lines even though the length of the text is shorter than the length of the cell)?
    
   
    

2. The problem might have to do with the settings of the columns. Try the following:
    
   Get the “Table Properties” dialogue box out (Move the cursor on the table, click “Table” in the task bar, click “Table Properties"). click “Column” tab and make sure the “Size” box is unchecked, then click “OK” button at the bottom of the dialogue box.
    
   
   　

3. Move the cursor on the table, click “Table” in the task bar, click “AutoFit”, and click “Distribute Columns Evenly.”
    
   
   　

4. Then try to view the page on the browser again. Go to the browser and click “Refresh” button to reload the page.
    
   

You will need to make changes to the table as you design your web page the way you like. Changes include the following:

When you make a change to the table, you need to select the area where you want to make a change first, and then you make a change by choosing an action from the “Table” menu in the task bar. The selected area will be highlighted. The area you can select is:

If you want to change the width of the columns and height of the rows, move the cursor exactly on the line which you would like to change. Make sure the cursor becomes something like “←‖→”, then press the left button of the mouse. Keep pressing it down, move the cursor to where you want the line and release the button (this series of actions is called “drag”). The line should be where you wanted it to be (where you released the button).
 

 
You can also change the height of each row by adding blank lines. Move the cursor to the row where you want to change the height, and hit the “Enter” key to add a blank line. Please remember that if you change the height of the row by this method, then you can’t use the “Vertical Alignment” function (see H-12) to designate the location of an item (text/photo/image) to the center of the row.
　

Other table functions
 

You can also do some other table functions listed below to the table by doing basically the same maneuvering seen in Steps H-9 above. Try them and see how it works by selecting a cell by moving the cursor to the cell, or selecting column(s)/row(s)/cells by dragging, and then click “Table” and click the action you want:

You can designate the location of an item in the cell horizontally (left, center or right). The item can be a text, a photo, or an image.
 
It’s usually set “Align Left” as default.
 

 
Highlight the text (or photo/image) and click “Center” to locate the item in the center of the cell.
 

 
Highlight the text (or photo/image) and click “Align Right” to locate the item to the right of the cell.
 

You can designate the location of an item in the cell vertically (top, center or bottom). The item can be   a text, a photo, or an image.
 
It’s usually set at the top as default.
 

 
Highlight the text (or photo/image), click “Table” in the task bar, click “Table Properties”. “Table Properties” dialogue box appears. Click “Cell” tab, click “Center”, and click “OK”.
 

 
Highlight the text (or photo/image), click “Table” in the task bar, click “Table Properties”. “Table Properties” dialogue box appears. Click “Cell” tab, click “Bottom”, and click “OK”.
 

You can insert a table in a cell. Again, you can make the table you insert either visible or invisible, and you can use this function in a various way such as for a menu bar and for a list.
 
Move the cursor in the cell you want to insert a table, click “Table” in the task bar, then click “Insert Table”. “Insert table” dialogue box appears. Give the column and row numbers you want for the table, and click “OK”.
 
    

To designate a color for the background of the web page, click “Format” in the task bar, click “Background”, then click the color you like.
 
  
 
You can have more color variation if you click “More Colors…”. “Colors” dialogue box appears. Click “Standard” tab, chose the color you like (256 colors), compare the new color and the current color at the right-hand bottom corner, then click “OK”.
 

 
If you are still not happy about the color, click “Custom” tab, move the cursor and click to see the new color that appears at the right-hand bottom corner. Keep moving and clicking until you find the color you like, then click “OK” to confirm the color.
 

If you click “Fill Effects…” the “Fill Effects” dialogue box appears. There are four tabs in the box:

You can use any photo, image, or wallpaper as background.
 
Just remember if you use a large size photo as a back ground it will take a long time for the visitor/viewer to download. This is why wallpaper materials for web pages are usually a small image or a narrow strip of image. The browser (Internet Explorer) repeats the image on the background.
 
To make it easy, we will use the image below for learning this skill. To use the image, you need to save it first. Move the cursor on the image, right-click, and click “Save Picture As…”. “Save Picture” dialogue box appears. Click pull-down menu “Save in: ▼”, click “Desktop”, double-click “your school name website” folder, and then click OK. The image has been saved in “your school name website” folder.*
 





 This image is from “染井や” website 
 (http://www.sun-inet.or.jp/~sakura/someiya/someiya.html).

 
Now go back to MS Word “index” screen, click “Format” in the task bar, click “Background”, click “Fill Effects”. “Fill Effects” dialogue box appears. Click “Picture” tab, and click “Select Picture…” button.
 

 
“Select Picture” dialogue box appears. Click “Look in: ▼”, click “your school name website” folder, click the image you just saved in there, then click “Insert” button. You will go back to “Fill Effects” dialogue box. Click “OK”. The image should appear as background.
 

 
We used a small image for the background above. Although you can use any larger image or photo for the background, it’s not recommended because it will increase the loading time on the viewers’ side.
 
There are many websites that offer free background images and wallpapers for non-commercial use. Use search engines such as “Google” and “Yahoo!” to look for them. You can also find some links to websites that offer free Japanese style web resources at the “Links” page of “Nihongo Memo”. (www.nihongomemo.com)

Select any cell/row/column (see H-7), click “Table”, then click “Table Properties. In “Table Properties” dialogue box, click “Borders and Shading…” button at the bottom.
 

 
In “Borders and Shading” dialogue box, click “Shading” tab, choose a color you like (you can click “More Colors” button and choose from either “Standard” or “Custom” as well). Keep clicking on “OK” till the dialogue boxes disappear.
 

 
You should have the “index” screen as below. Try to view the page on the browser again. Go to the browser and click “Refresh” button to reload the page (or open “your school name website” folder on the desktop, and double-click “index”).
 

When you use any picture (photo, image, wallpaper) on your web page, that picture is not actually included in the page. The page only has the URL (web address) of the picture in it, and the browser retrieve the picture from the server and display the picture in the designated location of the page for you. So when you upload a web page to the server, you need to upload the pictures separately to the server as well.
 
You have seen a web page with a small red X in a blank area as below. This happens when the image is not uploaded properly or an image with a wrong file name is uploaded to the server. The browser (Internet Explorer) can not retrieve the right image and leaves the area blank with a red x to tell you that an image is missing.
 

All the images that you use in your web page will be saved automatically in a folder that the MS Word automatically creates. Open “your school name website” folder on the desktop. There should be a folder named “index_files”. This is where MS Word saved the image. Double-click the folder and open it. There should be “image001” in the “index_files” folder. This “image001” is the image you are using for the background. Double-click “image001” to see the image. You will see the same image you used for the background. You may close them for now.
 

You used an image for the background of the “index” page in the Section I above, so when you upload the “index” page, you need to upload the image as well.
 
First you need to upload/update “index” page (index.htm) to the server. Follow the instructions C-1 to C-9. At this point, your background won’t show. So you need to upload “image001” to the server.
 
To upload the images you used in your web page, you need to create the same directory environment (“index” page and “index_files” folder in one directory, and “image001” in “index_filex” folder) at the server.
 
On ”File Manager” page, click “New” button under “Subdirectories”. “Create Subdirectory” page appears. Type in the folder name of which the image is saved. In this case it’s “index_files”. (This has to be done very carefully. The subdirectory folder name must be exactly the same as the folder name of which the image was saved. The underscore “_” has to be the underscore. It can not be replaced by hyphen “­-“. To type the underscore, press down “Shift” key and press hyphen “-“ key). Then click “Create Subdirectory” button.
 


In the “File Manager” page, make sure that there is “index_files” folder that you just created, and click it to open that subdirectory. A similar “File Manager” page appears. Make sure that “index_files” folder is open, and click “Upload To” button.
 

 
“EZ Upload” page appears. Click “Browse…” button. “Choose file” dialogue box appears. Click “Look in: ▼”,  look for “your school name” folder in the desktop, double-click “your school name website” folder, double-click “index_files” folder, and click “image001”, and then click “OK” at the right-hand bottom corner of the “Choose file” dialogue box. Make sure the file name “image001” appears in the rectangular box next to “Browse button, also make sure” Automatically convert filenames to lowercase” box is checked, then click “Upload Files” button.
 

 
Make sure “Upload results” indicates “”image001.gif – uploaded successfully, then click “File Manager”. You can also check it on the “File Manager” page. Click “index_files” to open the subdirectory and see if “image001.gif” is in there.
 

 
Now it’s time to see if the background appears correctly. Click “View”. You can also open the “index” page without leaving the “File Manager” page by right-clicking on the URL, and clicking on “Open in New Window”.
 

 
If the background doesn’t appear, there is something wrong in the process above. Try to re-do the Step J-3.

Make this column narrower (see H-8).
Make the height of the rows in this column even (see H-10).
Designate a color to this column (see I-5).

Change the size of the text “ABCD高校ウェブサイト” to 36 (see F-4).
Designate a color to the text (see F-5).
Designate another color to the cell so that the text is easy to read (see I-5).

Type in “コンテスト” in the area C.
Change the text size to 36 (see F-4).
Align the text so that it is located right in the middle of the cell (see H-11, H-12).

Type in the name of your city in katakana.
Change the text size to 36 (see F-4).
Align the text so that it is located at the right-hand bottom corner of the cell (see H-11, H-12).

Use the image below for the background (see I-4)



  This image is from “染井や” website
   (http://www.sun-inet.or.jp/~sakura/someiya/someiya.html).

Also type in the following information in the text area: