1. Introduction

1.1 Visual design information

This document covers the graphical treatment of the Web site. This Style Guide is essential to maintain visual design consistency during the Production Phase as well as the Maintenance Phase. It is started early and created in part by the Graphic Design Team and completed by the Technology Team during the Production Phase.

 

1.2 Relation to the Architecture Style Guide

The Architecture Style Guide is a different document and covers the Web site structure and why it is so organized. It is used during the Maintenance Phase to insure continuity in the original goals and avoid architectural drift.

 

1.3 Site production information

Use of CSS-based page layout

This site is designed to make extensive use of CSS-based page layouts. Numerous Web site designers have abandoned table design in favor of Cascading Style Sheets because it offer easy format update and smaller file sizes. No <table> tags have been used. Please refer to Figure DSG 5-4 for more details on <div> tags, ID and class attribute selectors.

Use of two page layouts (BSC and SG)

Only two page layouts (wireframes) served to create all pages of this Web site. The Design Style Guide uses the SG layout. All other pages are based on the BSC layout. Please refer to Figure DSG 5-2 and DSG 5-3 for more details.

Use of one external CSS file and of internal page specific <style> tags

All style sheets used in two or more pages are saved in an external file: layout_copy_editior.css. All style sheets that are specific to a Web page are defined internally to the page through <style> tags.

Use of one template

To insure page consistency and to facilitate site maintenance, Dreamweaver MX 2004 template features are used for the BSC page layout and all pages based on that layout were created from the same template: Templates/temp_pagecell.dwt. The Design Style Guide page is based on the SG layout and no template has been used.

Use of one library item

Dreamweaver MX 2004 library features are used for the copyright information in the Footer sub-region. To review content, please refer to the library file: Library/copyright.lbi.

 

2. File, Directory and Page Names

2.1 Site file directory structure

2.2 File names

2.3 Page titles

2.4 Header tags

<meta>

<title>

<link>

<script>

<style>

3. Interface Design

3.1 Navigation

3.2 Hypertext links

3.3 Accessibility

 

4. Site Design

4.1 Structure

This Web site is based on a 3-level hierarchy structure. The level-1 menu bar contains 6 elements. Figure DSG 4-1 provides detailed information on the navigational hierarchy and and a file list.

 

 

4.2 Site Theme

 

4.3 Home page

 

 

5. Page Design

5.1 Palette

 

 

5.2 Page dimensions

Each and every page of this Web site, with the exception of one page for the Design Style Guide, is based on a single layout (BSC) and contains 2 distinct regions:

 

HEADER region

This region, located at the top of the page contains 3 sub-regions:

1. The AWS PM LOGO sub-region

Contains an image of the AWS PM logo.

2. The MENU BAR sub-region

The always visible menu top bar of a two-level horizontal drop bar structure driving by Javascript.

3. The SUB-MENU BAR sub-region

Elements of the SUB-MENU BAR become visible following a mouseover on the corresponding elements of the top MENU BAR.

 

PAGE CELL region

The PAGE CELL region immediately under the HEADER region contains 5 sub-regions:

1. The BREADCRUMP LINE sub-region

Contains the Web site navigation path followed by the user to reach the page currently displayed by the browser. Level names appear, separated by a slash (/), from the highest level (Home) to the lowest level and correspond to the menu levels.

2. The PAGE TITLE LINE sub-region

Contains a one-line text title describing the page topic.

3. The LEFT BAR sub-region

This sub-region is used for local page navigation, contact address, logos and commercial ads when more visual emphasis is desired.

4. The CONTENT sub-region

Contains titles, subtitles, text, links and images to cover the page intended topic.

5. The FOOTER sub-region

This sub-region, located at the bottom, contains local page navigation, the copyright information and, the date the page was last modified.

 

Figure DSG 5-2 provides page dimension information by region and sub-region for the basic page layout (BSC).

 

 

 

 

Figure DSG 5-3 provides page dimension information by region and sub-region for the style guide page (SG).

Only one page is created with this layout (design_style_guide.htm).

 

 

5.3 CSS and <div> tags

Figure DSG 5-4 provides Cascading Style Sheets and <div> tag information for the basic page layout (BSC). The basic page layout contains editable and non-editable regions. The basic page layout (BSC) is the starting point for all pages, except for one page: the Design Style Guide. Only the editable sub-regions will vary from page to page. There are only 4 editable sub-regions located in the PAGE CELL region of the basic page layout (BSC).

 

For more information on using Cascading Style Sheets, please refer to the book authored by the world authorities and leaders of the World Wide Web Consortium (W3C) style sheet project:

Lie, Håkon Wium, and Bert Bos. 1999. Cascading Style Sheets: Designing for the Web, 2 nd ed. Boston, MA : Addison-Wesley.

ISBN 0-201-59625-3

 

For the ultimate source of information on the Style Sheet Project turn to the W3C's Web site:

http://www.w3.org/Style/CSS/

 

 

 

5.4 Table layouts

No HTML <table> tags are used.

 

5.5 Header and footer

The HEADER region and the FOOTER sub-region are described in more details in Section 5.2 Page dimensions and in Figure DSG 5-2.

 

5.6 Server Side Includes (SSI)

No Server Side Includes are used in the AWS PM Web site.

 

5.7 Named Anchors

Named anchor locations vary from page to page with the exception of the anchor located to the left of the AWS PM logo in the HEADER region. This anchor, included in a non-editable region of the template, is used to return the user to the top of page and is present in every page. The anchor name: top.

5.8 Templates

To insure page consistency and to facilitate site maintenance, Dreamweaver MX 2004 template features are used for the BSC page layout and all pages based on that layout were created from the same template: Templates/temp_pagecell.dwt. The Design Style Guide page is based on the SG layout and no template was used.

The <!-- InstanceBeginEditable name="name" --><!-- InstanceEndEditable --> markup sets found in the HTML source listing delimit specific instances of editable regions.

 

5.9 Libraries

Dreamweaver MX 2004 library features are used for the copyright information in the Footer sub-region. To review content, please refer to the library file: Library/copyright.lbi.

The library item also contains the date the page was last updated. This feature is provided by Dreamweaver MX 2004 when the <!-- #BeginDate --><!-- #EndDate --> markup set is present.

 

5.10 JavaScript

The JavaScript 1.5 programming language is used for the MENU BAR, the SUB-MENU BAR in the HEADER region and, to open reduced size browser windows to display the suggested project documentation table of contents. The JavaScript function to open reduced size windows is used by the "documentation.htm" page only.

 

5.11 Frames

No frames are used.

 

5.12 Internationalization

No international markets or localization are considered for the AWS PM Web site.

6. Typography

6.1 CSS

 

6.2 Typeface

The FRANKLIN GOTHIC MEDIUM typeface is used for titles of the CONTENT sub-region and for the PAGE TITLE LINE.

The ARIAL typeface is used for subtitles of the CONTENT sub-region use.

The TAHOMA typeface is used for the text of the CONTENT and FOOTER sub-regions and for the BREADCRUMB LINE.

The ARIAL typeface is used for all items of the MENU bar and sub-bar and the top right utility navigation area.

The VERDANA typeface is used for the page navigation text of the LEFT BAR.

The TAHOMA typeface is used for the advertizing text of the LEFT BAR.

 

6.3 Type size

 

6.4 Case

 

6.5 Emphasis

7. Editorial Style

7.1 Editorial style convention

In order to maintain editorial consistency, the guidelines found in the Microsoft Manual of Style for Technical Publications (MSTP) are used throughout this site. This Manual of Style is available from Microsoft Press.

 

Microsoft Press. 2004. Microsoft Manual of Style for Technical Publications, 3rd ed. Redmond, WA: Microsoft Press. Includes CD-ROM containing e-book versions of this manual and two dictionaries.

ISBN 1-735-61746-5

 

 

7.2 Titles and subtitles

Widgets

Bullets

Arrows

 

7.3 Text

 

7.4 Links

8. Web Graphics

 

9. Multimedia

No audio or video features are used for the AWS PM Web site.