revoi

Manuel du graphiste

Classeur.css

Structure de l'écran

Classeur.css est le fichier qui contient les css qui vont vous permettre d'habiller le site. L'illustration ci-contre vous donne une image simple de la manière dont découper une interface pour l'insérer dans les différentes cellules du tableau que SGS construit pour afficher votre site.

Si vous utilisez des logiciels qui permettent la découpe automatique des images en "tranches" construire une interface pour SGS sera d'autant plus simple. Il vous suffit de construire votre image dans des repères que vous aurez positionné de façon à ce qu'ils représentent la largeur de la colonne de gauche qui contiendra le menu et de la colonne droite qui contiendra une partie de l'habillage. Il n'est pas obligatoire de définir une colonne de droite selon l'aspect que vous souhaitez pour votre site.

.Classeur

.Classeur peut être considéré comme le calque du dessous dans une image qui en contiendrait deux. Cette css vous permet de définir la manière dont votre site occupera la largeur de la fenêtre du navigateur :

width: 100%; remplira toute la fenêtre en largeur sans marge.

Vous pouvez aussi avec l'instruction background-image: url(...); permettre à une image de fond de s'afficher avec toutes les possibilités de répétition offertes par les css.

Toutes les instructions habituelles des css sont possibles, SGS est totalement "compatible", en tout cas rien n'a explosé jusqu'à présent... ;o)

Colonne de gauche

Pour les trois cellules qui composent la colonne de gauche je vous conseille de définir une largeur fixe, en effet .Classeur_cellg est appelée à contenir le menu de votre site et il vaut mieux qu'elle ne descende pas en-dessous d'une certaine largeur ni a contrario qu'elle soit trop large.

Pour info voici les css de la colonne de gauche de ce site :

.Classeur_cell_ghaut
{
height : 80px;
background-image:url(images/cellghaut.gif);
background-repeat:no-repeat;
}

.Classeur_cell_g
{
width : 200px;
padding-top:70px;
padding-bottom : 35%;
text-align:center;
vertical-align: top;
background-image:url(images/cellg.gif);
background-repeat:no-repeat;
background-color : #CCCCCC;
}

.Classeur_cell_gbas
{
background-color : #CCCCCC;
}

Haut de page

Colonne centrale

La colonne centrale contient un bandeau cell_bandeau qui doit être de la même hauteur que .Classeur_cel_g_haut. La cellule .Classeur_cell_m contient les pages du site et la .Classeur_cell_signature contient le copyright et le lien vers ce site.

Voici pour exemple le code des cellules de la colonne centrale de ce site :

.Classeur_cell_bandeau
{
height : 80px;
background-image:url(images/cellbandeau.gif);
background-repeat:no-repeat;
background-color : #DDDDDD;
}

.Classeur_cell_m
{
text-align:center;
vertical-align:top;
background-image:url(images/celld.gif);
background-repeat:no-repeat;
background-color : #DDDDDD;
}

.Classeur_cell_signature
{
}

Pour ce site la cellule du bas ne contient aucune instruction, elle est simplement destinée à contenir le copyright sans couleur de fond spécifique, cela génèrera donc une cellule de tableau transparente qui prendra la hauteur du texte qui figurera dedans.

Haut de page

Colonne de droite

Les cellules de la colonne de droite sont destinées à recevoir comme leur nom et emplacement l'indiquent la partie droit de l'habillage du site.

Leur largeur dépend de ce que vous voulez y mettre ou, comme dans la cas de ce site, elles peuvent rester vides si vous n'avez pas prévu d'habillage sur la droite.

Pour exemple les css de la colonne de droite du site d'ARTEMISE qui comporte une fort jolie décoration sur sa droite :

.Classeur_cell_dhaut
{
height : 100px;
width: 150px;
background-image: url(images/celldhaut.gif);
background-repeat: no-repeat;
background-color: lemonchiffon
}

.Classeur_cell_d
{
width: 150px;
background-image: url(images/celld.gif);
background-repeat: no-repeat;
background-color: lemonchiffon
}

.Classeur_cell_dbas
{
height: 30px;
width: 150px;
}

Haut de page