Please read and follow the instructions below. There is a task at the end of Week 6. Week 6 task is due on Monday, March 19.
 
Section Q “Web page using frames” is optional. I would like you to read the Introduction part of Section Q, and then, if you wish, you can skip the rest of Section Q and move on to Section R.
 
For those who skip Section Q, your task is “Week 6 Task A.” For those who want to learn “Web page using frames,” your task of the week is “Week 6 Task B."

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

Introduction
 
In general, there are two types of websites in terms of page appearance/page width as in the table below. Go to each of the example websites and change the width of the browser window by dragging the side of the window and see how it works:
　

Layout table width – Type A
 
This is the type we learnt in Session 3 (Week 3) - Section H, and is probably the most commonly used type. You already know how to create this type of web pageR. Remember in Session 3 (Week 3) – H-3-3, you set the layout table width as “100%” so that the entire page will appear regardless of the browser window width.

Layout table width – Type B
 
If you would like your page to always appear in a fixed width, do the following:

1. Highlight the table. Move the cursor onto 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/highlighting the entire table) by clicking on the crisscross at the left top corner of the table.
    
   
   　
2. Click “Table”, and click “Table Properties” in the task bar. The “Table Properties” dialogue box appearR. Click the “Table” tab, make sure the “Size” box is checked, “Measured in:” is “Inches (or, mm)”, and choose the width you want your contents to appear in in the “Preferred width:” box (use the small black triangles to change). For example Nihongo Memo is set as “8.5inches/215mm.”
   
   When you use the Type B table layout, usually the table alignment is set as “Center.”
    
   
    
   Click “OK” at the bottom.
   　
3. Now the layout table should appear in the width you set.
    
   
   　
4. When you use the Type B table layout, usually the page background colour (or page background image) is different than the table background colour.
    
   To choose the page background colour, click “Format,” click “Background,” and click a colour you like.
    
   
    
   To choose the table colour, click “Table” and click “Table PropertieR.”
    
   
    
   The “Table Properties” dialogue box will appear. Click the “Table” tab and click the “Borders and Shading” button. The “Borders and Shading” dialogue box will appear. Click the “Shading” tab and choose a colour you like (including white). Click “OK” and click “OK.”
    
   
    
   Remember you can also change colours of any cell in the layout table. Just highlight a cell or cells and do the same as above.
   　
5. The page should look like the one below.
    
   

Web page using frames

Introduction
 
Some websites/web pages use frameR. In a page using frames, the page is divided into separate partR. Each part is a web page and has its own URL (web address) so that each part/page can display different contentR. Most of the time, frames are used in “home” (index) page.
 
Go to the Japanese Web Page Contest website. This page is made of three frameR. Click any link in the left column. The top part and the left column stay the same but the contents in the large rectangular frame change every time you click a link in the left column.
 

 
Using frames in the “home” page helps the site visitors to navigate the site easily because the site menu (links to the pages in the site) is always there and the visitors don’t have to click many times to go back to the “home” page to check the site menu to go to another page.
 
The following instructions on how to create a web page with frames are optional. You may not need them for your contest website. If you would like to create a web page with frames, follow the instructions below.
 
If you do not wish to learn how to create a web page with frames, skip the following part of Section Q and scroll down to Section R.

Creating a web page using frames
 
We will create a web page with frames which looks like the illustration below.
 

1. Let’s create a new web page in a new website folder because we are trying totally different things here and you want to keep the one you created as a back up. First, create a new folder on your desktop and name it (“New school website” for now).
   　

2. Open a new blank MS Word document (click “File” and click “New”). In the new document, click “Format,” click “Frames” and click “New Frames Page.”
    
   
   　

3. The page automatically becomes the web page format. Save this page as your “index” web page. Click “File,” click “Save As,” choose the “new school website” folder under desktop from the “Save in” pull-down menu, type “index,” in the “File name” box, choose “Web Page” (please make sure to choose “Web Page”) from the “Save as type” box, and click “OK.”
   　

4. The “Frames” tool bar should be there. Click “New Frame Above” in the “Frames” toolbar and drag the line to where you want it to be. If the “Frames” toolbar is not there, click “Format,” click “Frames,” and click “New Frame Above,” then drag the line to where you want it to be.
   
   
    
   
   　

5. Move the cursor to the lower part, click “New Frame Left” and drag the line to where you want. If the “Frames” tool bar is not there, click “Format,” click “Frames,” and click “New Frame Left,” then drag the line to where you want it to be. You have three frames in the page now.
    
   
    
   If you created a frame in a wrong place, click “Delete Frame” in the “Frames” tool bar (or click “Format,” click “Frames,” and click “Delete Frame.”
   　

6. Here’s the funny part. I’m not sure if this is the right way to do it, but it worked for me. So here we go:
    
   We will name each of the frameR. For now, we’ll name the top one “head,” the left one “menu” and the big one “home” (lower case only), and we will not go through the normal way of naming a file (“File” and “Save As”), but we type in the name in each frame, and then click the “Save” icon (or click “File” in the task bar and click “Save”).
    
   Open the “New school website” folder on the desktop and check that the three files are saved.
    
   
    
   Then double-click the “index” files to see how the page appears on your browser.
    
   
    
   At the moment, it doesn’t look very nice. So we will make some cosmetic changeR.
   　

7. Go back to the editing page on MS Word window. Move the cursor into the “head” frame, and do the following:

   -	Delete the word “head” and type your website title
   -	Change the font type, font size and font colour
   -	Set the text so that it’s located in the center of the frame
   -	Set a background colour for the frame

   
   　

8. The cursor is still in the “head” frame. Click “Format,” click “Frames,” and click “Frame PropertieR.” The “Frame Properties” dialogue box will appear.
   
   Click the “Frame” tab. In this tab, you can change the height of the “head” frame manually. If you set the height in inches (or mm), the head frame will always appear in that height.
   
   Click the “Borders” tab. In this tab, click the “No borders” radio button on. Also uncheck the “Frame is resizable in browser” box for now. Click “OK” and close the “Frame Properties” dialogue box.
    
   These “Frame Properties” settings can be changed later if you wish. 
    
   
    
   
    
   　

9. Move the cursor into the left frame, click “Format,” click “Background,” and click a colour you like.
    
   If you want to change the background colour of the large rectangular frame, you can do so in the same way as above.
   　

10. Click the “Save” icon, and check how the “index” page would look in your browser. The browser should be still open. Click the “Refresh” button (if the browser is not open, double-click the “index” in the “new school website” folder).
     
    

Basic website design

For a contest entry website, the teacher would create the “home” page and make links to the web pages which his/her students created.
 
To get some ideas for your contest entry website, please visit the following sample websites created using MS Word and click any clickable links (please note that these websites do not have their own domain names as they are part of “Nihongo Memo”):
 
     ABC小学校日本語プログラム ホームページ
     http://nihongomemo.com/resources/abcpR.htm
 
     ABCセカンダリーカレッジ日本語プログラム ホームページ
     http://nihongomemo.com/resources/abcsc.htm
 
You can also visit the participating websites of the 2005 Contest. Go to the Contest website and click “2005 Galleries” and click the school names listed in each division:
 
     www.japanesewebpagecontest.com

Menu/list in the “home (index)” page
 
The most typical ways menu/list of contents presented in the “home (index)” page are as follows:

Have a look at the following examples for menu/list in the “home (index)” page :

Left column vertical menu
 

　

Right column vertical menu
 

　

Bar menu under the website title at the top
 

　

Menu using a table in the middle
 

　

Menu using bullet points in the middle
 

　

Bar menu at the bottom
 

　

Vertical menu/list using a table
 

The easiest way to create a vertical menu/list is to insert a table in a cell of the page layout table.

1. You probably need to merge some cells to make a room for thiR. (See H-9)
   　

2. Move the cursor in the cell and insert a table with one column and X number (depends on how many items you need) of rowR. (See H-13)
   　

3. Type in a page title in each cell and make a link to the respective page. (See O-4)

Bar menu under the website title at the top
 

 
Again, the easiest way to create a bar menu menu/list is to insert a table in a cell of the page layout table.

1. Move the cursor in the title cell and insert a table with X number (depends on how many items you need) of columns and one row. (See H-13)
   　

2. Type in a page title in each cell and make a link to the respective page. (See O-4)

Menu using a table in the middle
 

1. Move the cursor in a cell and insert a table with X number (depends on how many items you need) of columns and rowR. (See H-13)
   　

2. Type in a page title in each cell and make a link to the respective page. (See O-4)

Menu using bullet points in the middle
 

1. Move the cursor in a cell, click “Format,” click “Bullets and Numbering,” and choose the type of bullet you like.
   　

2. Type in a page title at the first bullet and press the “Enter” key. The next bullet will appear.
   　

3. After listing all the bulleted item, make a link from each text to the page. (See O-4)

Bar menu at the bottom
 

 
The easiest way to create a bar menu at the bottom is to just use normal texts with “|” in between texts, then make a link from each text to the page. (See O-4)
 
I’m not sure where to find “|” (vertical bar). You can visit any website, then copy and paste it.

Create a new “home” (index.htm) page (See Section S). In this page you need to have/do the following:

Create a page with Type A layout table. In this page you need to have/do the following:

Create a page with Type B layout table. In this page you need to have/do the following:

Make sure the following before you upload the files to the server:

Make sure the following on the Internet:

Also type in the following information in the text area:
     -          your name
     -          your school name
     -          telephone number to reach you at school (optional)
     -          your province
     -          your country
     -          your Yahoo! Password*
     -     questions or suggestions (if any)
 
* Your Yahoo password is required strictly for technical purposes for the course instructor to assist course participants when technical problems arise. Please do not use this yahoo ID and password for any other purpose than this course and the Japanese Web Page Contest.

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

Please send the email by Monday March 19. Your task will be checked and you will receive a confirmation e-mail.
 
You will also be receiving an evaluation form for the course soon. I’d appreciate it if you can fill in the form and send it back to me. Thank you.
 
That’s it!! You are done. おつかれさまでした。

Create a new “home” (index.htm) page using frames (See Q-1 to Q-3). In this page you need to have/do the following:

Create a page with Type A layout table. In this page you need to have/do the following:

Create a page with Type B layout table. In this page you need to have/do the following:

Make sure the following before you upload the files to the server:

Make sure the following on the Internet:

Also type in the following information in the text area:
     -          your name
     -          your school name
     -          telephone number to reach you at school (optional)
     -          your province
     -          your country
     -          your Yahoo! Password*
     -     questions or suggestions (if any)
 
* Your Yahoo password is required strictly for technical purposes for the course instructor to assist course participants when technical problems arise. Please do not use this yahoo ID and password for any other purpose than this course and the Japanese Web Page Contest.

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

Please send the email by Monday March 19. Your task will be checked and you will receive a confirmation e-mail.
 
You will also be receiving an evaluation form for the course soon. I’d appreciate it if you can fill in the form and send it back to me. Thank you.
 
That’s it!! You are done. おつかれさまでした。