CE 547 - GIS in Water Resources Engineering

 

SYLLABUS    SCHEDULE    ASSIGNMENTS    2008 STUDENTS     LINKS    PAST STUDENTS    HOME

Assignment #1

Create and post a simple webpage.  Include at least three figures from the exercises you worked in Chapter 3 of Getting to Know ArcGIS.  Send me an e-mail with the url if it is different from your NetID.

 

Web Page Publishing Summary

(UNM its provides information on creating and posting a webpage at http://its.unm.edu/web/creating.html)

  1. Create a homepage by any method and name the file index.html.
  1. Review the source (html) code to make sure you know the name of all jpg or gif files that your homepage references.
  1. Use the FTP program on the desktop.
  • Log in to ftp.unm.edu as the remote system. The computer where you are sitting is the local system. In the FTP program, you will see your local system on the left and your remote system on the right.
  • There is a button above the remote computer that will allow you to make a new directory: . Click this button to be prompted to create a new directory. Name the directory public_html. Navigate to the public_html directory by double clicking its folder.
  • Now make sure in your local system window that you can see the files that you need to transfer. If not, navigate to the directory where you located your files (index.html and all associated gif and jpg files).
  • While holding the ctrl key, select the files from your local system to place into your public_html directory. Drag the files to transfer files from the local system to the remote system.
  1. If you transferred files from a remote (not UNM) computer, access your CIRT account using Telnet or X-Win32. At the prompt, type webupdate. The world should now be able to view your webpage.

Creating Images (jpegs) from the ArcMap Environment

In the ArcMap environment, use File > Export Map to create a jpeg for use in a webpage, document, or slide presentation.  Note that when you use Options, you can change the resolution of the jpeg image.

 

 

If you’d like a figure where you show other parts of the screen (like the one above), you can use Ctrl – Print Screen to capture a bitmap image of everything showing on the screen. (Note that some operating systems use Shift – Print Screen).  From the Start Menu, go to Programs, Accessories, then Paint.  Once you open Paint, simply paste the bitmap.  You can use Paint to cut out pieces of the Bitmap and copy them to other programs.  You can also save the bitmaps as jpeg files using File > Save As.

 

Let's create a simple web page using Microsoft Word.

This text is a different font and size.

This text is a different color.

Using Insert - Picture - ClipArt, I've insert the following picture.

 

I'm now inserting the picture again, then with the picture selected, click the right mouse button to format the picture. I've enlarged and centered the picture.

Now save the document as a Word document

Next, Save as Web Page.  When the dialogue box appears, you may also want to “Change Title”.  Note that at the bottom of the dialog box, you can change the type of file that is saved.  In Word 2003, the default will be 'Single File Web Page'.  This single file webpage will have a .mhtml extension and the file will have all of the figures embedded.  This single file sounds great but some browsers may have difficulty with it.  Instead, I recommend that you press the down arrow to the right of the Save as type box and select 'Web page.'  By doing so, you will have created a file (html) and a directory of figures.

Once you've saved as Web Page, your menus will change slightly.

Add a background using Format > Background. You may choose a solid color or "Fill Effects". By going to Fill Effects-Other Texture, you may use any picture file for background.

 

Insert a line using the format tool bar.  On the Format menu, click Borders and Shading.  Click Horizontal Line.  Click the line that you want to insert, and the click Insert Clip or OK.

---

 

Let's create a link to the class homepage www.unm.edu/~jcoonrod/gis

If you type a web address, as above, Word will automatically create the hyperlink.

Now simply type class homepage. Then highlight the text and from the toolbar select the icon showing a world with a small link. Type in the appropriate information.

Class homepage

 Now, create a link for someone to send you e-mail. Type contact me. Highlight the text and from the toolbar select the icon showing a world with a small link This time type "mailto:jcoonrod@unm.edu" Once again, word will automatically provide the link when you explicitly type the e-mail address.

Contact me.

 Insert a table using Table - Insert Table. This is an easy way to align text. I've inserted a 3 x 10 table and then inserted the names of students taking this course.  To create links to each students webpage, I highlighted the name then press the insert hyperlink and fill in the address of the link.

Eric Carlsen Patrick Higgins Roger Martinez
Nichole Carnevale Shih Chin Hsiao Jennifer Payne
Gowtham Chilakapati Sheila Johnson Robert Pine
Sara Chudnoff Hari Bahadur Katuwal Ruji Rajbhandari
Krishna Doddikadi Bishwa Koirala Mason Ryan
Yadeeh Escobedo Daniel Kump Miguel Santistevan
Joshua Goldman Ian Latella William Silverman
Nick Hamm Megan Marsee Amy Williams

Okay, now you have a webpage. Save it. You may use File > Web Page Preview to see the html file with a browser.

It may also be useful to look at the html code that Word has generated using View>HTML Source.

Now use Windows Explorer to see the file that you’ve created.  I saved my Word document as sampleweb.doc.  I saved my webpage as sampleweb.htm.  Within the directory that I am working, I should see these two files.  Additionally, I find a folder named sampleweb_files.  Four images have been placed in that folder.  For the webpage to work, those files must be in that folder.

What do you do to "post" the page so that the world can see it?

UNM its provides information on creating and posting a webpage at http://its.unm.edu/web/creating.html

 Basically all html files are stored in the public_html directory of your UNM account. For your homepage to simply be www.unm.edu/~youraccountname, you need to have your hompage file named index.html.  Everytime you create a new file, you need to ftp the file (and all files that are referenced) to your account. If you transfer files from a remote computer, then you must type webupdate at the prompt for the new file to be readable.

 

Additional notes:

I am not implying that I believe Microsoft Word to be the best way to create webpages. I believe that using Microsoft Word is a reasonable way for a student who has no knowledge of html to create basic webpages.