Site hosted by Angelfire.com: Build your free website today!

Rev: 8 August 2002

 

Web Page Survival Kit for IS2010

 

Contents

 

1.       Tips

  1. Quick Reference
  2. Grading
  3. How to make a simple web page.
  4. FTP Check list
  5. Sign-up to Angelfire

7.       Your Homepage Folder/directory and File Structure

 

Tips

 

 

 

Quick Reference

 

 

 http://www.angelfire.com/trek/tonykendall/

 

 

 

Grading (Minimum Requirements for an 80%)

 

 

Grade Enhancers (grade counts for up to 20% of course grade)

 

 

 

How to Make a Simple Web Page

 

 

  1. Use Windows Explorer to create a folder in the main level (H:\) of H drive. Name this folder trek. Go inside the folder (trek) and create a sub-folder called images. You can at this time copy your picture in he images folder. Now minimize Windows Explorer, do not close it—no need to. You will use it later to check your web page.
  2. Start FrontPage. Once it starts you should have a new page.  This will be our home or main web page…the first page the visitor will see. It must be called index.html.  Take about 5 minutes to explore FrontPage including the Menu bar, and the tool bar. 
  3. Before we do anything else, let’s save this new page even though there is nothing in it. On the menu bar, click file, then “save as.” A box should pop up.  You should see a button called "Change Title." Click it and type My Home Page or something like that. In the “File name” box you will type index.html  (make sure you are saving this file IN trek  ON H drive (or whatever drive resides your local copy).
    Note: If you do not know how to go to the trek folder to save the file, then you need to review your Windows basic procedures on moving from one folder to another. Windows Explorer procedures are beyond the scope of this exercise.

  4. Once you have saved it, go back (it should be minimized) to Windows Explorer, and see if the new file (index.html) is there. Do a refresh if you have to. Just click the front page icon on the bottom of your screen to return to FP. We will now make a simple home page.
  5. Make sure you are in FP (in the normal mode) and that the blinking cursor is in the top left of the edit area. If not, click the top left edit area and you should see the blinking cursor. Type the following, “My Home Page” 
  6. Highlight the phrase “My Home Page” Once highlighted, increase the text size (the large letter A icon with a little up triangle---“increase text size” until you are satisfied. Still keep the phrase highlighted, and center it by clicking the 2nd icon to the right of the U (underlined) with the little lines (center alignment). This icon is the second one after the little paint palette icon.

    Note: if you don’t understand highlighting consult a basic Windows book.

  7. Keep the phrase highlighted and click the little down triangle right of the underlined letter A icon. You will see some basic colors, click the one you like to change the color of your phrase (My Home Page). You can also click more colors and pick a custom color if you like.
  8. Click anywhere in the edit area to remove the highlighting. Have the blinking cursor to the right of “My Home Page” and press the enter key 2 times. Once you do that, press the up arrow one time.
  9. The blinking cursor should be centered…if not use the center icon to center it. We will now insert an image. Click insert, then picture (from file) on the menu bar to get the image box. We will always want to select, from file. Click the “browse” button and then double click the images folder if you see it. Be sure you are in images folder. You should now see the image you want (I am using tony.jpg). Select the file then click open. You should now see the picture. If it is not centered, select the picture (click the picture with the mouse) and then click the center icon (as we discussed before)

    Note!:  be sure that the image that you want to insert is in the images folder. It will probably be a “jpg”, gif or bmp file. For example, I will use tony.jpg  Again, be sure the file is in images under the folder, trek  The path method of looking at this: it should be this path: h:\trek\images\tony.jpg

  10. After the picture is inserted, select (click the picture) the picture then right click your mouse and select “picture properties” (then click the "general tab"). Under “picture source” it should say: images/tony.jpg you must have images/filename  and nothing else or you will have a problem when you transfer the file to the Unix account.

    Note: While you have this box open, look at the “alternative representation” and the “Text” block. You may have seen pictures that link to another page or web site when you browse. On some of these images, if you put the mouse arrow over the image, a little text box pops up to tell you something like, “click here for larger image.” If you want to do that on your web page, then put the text in the Text box here. You will have to make the image a hotlink and you do that in the image properties box.  In “Default Hyperlink” you would fill in the box that says “location” Put in the complete URL of the web site you want your visitor to go to if he or she clicks the image (in our case, it would be tony.jpg). You may also notice a "Low-res" block. If someone has browser that displays text instead of images whatever you type here will show up. This is commonly use to comply with ADA requirements for web pages for those whose sight is impaired.
  11. Your picture should now be centered, and the cursor to the right of it.
  12. Press enter two times. Select the left alignment icon so the cursor goes all the way to the left. Now type “About this Page” Press the enter key two times.
  13. You should still be aligned left, type the following (or something short about you):

    Hello, my name is Tony Kendall and I am the instructor at the Naval Postgraduate School in Monterey, CA. The purpose of my home page is...blah, blah....
  14. Press the enter key two more time and type:

    More About Me: A short biography

  15. Press the enter key two times and type:

    My Favorite Links

  16. Press enter each time and add the following lines:

    CNN
    Naval Postgraduate School 
    Microsoft Network

  17. Go back and highlight “About this Page” and increase the text size one click (the large letter A icon), and also click the italicize button (large letter I), make it bold (large letter B) and change the color to blue (procedure used in step 8).
  18. We are going to make another page (we will name it info.htm) that provides the visitor a little info about me. Highlight, “More About Me”. Now go to “insert” on the menu bar and select, hyperlink to open up the hyperlink box.  Be sure the World Wide Web tab is selected, then also be sure that “http” is selected in the “Hyperlink type.” If it isn’t, click the little triangle on the right and select http. Next, under URL, delete everything there and simply type info.htm (we will make this page in a moment). Click OK, and now “More About Me” should be underlined. Select “More About Me” and do a right click to check “hyperlink properties” and it should say info.htm for the URL.
  19. Next, make the “My Favorite Links” look like “About this Page” (in color, size, etc.)
  20. Highlight the following:

    CNN
    Naval Postgraduate School 
    Microsoft Network

    To the right of the little icon that has 123, is an icon with 3 little squares, click that to make bullets for each of the above. We are now going to make hotlinks to each three.

  21. Highlight/select CNN, click “Insert” on the menu bar, and select hyperlink. Type http://cnn.com/
  22. Repeat step 22 for NPS and the Microsoft Network.
  23. Below the last link, we want to use a “separator” to indicate to visitors that the main information is ended. So, click the mouse below the last link, and select insert then “horizontal line” on the menu bar. Now click the cursor below the just made line.
  24. We now want to have an email image where visitors can click it and send email to me. So as in step 10, insert an image. Be sure that mailbutt.gif is in the images folder! Once you have inserted it  on the page, center it on the page (per the previous method). Next, you will insert hyperlink, click the triangle to the right of the “Hyperlink Type” and select mailto. Then in the URL box, you should see mailto:  add your email address directly to the right of mailto: (no spaces). Such as: mailto:wakendal@nps.navy.mil  You can also add a mail link to the word Tony. Use the insert hyperlink that we used earlier.
  25. Two lines below the e-mail links, on the left side in small letters add the line, Revised:15 Feb 00.  This helps you and the visitors know when the site was last updated.
  26. We want to change our white background so go to Format on the menu bar and then select background. Change the background to a light blue. Notice you can also insert a picture as a background. If you do, make sure that your picture is placed in your images folder in both your local (master) and intranet version (Unix).

 

  1. We are finished with our home page but we want to create on more page on our web. If you remember, we have a link to info.htm, which will contain our short bio. On the toolbar, you will see an icon that looks like a sheet of paper. Click it and you have created another web page. As previous shown, use “save as” and save in the trek folder with the name, info.htm  Once you have done that, Make a headline (like we did for our home page) called “More About Me” make it the same size and color as the headline for our home page. Type something about you…you can keep it short. You can now save it and you are finished with your master (local copy) web site.

    Note: if your home page is ever on the Internet, do practice good security and privacy procedures.

 

  1. Look at the FTP checklist for procedures on how to FTP your new web page.

 

 

Sign-up to Angelfire web hosting service

 

1.       This is a free service. Go to: http://angelfire.com/

2.      Follow the sign-up link and follow the instructions. Do not use real telephone numbers addresses if you feel uncomfortable.

3.      Be sure you select the "trek" community when asked. I signed up as TonyKendall so my URL is: http://www.angelfire.com/trek/tonykendall/

4.      Do take note of your name and password. My user id is therefore: trek/tonykendall/ which is needed to logon.

5.      Keep your user id and password handy as you will need it to FTP into Angelfire.  More info on your free account below.

 

 

ANGELFIRE FREE HOSTING SERVICE

Angelfire Free offers the Web's best introduction to site building. When you're ready, you can step up to Plus!

• 20 MB of Disk Space — A generous amount of disk space gives you the room you need for your files.

• Personalized URLs — Choose an address that matches your site.

• Easy to Use Building Tools — Angelfire has site building tools to suit all levels of experience. Members can choose our Basic editor, the HTML Library with its assortment of cut and paste page layouts, or our Advanced Editor with full FTP support.  Only use FTP and FP for your assignment!

• Page Design Templates — Not sure what your pages should look like? Just cut and paste one of our cool designs!  Don't use them for your web submission!

• Free Images — Our Image Gallery is filled with over 10,000 images! Choose from photos, clipart, essential Web elements. All Free. All easy to add.

• Microsoft FrontPage Enabled — Angelfire welcomes members who used Microsoft FrontPage to build their site. We make it easy to publish your pages and we support FrontPage 2000. For you assignment use FTP but later you can use FP 2000 to publish (like FTP) and update your site.

 

FTP Checklist

 

(note: there will be slight differences in procedures depending upon what WS_FTP version you are using).

 

1.      Open WS_FTP program. (Double click icon on Desktop or in Start/Programs”)

2.      Session Properties box pops up.

3.      The first time that you run the program

  1. Click "New" or "New site" on the menu bar to create new profile
  2. Profile Name (or “create an FTP site): Any name you want to give this profile. In newer versions this is called, "Create a site name." Call it anything you like such as Angelfire ftp site.
  3. Host Name (or IP Address): ftp.angelfire.com Host Type: Auto Detect (if you are using an older version…if newer there is no entry)
  4. User ID: trek/tonykendall (replace with your user name…be sure you selected Trek or trek will not be the first part of your user ID!
  5. Click "Save" to save the password. At home you can save after you put in your password.
  6. Password: Your personal password when you signed up to Angelfire.
  7. Click "OK"

4.      You should be now be connected to the Angelfire FTP Server. Look at the bottom left corner to see a description of what is happening.

5.      If not connected try again. Make the program fill the screen so you can read the directories. (Full screen view, click the small gray box at the top right of the program window)

6.      Drag the center - vertical line to the middle for a better view.

7.      Look at the top line on the left and right side. The top left line shows the present local computer directory selected. The top right line shows the remote server computer directory selected.

8.      On the right pane/panel is your Angelfire web site. At the beginning you should  just have two objects…a file called index.html and a folder (directory) called images. This is the same thing you have in your local folder that contains the web site you created earlier. You will send a copy of your web files to the Angelfire directory but be sure you put them in the right location (see diagram at the bottom of this document).

9.      On the Local system double click on the two dots ".." to go up to the H:/ directory if you are not there, then select the trek directory to see the files in that directory.

10.  To transfer a file from your PC to the server:

  1. Select the local file on the left side. It will be appear in blue in the bottom window
  2. Select the "à"  button to transfer the file to the server.

11.  To transfer the file from the server to your local computer

  1. Select the remote file on the right side. It will appear in blue.
  2. Select the "ß"  button to transfer the file from the remote computer (server) to the local PC. (Client)

12.  Notice that the program does not ask if you want to overwrite the program. You can destroy your file if you are not careful.

13.  To make things easier the next time you use WS_FTP connect, you can have the program automatically go to the correct local and remote folders (directories).  To do this click the “options” button above, then the session tab and click the “Save Current Folders as Connection Folders” and the next time you connect you will go to the same local and remote folders.

14.  Close the connection by clicking the "Close" button in the bottom left corner.

15.  Exit the program by clicking the "Exit" button in the bottom right corner.

16.  The next time you open the program, you can select your profile from the drop down menu, type in your password and you will be connected.

17.  End (you will use FTP every time you want to update your web pages).

 

The following WS FTP commands may be needed later:

 

 

Click the "MkDir" button on the remote system (right side) and  type in whatever new folder or directory name you like then click "OK"

Back To Homepage