Structure du site cpe.evry.free.fr

1. Informations générales

Le site http://cpe.evry.free.fr renvoi au site http://cpe.apeiron-prod.com/ via un javascript. Le site sur

lequel on arrive utilise un CMS (Content Managment System) nommé SPIP, l’administration, la mise en

forme ainsi que la mise à jour du contenu s’en trouve facilité.

2. Structure HTML : Squelettes (Templates)

Le site est basé sur une architecture à 3 colonnes : - La colonne de gauche servant à la navigation (menus, etc...)- La colonne centrale affichant le contenu des pages. (actualité, etc…)- Et enfin, la colonne de droite contenant les divers liens et scripts secondaire du site (image du jour, liens externes et agendas)

Ces trois colonnes sont des divisions (<div>) respectivement nommées (d’id): navigation, principal et

encart.

Site

#navigation #principal #encart

Généralités (1/3).: Informations générales et Structures

Nav

igat

ion

Principal

Encart

Généralités (2/3).: Informations générales et Structures

3. Structure CSS : Styles (Hacks) .Le site possède 3 fichiers CSS externes :

- spip_style.css- typographie.css- habillage.css

Les deux derniers fichiers étant plus utilisés que le premier, la documentation portera essentiellement sur ceux là. En effet, le fichier spip_style.css indique la mise en forme des squelettes par défaut de SPIP, squelettes non présent sur ce site.

Comme leurs noms l’indiquent, typographie.css s’occupe de la mise en forme du texte tandis que habillage.css secharge de l’apparence graphique des objets du site.

Généralités (3/3).: Informations générales et Structures

Styles

spip_style.css typographie.css habillage.css

La division #navigation (1/15).: #navigation (1/3) : la typographie.

Cette division permet l’affichage des principaux menus du site.

Balise racine :

<DIV class="navigation" id="navigation">

</DIV>

CSS :

/typographie.css :

#navigation { font-family: Verdana, Arial, Helvetica, sans-serif;}

Définit la police à utilisé. Si Verdana n’est pas trouvé chez le client, on tente Arial, si Arial n’est pas trouvé, Helvetica, etc…

Rappel : Le “#” signifie que la définition CSS qui suit s’applique non pas à la class navigation, mais a la balise d’id navigation. A contrario, si un “.” précèdent le navigation, c’est bien de la class qu’il s’agit.Enfin, si l’identifiant n’est précédé d’aucun signe, il désigne le type de balise qui sera affecté par le style CSS.

La division #navigation (2/15).: #navigation (2/3) : l’habillage.

/habillage.css :

#navigation { position: absolute; left: 0px; top: 0px; width: 14%; /*width: 14em;*/ padding: 0px; margin: 0px; /*margin-left: 1.8em;*/ margin-left: 3%; margin-top: 1.5em;}

Cette partie CSS définit les informations graphiques de la colonne :

position: absolute signale que la division se situe en dehors du flux HTML principal, c’est-à-dire que les attributs left et top pourront être définis et surtout, seront pris en compte. Dans le cas du positionnement absolu, on se réfère à la page même.

left: 0px; top: 0px; renseigne sur la position de #navigation par rapport au coin supérieur gauche de la page.

width: 14% définit la largeur de la division à 14% de la largeur du conteneur parent (la page elle-même).

padding: 0px renseigne sur la marge intérieur de la division (ici il n’y aura pas de mage interieur puisque elle vaut 0px.

margin: 0px indique que la division n’aura pas de marge extérieur.margin-left: 3% et Margin-top: 1.5em viennent écraser la définition de margin: 0px (celle-ci déclarant implicitement que margin-left: 0px et margin-top: 0px), la marge gauche vaudra maintenant 3% de la largeur totale de la division et la marge haute 1.5em.

La division #navigation (3/15).: #navigation (3/3) : l’habillage.

Rendu final :

Ecran Zone texte de division #navigation

Division #navigation

Top : 0px, Left : 0px

Width : 14%

Margin-top: 1.5em

Margin : 0px Padding : 0px

Visuellement, on peut constaté que ce menu de navigation est divisé en sous bloques. En voici certains :

La division #navigation (4/15).: #navigation :: Généralités sur les sous menus (1/3).

Assurément, le CSS n’est pas le même pour tous les bloques : couleur de fond et alignement différent par exemple. Nous reviendrons sur les spécificités de chacun un peu plus tard. La structure de ces bloques est identique, à savoir un titre et des liens en dessous.

Sous menu

titre

liens

La division #navigation (5/15).: #navigation : Généralités sur les sous menus (2/3).

En mettant le CSS de coté, le code HTML général de ces sous menus s’apparente à :

<div> <ul> <li> le titre du menu </li> <li> <ul> <li> lien 1 </li> <li> lien 2</li> </ul> </li> </ul></div>

Rendu (le contour pointillé n’est la que pour délimiter l’exemple) :

La division #navigation (6/15).: #navigation : Généralités sur les sous menus (3/3).

Jetons un coup d’œil aux données CSS. Si nous prenons le premier des menus (l’accueil du site),on a les informations suivantes :

<!-- Menu de navigation rubriques --><div class="menu"> <ul class="general"> <li class="menu-titre"> <a href="http://cpe.apeiron-prod.com" title="Accueil du site"> Accueil du site </a> </li> <li> <ul class="menu-liste">

<li class="menu-item"> .: <a href="ecrire/">Espace priv&eacute;</a></li><li class="menu-item"> .: <a href="cpe.evry.free.fr/forum" target="_blank">Forum</a> </li><li class="menu-item"> .: <a href="mailto:cpe.evry@free.fr">Contacts</a> </li><li class="menu-item"> .: <a href="rubrique.php3?id_rubrique=17">Logiciels Libres</a> </li>

</ul> </li> </ul></div>

La division #navigation (7/15).: #navigation : class menu (1/2).

Nous allons étudier hiérarchiquement, en partant de la balise la plus grande les informations CSS.

1. Class « menu »

/typographie.css :

Aucune informations

/habillage.css :

.menu { border: 1px solid #a0a0a0; border-top: 0px; padding: 0px; margin: 0px; margin-bottom: 10px;}

Aucune informations concernant la typographie de la class « menu » n’est définit.

border et border-top vont définir les contours du menu. Dans ce cas précis, notre division aura un contour d’un pixel (1px) de couleur gris (#a0a0a0) en trait plein (solid) à l’exception du bord haut qui lui ne sera pas présent (border-top:0px;)

Padding, Margin, Margin-Bottom ont déjà été traité dans un précédent exemple. Nous ne reviendrons pas sur leur définition.

La division #navigation (8/15).: #navigation : class menu (2/2).

Cela rendra alors :

Zone de texte

Bordure grise d’un pixel

Marge intérieure basse de 10px

Pas de bordure en haut

Pas de marge intérieurePas de marge extérieure

La division #navigation (98/15).: #navigation : class general (1/2).

2. Class « general »

/typographie.css :

Aucune informations

/habillage.css :

.general { background-color: #eaeaff; text-align: center;}

Aucune informations concernant la typographie de la class « general » n’est définit.

Background-color va définir la couleur d’arrière-plan (#eaeaff)text-align indique la position du texte par rapport aux bord du container, en tenant compte du padding. Ici le center indique que le texte sera situé au milieu du container.

/habillage.css :.menu ul { display: block; margin: 0px; padding: 0px; padding-bottom: 4px; list-style: none;}

La division #navigation (10/15).: #navigation : class general (2/2).

Rendu final :

Texte centré

Couleur de fond : #eaeaff

Dans tous les cas, la class .general est appliqué à un objet de type <ul>. La définition CSS .menu ul s’applique donc ici aussi.

display: block va définir l’affichage de l’élément comme un bloque.list-style : none masquera les puces et supprimera les marges appliqués aux éléments de la liste.

La division #navigation (11/15).: #navigation : class menu-titre (1/2).

3. Class «  menu-titre  »

/typographie.css :

Aucune informations

/habillage.css :

.menu-titre { border-top: 1px solid #a0a0a0; border-bottom: 1px dashed #d0d0d0; margin: 0px; padding-left: 4px; padding-right: 4px; padding-top: 3px; padding-bottom: 2px; font-size: 90%;}[…].general .menu-titre { background-color: #ff2ff;}

Aucune informations concernant la typographie de la class « menu-titre » n’est définit.

La division #navigation (12/15).: #navigation : class menu-titre (2/2).

Dans ce cas précis, du fait que le <li class="menu-titre"></li> soit un enfant (child) de <ul class="general">, le CSS hérite deux définitions, .menu-titre et .general .menu-titre.

Rendu :

border-top: 1px solid #a0a0a0

border-bottom: 1px dashed #d0d0d0

.menu-titre .general .menu-titre

Fond transparent

Erreur de format :Une couleur est définit sur 6 digits hors dièse. (#hRRhGGhBB). Dans la définition CSS, la couleur est définit avec 5 digits. La couleur de fond ne sera pas appliqué.

Padding-left : 4px Padding-right: 3pxPadding-top : 4px

Padding-bottom : 2px

Zone texte

Rendu final :

La division #navigation (13/15).: #navigation : class menu-liste (1/1).

4. Class « menu-liste »

/typographie.css :

Aucune informations

/habillage.css :

Aucune informations

Aucune informations concernant la typographie de la class « menu-liste » n’est définit.

Aucune informations concernant l’habillage de la class « menu-liste » n’est définit.

La division #navigation (14/15).: #navigation : class menu-item (1/2).

4. Class « menu-item »

/typographie.css :

Aucune informations

/habillage.css :.menu-item {

margin: 0px;padding-left: 4px;padding-right: 4px;padding-top: 1px;padding-bottom: 1px;font-size: 80%;

}

Aucune informations concernant la typographie de la class « menu-item » n’est définit.

Toutes les propriétés ont déjà été expliqué une fois.

La division #navigation (15/15).: #navigation : class menu-item (2/2).

Rendu :

Padding-left : 4px Padding-right: 3px

Padding-top : 1px

Padding-bottom : 1px

Zone de texte

La division #principal (1/6).: #principal (1/3) : généralités.

Cette division permet l’affichage du contenu du site. Elle est constitué d’une entête et d’un corps :

entête

corps

<div id="principal" class="principal">

<!-- entête --> <div class="boite"> <div class="header"> Contenu </div> </div>

<!-- corps --> <div class="boite"> <div class="boite-titre"> Titre </div> <div class="boite-contenu"> Contenu </div> </div>

</div>

La division #principal (2/6).: #principal (2/3) : la typographie et l’habillage (1/2).

/typographie.css :

#principal { font-family: "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;}

Comme pour la division #navigation, on définit une police d’écriture. A noté la présence de guillemets autour de Trebuchet MS puisque le nom de la police est composé et possède un espace.

/habillage.css :

#principal {position: absolute;left: 20%;/*left: 18em;*/top: 0px;margin: 0px;padding: 0px;/*margin-right: 2em;*/margin-right: 3%;margin-top: 1.5em;width:63%;

}

La division #principal (3/6).: #principal (3/3) : la typographie et l’habillage (2/2).

Rendu final :

Ecran Zone texte de division #principal

Top : 0pxMargin-top: 1.5em

Width : 63%

Margin-right : 3%

Margin : 0px

Padding : 0px

Left : 20%

Division #principal

La division #principal (4/6).: #principal : class boite, boite-titre et boite-contenu.

Que ce soit pour l’entête ou le corps de la division #principal, les données sont encapsulées dans des boites (<div> de class boite).La classe boite est muette puisqu’a aucun endroit il en est fait mention (dans les fichiers CSS ou en déclaration interne). Elle sert uniquement de marqueur pour rendre le code plus lisible. De même boite-titre et boite-contenu, muettes aussi, ne sont utiles que pour distinguer le titre d’une boite de son contenu.

Entête

Corps

div class ‘boite’

#principal

div class ‘boite’

div class ‘header’

div class ‘boite-titre’

div class ‘boite-contenu’

La division #principal (5/6).: #principal : class boite, boite-titre et boite-contenu.

Pourquoi si peu de CSS dans une partie du site si importante? Cela peut en partie s’expliquer par le type de contenu affiché dans cette zone de la page. En effet, cette division sert de récipient à un contenu et une mise en forme très variable. L’intérêt de déclarer des class CSS en fichiers externes s’en trouve réduit puisqu’elles seraient moins utilisés, sans compter l’augmentation de la taille de ces fichiers, ainsi que les nombreuses mises à jour de leur contenus. A contrario, dans le cas de la division #navigation, nous avions des menus fixes qui avaient tous la même mise en forme et la même structure HTML, rendant ainsi l’utilisation de class de styles prédéfinies optimale :

Exemples de contenu pour #principal :

La division #principal (6/6).: #principal : class boite, boite-titre et boite-contenu.

Enfin, l’explication la plus probable vient du fait que SPIP est un CMS, et non un éditeur HTML : Les administrateurs d’un site sous CMS (php-nuke, portail phpbb, mambo, pour ne citer que les plus connus) ont bien accès au FTP, mais le but d’un CMS est justement de pouvoir mettre à jour le contenu d’un site uniquement via le protocole HTTP et un simple browser. Les webmasters peuvent ainsi déléguer des pouvoirs (publication d’articles dans notre cas) a des personnes tierces qui n’ont pas forcement de solides compétences informatiques. Les possibilités de mise en forme s’en trouve réduites par la nature front-end, online et user-friendly de l’éditeur d’article :

Exemples :

Editeur d’articles SPIP Editeur d’articles Mambo

La division #encart (1/3).: #encart :: La typographie et l’habillage (1/2).

La division #encart permet d’afficher des liens vers d’autres sites ainsi que contenu adapté à ce qui est affiché dans #principal. Récupérons les styles CSS :

/habillage.css :

.encart { float: right; /*width: 14em;*/ width: 20%; margin-left: 4%; /*margin-left: 2em;*/ margin-top: 1em; margin-bottom: 0em; margin-right: 0px;}

/typographie.css :.encart { font-family: Verdana, Arial, Helvetica, sans-serif;}

Le float: right indique que la division est alignée à droite.

La division #encart (2/3).: #encart :: La typographie et l’habillage (2/2).

Rendu final :

Float : right

Width : 20%

Margin-left : 4%

Margin-top: 1.5em

Margin : 0px

Ecran Zone texte de division #encart

Division #encart

La division #encart (3/3).: #encart :: Généralités.

La division #encart est structurellement identique a la division #navigation : elle est donc basé sur des menus et des items de menus. Elle utilise de plus les mêmes class que #navigation, à ceci près que les <ul class="general"> sont remplacés par des <div class="divers"> :

<div class="menu"> <div class="divers"> <li class="menu-titre"> <h2><span style="color: green;">La lutte dans les autres facs !</span></h2> <li> <ul class="menu-liste">

<li class="menu-item"><span style="color: red;">§</span> -<a href="http://comitedegrevecensier.ifrance.com/">Censier en lutte </a> </li>

<li class="menu-item"><span style="color: red;">§</span> -<a href="http://collectifdoctorants.free.fr/">Collectif des doctorants </a> </li>

</ul> </li> </div></div>

.divers est une class muette.