Automatiquement après quelques secondes ou sur un clic de souris de l'internaute, elle conduit à la page d'accueil du site, celle qui permet la navigation principale sur le site et qui est le sommet réel de l'arbre des espaces du site.

 

1. Création d'un page d'introduction

1.1. Générateur d'une page d'introduction

La page d'introduction est en général techniquement très simple. Par exemple, une vue composée du composant p1009 « image + texte » avec le gabarit générique minimal g0001 est généralement suffisant. L'accès à la page d'accueil se fera par un lien sur le texte et éventuellement par l'ajout dans l'entête HTML d'un renvoi temporisé, paramétrable ou non, vers la page d'accueil.

1.2. Espace d'introduction

L'espace support de la page d'introduction doit être créé comme fils de l'espace des ressources du site. Plusieurs espaces d'introduction peuvent être créé, mais au plus l'un d'entre eux sera activé à un instant donné.

L'espace d'introduction sera rempli en conformité avec son générateur. L'exemple précédent demande d'y coller une œuvre comportant l'image de fond et le texte à y superposer, avec un usage 'picture+text'.

1.3. Activation d'une page d'introduction

Sur l'écran de gestion du site, le champ Espace d'intro liste tous les espaces fils de l'espace ressource du site. Sélectionnez-en un pour l'activer ; sélectionnez Aucun pour le désactiver.

2. Exemple

Voir le site de Catherine Séher.

2.1. Générateur

Gabarit : g0001_minimal_layout

Source cs_intro.html.haml :

-# caterine.seher : vue cs_intro
#intro
= render 'see/p1009_picture_and_text'

2.2. Espace

Parent : Ressources du site
Titre :Bienvenue !
Générateur : cs_intro
Visibilité : Visiteur
Paramètres : refresh_delay = 10

Collage
    Œuvre : -intro
    Usage : picture+text

2.3. Œuvre

Nom : -intro

Texte, avec lien sur la totalité vers /see/15/home (15 = id du site)

catherine séher
peintre

Fichier normal : CS-intro4.jpeg
grande image et haute pour les écrans 4/3, fortement compressée (pour être chargée rapidement)

2.4. Extrait de la feuille de style

#intro {position:absolute; left:0; top:0; width:100%;
  opacity:1; -moz-transition:opacity 4s ease-in 6s;
  -webkit-transition:opacity 4s ease-in 6s;
  -o-transition:opacity 4 ease-in 6s; transition:opacity 4s ease-in 6s;=#Syntax}
#intro:hover {opacity:0;=#Syntax}
#intro img {width:100%;=#Syntax}
#intro p {position:absolute; top:50px; left:50px;
  font-size:3em; letter-spacing:.1em; text-shadow:1px 1px 2px #ccc;=#Syntax}
#intro p + p {margin-top:1.5em; font-size:2.4em;}
#intro p a {color:#333;=#Syntax}

Commentaires :

• tout est positionné en absolu en haut à gauche de la fenêtre du navigateur ;
• le bloc contenant l'image et l'image elle-même sont étirés (ou comprimés) à la largeur de l'écran ;
• la transition efface l'écran (opacité 1 → 0) sur une durée de 4 secondes, mais avec un retard de 6, le paramètre refresh_delay=10 entraine alors le basculement vers la page d'accueil.