|
|
University Web Templates >>
Explanation
of Template Areas
The University Web Template has three basic zones (shown
below).
The three zones contain seven distinct areas. Each area
is shown and explained in detail below.
- Header Zone
- University Identifier Area
- Program/Unit Identifier Area
- Body Zone
- Main Navigation Area
- Main Content Area
- Secondary Content Area
- Secondary Navigation Area for custom designed
home pages
- Footer Zone
Header Zone
The header zone is at the top of the University Web Templates. This zone
establishes University identity as well as identity of the web site itself.
It also may be used to highlight up to three site-wide links.
| |
University Identifier
Area
The University Identifier area has a height and
width of 49 pixels and 760 pixels, respectively.
The University identifier area is non-customizable. It
must appear on all pages of all University web sites using the exact
code as implemented in the templates. The code uses a JavaScript
tag that points to a centrally located external file. This enables
campus-wide updates to the University identifier simply by changing
the single external file. Updates to this area will NOT require
individual Web page managers to update individual sites or pages.
A no-script tag is also included that provides a text link to the
FSU home page for browsers with JavaScript disabled.
Unit/Program Identifier Area
There are two approved height variations
for the Unit/Program Identifier area, 62 pixels (shown above)
and 132 pixels. The width of the area is 760 pixels. In both height
variations, the bottom two pixels of the area contain a 2-pixel
gray rule. The area above the rule may be filled by any color
from the FSU dark or bright web color set.
The Unit/Program Identifier area
identifies the unit or program site. It includes a Unit/Program
Identifier headline. Optionally, it may include a secondary identifier
(sub-headline above the Unit/Program Identifier headline) to identify
the parent unit/program.
The right side of the Unit/Program Identifier area
includes an optional site-wide link section.
See the Template
Areas & Custom Designed Home Pages for information about
using this area in a custom home page design.
General Specifications
- The color of the area above the 2-pixel gray
rule must be selected from the FSU web color
set (dark or bright set only).
- The colored area above the 2-pixel gray rule
may be creatively accented and stylized with images as long as
they do not interfere with readability of the identifier headline(s)
& site-wide link text (if used).
- 2-pixel gray rule is optional on custom designed
home pages.
Font Specification
- Font: Unit/Program Identifier- Verdana Bold,
15 pt or size="+2", upper and lower case.
Optional Secondary Identifier - Georgia
Bold Italic, 9 pt or size="-1", upper & lower case.
- Placement: As shown on the Adobe Photoshop or
HTML template file. Identifier headlines are left aligned, indented
approximately 21 pixels from the edge.
- The color of the Identifier headline text must
be selected from the FSU web color set. Make sure there is high
contrast between the colors of the Unit/Program Identifier area
and the Identifier headline text for best readability.
Site Wide Link Specifications
- May include one to three
links that will appear site wide.
- Placement as shown in the Adobe Photoshop or
HTML template file.
- Section is positioned 135 pixels in from
the right-most edge of the 760 pixel-wide Unit/Program Identifier
area.
- Width of site wide link section may not
exceed 125 pixels.
- Link text within section must be left aligned.
- Font Specifications: Verdana Bold, 9-10
pt or size="-2", leading=18.
- Roll-overs are permitted as long as they do
not interfere with readability of the link text.
|
Body Zone
The Body zone is makes up the middle portion of the University Web Templates.
Areas within the body zone provide primary site navigation and content.
| |
Main Navigation
Area
Within the Body Zone, the Main Navigation area
occupies the left-most column. The width of the main navigation
area is 180 pixels. Hyperlinks placed in
this area allow the user to navigate and move through the pages
in the web site.
The main navigation area must be filled by any
color from the FSU web color set including an approved tint, gray,
black or white. The navigation links within the area are left aligned.
See the Template
Areas & Custom Designed Home Pages for information about
using this area in a custom home page design.
General Specifications
- The color of the area must be selected from
the FSU web color set.
- The colored area may be creatively stylized
as long as it does not interfere with readability of the navigation
links.
Link Specifications
- Font: Main Links - 10-12 pt or size="-1",
Verdana recommended.
Sub-links under main link - 9-10 pt or size="-2", Verdana
recommended.
- Navigation links must be left aligned.
- The color of the navigation link text must be
selected from the FSU web color set. Make sure there is high contrast
between the colors of the main navigation area and the link text
for best readability.
- Roll-overs are permitted as long as they do
not interfere with readability of the link text.
- If sub-links are used under main links, the
presentation must show hierarchical structure. Easiest way to
do this is by bulleting and indenting the sub-link as shown in
the HTML template file.
Content Area
Within the Body Zone, the Content area occupies
the area to the right of the main navigation column. The content
area is divided into two (2) sub areas: the main content area and
an optional secondary content area.
Body text for the site appears in the main content
area. The secondary content area is designed to be used more creatively
and may contain pictures, quotes, news, related links, etc. The
secondary content area may also be left blank.
There are three pixel-width combinations for the
main and secondary content areas provided in the University web
templates. The variations provide presentation flexibility and give
room to creative designers.
The main and secondary content areas are separated
by a 10 pixel separator column.
See the Template
Areas & Custom Designed Home Pages for information about
using this area in a custom home page design.
General Specifications
- The main content area background must be white.
- The main and secondary content areas are separated
by a 10 pixel separator column.
Font Specification
- Main body text is not to be below size –1.
- Sans serif font set - "Verdana, Arial,
Helvetica, sans-serif" - is recommended for body text.
Secondary Navigation Area
The
secondary navigation area is reserved for and may optionally be used
on custom designed home pages.
The secondary navigation area appears below the main navigation &
content areas and above the footer area. Secondary navigation links
(such as audience links) may be placed in this area. The
height of this area may vary as long as the overall height of the
header, body and footer zones does not exceed the required
height for custom designed home pages.
General Specifications
Font Specification
- Font: Not smaller than 10 pt or size="-2".
Verdana recommended. Should in no way (size, style, etc.) be more
prominent than main links in main navigation area.
- The color of the secondary link text must be
selected from the FSU web color set. Make sure there is high contrast
between the colors of the secondary navigation area and the link
text for best readability.
- Placement is flexible.
- Roll-overs are permitted as long as they do
not interfere with readability of the link text.
|
Footer Zone
The Footer zone, which contains the footer area, is positioned at the
bottom of the University Web Templates. TBW.
| |
Footer Area
The Footer area falls below the
Content area and to the right of the Main Navigation area. It
is separated from the main content area by a 1-pixel horizontal
rule.
The Footer area identifies and provides
an e-mail link to the site's web page manager. It also contain
links to the University's copyright and privacy information and
lists the University mailing address.
See the Template
Areas & Custom Designed Home Pages for information about
using this area in a custom home page design.
General Specifications
Font Specification
- Font: Verdana, size ="-2".
- Placement: As shown in the HTML template
file.
- Required Content and Format: As shown in
the HTML template file.
- Line 1 - Web Page Manager: 'Name or
email@frostburg.edu' Copyright | Privacy
- In above:
'Name or email@frostburg.edu' must be clickable e-mail
hyperlink.
- Copyright must link to http://www.frostburg.edu/copyright.htm
- Privacy must link to http://www.frostburg.edu/computing/web/privacy.htm
- Line 2 - Frostburg State University,
101 Braddock Road, Frostburg, MD 21532-2303
|
Template Areas & Custom
Designed Home Pages
All of the above template areas exist in the customizable
version of Site Design Option 1. Furthermore, the area-specific requirements
and specifications (listed above) must be followed when creating a custom
design.
A custom design is achieved through creative use of the
following areas.
- Program/Unit Identifier Area
- Main Navigation Area
- Main Content Area & Secondary Content Area
- Secondary Navigation Area for custom designed home
pages
- Footer Area
Following is a brief explanation of how a custom home
page design can be created. Figure 1: Sample Custom Designed Home
Page illustrates many of the techniques and concepts discussed below.
Figure 1: Sample Custom
Designed Home Page  |
Visually, through the use of color and images, the Program/Unit
Identifier area can flow into the Navigation/Content areas.
As in standard implementation, the width of the main
navigation area in a custom designed home page is 180 pixels. Again the
creative use of color in this areas (and other areas) can cause the area
to visually flow into the program/unit identifier & content areas.
In a custom home page design, the main and secondary
content area may be used slightly differently than in a standard implementation.
One or more images can be placed in the main content area to create a
powerful visual effect. The secondary content area can then further enhance
the user experience by providing information like news, events, announcements,
links, special reports, etc.
One caveat... visitors like page and sites that present
dynamic, timely information. Managing this type of page takes a significant
time investment. When you plan how you will use the content area on your
custom home page, make sure you select an implementation that will be
manageable. Having a design that features dynamic news area is great.
Having a design that features a (supposably) dynamic news area - one that
is, in reality, out of date & not properly maintained - is far worse
than having no news area all.
There is one template area available in a custom design
that is not available in a standard implementation of Site Design Option
1 or 2. This is the secondary navigation area.
As mentioned above, the secondary navigation area appears
below the main navigation & content areas and above the footer area.
Secondary navigation links (such as audience links) may be placed in this
area. The height of this area may vary as long as the overall height of
the header, body and footer zones does not exceed the required
height for custom designed home pages.
Finally, the footer area can be made to blend and work
with a custom design by changing the background and text color.
|
|
|
|
