Top Navigation Tutorial
Welcome to the Flare Top Navigation Tutorial. This tutorial focuses on the various features of the Top Navigation Advanced project template in Flare.
The Top Navigation Advanced project template in Flare contains several starter topics and other files intended for online HTML5 output with top navigation like a modern website, instead of the more traditional tripane format. It includes several features that you might use in online output, and the content and files have been designed to maximize single-sourcing capabilities. This template starts you out with two HTML5 targets and a skin that has responsive output based on the device width. This means the content display changes automatically depending on the device (browser, tablet, or mobile phone). You can add other kinds of targets and skins if you like.
Using This Tutorial Online or Printing it
You can work your way through this tutorial either online or you can print it out.
If you want to follow this tutorial online, you might want to resize your browser window so that you can see both the online topics and your Flare project side by side.
If you want to download and print a PDF, click 
at the top right of this topic.
Start the Tutorial
To begin the tutorial, select any of the following. If you have an older Flare project and want to convert it one that uses Top Navigation output, we recommend you start with either the Simple Conversion or Advanced Conversion lesson.
- Simple Conversion In this lesson, we show how you can take an existing Flare project and add a few Top Navigation pieces to it. When you are finished, the existing project will have a look similar to that which is produced from Flare's Top Navigation Advanced template project. The biggest difference is that we are not attempting to create an elaborate Home page similar to the one found in the template. Also, while we are adding a context-sensitive menu, it is not as fancy as the one in the template. Instead of appearing on the side of topics, it displays at the bottom of each page with a simple design.
- Advanced Conversion In this lesson, we show you how to incorporate HTML5 Top Navigation into an existing Flare project by borrowing some files and styles from a Flare Top Navigation project template. We then edit some of those files so that they are completely integrated into the existing project.
The rest of the lessons show you how to reproduce various features included in the Top Navigation Advanced project template.
