Structure du site cpe.evry.free.fr

1
Structure du site cpe.evry.free.fr
2
Généralités (1/3). Informations générales et
Structures

• 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, ladministration,
  la mise en
• forme ainsi que la mise à jour du contenu sen
  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 (ltdivgt)
  respectivement nommées (did) navigation,
  principal et
• encart.

3
Généralités (2/3). Informations générales et
Structures
Principal
Navigation
Encart
4
Généralités (3/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 lindiquent, typographie.css
  soccupe de la mise en forme du texte tandis que
  habillage.css se
• charge de lapparence graphique des objets du
  site.

5
La division navigation (1/15). navigation
(1/3) la typographie.
Cette division permet laffichage des principaux
menus du site. Balise racine
ltDIV class"navigation" id"navigation"gt lt/DIVgt
CSS
/typographie.css navigation font-family
Verdana, Arial, Helvetica, sans-serif
Définit la police à utilisé. Si Verdana nest pas
trouvé chez le client, on tente Arial, si Arial
nest pas trouvé, Helvetica, etc Rappel Le
signifie que la définition CSS qui suit
sapplique non pas à la class navigation, mais a
la balise did navigation. A contrario, si un .
précèdent le navigation, cest bien de la class
quil sagit.Enfin, si lidentifiant nest
précédé daucun signe, il désigne le type de
balise qui sera affecté par le style CSS.
6
La division navigation (2/15). navigation
(2/3) lhabillage.
/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, cest-à-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 ny aura pas de mage interieur
puisque elle vaut 0px. margin 0px indique que la
division naura pas de marge extérieur.margin-lef
t 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.
7
La division navigation (3/15). navigation
(3/3) lhabillage.
Rendu final
Top 0px, Left 0px
Margin-top 1.5em
Width 14
Margin 0px
Padding 0px
Ecran
Zone texte de division navigation
Division navigation
8
La division navigation (4/15). navigation
Généralités sur les sous menus (1/3).
Visuellement, on peut constaté que ce menu de
navigation est divisé en sous bloques. En voici
certains
Assurément, le CSS nest 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.
9
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 sapparente à
ltdivgt ltulgt ltligt le titre du menu lt/ligt
ltligt ltulgt ltligt lien 1
lt/ligt ltligt lien 2lt/ligt
lt/ulgt lt/ligt lt/ulgtlt/divgt
Rendu (le contour pointillé nest la que pour
délimiter lexemple)
10
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 (laccueil du
site),on a les informations suivantes
lt!-- Menu de navigation rubriques --gtltdiv
class"menu"gt ltul class"general"gt ltli
class"menu-titre"gt lta
href"http//cpe.apeiron-prod.com" title"Accueil
du site"gt Accueil du site
lt/agt lt/ligt ltligt ltul
class"menu-liste"gtltli class"menu-item"gt . lta
href"ecrire/"gtEspace priveacutelt/agtlt/ligtltli
class"menu-item"gt . lta href"cpe.evry.free.fr/fo
rum" target"_blank"gtForumlt/agt lt/ligtltli
class"menu-item"gt . lta href"mailtocpe.evry_at_fre
e.fr"gtContactslt/agt lt/ligtltli class"menu-item"gt
. lta href"rubrique.php3?id_rubrique17"gtLogiciel
s Libreslt/agt lt/ligt lt/ulgt lt/ligt
lt/ulgtlt/divgt
11
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
Aucune informations concernant la typographie de
la class  menu  nest définit.
/habillage.css .menu border 1px solid
a0a0a0 border-top 0px padding 0px
margin 0px margin-bottom 10px
border et border-top vont définir les contours du
menu. Dans ce cas précis, notre division aura un
contour dun pixel (1px) de couleur gris
(a0a0a0) en trait plein (solid) à lexception du
bord haut qui lui ne sera pas présent
(border-top0px) Padding, Margin, Margin-Bottom
ont déjà été traité dans un précédent exemple.
Nous ne reviendrons pas sur leur définition.
12
La division navigation (8/15). navigation
class menu (2/2).
Cela rendra alors
Pas de bordure en haut
Zone de texte
Pas de marge intérieure
Pas de marge extérieure
Bordure grise dun pixel
Marge intérieure basse de 10px
13
La division navigation (98/15). navigation
class general (1/2).
2. Class  general 
/typographie.css Aucune informations
Aucune informations concernant la typographie de
la class  general  nest définit.
/habillage.css .general background-color
eaeaff text-align center
Background-color va définir la couleur
darriè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
14
La division navigation (10/15). navigation
class general (2/2).
Dans tous les cas, la class .general est appliqué
à un objet de type ltulgt. La définition CSS .menu
ul sapplique donc ici aussi.display block va
définir laffichage 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.
Rendu final
15
La division navigation (11/15). navigation
class menu-titre (1/2).
3. Class   menu-titre  
/typographie.css Aucune informations
Aucune informations concernant la typographie de
la class  menu-titre  nest définit.
/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
16
La division navigation (12/15). navigation
class menu-titre (2/2).
Dans ce cas précis, du fait que le ltli
class"menu-titre"gtlt/ligt soit un enfant (child)
de ltul class"general"gt, le CSS hérite deux
définitions, .menu-titre et .general
.menu-titre.Rendu
.menu-titre
.general .menu-titre
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 3px
Padding-top 4px
Fond transparent
Padding-bottom 2px
Rendu final
Zone texte
17
La division navigation (13/15). navigation
class menu-liste (1/1).
4. Class  menu-liste 
/typographie.css Aucune informations
Aucune informations concernant la typographie de
la class menu-liste  nest définit.
/habillage.css Aucune informations
Aucune informations concernant lhabillage de la
class menu-liste  nest définit.
18
La division navigation (14/15). navigation
class menu-item (1/2).
4. Class  menu-item 
/typographie.css Aucune informations
Aucune informations concernant la typographie de
la class menu-item  nest définit.
/habillage.css .menu-item margin
0px padding-left 4px padding-right
4px padding-top 1px padding-bottom
1px font-size 80
Toutes les propriétés ont déjà été expliqué une
fois.
19
La division navigation (15/15). navigation
class menu-item (2/2).
Rendu
Padding-top 1px
Zone de texte
Padding-left 4px
Padding-right 3px
Padding-bottom 1px
20
La division principal (1/6). principal (1/3)
généralités.
Cette division permet laffichage du contenu du
site. Elle est constitué dune entête et dun
corps
ltdiv id"principal" class"principal"gt lt!--
entête --gt ltdiv class"boite"gt ltdiv
class"header"gt Contenu lt/divgt
lt/divgt lt!-- corps --gt ltdiv
class"boite"gt ltdiv class"boite-titre"gt
Titre lt/divgt ltdiv
class"boite-contenu"gt Contenu
lt/divgt lt/divgt lt/divgt
entête
corps
21
La division principal (2/6). principal (2/3)
la typographie et lhabillage (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 width63
22
La division principal (3/6). principal (3/3)
la typographie et lhabillage (2/2).
Rendu final
Top 0px
Margin-top 1.5em
Left 20
Padding 0px
Width 63
Margin-right 3
Margin 0px
Ecran
Zone texte de division principal
Division principal
23
La division principal (4/6). principal
class boite, boite-titre et boite-contenu.
Que ce soit pour lentête ou le corps de la
division principal, les données sont encapsulées
dans des boites (ltdivgt de class boite).La classe
boite est muette puisqua 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 dune
boite de son contenu.
Entête
div class boite
principal
div class header
Corps
div class boite
div class boite-titre
div class boite-contenu
24
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 sexpliquer 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.
Lintérêt de déclarer des class CSS en fichiers
externes sen trouve réduit puisquelles seraient
moins utilisés, sans compter laugmentation 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
lutilisation de class de styles prédéfinies
optimale Exemples de contenu pour principal
25
La division principal (6/6). principal
class boite, boite-titre et boite-contenu.
Enfin, lexplication la plus probable vient du
fait que SPIP est un CMS, et non un éditeur HTML
Les administrateurs dun site sous CMS
(php-nuke, portail phpbb, mambo, pour ne citer
que les plus connus) ont bien accès au FTP, mais
le but dun CMS est justement de pouvoir mettre à
jour le contenu dun site uniquement via le
protocole HTTP et un simple browser. Les
webmasters peuvent ainsi déléguer des pouvoirs
(publication darticles dans notre cas) a des
personnes tierces qui nont pas forcement de
solides compétences informatiques. Les
possibilités de mise en forme sen trouve
réduites par la nature front-end, online et
user-friendly de léditeur darticle Exemples
Editeur darticles SPIP
Editeur darticles Mambo
26
La division encart permet dafficher des liens
vers dautres sites ainsi que contenu adapté à ce
qui est affiché dans principal. Récupérons les
styles CSS
/typographie.css .encart font-family
Verdana, Arial, Helvetica, sans-serif
/habillage.css .encart float right
/width 14em/ width 20 margin-left
4 /margin-left 2em/ margin-top 1em
margin-bottom 0em margin-right 0px
Le float right indique que la division est
alignée à droite.
27
Rendu final
Float right
Margin-top 1.5em
Width 20
Margin 0px
Ecran
Zone texte de division encart
Division encart
28
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 ltul
class"general"gt sont remplacés par des ltdiv
class"divers"gt
ltdiv class"menu"gt ltdiv class"divers"gt
ltli class"menu-titre"gt lth2gtltspan
style"color green"gtLa lutte dans les autres
facs !lt/spangtlt/h2gt ltligt ltul
class"menu-liste"gt ltli
class"menu-item"gt ltspan style"color
red"gtlt/spangt - lta href"http//comitedegrevecens
ier.ifrance.com/"gtCensier en lutte lt/agt
lt/ligt ltli class"menu-item"gt ltspan
style"color red"gtlt/spangt -lta
href"http//collectifdoctorants.free.fr/"gtCollect
if des doctorants lt/agt lt/ligt
lt/ulgt lt/ligt lt/divgtlt/divgt
.divers est une class muette.