Physical Geology Website Assignment

Earlham College, Geosciences 211, Spring 2005

• Log on to your Earlham computer account.
• Right click the "Start" button in the lower left corner of the screen and left click on "Explore"
• Navigate to the "Homes on Pax" directory and then to the "www" subdirectory.
• Create two subdirectories beneath "homes on pax\www" by left clicking on "www" and then (while it is selected) going to File>New>Folder. Repeat.
• Rename the folders by right clicking on them and going to "Rename". Type in new names: one "graphics" and the other "webs"
• On the black column to the left, find the link to the "Template for you to use" and click to open it in a web browser.
• On the broswer, click on File>Save As
• The browser will ask you where you want to save the file and what you want to call it. Save it to the new file directory "webs" you just created in your "homes on pax" account.
• Rename the template anything you want.

• Go File>Open and then navigate to the place you stored the template file (homes on PAX).

  Open the template you saved. It is now ready to be edited.

   

• Keep the window at the bottom, the Properties window, open. It has the formatting options that you will use in creating your site.

• Locate the "Title" space at the top, under the menu bar. Type in a title for your web page.
• Your title should be something like: Earlham College - Geology 211 - Volcanoes
• This will be the "hidden" title of your web page. It will be shown at the very top line of the browser window and will be included at the top of the paper if you print out your web page.

• Under "File" at the top menu, pick "Save as."
• Click the down-pointing arrow after the "Save in:" box and select "Homes on 'Pax' [H]." Now double-click on the WWW folder.
• This is your web space courtesy of Earlham. Everyone who has an e-mail address has space on this server. If you save your file here, it is on the web for the world to see. You could also create a folder called "web project" and save your work there until you're ready to put in on the web. To create a new folder, select "File" "New" "Folder" and then name the folder.
• Save here by naming your file.
• Give it a shortened version of the page title -- something like volcano. Don't use capitals, spaces or other symbols. This will be part of the URL for your web page, so keep it simple. Dreamweaver will automatically add .htm to the end of your file.
• As you continue to work, frequently save your file (CTRL S) so you won't lose anything!

• Now that you have saved your file, its URL will be in the form of:
• http://www.earlham.edu/~youremailname/filenameyougaveyourpage.htm

• Highlight the text on the template that you want to change. Type in new text.

• For our web pages, we have used font "Arial, Helvetica," size (-1). The text is black and in some places on the template, the text is in bold.
• To change any of this, highlight the text you want to change.
• Look at the Property window. There is a font box, a size box, a little box for color, and squares for bold and italics. Use the down-pointing arrows for more choices and change.
• Line spacing: as you type, words will wrap to the next line.
• Hit ENTER to insert a blank line and then start text on a new line.
• SHIFT ENTER will start a new line of text without leaving a blank line in between

• The page is presently in the form of a table with borders. The borders allow you to see that the table has three rows -- the middle row has two columns.
• To eliminate the borders so that you can't see them, highlight the table by positioning the cursor in the upper left hand corner and waiting until you see a design of four arrows appear -- then click.
• The table properties window will now appear. Note the box labeled Border -- change 1 to 0. You will now only see dotted lines around the table and when you preview the page, no border will appear.
• You can add or eliminate rows and columns by using the two little boxes underneath the word Cell within the properties windows. This will be demonstrated in class.

• Under "File" at the top menu, pick "Preview in browser" then slide over to iexplore.
• Click on the iexplore icon box at the bottom of the computer screen to bring up the browser.

• Go to the URL
• Right click on the picture
• Choose "Save picture as" and give it a name and put in your WWW folder

• If you are not already at the WWW folder or the "web project" folder you have created, click the down-pointing arrow after the "Save in:" box and select "Homes on 'Pax' [H]." Now double-click on the WWW folder or the "web project" folder.

• Cut (CTRL X) out the gray square marking where an image could go
• Under "Insert," click Image
• Go to the "Look in" box and if you are not already in the WWW folder, click the down-pointing arrow and select "Homes on 'Pax' [H]." Now double-click on the WWW folder.
• Browse for the file name for the image, click on that name, and then click "Select" -- the image will now be inserted on your page
• Below the image, write a line citing the page where you found the image. It should be something like the following, acknowledging the source of the image: Photo courtesy of Wildnet Africa. Images of Africa -or- Image credit: Finasteride by Cynthia L. Schieck -or- Figure 1. Red Wolf. Courtesy of National Wildlife Federation

• Put the cursor on the image, click, then look at the Properties window. The size is indicated by "H" (height) and "W" (width). Change to smaller numbers, keeping them in proportion.
• OR
• Put the cursor on the image, click, then move the cursor to the bottom right corner and wait for it to assume the shape of a line with arrows on both ends. Right at that moment, click and hold it as you drag the corner of the square in or out on the diagonal. Keep in proportion.

• Type in the name of the page that you want to link then highlight what you've typed
• In the Link box in the Properties window, type in the URL
• It should be entered in the form of http://www.etcetera or whatever the URL is
• Or you can copy the URL from the web page itself and paste into the Link box

• Highlight over parkero@earlham.edu and type in your e-mail address
• While your name is still highlighted, move the cursor to the Link box in the Property window
• After mailto, type in your e-mail address

16. What to do if your page has extra blank space at the bottom

• Dreamweaver sometimes automatically makes the page size too long, leaving extra blank space at the bottom. Check once you've posted it to the server to see if this has happened. To fix it in Dreamweaver...
• From the menu at the top, select View and then Code
• Scan down this gibberish looking for a line that begins with <td and includes a specification for height. For instance: <td rowspan=4 valign=top width="19%" height="1860">
• Highlight and then cut out the part setting the height. In this example, eliminate all of: height="1860".
• Look for a second <td... line if you have a web page with two columns. Also eliminate the height specification.

17. What to do if your page become too wide for the screen

• Sometimes when you include images, they may make your page too wide for the screen, especially if you have images in two columns.
• Make the images smaller or move the image to a different column or change the structure of your page to be one column only.

Send Comments
© 2005, Ron Parker
Last modified on March 1, 2005