Building a Simple web page using Word



Introduction to Building a Simple Web page Using Word:

by Bruce Matsunaga & Teryl Sands

These instructions are designed for beginners. This will introduce you to basic web building skills. Using Word, you will create a Webfolio.

Here are some things you should know ahead of time. You need to know if you can install programs on the computer you are using, specifically you need to be able to install SSH FTP program because this will allow you to upload your course materials to your ASU web space. ASU students, faculty, and staff can download SSH for free:

In addition, you should check prior to beginning these instructions to make sure you have your web space set up at ASU. Do this by going to and log into your account. You should see Personal Web Page Hosting listed in your subscriptions. If it is not listed as ACTV, check the button next to Personal Web Page Hosting in the menu below your subscriptions and click Subscribe.

NOTE: These instructions are for Windows PC users. If you using a MAC, the instructions may differ slightly

Instructions:

1. Create a Folder & Copy Documents

Everything you would like to have on your web page needs to be put into a single folder and to copy any documents you intend to use on your web page to this folder. This includes Word documents, PDF files, or images.

1.1 Decide where you want to create the folder. For simple purpose here, create a folder on your Desktop.

1.2 Create folder by right clicking on any open space on the desktop, selecting New, then Folder

1.3 Name folder “Webfolio”

1.4 Go to the folder where you have stored your documents. Do this by going either to the “My Computer” or “My Documents” icons located either on the desktop or in the start menu.

1.5 Find the location of the documents, if all documents are in the same location, single left click on each document while holding down the Ctrl key. This will highlight each file that you wish to copy.

1.6 Next, click on Edit menu and select Copy to Folder. This opens the Copy Items window.

1.7 Find “Webfolio” folder by scrolling down to the bottom of the list and highlight it by clicking on it.

1.8 Click on copy button

NOTE: Your Word file names cannot contain special characters (i.e. the “#” sign or “@” symbol). It is also recommended that file names do not contain any spaces (i.e. “employment (space) packet.doc” change to “employmentpacket.doc”)

2. Create Web Page in Word

This task will allow you to create your main page for your Webfolio by using Word.

2.1 Open Word, create the text that you want on your main page including your name, any greeting (“Welcome to my Webfolio…”, and by listing class projects (i.e. Employment Packet, Manual, Proposal, Memo and Email, and Reflection). This will be internal links. You may also want to include an external link (such as ASU).

NOTE: Keep in mind that you may want to consider the placement of your internal and external links in terms of the design of the main page.

2.2 Place the cursor on your Word document where you would like the image to appear.

2.3 Go to Insert, then Picture if want to have an image on your main page.

2.4 Click on From File if you have an existing image you plan to use, or click on Clip Art if you would like to use images from the Microsoft Clip Art Gallery.

2.5 Find location of desired file image or clip art.

2.6 Highlight the image/art and hit insert. The image will appear where you placed the cursor on the document.

3. Saving as a Web Page

This task will allow you to save your document as “Web page” once you are satisfied with how it presents in terms of content and design.

3.1 Go to File, then Save as Web Page

3.2 Rename file to “index.htm” or “index.html” (preferred)

3.3 Verify the Save as location as your “Webfolio” folder (on desktop)

3.4 Go to Change Title in order to change the title of your main page to something more representative (i.e. your name Webfolio)

3.5 Verify the File Type is Web Page (*.htm; *.html)

3.6 click Save

[pic]

4. Making Internal Links to Your Documents

This task will allow you to link internally to your word documents

4.1 Highlight the text on your main page that you want to link to your 1st document (i.e. employmentpacket.doc).

4.2 Go to Insert, then Hyperlink, select the file you wish to link to (i.e. employementpacket.doc) then click Okay.

4.3 Repeat these steps in order to create internal links for each document.

5. Making an External Link

This task will allow you to link to external pages such as ASU’s main page.

5.1 Highlight the text on your main page that you want to link to (i.e. Arizona State University).

5.2 Go to the page you wish to link to (i.e.

and copy the URL.

5.3 Go to Insert, then Hyperlink, then paste URL into Address, and click Okay.

NOTE: You cannot right click and paste the address in this window. Instead you must once to insert cursor in Address and hit Ctrl + v on your keyboard to paste in the address.

5.4 Repeat these steps in order to create any other external links.

5.5 Click Save

6. Save and Close Word

Be sure to save and then close Word before moving on to next step; otherwise, you will encounter an error message.

7. Connect to your website with SSH Secure File Transfer Client

This step will allow you to connect to SSH SFTC.

NOTE: Be sure you have already downloaded and installed SSH as described in the Introduction to these instructions above.

7.1 Go to Start, then Programs, then SSH Secure Shell, then click on SSH File Transfer Client

7.2 Click on Quick Connect button, this will bring “Connect to Remote Host”

NOTE: You may receive an error notice; just click okay

[pic]

7.3 Under host name type in “general.asu.edu” and your ASURITE ID for the User Name

7.4 Change the “Authentication Method” to Password.

7.5 Click Connect, and then a screen will appear.

7.6 Enter your password. The window on your right will refresh to show what is in your AFS space. This space is hosted by ASU for use.

NOTE: If you get a pop up that says “Host Identification” click “yes”

8. Transferring Your Files

This step will allow you upload all your Webfolio materials to your ASU website. You may want to maximize this screen for better viewing. Be sure to note when the following instructions distinguish between the left and right hand side.

8.1 Double click on your www folder on the right hand side. This will open your web space folder.

8.2 Select “index.html” from the right hand side and press delete on your keyboard. This will remove the ASU template webpage.

WARNING: These instructions assume that you have NOT already created a customized website on your ASU web space. If you have then you need to create a sub-folder within your www folder to store your Webfolio in.

8.3 Double click on your Webfolio folder on the left hand side. This open the folder and you will be able to see your materials for your web page.

NOTE: If you have save your folder to another location other than the desktop, navigate to it now and double click to open the folder.

8.4 Click on any file on the left hand side (these should be your Webfolio materials).

8.5 Click Ctrl + a on the keyboard to select all your Webfolio files

NOTE: Word may have created a folder “index_files” Make sure this is included in your selection.

8.6 Right click anywhere on the selected files and click upload.

8.7 Close SSH SFTC

NOTE: You may receive a Confirm Exit window. Click okay.

9. Verify Site and Links Work

This step will confirm whether or not you site is correctly uploaded and working.

9.1 Open your web browser choice (i.e. Explorer, etc.)

9.2 Type in you Webfolio URL (place your ASURITE ID Here) and hit enter. Your page should appear!

9.3 Take a moment to verify that all your links are in working order (i.e. documents open and external links work.

9.4 Celebrate extensively your successful completion of the Webfolio!

Trouble Shooting

If you find any errors, correct them by repeating the applicable steps above.

NOTE: But this time do it right! ( (or contact me)

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download