Managing and Customizing Header and Footer

Headers and footers are areas in the top and bottom margins of each page in a document. 

The HTML5 HEADER and FOOTER elements are new elements added to help web designers better define the semantic structure of their web pages. According to the HTML5 specification, the HEADER element represents a group of introductory or navigational aids. And the FOOTER element represents a footer for the nearest ancestor sectioning content or sectioning root. It typically contains information about the section, including the author, related documents, copyright data, and so on.

The HEADER and FOOTER elements are not sectioning elements. They do not change the outline of the document and they don’t create new sections. But any headings inside of them create implied sections. 

Layout File is located at  application/layouts/scripts/<YourTemplateDir>/layout.phtml 

Managing Header Block(s)

Studies show that the website header is one of the first things a visitor sees on your website. That is mainly due to the way we are used to browser information on the computer presented from top to bottom, and due to the way HTML is built with the header being the first thing it’s loading on the page. Thus the importance of the header.

A visually appealing header design can assist in this department. To further add to its importance, a header often contains the website’s navigation and logo. Having solid, user-friendly navigation facilitates the browsing of your content and keeps users on your site for longer.

The HEADER typically contains: 

1. At least one heading element (H1–H6 and HGROUP)
2. Logo or icon
3. By-line or authorship information
4. CSS / JS 

But none of this information is required. You can define a HEADER with whatever content you feel is necessary and semantically part of the header of that section or the page . 

Managing Footer Block(s)

A website footer is like a book’s foot note. When you need more information, usually you find it there. In the case of a website, a footer usually features copyright information, a second navigation and in some cases contact details. But the footer has a more important role than that. If a visitor has made it to the bottom of the page, that tends to mean they are hooked. They have gone through your offerings, and are now looking for more. So it is important to keep that in mind as you build yours.

TThe FOOTER typically contains:

1. Copyright information
2. Sitemap
3. Contact information
4. Back to top links
5. By-line or authorship information
6. Related documents
7. CSS  /  JS

. 

. 

. 

. 

Styles and the HEADER and FOOTER Elements

The HEADER and FOOTER elements make no changes to the style of the web page. A HEADER will not automatically display at the top of the page and a FOOTER will not automatically display at the bottom of the page. These elements are semantic to represent certain areas of the page or section. 

Layout File :    application/layouts/scripts/<YourTemplateDir>/layout.phtml 

This means that you need to provide styles for your HEADER and FOOTER elements if you want them to have a different look to them.

Click Here to visit our Video Tutorials for more details.