Introduction

This is a handbook to help the Faculty and Staff at Fullerton College to create a more cohesive and coherent website. The following guidelines were set forth by the Web Advisory Committee at Fullerton College to establish a foundation on which we can develop a first class website. These guidelines don’t affect the content of the pages; they are standards set forth by the Web Committee and approved by the Planning and Consultative Council (PCC) for web site development on campus.

These guidelines are based on observations and opinions of the committee. The committee is open for suggestions and input from the college community. If you have any suggestions or comments, you can email me at webmaster@fullcoll.edu (Brad Rippe).

On behalf of Academic Computing Technologies, I would like to welcome you to the Web at Fullerton College. We look forward to your seeing your contributions to the FC Web Site.

Content

This is the most important part. This is the stuff that matters. You need to state exactly what you are trying to convey to the audience. Consider prospective, current and previous students, colleagues, co-workers, and peers.

Departments should list current programs, requirements, and contact information. Division units should provide information about their services, contributions, and goals. Give all the information you can, even if you think it’s not necessary. This is it, your chance to tell the world what you do and how well you do it. Faculty should post office hours, phone numbers, email address, building and room number(s). In addition, syllabi, course(s), course requirements, should be added to the web pages.

Please refer to the college’s Computer Resources Acceptable Use Policy and the WWW Policies on Web Content. These policies can be found at

District Web Policy
http://webhelp.fullcoll.edu/policy.htm

Computer Resources Acceptable Use Policy
http://support.fullcoll.edu/accept.htm

Division and Department Official Web Page Standards

**Note: These guidelines are suggestions, not concrete rules to follow when designing web pages.

Division and department pages should consist of the following seven elements:

1) Header: - An image banner, stating Fullerton College and the department or unit the page represents or a text header with the department name and the name Fullerton College. Furthermore, the main site uses the FC logo as a hot spot link back to the main web page.

2) Footer - Date displaying the document’s last modification

- Email link to the person responsible for the page

- Copyright information

- Date the page was last modified

- Link to North Orange County Community College District’s site (OPTIONAL: http://www.nocccd.cc.ca.us/)

- Disclaimer statement or a link to the disclaimer statement, http://www.fullcoll.edu/disclaimer.cfm

The following is an example of the code used to create the page’s footer. To use simply cut and paste the code into your web page (On a windows machine, you can copy text by highlighting the text and pressing Control-C. You can paste the text in your document by pressing Control-V.).

Last Update

Fullerton College is part of the

North Orange County Community College District

</a>

For comments and suggestions email

<a href="mailto:webmaster@fullcoll.edu">webmaster@fullcoll.edu</a>

3) Navigation – Be consistent on each page. Provide the user with the same set of links on each page and develop a standard sense of navigation. Changing the menus from five links to seven will give the users a false sense of security in the navigation, thus, making it frustrating to maneuver through the site, which will eventually cause the your surfers to leave the site and never return.

Examples of Navigation

In the example page (Figure 1-1) there are two navigation menus, and they will be replicated on each page directly under the main page.

(Fig. 1-1)

Official college pages contain two navigation menus and look as such:

- Left-hand button navigation scheme

- Footer text navigation scheme

- Header home page logo link

4) Links – All official web pages must have two links to http://www.fullcoll.edu, one in the footer menu titled “FC Home” and one in the header, the logo. This provides a way for surfers to coast back to the main page if they have entered the site from some side entryway.

The left-hand navigation bar contains the following links:

- Admissions (http://admissions.fullcoll.edu)

- Bookstore (http://bookstore.fullcoll.edu/)

- Departments (http://www.fullcoll.edu/pub/cd/directory.cfm?d=2)

- My FC (staff, student, department, and organization portal) (http://myfc.fullcoll.edu/)

- Library (http://library.fullcoll.edu/)

- News & Events (http://www.fullcoll.edu/pub/info/news.cfm)

- Search (http://www.fullcoll.edu/search/search.cfm)

The footer menu contains links to the following pages:

- Admissions (http://admissions.fullcoll.edu)

- Campus Directory (http://www.fullcoll.edu/pub/cd/directory.cfm)

- Contact Us (http://www.fullcoll.edu/pub/info/contact.cfm)

- Departments (http://www.fullcoll.edu/pub/cd/directory.cfm?d=2)

- Distance Education (http://media.fullcoll.edu)

- FC Home (http://www.fullcoll.edu)

- Library (http://library.fullcoll.edu)

- Student Services (http://stuserv.fullcoll.edu)

- Search (http://www.fullcoll.edu/search/search.cfm)

5) Colors – The basic theme for Fullerton consists of white, blue and yellow. The main site is created with a white background with blue links and yellow rollovers (A rollover is the act of changing an image while the mouse is over the original image). The colors RGB (Red, Blue, Green) identities are

- Blue - #002452

- Yellow - #D8A400

- White - #FFFFFF

- Color Motif – The first two layers of the Fullerton web site will follow the basic motif:

o Text – Black - #000000 or Blue - #002452

o Internal Links – Blue - #002452

o Followed Links - Blue - #002452

o External Links – Blue - #002452

o Mouse Over Links – Yellow = #D8A400

o Background – White - #FFFFFF

o Outer portion of the navigation buttons – Blue - #2D2055

o Inner portion of the navigation buttons – Blue - #392A6F

The Fullerton College styles are located at http://www.fullcoll.edu/css/fcStyles.css and can be added to your pages with the following code:

<html>

<head>…..

<link rel=”stylesheet” type=”text/css” href=”http://www.fullcoll.edu/css/fcstyle.css”>

</head>

<body>

…

</body>

</html>

This will cause text links to remove the underline and change from blue to yellow when the mouse is moved over them. In addition, pages will use the font specified for the main web site. The font family is Arial and the size is 12pt.

6) Screen Size – targeted screen size should be 800 x 600 pixels. Keep in mind that some users are viewing your page with a 14” monitor with the resolution set to 640 x 480.

7) Title – Make sure that all web pages contain a title. This is how the Fullerton Search Engine will identify your page. If your page does not contain a title, the search engine will not display the page as one of the possible links from the main page search form.

Titles can be placed in web pages by using the “Title” tag:

The title tag must be placed in the head of the document. In FrontPage, titles can be place in a page by clicking on the menu “File” from the main menu, then “Properties”. A dialog box will appear with a text box titled “Page Title”. Type your title and click the ok button.

FC Page Wizard

If you are not sure about creating web pages and not really interested in learning or even viewing html code, this section is for you. This section is intended to explain to users how to create simple web pages on the FC server without touching any html code or knowing how to use File Transmission Protocol to send files to and from the server.

You need to login to the site, http://myfc.fullcoll.edu, and follow the online instructions for create a web page. This wizard will add the same links and images described in this document to your pages. Once you have completed the instructions, type the url of your new page in your browser’s address text field and, Voila!, you have a web site.

The FC Page Wizard is located at http://myfc.fullcoll.edu/wizard

**Please note: In order for the wizard to create web pages, you will need a valid FC account and associated web space for that account.

Templates

I have created a few different templates that have the Fullerton College look and feel. You are free to use them as you wish. In fact, I encourage their use. They contain graphics, backgrounds and colors that are based on the topics in this document. To get them, open the following websites with your web browser, http://webhelp.fullcoll.edu. Once you open the site, you can scroll down to the templates section and click on the download link. Your browser will prompt you to save the zip file on your computer. The zip file contains html files and their graphics. Here is a view of a few templates:

http://webhelp.fullcoll.edu/templates/instructor.htm

http://webhelp.fullcoll.edu/templates/dept.htm

http://webhelp.fullcoll.edu/templates/division.htm

Tips

The best tip I can give is to view as many web pages as possible. Microsoft Internet Explorer and Netscape Navigator will allow you to view the code of a web page. Try firing up your browser, directing your browser to your favorite site, http://www.disney.com, and viewing the code.

In Netscape Navigator, Click on View from the main menu, next click on Page Source.

In Internet Explorer, click on View from the main menu next click Source.

Next you will see a window with all of the html code that was used to create the page.

FrontPage 2000

Microsoft FrontPage 2000 is the tool of choice for Fullerton College. FrontPage provides easy accessibility to your website and an array of valuable tools to create your site(s).

- Connecting to your website from on campus

- Connecting to your website from off campus

- Creating your pages

- Saving files

- Viewing your site (What files are there?)

- Publishing to the web

Browsers

Beware! Every Internet browser interprets html tags differently, not only different types of browsers such as: Netscape Navigator and Microsoft Internet Explorer, but different versions of browsers like, Netscape’s Navigator 3.0 and Netscape’s 4.7 browsers have different functionality. An example is Microsoft’s Internet Explorer 3.0 browser will not handle Java or JavaScript, interpret Cascading Style Sheets, but there 5.5 browser will. There are also other differences. Microsoft Internet Explorer 5.0 will handle Dynamic HTML and DCOM differently from Netscape’s Navigator or Sun’s HotJava Browser. For additional information on browsers, you can direct your browser to http://www.cnet.com/Content/Reports/Shootouts/Brow0701/?st.cn.BrowserTC.cnt9.gp

Accessibility

When creating web pages, consideration should be taken to what devices and who is viewing the site. There are special devices that translate html text to speech, standard browsers that just simply view text. So what happens to the images, the spinning logos, etc? They just won’t appear, so any real informative data that was typed onto an image is lost. To compensate, html provides an image tag attribute that provide the alternate text to these devices and it is called the “alt” attribute.

HTML embeds images into the source with the following tag:

However, this does not provide very much information to the devices that must interpret what this image is displaying. If the “alt” tag is included in the html tag, it appears as follows:

If html is not for you, don’t worry most html editors like Microsoft FrontPage provide the capability to add alt tag information without touching the html. The following is a screenshot of a MS FrontPage dialog box with the alt field available for this purpose.

This dialog will appear if you right-click on the image from within FrontPage.

For more information on accessibility, please see the following urls:

http://www.cast.org/bobby
http://www.builder.com/Authoring/Accessibility/

Basic HTML Document

A web page is a basic text document that can be written in any text editor (Notepad, Wordpad, WordPerfect, etc.). HTML is a composition of tags that your web browser reads and interprets, then displays the content of the pages appropriately. Think of the older word processors that displayed all of your document’s code (where paragraphs begin, how many spaces are between each word, etc.). The only difference is now you have to write the codes to determine the presentation (unless you use a What You See Is What You Get/WYSIWYG editor such as: MS FrontPage, Macromedia’s Dreamweaver).

Luckily computer innovation moves quite rapidly, thus there are a number of tools you can use to create web pages without writing a single tag. However, it is good to know what the tags are in case the format isn’t exactly to your specifications you can manually manipulate the tags.

Every tag must have a beginning and an ending tag, with the exception of meta tags. The basic skeleton of the document is as follow:

<html>

<head>

<title>Academic Computing at Fullerton College</title>

</head>

<body>

Contents of the page. Basic HTML example.

</body>

</html>

For more on the specifics of html tags, refer to http://www.builder.com/Authoring/Html/?tag=st.cn.sr1.dir.

Cascading Style Sheets

Cascading Style Sheets (CSS) are a way of formatting your html documents. They let the publisher describe how text, backgrounds, colors, etc., will be displayed in a browser. Although CSS are powerful, not all browsers support the use of CSS. The best way to determine whether you should use CSS is to test the document by opening it in a few different types of browsers. For more information on CSS, go to the World Wide Web Consortium’s Recommended Specification for Cascading Style Sheets at http://www.w3.org/pub/WWW/TR/REC-CSS1

Meta-Tags

Meta-tags contain information about the document. They provide information to search engines and users about your page. Who designed the page? What information is on the page? What organization is posting the page? Meta tags have two key attributes to them: name (name of the information) and content (the actual data). The most commonly used Meta information contains the “description” of the html document and “keywords” for searches. The following are two examples of such tags:

research, hornets, learning, distance, online, courses, news, teaching, public, service, outreach, giving, admit, admissions, undergraduate, visitor, information, center, centers, institutes, institute">

These tags are located in the documents <head> tags.

Graphics

Graphics are your preference. To develop the main site, we used the same colors as described earlier: Blue (#002452), Yellow (#D8A400) on a white (#FFFFFF) background. The font used was, Arial, 12 point. If you’re designing you’re own graphics, it is best to keep them under 100KB. This allows surfers with slow connections to view your pages relatively quickly. If the graphic becomes to large, surfers will not wait an hour to see what your page looks like, so it is best to keep your graphics small. Using programs like Adobe Photoshop and Macromedia’s Fireworks, it is fairly easy to optimize your graphics so they don’t exceed 100KB.

Description of Graphics

Division Banners

Division Name/Department Name

– Font - 40pt; BrightonBold; Regular

– Color – R:00 G:24 B:52

At Fullerton College