Making Your Own Web Page

E5 2005

This document describes how to create a simple web page of your own.  Several time throughout the course of a semester you will be building web pages to document your work.  It is organized as follows:

Before Starting Your Web Page

• Log in to the engin server and change your password.
• Access the location on the server where your web page will be stored.

Create Your Web Page

• Start a web site. 
• Place files in your web site. 
• Add a link to the department web page. 
• Add a link for email. 
• Add an image. 
• Add another file. 

Going further

Before Starting Your Web Page

Log in to the engin server and change your password.

An account has been created for you on our department's server (which runs the Linux operating system).   For security reasons, you need to log in to the account one time to change your password.  You probably won't need to log in again this semester.  Start by logging into one of the Windows machines in room 213 using the user name and password supplied by ITS.  Run the program called "SSH Secure Shell Client" that you'll find on the desktop. Hit the spacebar or the "Enter" key to get a prompt.  When prompted for a server, type "engin", enter your user name and hit "Connect".

At the prompt, enter your password (which I will give you).  When the Host Identification Dialog Box pops up, just click on "Yes".   Log in to the Linux server with your user name and password. At the prompt (which will look something like "[ceverba1@celeborn ceverba1]$") enter the command: "passwd" and hit return.  Enter a new password for your account (it prompts you first for the one I gave you).  If you have any problems, please contact me.

Logoff the SSH server by typing "exit" at the prompt.

Access the location on the server where your web page will be stored.

Before you can begin your web page you need some disk space on a web server.  You should all have accounts on the Engineering department's Linux-based web server with the same username that you received from ITS (typically your first initial followed by the first six letters of your last name followed by a numeral).  I will give you your password when you come to lab, or you can get it earlier if you send me an email.

Start by logging into one of the PC's in room 213.  You will now add your web page to your "network places" on the PC.  The directions below were used for my own account on the engineering server.

1. If you are not already logged on, log on to one of the PC's in 213 with the user name and password you received from ITS.
2. Double click on the My Network Places icon on the desktop.
3. Drag the cursor across the words "My Network Places" at the top:
   
4. Type \\celeborn\home\ on the keyboard. It should replace "My Network Places":
   
5. Press the Return key and you should see the home level of the celeborn server:
   
   
6. Double-click on "celeborn," Class09," and the folder name of your ITS username.
   
7. Move this window to the right to make room then double-click the My Network Places icon on the desktop once again. When it opens, drag the public_ html folder from your engin.swarthmore.edu directory (the one in the window you just moved) onto the My Network Places panel.
8. A shortcut to your web folder (public_html) is now in your My Network Places folder. Any file you drag onto this shortcut will instantly be live on the web server.

You have now created a named network location at which you will store your web page.

Create Your Web Page

Start "Macromedia Dreamweaver".  This may take several minutes the first time you run it.  Dreamweaver is the program that you will probably be using to create your web pages; it is freely available from ITS so you should be able to run it from your own computer.  If you have another program that you would rather use, please feel free to do so.  Microsoft Word can generate web documents (HTML - HyperText Markup Language), or you can actually write HTML code if that is your preference.  You should get a screen that looks something like the following:

The web document (labeled "Untitled Document") is split into two windows.  The bottom window is where you will add text, much as you would for a word processor.  The text appears much as it would on a web browser.  The top window shows the HTML code that actually comprises your web page -- you can feel free to ignore this if you want to.  If you want to turn it off you can go to the menu at the top of the application window and select View->Design.

Start a web site. 

Dreamweaver will organize all of your files into what it calls a "site".  But first you must create it.

1. On the tabs on the right side of the screen click on "Site" and choose "New Site..." as shown in the image .  If your screen looks different there should be a link that says "Manage Web Sites" -- Click on that.
2. Choose a name for your site.  I picked "CarrEverbachE5WebPage" for mine.  Hit the "Next >" button.
3. Choose "No, I do not wish to use a server technology" and hit the "Next >" button.
4. Choose "Edit directly on server using local local network."  Hit the button that looks like a folder ().  Select "My Network Places". 
5. Then choose the network place you defined previously. 
6. When the Site Definition dialog box returns (this may take a while because of the network operations), hit the "Next >" button, then "Done".

Place files in your web site. 

Now lets add a file to your web site, and see it in action.

1. Type some text into the bottom window of the file to start your web page.  Then go to File->Save.  Save the file to the network place you defined previously with the name "index.html".   This will store it on the engin Linux server in your "public_html" directory.
2. You should now be able to see your web page using a web browser.  The web address for my page is "www.engin.swarthmore.edu/~ceverba1/index.html".  Replace "ceverba1" by your username.  
   • You don't actually need the "index.html", you can also access the page as "www.engin.swarthmore.edu/~ceverba1"
   • Or... "engin/~ceverba1" (if you are on campus).
3. If your page works continue, if not review the directions and try to fix your page.  If you have trouble, please see me.

Add a link to the department web page. 

1. You will often want to link to external pages; we will add a link to the departments web page (you can add any page you would like to add).  Type in the text first, highlight it with the cursor, then go to Modify->Make Link.
2. Under "URL" put "http://www.engin.swarthmore.edu" and hit the "OK" button.  

Add a link for email. 

1. Now add an email link so people can email you.  Add text that says something like "Send me email."  Highlight the part of the text that you want to use as a hyperlink and then go to the menu and choose "Insert->Email link", and enter your email address.

Add an image. 

1. Now add an image.  You can use the one below if you right-click on the image and select "Save Picture As" and save it to the Network Place you defined previously.

2. In Dreamweaver, drag the image file "HicksBitMapWeb.gif" to your web page where you would like it to be placed.   If you used another image, you can cut and paste like you would with any word processing program.

Add another file to your web site.

1. Now go to "File->New" and choose  "Basic Page" and hit the create button.  Add some text to the new file, Now save your file as "file2.html".
2. Now a link back to your original file, "index.html".
3. Now edit your "index.html" to include a link to "file2.html".
4. Save both files, and make sure that all links are working. 

This completes the first lab.  When you are sure everything on your web page is working, send me a link to your page.  Refer to the lab description for complete details about requirements for turning in the lab.

Going further

Try creating more files and links between them.  You can also skim through the Dreamweaver tutorial (go to Help->Tutorial).

If you want to use a digital camera, one is available.

---

Comments or Questions?  Send me email

Carr Everbach Engineering Department Swarthmore College