NIU websites are built using templates. This means they share the same basic components. Let’s take a look at the scholarships overview page on the Financial Aid and Scholarship Office website to learn about the composition of an NIU webpage.
Headers
The header is the NIU shield that appears at the top of a page along with “Northern Illinois University,” the name of the site and the name of the department/division the site belongs to, if appropriate. It may also include the NIU tagline (Your Future. Our Focus).
In the header on the scholarships page, the shield and “Northern Illinois University” are joined by “Financial Aid and Scholarship Office” and the tagline.
Top Navigation
The top navigation is a list of site contents that appears at the top of a webpage, created using a custom block. A website can only have one top navigation menu, and it must appear on every page of the site. The top navigation must include the home icon and an About item. Other top navigation items depend on the needs of the site.
Since the scholarships page is part of the Financial Aid and Scholarship Office site, it uses the same top navigation as the site’s other pages. The top navigation includes the home icon and About, as well as other items that organize and present content, such as “Financial Aid and Costs” and “Loans.”
Main Image
The main image, also referred to as the banner image, is the large image that appears at the top of a webpage. Pages aren’t required to have a main image, but they’re generally a welcoming addition to a site’s homepage.
The main image on the scholarships page shows two students working next to each other on their laptops.
Breadcrumbs
Breadcrumbs appear beneath the top navigation to help users know where they’re at in the site. They’re generated automatically using the display names for pages and folders. The scholarships page displays breadcrumbs that show where you’re at in the site: on a page called Scholarships, which is part of the Financial Aid and Scholarship Office site.
Main Heading
The main heading can appear above or below the main image, depending on the site template. On the scholarships page, the main heading “Scholarships” appears under the main image. It is the <h1> on the page.
Main Content Area
The main content area, also referred to as body-content, appears below the main image and heading. It contains the page’s primary content. On the scholarships page, the main content area contains introductory text followed by three sections on different kinds of scholarships, each headed by an <h2>.
Left Navigation
The left content area contains the left navigation menu. Other blocks of content can appear below the left navigation.
On the scholarships overview page, the left navigation displays the pages in the scholarships section of the site. Links that go to pages outside of the Financial Aid and Scholarship Office site are indicated by an external link icon (a small box with an arrow pointing out of it’s upper right corner).
Right Column
The right column is a place for additional page content. It may supplement the main content or draw attention to something important, like a new program or deadline.
On the scholarships page, the right column includes a content block titled Huskie Spotlight. It contains a photo of a current student and a quote describing the many scholarship opportunities he had at NIU. This adds a welcoming touch to the page and helps prospective students see how NIU scholarships could benefit them, too.
Footer
The footer appears at the bottom of the webpage. Its contents are determined by the site template. The footer that displays on the scholarships page is part of the 4.0 template. It contains helpful links, the copyright statement, privacy notice and NIU’s mailing address.
