215 East Broadway Street

Alliance, OH 44601

330-821-2665

Style Guide for Web Page Production

For guidelines regarding specific elements of Alliance Web Site pages, refer to this document.

GENERAL INFORMATION

PRODUCTION:

NCSA has a tutorial available on how to write HTML documents. Its address is http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html This is a good place to learn the basics of HTML and Web documents.

There are many programs available for the easy production of HTML documents including Microsoft FrontPage, Claris HomePage, Dreamweaver, or Adobe GoLive. Freeware and shareware versions of other editors can be downloaded from such software archives as http://www.shareware.com. FrontPage Express was included as an Internet Explorer add-on in Windows 98. Information on FrontPage Express can be obtained from Microsoft's web site at http://www.microsoft.com/Windows98/usingwindows/internet/Articles/003Mar/FPExpress.asp

PICTURES:

Pictures and other graphic elements should be kept as small as possible. If greater detail is wanted of a graphic, make a hotlink to the full-size version of it.

Graphics must be in one of two formats: gif or jpeg. Gif files are used for general illustrations while jpeg files are used for photographic images. You will need a paint program to produce these formats from your image files. Adobe Photoshop is an excellent high-end program but can be daunting to learn. Less expensive but as fully functional for the web is Paint Shop Pro published by Jasc. Other graphic editor programs can be found at http://www.shareware.com. Use the search term "gif" or "jpeg."

Interlaced graphics are possible in GIF89a format and are the best way to display images quickly. These graphics paint on the user's screen faster than non-interlaced graphics.

To compact your gifs to the smallest possible size, test them with GIFBot™ from NetMechanic® at http://www.netmechanic.com/accelerate.htm.

LINKS TO YOUR FILES AND GRAPHICS:

Whenever possible, use relative links instead of absolute links to your other files of information and graphics. Relative links include a file pointer to another page on your site. For example: /nonprofit/home.htm. Absolute links include the entire address to the page. For example: http://www.rodmanlibrary.com/nonprofit/home.htm. Relative links are easier to maintain if we move folders around or you decide to move your files to your own server some day. Remember, the server doesn't care how many files are in a given directory as long as the links to it are accurate and complete.

STANDARD PAGE FORMAT FOR ALLIANCE WEB SITE:

A template has been made available to get you started and is available from http://www.rodmanlibrary.com/nonprofit/nonprof.htm. Save a copy of it to your disk and then edit it with your information. Some details of key elements follow below.

The first lines of your page should be as follows:

Header (Top of page):

<html>
<head>
<title>Title of Your Page</title>
</head>

Microsoft FrontPage, Claris HomePage, Dreamweaver, or Adobe GoLive will put this information in for you when the document is created.

Body:

The body section of your document is where all your pertinent information will be stored. You should always include full addresses and telephone numbers when supplying this information. It may suffice to say 210 W. State Street on something that is only going to be used by someone in Alliance, but this information will be available to anyone in the WORLD. If someone wants to contact you, whether from Canton, Ohio or Canton, China, full information is needed.

Main Library:
Rodman Public Library
215 E. Broadway St.
Alliance, OH 44601
(330) 821-2665

For example:

A way to start your page is with an image of significance to your organization. This may be your logo, an official seal, your letterhead insignia, or a photograph or image that is pertinent to the page's information. The use of this graphic on every page for your organization will solidify an identity that the page belongs to your site and will help users know where they are. RPL can scan existing images for your organization and help you get them into the proper graphic format for the Web.

Graphics for your organization should be kept in a separate folder from your HTML documents:

The top-level directory for nonprofit/community organizations is /nonprofit. Your organization will have a folder under that folder. For example: /nonprofit/kiwanis.

Other hints:

Include horizontal rules <hr /> to break up sections in long documents.
Use lists, either unnumbered <ul></ul> or ordered (numerical) <ol></ol> to summarize links to other documents for variety. Use <LI> to start each new line. Bullets or numbers will be added automatically.
Use graphics sparingly and keep them small (20K at a maximum). As a size guideline, graphics should be no more than 500 pixels wide x 300 pixels high.
Don't worry about page breaks. Web browsers ignore word processor supplied page breaks.
Don't be wordy. Studies have shown that browsers of Web pages scan for significant words and links. If your page is meant to get someone to another page, use a list or short narrative. Avoid lengthy documents unless the information contained is crucial and can be accessed no other way.
Check your links! All links, whether they are internal, external, or graphical, must be accurate and lead the user to the correct target. If users get too many error messages, they will stop visiting your site.
Once you are familiar with basic HTML, experiment with tables to control the layout of your page.

Footer:

The footer of the page is used as an informational place for persons using your pages. By using the <ADDRESS> tag for your footer information, all the text will be formatted in italics. The standard footer should include the following information:

Separate the footer from the body with a horizontal rule <hr />.
A link back to the Alliance Home Page. Use the graphic along with text or just use text. (See examples below.)
Links to other pertinent pages. For example: an "About Us" page, your site's home page, your organization's national site.
An e-mail contact person. This is the easiest way for Web browsers to contact you for further information about your pages and your organization. (See the coding in the example below.) Optionally: include traditional address and telephone number information along with a contact person.
The date you last updated the information on the page. Web browsers appreciate (and trust) up-to-date information. This will also help you keep track of when your site was last updated.
Since this is a joint project, please include this final line in your footer:
"Community Web Pages hosted by Rodman Public Library."

Footer Example with Graphics:

Alliance Home Page

RPL Home Page

For further information, contact: YourEmail@YourISP
This page last updated: January 21, 2005

Community Web Pages hosted by Rodman Public Library.

======================================
Coding:
<hr />
<table>
<tr align=center>
<td><a href="http://www.alliance.oh.us"><img align="middle" src="/graphics/allihomebut.gif" /> 
   <br />Alliance Home Page</a></td>
<td><a href="http://www.rodmanlibrary.com"><img align="middle" src="/graphics/rplsmall.gif" /> 
   <br />Rodman Public Library Home Page</a></td>
</tr>
</table>
<br />
<address>
<b>For further information, contact:</b>
   <a href="mailto:youremail@yourISP">YourEmail@YourISP</a>
<br />
This page last updated: January 21, 2005
<br />
<br /> Community Web Pages hosted by Rodman Public Library.
</address>
</body>
</html>

Footer Example without Graphics:

Alliance Home Page | Rodman Public Library Home Page