Creating a Webpage using the Short Faculty Template

This tutorial assumes the following:

Editing the Short Faculty Template

  1. Open Nvu, if it is not already open.
  2. From the File menu choose Open, or click the Open icon from the icon bar
  3. From the 508_Faculty_Templates folder go to 508_Short > index.htm
  4. Click Open
  5. The template below will appear in the right window
  6. IMPORTANT NOTE: When making the text editing changes described below take care to highlight ONLY the text and try to avoid highlighting and spaces that may exist before or after the text. Selecting these spaces can sometimes delete html tags that exist behind the scenes and will remove important formatting.

Changing the Look of your Webpage

This template was create using a Cascading Style Sheets. This means that all the formatting for the document (font size, color, images, etc.) is housed in a seperate document. This allows you to change the look of your webpage easily. The templates come with three different stylesheets to choose from and changing the style is very easy.

  1. Choose the style you want to apply to your webpage from the images below and write down the name of the style.
    thumbnail of style 1 Thumbnail of style 2 thumbnail of style 3
    Style title - css_1.css                         Style title - css_2.css                         Style title - css_3.css
  2. From the menu bar in NVU choose Tools > CSS Editor
  3. Under Sheets and Rules on the left side of the window a stylesheet name will be listed.
  4. Highlight the stylesheet name and click Remove
  5. Now click on the button entitled Link elt. The right side of the window will change
  6. Next to URL click Choose File
  7. From the Select a CSS File window go to Desktop > 508Templates > 508_Short and choose the .css file you selected in step one. (ex. css_3.css) then click Open
  8. From the URL line you MUST remove everything before the filename or the link will not work properly. Using your mouse, highlight and delete everything before css_#.css (ex. file:///c:/DocumentsandSettings/benignim/Desktop/508_Faculty_Templates/508_Short/)
  9. Now click Create Stylesheet
  10. Click Close to close the window
  11. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Edit Name and Title

  1. Using your mouse, highlight the name area (Type your name) DO NOT HIT THE DELETE KEY. Just type your name and it will replace the highlighted text.
  2. Repeat this process over the text that reads Type your title.
  3. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Edit Office Hours

  1. Using your mouse, highlight the time next to Monday: (note: don't be alarmed if Nvu turns the area around the text black. That is its way of indicating the area to be edited)
  2. Type in the new time and it will replace the highlighted text.
  3. If you do not have office hours on that day the highlight the entire row (Monday: time) and press the Delete key on your keyboard until the text and bullet go away.
  4. If you wish to add a line, place your cursor (mouse) at the end of the previous line and press the Enter or Return key on your keyboard. This should make a new bulletted line.
  5. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Edit Vita

  1. First, make a copy of your vita and place it in the 508_Short folder on your desktop (Desktop > 508Templates > 508_Short). Your file must be in this folder before you can make the link.
  2. After you have copied your vita into the 508 folder, go back into NVU and, using your mouse, highlight the text "View a copy of my vita in PDF". Whatever you highlight will become the live linked text.
  3. From the icon bar at the top of the window click Link. You can also click Insert > Link.
  4. From the next window click Choose File
  5. Choose your vita from the 508_Short folder and click Open.
  6. The name of your file will appear in the text box under Link Location. Now click OK
  7. If you need to change a link you created you follow the exact same steps and the new file you choose will replace the old file.
  8. Note: If your vita is NOT a PDF (Adobe Acrobat file format) then replace the text PDF with the appropriate text. For example, if you post a Word document then you can type View a copy of my vita in Word format. If you vita is a webpage then you can leave it as View a copy of my vita.
  9. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Edit Biographical

  1. If you wish to change the name of the section title, highlight the section name and type in the new section name. IMPORTANT - make sure to change the corresponding name in the navigation area.
  2. Using your mouse, highlight the text under Biographical (note: don't be alarmed if Nvu turns the area around the text black. That is its way of indicating the area to be edited).
  3. Type in a short biography. You can also paste an existing biography from a word processor or existing webpage.
  4. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Edit Academic Activities

The intent of this area is to highlight the courses you are teaching by semester and to link to the course's corresponding syllabus.

  1. If you wish to change the name of the section title, highlight the section name and type in the new section name. IMPORTANT - make sure to change the corresponding name in the navigation area.
  2. Using your mouse, highlight the text "type in the term and year here (Fall 2006)". DO NOT HIT THE DELETE KEY. Just type the term and year (i.e. Fall 2006) and it will replace the highlighted text.
  3. Next, using your mouse, highlight the text "EDFS ### ### - type class name here". As before do not hit the delete key. Type in your course number and section and the course name. Note: If you don't want to type in both you can only do one. It's up to you.
  4. Repeat this process for all the classes you are teaching this semester.
  5. If you wish to delete a line highlight the entire row and press the Delete key on your keyboard until the text and bullet go away. You may need to press Delete twice.
  6. If you wish to add a line, place your cursor (mouse) at the end of the previous line and press the Enter or Return key on your keyboard. This should make a new bulletted line.

Adding Links to your Syllabi

This section will discuss how to make the class names links that will take the user to your syllabi.

  1. First, make copies of your syllabi and place them in the 508_Short folder on your desktop (Desktop > 508Templates > 508_Short). Your files must be in this folder before you can make the link.
  2. After you have copied your syllabi into the 508 folder, go back into NVU and, using your mouse, highlight the name of the first class in the list. Whatever you highlight will become the live linked text.
  3. From the icon bar at the top of the window click Link. You can also click Insert > Link.
  4. From the next window click Choose File
  5. Choose the course syllabus from the 508_Short folder and click Open.
  6. The name of your file will appear in the text box under Link Location. Now click OK
  7. Repeat for the other classes.
  8. If you need to change a link you created you follow the exact same steps and the new file you choose will replace the old file.
  9. Note: It is good web etiquette to inform your viewers if you are sending them to a file that is not a webpage. Therefore if you post a syllabus that is in Word format or Adobe Acrobat PDF you should indicate that. An example would be:
  10. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Editing Publications and Memberships

  1. If you wish to change the name of the section title, highlight the section name and type in the new section name. IMPORTANT - make sure to change the corresponding name in the navigation area.
  2. Using your mouse, highlight the text under Biographical (note: don't be alarmed if Nvu turns the area around the text black. That is its way of indicating the area to be edited). DO NOT HIT THE DELETE KEY
  3. Type in the publication or membership information. You can also paste existing text from a word processor or existing webpage.
  4. If you wish to delete a bulletted area highlight the entire paragraph and press the Delete key on your keyboard until the text and bullet go away. You may need to press Delete twice.
  5. If you wish to add a bullet, place your cursor (mouse) at the end of the previous line and press the Enter or Return key on your keyboard. This should make a new bulletted line.
  6. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Editing Links

Deleting an existing link

  1. If you wish to delete a link highlight the entire link and press the Delete key on your keyboard until the text and bullet go away. You may need to press Delete twice.

Adding a new link

  1. If you wish to add a link, place your cursor (mouse) at the end of the previous line and press the Enter or Return key on your keyboard. This should make a new bulletted line.
  2. Type the name of the link such as College of Charleston or Google Search.
  3. To make this text a live link, highlight the text you just typed.
  4. From the icon bar at the top of the window click Link. You can also click Insert > Link.
  5. In the text box under Link Location type in the address of the website you wish to link to. Note: You must type in the http:// before the address in order for it to work. (ex. http://www.cofc.edu)
  6. Click OK

Changing an existing link

  1. If you need to change a link you created you follow the exact same steps and the new address you type will replace the old file.

Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Editing the Contact Information

  1. Using your mouse, highlight the text Type your department here. DO NOT HIT THE DELETE KEY. Just type your department name and it will replace the highlighted text.
  2. Next, create a live link from your department name to the department website.
  3. To change your office address, highlight the text type your office address DO NOT HIT THE DELETE KEY. Just type your building and room number and it will replace the highlighted text.
  4. To change your phone, highlight the text #### DO NOT HIT THE DELETE KEY. Just type your phone extension and it will replace the highlighted text.
  5. Repeat these steps for the fax number
  6. To change your email, highlight the text youremail. DO NOT HIT THE DELETE KEY. Just type your email and it will replace the highlighted text.
  7. Next, make your email text a live email address
  8. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

Adding a photo

If you want to add a photo to personalize your webpage, the easist place to add one is in place of the CofC seal.

  1. First, make a copy of the image you want to use (.jpg or .gif) and place it in the 508_Short folder on your desktop (Desktop > 508Templates > 508_Short). Your files must be in this folder before you can add the picture.
  2. Double-click on the CofC seal under Contact Information. A new window will open.
  3. Under Image Location click Choose File
  4. Choose the image from the 508_Short folder then click Open
  5. Next to Alternative Text type in a short description of the picture (ex. headshot of me)
  6. The next step is to resize your picture so that it fits in the space provided. The original CofC seal was 160 pixels wide so it's a good idea to make your image that wide as well.
  7. Your image should now be there and the proper size.
  8. To add another photo go to Insert > Image then follow steps 3 through 8.
  9. Save your document by clicking on the Save icon in the Icon Bar or by choosing File > Save.

 

Publishing your new webpage to Spinner

Macintosh

Due to limitiations inside NVU you must use a seperate program to publish your webpages to Spinner. To publish your webpages from a Macintosh you can use a program called Fugu. The following instructions assume you are using Fugu as your File Transfer Protocol (FTP) client.

  1. Open Fugu
  2. Next to Connect to, in the Fugu window, type www.cofc.edu
  3. Next to Username: type your Spinner username* (ex. benignim)
  4. Leave Port blank
  5. Next to Directory type www
  6. Click Connect
  7. From the next window type your Spinner password*
  8. Your window should now have two sides. The left side is your computer, the right side is your account on Spinner.
  9. On the left side open the 508_short folder (Desktop >508_Faculty_Templates>508_Short)
  10. On the right side, make sure you are in your "www" folder on Spinner.
  11. On the left side (508_Short) highlight all the files in the 508_Short folder (use Apple-A keyboard shortcut to select all)
  12. Using your mouse, Click, hold and drag all of the items from your computer's 508_Short folder to the Spinner side of the window. This will copy, or publish, all the files to Spinner.
  13. Before you close Fugu, open a web browser (Firefox, Safari, Netscape, Internet Explorer) and go to your webpage. Make sure that everything looks correct. If so, quit Fugu.
  14. Congratulations! You have created and published your webpages using the 508 Compliant templates.

* If you do not know your Spinner username or password you must contact the webmaster at webmaster@cofc.edu.

Windows

Due to limitiations inside NVU you must use a seperate program to publish your webpages to Spinner. To publish your webpages from a Windows machine you can use a program called SSH Secure File Transfer Client . The following instructions assume you are using SSH Secure Shell as your File Transfer Protocol (FTP) client.

  1. Open SSH Secure File Transfer Client
  2. Click Quick Connect
  3. Next to Host Name type www.cofc.edu
  4. Next to Username: type your Spinner username* (ex. benignim)
  5. Leave Port with the default number of 22
  6. Next to Authentication method: select Password
  7. Click Connect
  8. You may get a window asking ifyou wand to save a new host key. Click Yes
  9. At the next window type in your Spinner password*
  10. Your window should now have two sides. The left side is your computer, the right side is your account on Spinner.
  11. On the left side open the 508_short folder (Desktop >508_Faculty_Templates>508_Short)
  12. On the right side, make sure you are in your "www" folder on Spinner (double-click on "www").
  13. On the left side (508_Short) highlight all the files in the 508_Short folder (use CNTL-A keyboard shortcut to select all or Edit>Select all)
  14. Using your mouse, Click, hold and drag all of the items from your computer's 508_Short folder to the Spinner side of the window. This will copy, or publish, all the files to Spinner.
  15. Before you close SSH Secure File Transfer, open a web browser (Firefox, Netscape, Internet Explorer) and go to your webpage. Make sure that everything looks correct. If so, exit SSH Secure File Transfer,.
  16. Congratulations! You have created and published your webpages using the 508 Compliant templates.

* If you do not know your Spinner username or password you must contact the webmaster at webmaster@cofc.edu.