Dakota State University Web Style Guide

Top Banner Requirements

The top banner/header of every page in the DSU domain must contain the official Dakota State University color logo (see below) and the department or page title.

Bread Crumb Trail

An important aspect of the new DSU web design is the bread crumb trail. This is a text element that allows for easy navigation to "back out" of a current document through the navigation elements present in the bread crumb trail. The bread crumb trail should be a textual representation of the most common path to the site being developed. The first link in the bread crumb trail should be DSU Home and then followed by the most common path that would lead a site visitor to the current site. Individual pages within a site are not recommended to be placed on the bread crumb trail navigation element. An example of the bread crumb trail would be:

DSU Home > Academics > College of BIS

The College of BIS text is not a link since this represents the current department in the DSU web. This bread crumb trail would then be stagnant for all pages visited within the College of BIS site pages. The bread crumb trail consists of text-based links.

Justification

The page(s) of a departmental or office web page can either be left justified or centered horizontally.

Logo

The official DSU color logo is represented by yellow scripted text associated with blue background and text elements. This graphic element must be a hyperlink to the DSU home page (http://www.dsu.edu). Other representations of the logo are available for use, but all page headers and banners must contain the full two-color logo at a legible size. (Click here to view the logo options.) The ratio of the logo's height to width aspect must be maintained.

The official Dakota State University logo should appear in the same position on every page within ANY DSU affiliated site. The standard position is the top and left most location of content on the page. If using the standard-sized DSU logo as an element in your page(s), be sure the logo size is 111 x 82 (where 111 is the width in pixels and 82 is the height in pixels). The logo should remain at the top left portion of all departmental pages. Questions about logo usage? Please consult this document presented by the DSU University Relations Office. To view the different acceptable logo representations, view this document.

Included Content

A good form of content management for items that remain consistent throughout a deparmental/organizational website is the usage of a Microsoft FrontPage 2003 Include Page web component. Using this valuable tool, a page is created that contains the graphic elements in the page banner. When creating and formatting the table that contains the page header and bread crumb trail, simply place the cursor in the cell that will contain the included information and click Insert > Web Component... In the dialog box that appears, select Included Content from the Component left-hand menu and then select Page from the Choose a type of content: area and then click Finish. Provide a path to the page whose content will be placed in the cell. Creating a page header in this way and then copying the same table to each respective page in a department/organization web has a distinct advantage when modifications are necessary. Simply update the source page file to update each individual page header instead of updating every single page with new information.

For numerous reasons, the Front Page 2003 Included Content Web Component is strongly encouraged for headers, footers and navigation menus. The Included Content component allows for the creation of simple web pages that will be used as content for numerous pages throughout your site. For more information on how to use the Included Component tool, click to visit the Microsoft Help Section on their website.

Top Banner Optional Components

The DSU Web Development Team has taken some of the graphic elements of the original DSU site redesign and incorporated them into acceptable header (banner) and footer elements. One such combination is linked below. If using the graphic, but require modifications to "personalize" a department web, a graphic element could be placed in the right portion of the graphic. A current downloadable header graphic can be viewed by clicking the graphic below. This graphic is 78 pixels in height and 800 pixels wide.

The graphic can be saved on a local drive by right-clicking and then selecting Save Picture As... (Microsoft Internet Explorer). The image can then be opened in any image editing software application and the page title can be overlaid onto the ripped notebook paper image. The native .PNG file which is broken down into layers is available upon request. The general colors of the banner and DSU logo should remain intact. For image modification requests, please email CompSvsWebsite@dsu.edu

Bread Crumb Trail

A table is recommended for placement of the bread crumb trail. A sample graphic for the trail background is below. (Click the image. When the graphic is displayed on the next page, right-click and select Save Picture As... to save the image to your local machine.) This graphic is 36 pixels in height.

This image should be placed as a background image in a table cell. The text links should be formatted to appear entirely in the blue area. The text color should be white to contrast with the blue background. Indent the text by 60 pixels by selecting the text inserted into the cell and clicking Format > Paragraph and inserting 60 in the Indentation: Before text: textbox.

Tables

When using tables as a layout mechanism in Microsoft FrontPage 2003. It is necessary to remove the cell borders and decrease all cell padding and spacing to zero (0). This adjustment is necessary to achieve the seamless integration of the page banner, breadcrumb trail, and auxiliary table extension graphics in the top banner area of the page.

Justification

If centering pages horizontally, limit the banner width to 800 pixels maximum. If left-justifying page(s) and content, extend the top banner to continue to fill 100% of the available space to the right of the banner. This is achieved by creating a table that is adjusted to 100% of the page width. The graphic below can be used in association with the header file and breadcrumb trail graphics above as a background element in the table cell to continue the header. This graphic is exactly the same height as both the page banner and bread crumb trail graphics as they are stacked on top of one another.

Logo

As on this page, the DSU logo must be embedded or incorporated into the page header or banner. The logo should be immediately recognizable as the DSU logo and should be large enough to be legible.

In every instance, the DSU logo must contain a hyperlink that directs visitors to the DSU home page (http://www.dsu.edu). In Microsoft FrontPage 2003, select the header graphic and insert a "Rectangular Hotspot" surrounding the DSU logo that provides a hyperlink to the DSU home page.