Rev: 8 August 2002
Web Page Survival Kit for IS2010
Contents
1.
Tips
- Quick
Reference
- Grading
- How
to make a simple web page.
- FTP
Check list
- Sign-up
to Angelfire
7.
Your Homepage
Folder/directory and File Structure
Tips
- Your
main folder on your local drive will be called trek..use this exact name do
not call it by any other name.
- Store
the original copy of your web site (your files) in your H drive under the
folder trek (please do not use any other name since it is hard for me to
help you if you have problems).
- For
this class DO NOT use the Themes feature in FrontPage.
- For
this class, use the extension .html for your home page which would be
index.html.
- If
you get a “red x” (the picture is not displayed) when viewing your web
pages from the Angelfire server, right click the picture and see if there
are any references to hard drives (such as H:\ or C:\). The web server
doesn’t recognize these hard drive designations and you will have to go
back to your local copy of your web site and delete such references to hard
drives letters.
Quick Reference
- Your
home page will be https://www.angelfire.com/trek/youridname/ with youridname
being the id selected when you joined Angelfire. So if your id is
tonykendall, you will access your web page with the following URL (assuming
you selected "trek" as your Angelfire community):
https://www.angelfire.com/trek/tonykendall/
Grading (Minimum
Requirements for an 80%)
- 3 external links, a mailto link, use of
color for the background or with text, two images, and revision date.
- Must be completed by the midterm exam
date (email link).
- Must be different than the sample web
page we do in class. Pick a theme or subject for your web page…use your
imagination.
Grade Enhancers (grade counts for up to 20% of course grade)
- Use
of tables with text or images.
- Audio
or video links.
- Use
of background images or watermarks.
- Java
applets
- Creation
of additional web pages linked to homepage
- Well
organized, clearly presented and navigable will characterize those grades
above 90%.
How to Make a Simple Web Page
- 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.
- 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.
- 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.
- 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.
- 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”
- 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.
- 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.
- 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.
- 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
- 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.
- Your
picture should now be centered, and the cursor to the right of it.
- 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.
- 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....
- Press
the enter key two more time and type:
More About Me: A short biography
- Press
the enter key two times and type:
My Favorite Links
- Press
enter each time and add the following lines:
CNN
Naval Postgraduate School
Microsoft Network
- 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).
- 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.
- Next,
make the “My Favorite Links” look like “About this Page” (in color,
size, etc.)
- 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.
- Highlight/select
CNN, click “Insert” on the menu bar, and select hyperlink. Type http://cnn.com/
- Repeat
step 22 for NPS and the Microsoft Network.
- 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.
- 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.
- 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.
- 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).
- 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.
- 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: https://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
- Click
"New" or "New site" on the menu bar to create new
profile
- 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.
- 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)
- 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!
- Click
"Save" to save the password. At home you can save after you put in
your password.
- Password:
Your personal password when you signed up to Angelfire.
- 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:
- Select
the local file on the left side. It will be appear in blue in the bottom
window
- Select
the "à"
button to transfer the file to the server.
11. To
transfer the file from the server to your local computer
- Select
the remote file on the right side. It will appear in blue.
- 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
