CREATING
A WEB SITE
prepared by by Ellen Geringer, CCC
Staff Development Coordinator
An institution's web site is sometimes the initial entry point for members of the public. The impression made by the web site may encourage or deter further [personal and virtual] contact, so it is important that all portions of the site meet the same standards of excellence while providing content that is useful and accessible.
WEB PUBLISHING PROCESS
Creating a New Web Site
1.Contact the College Webmaster (Roger Polk) to request space on the Web server.
2.The Webmaster will coordinate with the Technology Services to:
a.Determine the site's location within the architecture of the main site.
b.Create the opening page for the department, division or functional area if needed.
c. Provide a user name and password.
Updating an Existing Web Site
1.The creator of the web site is responsible for revising and updating the content of a web site. The site should be reviewed at least once per semester.
2.The site creator is responsible for testing his/her page on both Mac and PC platforms using both Internet Explorer and Netscape browsers.
3.Sites will be reviewed periodically for currency. If a site has outdated information and has not been updated in 6 months, the site owner/editor will be notified. Sites that are not updated may be removed from the main site navigation structure until it has been revised.
CREATING A WEB SITE
Host Requirements
If a web page is going to be linked to or hosted on the CCC server, you must follow the College's Web Publishing Guidelines (separate handout).
Planning a Web Site
Start with some basic planning questions:
A consistency in design and navigation structure makes a site easier to use and maintain. Use the following standards to help achieve this.
Directory Structure: If your site is small, all files can be in the same directory. If you have many files, arrange them in a hierarchical structure using subdirectories as listed below. The rule of thumb is to group similar items into their own directories (a.k.a. "folders").Images: Put all graphics and photos (GIF and JPG files) in a directory named images. (Images for the web should be no larger than 72-dpi resolution.)Media: Put any audio, video, Shockwave, Flash, or other multimedia files in a directory named media.
PDF: Adobe PDF files should be in a directory named pdf.
File, Page & Directory Names: Use simple, logical names. Don't use cryptic abbreviations that won't mean anything to you -- or your users -- later. If someone "bookmarks" your page, you want its name to make sense when viewed later in a "Favorites" list. Do not use spaces or special characters; underscores or dashes are okay.
Home page: Your site's home page should be named index.html (or index.htm if you are using a PC platform). This will allow the server to send the appropriate page even if a user enters only part of the URL.Visual Appearance: Be consistent in your application of design elements; don't change color palettes, the location of navigation menus, or other major elements from page to page wantonly. Make it easy for users to know where they are, and how to move back and forth through your pages. Follow Universal Accessibility guidelines to assure that your pages are usable by everyone.
Screen Size: Design web pages to be viewed correctly at a screen resolution of 640x480.Background: Keep it simple so that text is legible.
Color: If you use colors, make sure that there is high contrast between background and text. Do not use colors only to convey information.
Fonts: If you specify fonts, keep them simple, without serifs.
Frames: Do not use frames on any site hosted by or linked to the College web site.
Hyperlinks: Choose meaningful words or phrases for links. Don't use "Click here."
Images: All graphics must have alternate text. Make it descriptive of the image content.
Page length: Try to limit the amount of information on one page (Web users tend to not want to scroll). If you must have a long page, use internal page hyperlinks so that a user can jump to a desired area.
Sound: Sound files can slow the download time. Make sure they have a purpose. If you need to include a sound file, make a link on the page so that a visitor can turn it on and off.
Tables: If you use tables for data, clearly label rows and columns, and use the Table Summary attribute in the table tag.
Navigation: Use an organized and consistent navigation structure that is in the same location on each page. A visitor should be able to return to your site's home page from any page within your site. Each page in your site should contain:
Contact information -- email address for comments and/or questionsDate of last site update
Text navigation alternative to graphic navigation bars
If hosted on the CCC web server:
A link to the Contra Costa College home page http://www.contracosta.edu
The name of the department and/or name of site editor
Content: Respect copyrights! Federal copyright law includes the protection of pictorial, graphic, audio and visual works. Fair use for educational purposes does NOT permit the appropriation of graphic images or other material
Universal Accessibility: All pages must be designed so that people with disabilities can use them as effectively as those without.
Section 508 Federal Acquisition Regulations Final Rule published on April 25, 2001 stipulates that all web pages created on or after June 21, 2001 must conform to the Priority 1 guidelines as set forth in the Web Content Accessibility Guidelines Document 1.0. http://www.w3.org/TR/WCAG10/full-checklist.htmlYou can check the accessibility of your web site for Section 508 compliance with software such as Bobby http://www.cast.org/bobby/
TUTORIALS & WEB DESIGN GUIDES
Alliance for Technology Access
http://www.ataccess.org/default.html
A FrontPage Tutorial by Troy Dreier
http://idm.internet.com/articles/200003/fp_index.html
High Tech Training Unit: Resources for Designing Accessible Web Pages
http://www.htctu.fhda.edu/webaccess/acccessdesign.html
HTML Crash Course for Educators
http://edwebproject.org/htmlintro.html
Macromedia e-Learning Resource Center
Includes accessibility information as well as a CourseBuilder Extension for Dreamweaver
http://www.macromedia.com/resources/elearning/
Microsoft Office 2000 Tutorials (including FrontPage) - Florida Gulf Coast University
http://www.fgcu.edu/support/office2000/
Web Accessibility for Section 508
http://www.jimthatcher.com/webcourse1.htm
Web Content Accessibility Guidelines
http://www.w3.org/TR/WAI-WEBCONTENT/
Web Pages that Suck
http://www.webpagesthatsuck.com
Web Style Guide, 2nd edition -- Yale Center for Advanced Instructional Media
http://www.webstyleguide.com/index.html?/