Support and Documentation

Page structure

Laying out the elements of a web page is a basic step for deploying a website. At the highest level, a page's structure specifies a header, main section, and footer. (See Common components for instructions on creating these three elements.)

page-structure-wireframe.svg

The following sections describe each element in detail.

Header

A header is a consistent piece of content that appears at the top of each page in a website. Brightspot provides the following components that you can include in a header:

  • Logo—Publisher's logo, usually appears in the left or right side of the header.

  • Hat—Typically text or sponsored advertisement.

  • Navigation—Tools for navigating a website. Examples include a search field, a set of links, or a set of drop-down menus.

The following illustration is an example of a typical header's layout.

header-structure-wireframe.svg
Footer

A footer is a consistent piece of content that appears at the bottom of each page in a website. Footers typically have publication information and navigation links.

Main

Unlike the header and footer, the main section is a piece of content that is unique on each page in a website. For example, take a look at NASA's remarkable gallery NASA Image of the Day. Paging through the gallery displays a consistent header and footer, but an almost endless series of unique images in the main section.

The following diagram is an example of a simple main section for a news article. A lead image appears at the top, the article follows below it, the author's bio is wrapped inside the article, and a section for reader comments appears at the bottom. This is one structure for a main section. You can design a main section with many different layouts. You can also have different layouts for different sections of your website.

main-section-wireframe.svg