U. S. Coast Guard Auxiliary, Flotilla 21, Division 2, District 13, North Seattle, Washington

Website Documentation

Standards

The colors used for all text links are:

  • Normal - Light Blue
  • Hover - Dark Green (indicates link that mouse is currently over)
  • Visited - Dark Blue (indicates the link was recently clicked on)


The menu buttons are links and use the standard link colors for text. In addition, they use grays with borders to make them appear as if they were graphic buttons. The standard background colors for the menu buttons are:

  • Normal - Medium Gray
  • Hover - Very Light Gray (appears as if the button is being pushed down)
  • Visited - Medium Gray (The Dark Blue text indicates the link has been visited recently.)


The report buttons are links, but do not have any text on them. The standard background colors for the report buttons are:

  • Normal - Medium Gray
  • Hover - Dark Green (appears as if the button is being pushed down)
  • Visited - Dark Gray


All other text in the main body is black and the text in the footer is medium gray.

Purpose

This website has two very different audiences: guests and members. The goal for guests is to present them with a positive view of the Auxiliary, encourage them to view all pages of the website and to contact Flotilla 21 for more information or to become a member.

Members are interested in Flotilla 21 news and events. This website is set up so that members can easily locate that information.

Site Organization

Banner

The banner across the top of the page is a graphic image. Moving the mouse over certain areas of the banner will change the pointer to a hand, indicating a link. These areas are:

Left Side Menu

The menu down the left side consists of links to the most popular or most important pages for our members. Pages that change frequently, like newsletters and calendars, are always included in this section. The page of most interest is at the top of the menu, generally progressing downward. However, the main page to outside links is traditionally at the bottom. These menu buttons are larger than the top menu buttons, so this is generally the first place visitors to the site will look.

Visual Design

  • Page width - Limited to 772 pixels in order to accommodate a wide range of monitors and display settings without requiring site visitors to scroll right and left.
  • Page Length - With the exception of this documentation page, all pages are kept reasonably short to insure that visitors do not have to scroll down several pages to locate the information they are seeking.
  • Page Alignment - Pages are centered to make the site more symmetrical and visually appealing.
  • Images - Used very sparingly to insure that visitors using dial-up internet connections do not have to endure long waits for pages to load.
  • Text Background - A white background without an image is used in the body of the pages to insure that all text is easily readable.
  • Text Line Height - White space (130%) between lines of text makes paragraphs easier to read.

Technical Issues

Microsoft FrontPage 2003

This site was originally created and is currently maintained with FrontPage. All formatting of the text is done in the style sheet rather than through FrontPage.

Dynamic Web Template (DWT)

A dynamic web template is used to insure consistency of the borders (header, menus and footer) on every page. The border code is automatically inserted in each page when borders.dwt is altered and those areas cannot be edited on any HTML page in FrontPage design. The background is highlighted in the HTML code and should never be directly edited in the code.

Tables were used to create the borders instead of divs because the webmaster was unable to create divs that worked consistently across all browsers.

HTML

The HTML code has been cleaned up, indented and consistently formatted to make it easy to read and maintain. Keeping the code streamlined has the added benefit of displaying the pages quickly. The HTML code is kept almost entirely free of formatting attributes.

Cascading Style Sheet (CSS)

The style sheet that is used for all pages on the website is cgaux.css. All formatting attributes are contained in the style sheet.

Headings

Four levels of headings are used on the website:

  • h1 - Currently not used. Should identify the website.
  • h2 - Identifies the page.
  • h3 - Identifies a major section on a page.
  • h4 - Identifies a minor section within a major section.
  • Home page uses h2 to identify major sections.

Testing

Browsers that this website have been tested on include (latest versions only):

  • Internet Explorer (PC)

Directory Structure

The file types contained in each directory are:

  • Main - htm, html, css, dwt
  • images - gif, jpeg

Banner

The banner, f21banner.gif, was created by merging logos, images and text using Microsoft Digital Image Suite.

History

  • 21 August 2005 Website redesigned to integrate with Division 2 design.
  • 28 June 2004 Website officially approved by National.