Standard Page Layout
Section 1. Header
The header on every page serves dual purposes. It brands the page as belonging to PCC and provides top level navigation for the website.
Section 2. Page Title/Breadcrumbs
Below the header, the top gray area provides information depending on the current section and page displayed.
- Breadcrumbs - Provide a linear navigational representation of the folder hierarchy.
- Page Title - The page title is defined by the developer and should be encoded in <h2> tags. Note that this identifies the page, not the section. The breadcrumbs should display current section.
- Contact Information - (Optional) Below the page title, a single line of contact information can be included. It should be enclosed with <p> tags and follow the location formatting guidelines.
Section 3. Sidebar Navigation
As stated above, the inclusion of sidebar navigation by the template is optional. Use the sidebar navigation guidelines when determining the use of this element. An additional use of the sidebar is to highlight pull-quotes or other short snippets of text.
Section 4. Content Area
The content area is where the real action happens. It is a white canvas (#FFFFFF) for which to include the necessary information of a page. There is a margin of 15px for the top/bottom and 30px for the sides. The area is guaranteed to be at least 500px wide, but can be larger depending on the template options and users browser window. Site developers have the ability to include paragraphs, headings, links, lists, tables, and images to this area. Please view the documentation for each of these items to determine the proper use.
Section 5. Footer
The page footer contains links to information that must be accessible from every page. This includes the site copyright, correction and feedback forms, as well as: accessibility, privacy, diversity and alternate language accessibility.