Web designers should consider the following basic guidelines when creating web pages.
See also: Web Directory Setup, Web Image Capturing, and Club Web Site Tips

A. Site architecture:

1. Organization is everything, so plan ahead
   • name files so they cluster together, OR
   • place them in a directory so they are easy to find
   • consider using an images directory for all graphics files
2. Use directories to organize your information
   • name the directories carefully, as they become part of the URL
   • http://www.bates.edu/ils
3. Every directory must have an index.html file (or index.htm)
   • web browsers look for that file first in every directory
   • without one, the directory’s contents are listed
   • this looks tacky, and tends to lose your visitor
4. .htm or .html? they both work the same on either platform and for either browser, the .htm is standard for Windows, and the .html extension is standard for Mac OS. Just so that you don’t accidentally specify a file that doesn’t exist, pick one, and be consistent throughout your web site.
5. index.htm and index.html are two different files
6. WebMonkey.com: basics

B. Naming guidelines:

1. File names are case sensitive:
   • only use capitals for emphasis/clarity in file names
   • filename.htm and fileName.htm are two different files
   • index.htm or index.html should be lower case
2. Use only alphanumeric charactersfor filenames
   • Never use:
   • punctuation  , . ‘ ” ; : ! ?
   • slashes or pipes  / |
   • special characters  @#$%^&*( )
   • spaces  file name.html
3. You may use:
   • hyphens –  file-name.html
   • underscores _  file_name.html
   • mixed case  fileNAME.html

C. File types and extensions:

1. Only certain filetypes can be read by web browsers
   • only one period (dot) followed by the file extension
   • the filetype and extension must match
   • .htm or .html for html files
     (pick one, be consistent)
     • file.htm and file.html are two different files to a web browser
   • .gif for GIF 256 color graphics
   • .jpg for JPEG photographic images
   • .pdf for Portable Document Format files
2. File types continued:
3. • .css for Cascading Style Sheets
   • .mp3 for MPEG (Layer 3) audio files
   • .png for Portable Network Graphics
   • .xml for eXtensible Markup Language

D. Information Design:

1. provide information from the general to the specific
2. Place most sought after information “above the fold” so that users don’t have to scroll past the first screen to get it
3. Let users know they are on the right (or wrong) track to finding the information they require on each page they access
4. “Surface” particularly relevant information with additional links in key places
   • for example faculty/staff and student gateways
   • Make pages scan-friendly with headings, font size & color changes and indentation

efuse.com: The Basics of Navigation

E. Usability:

1. Organize your information to capitalize on these habits:
   • in the information age, all of us have become scanners
   • in western cultures users read from upper left to lower right
2. Consider the differently abled when you create web pages
   • alt tags describing or labeling all images accessibility, courtesy to slower downloads
   • make links mean something: NOT just “click here”, for software that reads link names for the visually impaired and also for users who visually scan for information, it makes links easier to find
3. Don’t ever swap link colors
   (only change them if necessary)
   blue = unvisited link, purple = visited
4. Pick page, text and link colors carefully
   • with sufficient contrast
   • dark text, light background, bright links, duller visited links
   • avoid using complimentary colors
     blue & orange, purple & yellow, red & green

F. Best practices:

1. use the simplest technology to achieve required goals
   • if tables will work rather than frames, use them
   • if html will serve rather than an image, use it
   • if something only looks good in one browser/platform, change it
2. Strive for fluid design practices
   • what a user sees on the web cannot be completely controlled so don’t try
   • web pages are a unique medium for communication, so don’t treat them like a printed page

When using the web to gather information and images for academic endeavors, always consider copyright issues, and whenever you use an image, you must cite your source.

A. Find an image you wish to use:

1. MAC: click and hold on the image
2. WIN: right click on the image
3. Select Save Image as… from the pop-up menu

B. Assume all images on the web are copyrighted

1. Copyright allows for the use of some material for certain academic purposes only
2. Ladd Library Copyright Information

C. Specify where and how to save the Image:

1. In the Save Image as dialog, name the file meaningfully
2. Be sure it is being saved somewhere you can find it
3. For web use, never use spaces or special characters for names
4. Best to leave the extension alone (.jpg .gif .png)

D. Save the URL of the page where the image was located:

1. Either copy and paste the location into a text document
2. Or click and drag the bookmark icon onto the desktop

E. ALWAYS CITE YOUR SOURCE

1. Ladd Library Citation and Style Guides

Note: In the following instructions, please make sure to include all the spaces and punctuation for each command. Otherwise you may be given an error “Command not found”. If you get this error, check the punctuation and the syntax of your last command.

A. Log into Abacus with your abacus user id and password:

1. You should see a prompt:
   abacus.bates.edu>
   WIN: requires a third party application to establish a secure shell (ssh) connection to abacus. PuTTY is the recommended SSH client (and is fully supported by Help Desk Services).
2. A helpsheet on obtaining (free) and installing PuTTY can be found at:
   http://www.bates.edu/ils/2011/08/putty-install-and-configure-remote-access-for-windows-ssh/
3. A helpsheet to configure PuTTY to connect to abacus can be found at:
   http://www.bates.edu/ils/2011/09/terminal-settings-remote-access-for-macintosh-ssh/
4. MAC: Applications: Utilities: Terminal:
   Type in: ssh abacus.bates.edu Press return

B. Check for an existing web directory:

1. At the abacus prompt, type: ls -l
2. There is a space between the “s” and the “-”
3. If you see a public_html directory see below

ls stands for list. This command will show you the available files and directories.
-l stands for Long list format. This will show a detailed list view of the available files and directories.

C. Create a web directory:

1. Type: mkdir public_html
2. Press return

mkdir stands for Make Directory (named) public_html. A directory is the same as a folder you work with on your desktop. It contains other folders and files.

D. Check your work:

1. At the abacus prompt, type: ls -l
2. There is a space between the “s” and the “-”
3. If you don’t see public_html return to step 3

E. Make your account executable:
These directions set the permissions for your group, and all others to Execute files in your web directory. chmod is the command to change permissions. (g) & (o) stand for Group and Other. The (+) symbol stands for add and (x) stands for Execute. The file or folder to which you are assigning these permissions is last. Please also consult the basic steps for file permissions.

1. At the abacus prompt, type:
   chmod go+x .
2. There is a space after the “x” and then the period
3. Press return.
4. Type in chmod go+rwx * [NOTE: there is a space between the x and *]
5. Press return

Image files and/or other files can be viewed in a web browser by the following url construction:  http://abacus.bates.edu/~username/filename.ext

F. Close your abacus account:

1. At the abacus prompt, type: exit
2. Then FILE: Quit the ssh application

G. After you’ve uploaded your webpages, your URL will be:

1. www.bates.edu/~abacusID
2. For example: www.bates.edu/~hpotter

Creating a basic Powerpoint slideshow is fairly simple. Organize your information, and collect your images first. When using the web to gather information and images for academic endeavors, always consider copyright issues, and whenever you use an image, you must cite your source.
Also be sure to consult our web page on presentation tips.

For both Mac and Windows platforms the application does much of the work for you. The tab look for PowerPoint 2007 for Windows is different than the more traditional menu approach of Macintosh PowerPoint 2008.

A. Windows:

1. Design tab: sets the layout and background colors/patterns (if any), and influences the layout in terms of choosing portrait or landscape orientation. Be consistent with the design elements, better not to mix and match
2. Home tab:allows you to choose the layout for a presentation with both text (and images)
   • A bulleted list often fits more in a phrase to match the presentation than complete sentences
   • Choose insert new slide, decide if a text slide or mixture with images
   • When a url is typed into the slide it becomes a hyperlink
3. Insert tab: inserting picture(s) from file > navigate to local drive, i.e. desktop, or from one of the network storage drives. Follow these directions for accessing images or files from network drives
4. Photo album [under Insert tab]:
   
   Creates the whole presentation including a title page called Photo Album including the name of author
5. • Select images from the web or file storage location (see above).
   • Click open, move images up and down with the arrows in presentation order
   • Select picture layout (fit to slide, 2,3,or 4 pictures per slide), if more than one image,  you can choose captions below the slide and whether all pictures should be in black and white
6. Insert is a powerful tab that includes adding video, audio, headers, footers, pagination, and symbols
7. Animations tab refers to the slideshow presentation itself, whether there is a mouse click involved, timed automatically, fade in, etc.  Practice will tell if the first choice is the correct one.
8. View tab: presentation view selections are most important for how to display the show on screen and handouts/notes.

B. Macintosh PowerPoint 2008 has more of a menu look and feel with the Formatting Pallette containing most of the layout and background choices. To see this pallette, click under view, then click Formatting Pallette.

1. Insert menu has options for adding a new slide, picture, textbox, audio, video, and hyperlinks. Many of these are also available by clicking buttons on the row above the slides.
2. Slide Show gives animation, timing settings, and slide transitions. Practice your show to see if a mouse click is what is desired to advance slides or specific time setting.
3. File Save as gives the opportunity to save as a picture, movie, or web page. Print would allow the presentation to be turned into a pdf, too.
4. Photo Album  for the mac is coordinated with the iPhoto Library by default but can be set to a different folder. Turn on the Toolbox (button on the Standard Toolbar) then click its Object Palette button or go to View> Toolbox> Object Palette.
   

   On the Object Palette click the Photos button (looks like a camera ). Choose Photos from the dropdown if necessary & drag the image to the slide. It will be sized automatically but there is an AutoFit Options button that appears at the lower right corner of the image.
   Tip: Click the bent arrow icon in the upper right corner of the Object Palette to adjust settings for default photo insertion size.

Please Consult Web Image Capture Copyright and Citation Considerations

Web Tutorials and Resources:

PowerPoint 2007: Training Videos
Help for PowerPoint 2007
PowerPoint Tips from Createthefuture.com

Contact Help Desk Services for Microsoft E-learning (MeLL) PowerPoint online resources.

Before you begin the construction of the web pages, it is necessary for the Organization president to contact Help Desk Services (x8222) to request access and permission for the club’s web person to post to the site.

Dreamweaver is the supported web authoring tool for student organizations, and is available on computer lab machines. General instructions in PDF format for Dreamweaver are available at: http://www.lclark.edu/~infotech/HELP/HELPSHEETS/dreamweaver8.pdf

A. Open Dreamweaver and set up site definitions:

1. Under Site, click New Site
2. Click Local Info
3. Name the site (A)
4. Click browse folder to locate the local root folder (B)
5. Click browse folder to locate the images folder (C)
   
6. Click Remote Info
7. Pulldown to select Access: FTP (D)
8. Type in Host: abacus.bates.edu (E)
9. Type in path for Host Directory: (F) ex.: /usr/local/httpd/htdocs/people/orgs/rugby
10. [the directory name after /orgs = the club or organization name and may have subdirectories under that one]
11. Select SFTP for Dreamweaver MX2004+ for secure connection
12. Type in your username, press tab and type in network password (G)
13. Click Ok
    

B. Begin a home page:

1. Add text, images, links, etc. to the top level page, and save as index.html to the local folder
2. images and links should be relative, i.e. schedule.htm not full path:
3. http://abacus.bates.edu/people/orgs/rugby/schedule.htm
4. Preview pages in browser (File> Preview in Browser> choose from list) to examine page display and links
5. Be sure to save all pages and images locally, then upload them to abacus using the “put” or sftp function in the web authoring tool

C. Troubleshooting / Common Problems and Solutions:

1. “I uploaded the club website, but an access denied error appears in the browser”
   The read and execute permissions on the directories may need to be changed.
   • Open a SSH Putty session to abacus.bates.edu
   • Login, with username and password
   • At the abacus.bates.edu prompt type in:
     cd /usr/local/httpd/htdocs/people/orgs/clubname
   • Press Return, at the abacus.bates.edu prompt type in:
     chmod go+rx *.*
     [be sure to have a space between chmod and go+rx and between go+rx and the 1st *]
2. “A 404 page not found error happens trying links to pages within the site”
   The link paths should be relative to the directory they live in, in the ex. above. schedule.htm lives in the root directory of “rugby” as does index.htm and that is all that is needed for the file name.
   If there is a subdirectory, /subdirectory/filename.html calls the appropriate file.
3. “Images are missing/broken from the club webpages”
   Do the image files appear on the “remote” or server side of the images directory in the site management? If not, upload the local images folder to the site (from within the root directory). Check for accuracy of filenames spelling, capitalization, etc. (i.e. image1.jpg vs. image1.JPEG)
4. “I want to edit a site, but I don’t know who to contact for permission.”
   Find out the name of the last person in the organization to be in charge of the website, then email jfrizzel@bates.edu with the club name and web address, and the previous web editor’s name, for the needed permissions.
5. “Can we use CMS for the club webpages?”
   CMS is the official/departmental web publishing tool, and is not available for student club or organization authoring. Dreamweaver is supported, and available on lab machines throughout campus.
6. “Why are there extra characters in the url of the club website?”
   Urls should be easy to read and relate to others. Spaces in directory or file names can place % in the url or an underscore _ can be missed easily, and make a difference in locating the page. Short, one word directory and file names make for easy to use and find web pages.

1. Use Dreamweaver to create basic form elements
2. Never put spaces in any web file names
3. Only use letters and numbers in file names
4. Layout your form and name your variables FIRST
5. Use simple names for all form objects

Simple Form Example:

Complex Form Example:

B. Create a merge.txt file for your form:

1. Include all variables in the form of an email message
2. Can be done in Dreamweaver, saved as .txt file
3. Place variable names in brackets: [variable]

C. Create a display.txt file for your form:

1. This is a simple web page that appears after submission
2. It is important to tell the user the submission worked!
3. Can be done in Dreamweaver, then saved as .txt file
4. Place variable names in brackets: [variable]
5. (to make your feedback customized!)

D. Connect your web form with e-merge:

Edit your HTML form to tell it what action to take:
<form name=”name” method=”post” action=”http://abacus.bates.edu/cgi-bin/e-merge
/path to files/merge.txt&display=
/path to files/display.txt”>
“name” = a name for your form (whatever makes sense)
/path to files/ = location on abacus of merge.txt & display.txt

E. EXAMPLE URL FOR FORM:http://abacus.bates.edu/~rrichar2/form/

F. EXAMPLE FORM TAG:

<form name=”formTEST” method=”post” action=”http://abacus.bates.edu/cgi-bin/e-merge
/~rrichar2/form/merge.txt&display=
/~rrichar2/form/display.txt”>
G. Publish all three files to the same web directory:

1. index.html (HTML form), merge.txt, display.txt
2. Never put spaces in any web file names
3. Only use letters and numbers in file names
4. Be sure permissions are set so that others may read

H. Test your work:

1. Try every different combination of responses
2. Be sure that your variables are coded correctly
3. Always make sure the merge.txt file has your email address in it for testing purposes!