Creating Web Pages Course

Creating Web Pages / Websites Using MS Word - Session 2

Click on the Word icon to download the instructions on this page in MS Word file format. (doc. 454KB)

Click on the icon to download the instructions on this page in PDF file format. (PDF 688KB. You need Adobe Reader to download.)

Acrobat Reader software is available for free download from the Adobe Systems web site. To obtain Acrobat Reader, click the icon.

You may be already familiar with some contents included in this session. Please be aware that this course is designed to allow beginning level computer users to explore all steps necessary to create web pages/websites.

For those who are taking the correspondence course:

Please read and follow the instructions below. There is a task for Week 2 at the end. As you work through the instructions, you will complete the task. Week 2 task is due on Wednesday February 14.

If you have any questions, please contact Shunko Muroya.

Shunko Muroya, Japanese Advisor, Curriculum Branch, Alberta Education

Email: shunko.muroya@gov.ab.ca Tel: +1-780-415-6165 Fax: +1-780-422-3745

Session 2

D. Editing web pages (HTML documents)

E. Setting Web Options and Page Properties for web pages
Setting Web Page Options
Setting Page Properties

F. Fonts
          Fonts recommended for Japanese
          Fonts recommended for English
          Changing font type
          Changing font size
          Font colour
          Bold font
          Text background colour

G. Updating/renewing a web page

Week 2 Task

Editing web pages (HTML documents)

Introduction

When you didn’t finish working on a page, come up with a better idea, need to add something or find a mistake, you will need to edit the web pages you created. "Edit" here means to change, add, rewrite, update and/or re-design.

You cannot edit html web pages on a browser screen (e.g., Internet Explorer). You have to open the page with web page building software and edit it. Here we use Microsoft Word.

D-1

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

D-2

Make the necessary changes as you would normally do on a MS Word document. Add the name of your city and province/state in Japanese in the second line. Then click on the "Save" icon in the task bar. Or, you can do the same by clicking on "File" in the task bar, then clicking on "Save."

D-3

Let's check if the change appears correctly as a web page on the browser.

Go to the desktop (See Week 1, A-5). Double-click on the "school name website" folder to open it, then double-click the document you just edited ("index") in the folder. Your browser should start automatically and open the web page you just edited.

Keep this web page open on the browser as long as you are editing it so that you can check any change you make on the browser.

D-4

Let’s make another change and check if the change appears correctly on the browser.

Go back to the editing window on MS Word by clicking the "index" MS Word document in the Windows bar. This will bring the MS Word window up to the top of the screen.　

Add a new line "日本語プログラム" above the school name, and then click on the "Save" icon in the task bar.

You have the above "index" page already open on the browser. Go back to the page on the browser by clicking the "school name" page in the Windows bar, which will bring the browser (Internet Explorer) window with the web page you are working on back on top of the screen.

At the moment you don’t see any change on the web page. Click on the "Refresh" button to reload the page.

The following updated page should appear.

Please note: The processes in Steps D-1 to D-4 above (moving back and forth between the MS Word window and the Internet Explorer window) are basically the way you check how your web pages appear before you upload them to the Geocities server. You need to do this quite frequently when you are creating or editing web pages because pages in the MS Word screen do not necessarily appear exactly the same on the Internet Explorer screen. Make sure you save the files/pages before you close them.

Page top

Setting Web Options and Page Properties for web pages

Before you actually start working on web pages, you need to set some "Web Options" and "Page Properties" so that your web pages will be displayed correctly on viewers’ screens.

Setting Web Page Options

E-1

Open the web page you are creating (see D-1 above), click on "Tools" in the task bar, then click on "Options."

E-2

The "Options" dialogue box appears. Click on the "General" tab, then click on the "Web Options…" button.

E-3

In the "Web Options" box, click on the "Files" tab and make sure all the five boxes are checked, then click on the "OK" button.

E-4

In the "Web Options" box, click on the "Pictures" tab, click on the "Screen size ▼" button, then choose "1024 x 768" as most of the browsers (more than 80%) are set in this picture resolution. Also choose "120" for "Pixels per inch," then click on the "OK" button.

E-5

In the "Web Options" box, click on the "Encoding" tab and make sure "Japanese (Shift-JIS)" is indicated in both long rectangular boxes. If not, click on the pull down menu "▼" and choose "Japanese (Shift-JIS)." Also make sure the small square is unchecked. Click on the "OK" button, and then click on the "OK" button at the bottom of the "Options" box, which you opened in the step E-2.

Setting Page Properties

E-6

Click on "File" in the task bar, then click on "Properties." If you don’t see "Properties," click on the arrow at the bottom of the menu. This will expand the pull-down menu and show everything in it.

E-7

In the Properties dialogue box, fill in the "Title," "Author" and "Company" boxes (see the sample below). Click on the "OK" button at the bottom.

E-8

The title will appear at the top of the browser as below. People usually look at this to identify what website and which page it is, so you need to give a title to each of your web pages.

As you create more web pages, please make sure to give a title to each page of your website by following the steps E-6 and E-7 above.

Please note that giving a title to a web page through the "Properties" dialogue box has nothing to do with naming a file ("Save As…:). The file name of each page and the title of each page are two different things.

Page top

Fonts

Unlike other documents created by programs such as MS Word, PowerPoint, Excel, Publisher, etc., the types of fonts used in web pages are usually limited to some conventional ones because you cannot expect all the viewers to have the same types of fonts on their computers.

F-1

Fonts recommended for Japanese

Only the following five font types should be used for Japanese in your web pages as most computers/browsers do not have other Japanese font types (such as Kyokasho-tai and Arial). From my experience, MS UI Gothic and MS P Gothic seem to work nicely in Japanese for the best results:

	MS 明朝 - MS Mincho	あいうえお日本語１２３４５６７８９0abcdefghijklmn
	MS P明朝 - MS P Mincho *	あいうえお日本語１２３４５６７８９０abcdefghijklmn
	MS ゴシック - MS Gothic	あいうえお日本語１２３４５６７８９０abcdefghijklmn
	MS Pゴシック - MS P Gothic *	あいうえお日本語１２３４５６７８９０abcdefghijklmn
	MS UI Gothic	あいうえお日本語１２３４５６７８９０abcdefghijklmn
	* "P" indicates that the font is "proportional," which means certain characters have different width. See the differences in terms of the width of the characters above.

F-2

Fonts recommended for English

Try to use the commonly used fonts listed below for English parts because other fonts usually do not appear as you wish:

	Arial	abcdefghijklmnopqrstuvwxyz1234567890
	Gothic	abcdefghijklmnopqrstuvwxyz1234567890
	Times New Roman	abcdefghijklmnopqrstuvwxyz1234567890
	Verdana	abcdefghijklmnopqrstuvwxyz1234567890
	Courier New	abcdefghijklmnopqrstuvwxyz1234567890

F-3

Changing font type

You can change the font type. Highlight the word or phrase that you want to change, click on "▼" on the right-hand side of the font type box, and click on the font you want in the pull-down menu.

F-4

Changing font size

You can change the font size. Highlight the word or phrase that you want to change, click on "▼" on the right-hand side of the font size box, and click on the size you want in the pull-down menu.

F-5

Font colour

You can change the font colour. Highlight the word or phrase that you want to change, click on "▼" on the right-hand side of the font colour icon, and click on the colour you want in the pull-down menu. There are more colours available. Click on "More Colors…" and choose the colour you like.

F-6

Bold font

You can change the text into bold font. Highlight the word or phrase that you want to change, and click on the "B" button in the task bar.

F-7

Text background colour

You can change the background colour of the text. Highlight the word or phrase that you want to change, click on "▼" on the right-hand side of the text background colour icon, and click on the colour you want in the pull-down menu.

F-8

Click on the "Save" icon to save the document. Then open the "school name website" folder on the desktop, click on "index" to open the file on the browser, and check how it appears as a web page. If the page appears fine, then it’s time to upload the page to the server.

Page top

G. Updating/renewing a web page

Upload the "index" file. (The following is the same processes as Week 1 section C.)

Go to Yahoo! Canada (http://ca.yahoo.com/) and click on "Geocities" in the left-hand menu. In the "Welcome, Guest" page, type in your ID and password to sign in.

In the "Welcome, yourschoolname" page, click on "File Manager." Another "Welcome, yourschoolname" page might appear. Click on "Open File Manager."

In the "File Manager" page, click on the "Easy Upload – Upload to" button.

In the "EZ Upload" page, click on the "Browse" button.

Choose "your school name website" folder from the desktop, and click on "index."

Make sure the "index" is in the "File name" box and click on the "Open" button.

Click on the "Automatically convert filenames to lowercase" check box and click on "Upload Files" button.

Make sure that the "Upload Results" indicates "index.htm – uploaded successfully" and click on "Continue to File Manager."

Make sure that that the change has been made by checking the "Last Modified" time and date, and click on "View" to see the page on the Internet.

A new browser window will open and the following should appear. There is a Yahoo! Geocities ad at the right-hand top corner in the screen. You can close it by clicking on the "X" button.

Note: You do not have to delete the existing file as the server will automatically replace the old file with the new file.

End of session 2

The following is the Week 2 Task for those who are taking the correspondence course.

After finishing all the instructions above, you should be looking at your "index" page on the Internet. Click on the URL in the "Address" box to highlight it, right-click, then click "Copy" to copy the URL.

Open your email program (e.g., Outlook, Outlook Express), open a new email message and paste the URL onto the text area (move the cursor inside the text area, right-click, then click "Paste").

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/state

- 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.

Type in "Week 2 Task" in the Subject area.

Copy the following email address and paste it into the recipient address area (To…).

shunko.muroya@gov.ab.ca

Send the email.

Please send the email by Wednesday February 14. Your task will be checked and you will receive a confirmation email. Next instruction material (Week 3) will be sent out to you on Friday February 16.

Page top

Go back to Instructions page

Home