Graphoeil Multimédia
Menu

La création d'un site internet onepage

La partie HTML

La structure HTML d'un site one-page se décompose en sections qui représente chacune une page, dans chaque section la page est alors développée.

<section id="accueil"> <h1>Titre de la page d'accueil</h1> <h2>Sous-titre</h2> <h3>...</h3> <p>Paragraphe de la page....</p> <p>Paragraphe de la page....</p> <p>Paragraphe de la page....</p> </section>

Une fois les différentes pages crées, nous passons à la mise en forme CSS3.

La feuille de style CSS3

La feuille de style d'un site one-page doit respecter certaines règles particulières.

Le conteneur principal ici les balises body et html doivent être réglées à 100% de largeur et de hauteur de la fenêtre de manière à occuper toute la surface de la fenêtre du navigateur.

html,body{ width:100%; height:100%; }

Vient ensuite la stylisation des différentes sections, chaque section doit être naturellement en display:block de manière à occuper toute la place disponible dans son conteneur parent, la position relative permettra de placer les différents éléments de la page en absolu dans une optique de création de site internet responsive. Nous fixons également la largeur et la hauteur à 100% du conteneur. Un overflow:hidden nous assure que rien ne dépassera et donc n'agrandira la section, attention cependant en présence de beaucoup de contenu, il faudra passer cet overflow en overflow-x:hidden, les éléments interne selon alors placés en position:relative de manière à augmenter la taille de leur conteneur.

.page{ display:block; position:relative; width:100%; height:100%; text-align:left; color:#ffd700; overflow:hidden; }

Animation

La page étant construite, la navigation animée avec jQuery et GSAP apportera une touche de dynamisme à l'ensemble. Les éléments du menu déclencheront un mouvement vers la page à atteindre. Nous déplaçons alors verticalement le body pour atteindre le sommet de la page suivante.

$('#boutonPage1').on('click',function(e){ e.preventDefault(); TweenMax.to($('body,html'),1,{scrollTop:$('#page2').offset.top, ease:Power0.easeNone}); });

Quelques exemples

Création de site internet
Graphoeil Multimédia
Ferme héliciole sur la Côte d'Opale
L'Escargotière à St-Martin-Choquel
Chambres d'hôtes et Ferme auberge dans le Pas-de-Calais
Ferme auberge du Blaisel à Wirwignes