Once we have a page structure and the rough design mockups from the designers, we can start working on the overall HTML structure for our pages. Normally, we will end up having 2-3 different page layouts for any given site, but not too many more. When we look at the design mockup, our goal is to visualize the large blocks in the design and categorize them. Once again, we are not mapping each element like traditional TemplaVoila design, but we are defining the large chunks of content that we need. By defining the large blocks, we can decide which page templates and FCEs we are going to need to make the design work. This also means that we can change the skin later on without altering the HTML structure.
If this is our design mockup:
We want to divide it into blocks like this:
We are going to look at the different templates and FCEs in a moment, but first we need to decide the types of content areas in our structure. All of the blocks in our design can be categorized as one of these types:
- Header: This is, of course, at the top of the page and is easily recognizable in almost all designs. Every template in the TemplaVoila Framework includes a header, and this is typically a good place for the logo, main menu, and any universal tools for logging in, searching, or choosing a language.
- Footer: This block is at the bottom of every page template in the TemplaVoila Framework, and it is normally reserved for the copyright information and important links like support, FAQs, and contact information.
- Main content block: This is the central block of our page where all of the main content for this page is shown. Every page must have a main content block, so it is also included in every built-in (or "core") page template.
- Feature: This area is for content that falls right below the header of our page template. It is normally used for banners that are unique to a page. We don't need to use this block on every page, but it is available in every core page template. It will only appear, if it has content.
- Additional content blocks: These blocks are optionally used for secondary content on a page. The right and left sidebars that we used in earlier templates would be considered additional content blocks. The core page templates are broken up into series by what additional content blocks they support.
- Generated content blocks: These blocks can be used for content that will be automatically generated using TypoScript or plugins and displayed on multiple pages. Local menus, login areas, and other generated content are placed in here. Generated content blocks are only included in some of the core page templates.
Now, using those types of blocks, we can start looking at the HTML structure that we need to fulfill the client's needs and match the designer's mockups.
The TemplaVoila Framework comes with 15 different mapped page templates in the core that are broken into three main series: F1, F2, and F3. All of the page templates are similar in their main structure, but they include different content areas and different body tag IDs for styling them in CSS or calling them in JavaScript. We can see all of the available page templates in the TemplaVoila module in the backend, but it helps to see what each series has to offer:
F1 Series:
- Header
- Footer
- Featured Content
- Main Content Area
F2 Series:
- Header
- Footer
- Feature Content
- Main Content Area
- Content Area 2
F3 Series:
- Header
- Footer
- Feature Content
- Main Content Area
- Content Area 2
- Content Area 3
Of course, we can use page templates from any of the series in our own website; for example we can have a page template from the F1 series, the front page and a page template from the F2 series on internal pages. Once we know which page templates we want the editors to use, we can move the unneeded page templates into a SysFolder labeled Unused Templates so they will not show up in the normal page editing screens.
Remember, these are just the core page templates that are included in the TemplaVoila Framework. We can still create special page templates for newsletters or print later on if we need to.