BNL Template Guidelines

Standards Homepage

Unix Templates

BNL Standard Template Usage Guide

(Unix Version)

The new BNL standard template (Unix Version) is based on a left-justified, fixed and variable width (liquid-width) layout designs. The variable width template version will adjust its width to fit any computer monitor screen. This vertical width accounts for the presence of a vertical scroll bar within the browser window on the right-side.

The file extension of all web pages must end in (.shtm). Since these templates are using (.shtm) as an extension, web authors will need to configure their website to allow <index.shtm> as an acceptable homepage format. If you do not have the authority to do this, contact your web hosting admin for assistance.

Note: Your webserver must be setup to use (.shtm) extensions and allow include files (.inc) for these templates to work correctly!

Template Description
Fonts, Colors, and Other Formatting
Adding Images
Web Pages Templates
Other Resources
Glossary

Download Unix Templates (.zip)

Template Description

template

All site web pages will be based on a 2-column template shown above. The header color will vary from site-to-site -- this one just happens to be blue. The template consists of four main areas (refer to the diagram above):

Primary Navigation Bar. This area contains the global navigation links that are found at the top of most pages within the BNL website. These links should not be altered so that a consistent site-wide navigation structure is maintained. Moving from site to site, the user will always be presented with the same links to general Laboratory topic areas. The primary navigation bar is an include file common to all site pages so that the links may be changed globally by changing a single source file.
Page Banner. The page banner appears directly above the primary navigation bar and spans the width of the page. It contains two elements: a title image which includes the organization's name (left-side) and the Brookhaven National Laboratory logo (right-side), which includes the "home" tag at the lower right. The Lab logo with home tag must always link back to www.bnl.gov. The page banner is also an include file common to all site pages so that the banner may be changed globally by changing a single source file. The background color of the page banner should be the same as the title image and it is advised to allow BNL Web Services to make any changes to this image since they have the master Photoshop image template.
Local Navigation Area. This area contains a search engine box for the BNL site followed by the most important links for the particular site, ones which are likely to be useful to a user trying to get around from any page within your site. A link back to the site's homepage should be the first link in the list. The local navigation list is an include file common to all site pages so that the list may be changed globally by changing a single source. The list of links should be kept short enough that it does not extend off the bottom of the screen.
Content Area. The actual content for the page, including text and pictures and is fully accessible to the web author. The content area should begin with a page title (usually formatted to Heading 2).
Vertical Scroll Bar: The vertical width of the template accounts for the presence of a vertical scroll bar within the browser window on the right-side.
Last Modified Date: The "Last Modified Date" of the web page will be automatically placed on the web page in this area when viewed in your browser. Note: You will not see this date in the design window when authoring in Microsoft FrontPage or Macromedia Dreamweaver. Also authors should be careful not to delete this code when editing their web pages. No problems will occur as long as authors stay above the gray up arrow when editing their content.
Footer Area: This area contains the standard BNL footer statement, a link to the Privacy and Security Notice and a link to contact Web Services. The Footer area is an include file common to all site pages so that the list may be changed globally by changing a single source and is not accessible to the web author.
Search Box Area: This area contains a generic style search engine box for the BNL website, but can be customized to just search only your sites local web pages as well. The BNL Google Search Appliance has a feature called sub-collections in which certain servers or portions of a website can be indexed and others can be excluded. A sub-collection can only been seen when inside BNL. Users outside BNL will just get the generic style search engine box. If you would like to add this feature to your site, please submit your suggestion to BNL Web Services for consideration.

Generic Search Engine Box

Custom Search Engine Box (can only been seen when inside BNL)

If you don't know what an include file is, don't worry, you won't have to because Web Services has probably already taken care of it for you. If not, contact Web Services for assistance. More...

Fonts, Colors, and Other Formatting

In order to maintain a consistent look and feel between BNL websites, all fonts, colors, and other visual design elements are standardized.

This not only provides users with a consistent interface, it relives the content editor of graphic design tasks, allowing them to focus on content, the information they need to communicate to the rest of the world.

Web technology has advanced considerably since the early days of the Web when presentation and formatting was co-mingled with content, i.e., HTML tags such as <font face>, <font size> and <bordercolor> were wrapped around text content. If an editor wanted to change the font for a website, they had to manually find and replace every HTML tag on every page across the site. This labor-intensive system is no longer used on large, corporate-sized sites where the number of pages may reach into the hundreds. Instead, it has been replaced by the Cascading Style Sheet (CSS), a single file where all formatting rules are defined. A single change in a site's style sheet changes all pages in the site simultaneously, saving everyone a tremendous amount of boring "grunt" work.

Considerable thought has gone into the Standard BNL style sheet. Fonts which have been specially designed for easy reading on a computer monitor were selected along with foreground/background color combinations which are known to provide adequate visual contrast and are not hard on the eyes.

In the Content Area, anything typed will be formatted automatically. The only formatting which you should apply is for headings (heading 1, heading 2, heading 3, etc.), bulleted or numbered lists, italics or bolded items.

Note: Always remove ALL formatting code when pasting in text from other sources such as other web pages or Microsoft Word documents. If using Microsoft FrontPage, use ( Edit >> Paste Special or Paste Text... >> Normal Paragraphs ). You can also use Notepad. Paste the text into Notepad, then cut-n-paste it into your web page. Removing all formatting code will guarantee that no extraneous tags are brought in with your text which might overwrite the style sheet and cause other problems.

Adding Images

When adding images to your web pages, please do not exceed 500 pixels in width (see below). Not sure of the size, either look at its image property information or download an on-screen virtual ruler to check its dimensions. All images should be optimized for the web. Optimize means that you alter your images so that they take up less space on the server and load faster on your pages. You can do this in several ways:

Reduce the image's physical size
Reduce the number of colors displayed in the image
Reduce the resolution of the image in terms of dots per inch (dpi)

The result is that your visitors don't have to wait a long time for your pages to load or view the images. In most cases, you should make your images as small as possible in terms of the amount of space it requires. More...

Web Page Templates

Web authors will have a homepage ans three available web page templates:
Note: users will not have access to the Cascading Style Sheet (CSS) for these templates.

Homepage (index.shtm) - This web page should be used for your homepage of your website. Make sure to use the proper naming convention for all new web pages.

Below is a list of html code that shows the relative file path to this templates include file statements. The paths need to be adjusted to allow the template to work properly in subfolders, see special notes for more information.

<body>





</body>
2-Column Template (template_2column.shtm) - This fixed-width (870px) template should be used for all new web pages being developed on your website. Copy and rename this template with a new filename and make sure to use the proper naming convention.

Below is a list of html code that shows the relative file path to this templates stylesheets and as well as the pages include file statements. The paths need to be adjusted to allow the template to work properly in subfolders, see special notes for more information.

<body>





</body>
1-Column Template (template_1column.shtm) - This fixed-width (870px) template should be used for web pages being developed on your website that will not fit using a 2-column fixed width (870px) template or does not need the left navbar. Copy and rename this template with a new filename and make sure to use the proper naming convention.

Below is a list of html code that shows the relative file path to this templates stylesheets and as well as the pages include file statements. The file paths need to be adjusted to allow the template to work properly in subfolders, see special notes for more information.

<body>



</body>
1-Column Liquid Template (template_1column_liquid.shtm) - This liquid template (variable-width) should be used for web pages being developed on your website that will not fit using a 2 or 1 column fixed-width (870px) template (Ex. large data tables and calendars). Copy and rename this template with a new filename and make sure to use the proper naming convention.

Below is a list of html code that shows the relative file path to this templates stylesheets and as well as the pages include file statements. The file paths need to be adjusted to allow the template to work properly in subfolders, see special notes for more information.

<body>



</body>

Special Notes - Both templates are designed to work in the Root web of your site. If any of these templates are used in subfolders, then the relative paths to the server side includes (denoted as ../) will have to be adjusted to point correctly to the the script in the main Root web of the web server. If this is not done, then the web page will not work! More...

Example:

Other Resources

Requesting a New Website
Web Style Guide Manual (an excellent "101 guide" for the interested novice)

Glossary

Server Side Includes: Server Side Includes or SSI allow the use of shared common code such as headers, footers, and left navigation created in one file and shared through the use of "includes" throughout the site. The advantage is that only one file needs to be updated when a global change is made. more...

Absolute and Relative Paths: When you're creating links to documents and images on the Web, you need to think about how you're going to link to them. There are two standard ways to create links: absolute paths and relative paths.

Absolute paths refers to a specific web location which includes the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to the main BNL Web page is: http://www.bnl.gov. You typically use the absolute path with the domain to point to Web elements that are on another domain than your own.

If you're referring to a Web element that is on the same domain that you're on, you don't need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name. For example, the Information Technology Division homepage has the URL: http://www.bnl.gov/itd/index.shtm. If I were to link to this URL from another page on my site, I could link to it in this way: <a href="/itd/index.shtm">...</a> It is a good idea to use absolute paths, without the domain name, on most Web sites. This format insures that the link or image will be usable no matter where you place the page as long as it is in the same domain.
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path: links in the same directory as the page have no path information listed filename, sub-directories are listed without any preceding slashes <images/filename>, links up one directory are listed as <../images>, links up two directories are listed as <../../images> and so on...

Last Modified: