Tutorial: Creating or Updating Your Web Site on the MU Web Server

Overview

New web site overseers or content creators have similar initial questions about how to best access their web space, and how to get started building a web site.    This article provides a brief overview to help with getting started in building your site.

Details

In order to create a website on the MU Web servers, you must first have web space dedicated to your organization or group.   Getting web space is a simple process, but there are a few requirements.

  1. The organization or group must be a recognized department or student organization (as recognized by Student Affairs)
  2. Each site must have a faculty of staff member willing to serve as site overseer.
  3. A request to obtain a site must be completed.   This can be done online using the Online Information Provider’s Agreement.

Once your web site space has been created (or, if you’re taking over an existing site, once you’ve been given access to the site space), you’ll need to understand how to access that web space.

There are two kinds of web sites available on the MU Web Server.   The first is a traditional web site, where pages are created by a web developer in HTML, ASP, .NET, etc.    Typically these pages will be created in a web page authoring product like Dreamweaver, Microsoft Sharepoint Designer, Frontpage, etc.     Most sites that have existed on the server for some time were created in this way.

Accessing Traditional Web Sites

To access traditional site spaces (sites that aren’t in the content management system), you will need to map a network drive to the sites content folder on the web server.    In almost all cases, the folder mapping you will use will correspond to the directory you use to access your web space in a browser.   For example, if you were trying to access the “human-resources” web site, accessed in a browser by typing http://www.marshall.edu/human-resources, your folder mapping would be \marshall.eduwwwhuman-resources.

If you are a user who is editing from a Mac OSX client workstation, you cannot use the Windows style folder mappings.    In your case, you’ll need to use the following mapping:  smb://marshall.edu/human-resources$.     In all of these examples, replace “human-resources” with the name of your site.

When you are prompted for your username or password, use your MUNET account name and password to gain access to the site.    On Mac OSX clients, it may be necessary to prefix your MUNET account name with the “MARSHALL” domain prefix.

A separate knowledge base article is available to provide you additional guidance on setting up a mapping to your designated web directory if you need further assistance.

Once you’ve created the mapping, you’ll have a folder available in Windows Explorer (or on your desktop for Mac OSX users) that corresponds to the name of your web site.   Opening this folder will reveal the files that make up your web site.   You may open and edit any of these files in order to modify the content of your web site.

Accessing Content-Management System Sites

Newer sites that were created in the WordPress Content Management system will not require that you create a folder mapping in order to access or edit web pages.      For these sites, navigate to the URL of your site, appending the directory path /wp-admin/ to the end of the site URL to be presented with a login prompt to gain access to the page content editor.     You will login to the content editor using your MUNET username and password.

Following our previous example, the content management admin login URL for the “human-resources” site above would be:  http://www.marshall.edu/human-resources/wp-admin/

Troubleshooting Access

If you have difficulty gaining access to either your folder mapping or the content management page administration area, try the following steps before contacting the IT Service Desk for assistance.

  • Try entering your username by prefixing it with the MARSHALL domain name – example:  MARSHALLusername
  • Make sure that you have been granted access to edit the site by contacting the site overseer and determining that they’ve added you to their site editor group.    Site overseers can add or remove designated editors by logging in to the Overseer’s Administration Panel on the MU Web Server.

Creating Content

Once you’ve been able to gain access to your site, you’ll either want to create a new web page (if this is a new site) or edit an existing page if the site was already in place and you’re updating it.    How you do this will depend on whether you’re using a traditional, or content management site.

For traditional sites

When you open the content folder, if files are already there, you will need to choose the file you want to edit and open it in your editor of choice.   Any changes you make to the content will be immediately available for viewing online once you’ve saved those changes.

If you’re creating new content for a traditional site, the web server by default will recognize the following file names and serve them automatically at your URL once they’re present in your web directory:

  • index.htm
  • index.html
  • default.asp
  • index.php

Content is best created in a traditional site by someone with at least some web development experience.   If you are not familiar with web development, you can use the following very simple code to create a generic page that will help get you started:

<html>
<head><title>My New Site</title></head>
<body>
<h1>Hello World</h1>
</body>
</html>

For content management sites, log in to the administration panel, and click on “Pages” in the left hand column.   You will be presented with a list of existing pages in your site.    You can chose the page you wish to edit and edit it in your browser, or you can choose “Add New” from the Pages sub-menu to create a new page.

Accessing your V Drive from a Macintosh Computer

If you need to access your personal V Drive space from a Macintosh computer, please follow these instructions.

1.  Make sure that “Finder” is your active program.   The active program is the program whose name is listed to the immediate right of the Apple logo in the top left corner of your screen.     If “Finder” is not your active program, you can make it the active program by clicking anywhere on your desktop.

2.  From the menu at the top of your screen, choose “Go>Connect To Server”.

3.  In the “Server Address” box, enter “smb://users.marshall.edu/users/username” where “username” is your MUNET account name.

4.  When prompted for your username and password, use the following format for the username:  MARSHALLusername.

After entering your password and authenticating, you should see your V drive appear as a mounted disk on your desktop.

Publishing Your Outlook Calendar to ICS for Reuse

Screencast: Mapping a network drive -Windows

Tutorial: Using Sharepoint Designer to Manage Your Site

One way to easily edit web sites on the Marshall University web server is by using Microsoft Sharepoint Designer.

This is the tool that has evolved out of what used to be Frontpage,  so users familiar with past versions of the Frontpage application should feel at home using Sharepoint Designer.

Sharepoint designer is available as part of the Microsoft Office 2007 Suite available for Faculy/Staff machines, and It may already be on your system (Start>All Programs>Microsoft Office>Microsoft Office Sharepoint Designer) but if not, the UCS Help Desk should be able to install it for you.

Once you have Sharepoint Designer installed, follow  these steps to edit your site:

1. Map a network drive to your web directory on the Marshall University web server.
a.     You do this by going to  [Start>Computer]  and
b.     clicking “Map Network Drive” in the upper right hand corner.
c.      Select an appropriate drive letter (any open drive is fine)
d.     In the “Folder” box, type \marshall.eduwww{your directory}
e.     If you’re not using a public computer, you may want to check the “Reconnect at logon” box
f.      Click “Finish”

g.       You will be asked for your username and password – enter these   as “MARSHALLusername” and “password” where indicated.
h.      If all goes well, you should now have a new drive letter in Windows Explorer showing the content of your web directory.

2. Next, Launch Sharepoint Designer [Start>All Programs>Microsoft Office>Microsoft Office Sharepoint Designer]
a.      From the Sharepoint Designer Menu, select “File>Import>Import Site Wizard”
b.     This should bring up the “Import Website” Wizard.
c.      In the Import Website Wizard, beneath the “How do you want to get the files?” question, Select the “HTTP” radio button
d.     In the “Website Location” input box, after the ‘http://’, type: www.marshall.edu/{your directory}
e.     Click next, and wait a moment as Sharepoint Designer communicates with the server.
f.      Next, you’ll be asked to specify a location for a local copy of your website.   Uncheck the “Add to current website” check box if it’s selected, and type “C:Local Copy of Web Directory” in the “Local Copy Location” input box.   This will tell Sharepoint to create a new directory on the C: drive of your computer, name it “Local Copy of Web Directory”, and copy all of the files from your web server directory to this new directory on your computer.   (Note that you can name your local directory whatever you’d like).
g.      Click next, and on the “Set Import Limits” page, make sure that none of the check boxes are selected, so that Sharepoint knows to get all of the data.   Click next again, and then click Finish.    You should get a notification that the site you are importing was created in Front Page – click “Yes” when you see this notice.    It may take some time for the site to import.   Once the import is complete, you will see all the files from your webserver on your local computer.
h.     At the bottom of the list of files in the “Web Site” pane, you’ll see the words “Remote Web Site” – click those words.   This will take you to the “Remote Web Site” view.   At the top of this view is a “Remote Web Site Properties” link.   Click this button.
i.        In the “Remote Web Site Properties” wizard, under “Remote Web server type”, select the “File System” radio button,  and type in or browse to the drive letter that you used for the mapped directory in step 1.  Click “Ok”.
j.       You should now see both a local and remote view of the files.   The first time you do this, all files will show as “out of sync” because Sharepoint hasn’t compared them.   You’ll know they’re showing as out of sync, because they will have a “?” beside the file name.   Select the “Synchronize” button at the bottom, and then click “Publish Web site”.

3. From here on, whenever you make a change to a file in your “Local Web Site” pane, it will show as out of sync with the server.  When you’re done making changes, selecting “Synchronize” and then clicking “Publish Web site” will publish your changes.

Tutorial: Using the MAILTO Script

MAILTO Script

Introduction Forms are used on web pages to gather information from the pages’ visitors. They are especially useful for surveys and comment forms. Each form must have a small program, or script to process the information and do something with it. In this guide we will show you how to insert a form using Marshall’s mailto script into your web page. Please note that this script will only work for pages affiliated with Marshall University.

Using the MAILTO Script Marshall’s mailto script will take the name of each field in the form and pair it with its value (what the visitor entered) when submitted. Each of these name/value pairs will be put in an e-mail and sent to an address you specify.

The following steps will guide you through creating your own form using the mailto script using FrontPage 2003. First you will create a form and set its properties so it uses Marshall’s script. Then you will add hidden fields to customize the script for your use and add visible fields to gather information.

To insert a form in your web page:

1. Place the cursor where you want the form to be created.

2. To create the form, select Form from the Form submenu in the Insert menu (Insert -> Form -> Form).

3. Click within the dotted box representing the form with the right mouse button.

4. Select Form Properties….

5. In the Form Properties window, select Send to other and Custom ISAPI, NSAPI, CGI, or ASP Script.

6. Click on the Options… button in the Form Properties window.

7. Enter http://www.marshall.edu/cgi-bin/formmail.asp as the Action and make sure that POST is selected as the Method.

8. Click on the OK button in the Options window.

9. Click on the Advanced… button in the Form Properties window. Here you will add hidden fields to the form to customize the script for your particular use.

10. In the Advanced window, click on the Add… button.

11. In the Name/Value Pair window, enter one of the special field names listed in the table below and the value to customize the script for your use. The MAILTO_ADDRESS field is required, and all others are optional.

Name Value Description
MAILTO_ADDRESS (Required) The e-mail will be sent to the address(es) in the value of this field. If you need to have the form submitted to multiple recipients, consider setting up an email alias to facilitate this.
MAILTO_SUBJECT The subject of the e-mail will be set to the value of this field. A blank subject is used if this field is not specified.
MAILTO_TITLE The title on the page after the user submits the form will be set to the value of this field. The text 'Form Submission Status' is used if this field is not specified.
MAILTO_SUCCESS The message displayed upon successful will be set to the value of this field. The text “Submission completed successfully” is used if this field is not specified.
MAILTO_URL The URL to be used in a link at the bottom of the page will be set to the value of this field. A link will not be displayed if this field is not specified.
MAILTO_URLTEXT The text to be associated with the link will be set to the value of this field. The text “Continue” is used if a URL was specified and this field is not specified.
MAILTO_REDIRECT Upon successful submission, the browser will be sent to the URL in the value of this field. The other fields listed on this page are ignored if the MAILTO_REDIRECT field is used.

12. Click on the OK button in the Advanced window.

13. Proceed to add fields to your form using the Insert menu. (See the FrontPage 2003 Guide for more information on how to do this.) The name of each field will be listed in the e-mails followed by the field’s value.

Conclusion Congratulations, you have added a submission form to your web page. The form will not work when previewing the page on your computer; however, it will appear once you send the page to the server and view it through a web browser.

In each e-mail you get from a submission you will notice some information in the e-mail besides from your form. The IP address along with some other technical information is included to identify where the submission came from. This information can be important if you need to track down abusive submissions.

This mailto script is a good way to gather information from your visitors. You will probably want to create a few sample forms using the different form fields such as text fields and check boxes to get a feel for how the e-mail message you receive is going to look. As with anything related to web development, be sure to test your form pages thoroughly before putting them into production.

Tutorial: Troubleshooting Broken Links/Images

Introduction
At one time or another everyone has run into problems with broken images or links. Normally these are easy to fix but to the inexperienced user they can turn into a nightmare. In this tutorial we’ll discuss some techniques for fixing these types of problems.

Check The Address
The first thing to look at when troubleshooting a broken image or link is to check where the link or image is pointing. To do this for a link simply pass the cursor over top of the link. You’ll see the address for the link appear in the lower left-hand corner of the browser. For an image, you’ll need to pass your cursor over the broken image icon, right click with the mouse and choose Properties from the pop-up menu. The address for the image will be listed on the properties window.

In both of these cases you want to look for obvious problems with the address. This includes misspellings or putting in the wrong information. One common problem with addresses are ones that begin with file:///. Any address beginning with file:/// is going to attempt to load an image or follow a link on the user’s hard drive. This usually happens whenever a page is designed in MS Word or other HTML editor. Sometimes these editors will include the full address to a file on the developer’s machine rather than creating a web address.

If you don’t see any obvious problems, next start with the address and check that it is pointing to the right location. For example, let’s examine the following address:

http://www.marshall.edu/somedepartment/images/picture.jpg

The first thing we check is which server the address is pointing to. In the above example, the server is www.marshall.edu. Next we check the first subdirectory of the address. In our example, the first subdirectory is somedepartments. Then we check the next subdirectory which in our example is images. After we have looked at all the directories we check the filename. In our example the filename is picture.jpg. So if we were troubleshooting the example we would want to go back and verify that all the server, directories, and filename were all correct.

Check That The Address Physically Exists

If you are linking to one of your own images or files, you should check to make sure that the file actually exists on the server. On www.marshall.edu or users.marshall.edu you can do this by going directly to your web directory and verifying that the file exists and is in the right directory. On webpages.marshall.edu you’ll need to use an FTP program to verify the file.

Conclusion

In this lesson we have looked at a few of the general guidelines to use when checking broken images and links. Although it may seem overwhelming at first, it is a skill that is well worth the effort to learn.

Tutorial: Creating an Email Contact Form

Web Page E-mail Form

Introduction
Many web page developers like to give their visitors a way to contact them. The easiest way to do this is with a mailto link. Unfortunately, placing an e-mail address on a web page can drastically increase the amount of unwanted e-mail that the address receives. This is because programs called spiders continuously search the Internet for e-mail addresses to send advertisements and other types of spam.

In this guide we will show you how to link to Marshall’s E-mail Form so that visitors can send you e-mail without making you address susceptible to SPAM.

Using the E-mail Form
To use Marshall’s E-mail form, you must insert a link in your web page. Whenever a visitor clicks on the link, he or she will be taken to a page with a form where he or she can send you a simple message.

To insert a link to the Marshall e-mail in your web page:

1. Place the cursor where you want the link to appear.

2. Click on the Insert Hyperlink button on the toolbar.

3. In the Insert Hyperlink window, enter the text for the link in the Text to Display field and enter the following location in the Address field, replacing muuser with your MUNet username. (If your e-mail address is novice1@marshall.edu, your username is novice1.)

/www/emailform.asp?user=username

Conclusion
Congratulations, you have added an e-mail link to your web page. While this method takes slightly more effort than creating a simple mailto link, hopefully it will help keep your e-mail from becoming flooded with unwanted e-mail.

While it is possible for visitors to pretend to be someone else while using this form, there are some precautions that have been taken so we will be able to track down abusive submissions from this form. As stated on the form page, the time of submission and the IP address of the submitter will be included in each message. This information can help in tracking down who actually sent a particular message.

Tutorial: ASP Based Hit Counter

Web Page Counter

Introduction
Web Page Counters are used to determine the number of visitors a certain page receives. Each time a visitor looks at a page with a counter, the counter is incremented and the number is displayed to the visitor.

In this guide we will show you how to insert Marshall’s counter into your web page on www.marshall.edu. Please note that this counter will only work for pages that end in .asp and are on the www.marshall.edu server.

Using the Counter
To use Marshall’s counter, you must insert a specific piece of HTML code in your web page. Whenever a visitor requests the page, the server will basically replace this piece of code with your web page’s current visitor count.

To insert the Marshall counter in your web page:

1. Enter the text the will go around the counter.

2. Place the cursor where you want the counter number to appear.

3. Click on the Code tab at the bottom to switch to the Code view.

4. Without moving the cursor, enter the following HTML code exactly as it appears:

<!–#include virtual=”/cgi-bin/counter.asp” –>

5. Click on the Design tab to switch back to the Design view.

Setting the Counter to a Value
It is possible to set the counter to a specific value – such as zero to reset the counter. To do this, you will add a small ASP statement to the page, upload your changes to the server, view the web page, and then remove the statement.

1. Place the cursor some place before the counter.

2. Switch to Code view.

3. Enter the following ASP statement – you may replace the zero with any value to which you wish to set the counter:

<% setCounter = 0 %>

4. Save the web page and upload it to the server.

5. View the web page on the server. This will set the counter. A message stating that the counter has been set will appear where the counter number typically does.

6. Remove the ASP statement you inserted in step 3.

7. Save the web page and upload it to the server.

Conclusion
Congratulations, you have added a counter to your web page. The counter number will not be displayed when you switch back to Design view; however, it will appear once you send the page to the server and view it through a web browser.

This counter script is an easy way to show yourself or your visitors how many visits a particular web page has had. This can be useful in determining how popular a site is and whether or not it is worth the time spent maintaining it.