Cutting of the mockup

An integration of a CMS usually starts from a static HTML mockup of the web site. The interest of using this approach is to make sure that the design is properly respected and technology serves the design instead of the opposite. It is usually much harder to insert IDs and CSS style on HTML elements if the templates were done previously, as they are split into multiple files which might be difficult to modify globally.

In this step by step guide, we will use an online design from http://www.solucija.com/template/social-community-management . It is therefore not specific to Jahia and has been chosen to illustrate that any XHTML mockup may be easily integrated.

[image]

The first step is to extract from the mockup the general site structure, meaning the common elements to all the pages on the site.

The chosen mockup consists of two templates (home.html and inner.html). Looking closer at the HTML code we find…

…in the home.html file:

<html> <head>…</head> <body> <div id=”header”>header</div> <div id=”content”> home content
</div>
<div id=”footer”>…</div> </body> </html>

… in the content.html file:

<html> <head>…</head> <body> <div id=”header”>header</div> <div id=”content”> site content
</div>
<div id=”footer”>…</div> </body> </html>

It is therefore possible to extract the following common structure:

<html> <head></head> <body> <div id=”header”>header</div> <div id=”content”></div> <div id=”footer”>footer</div> </body> </html>

This simple XHTML structure will be used as the base view (script) for our templates.