Structure du site cpe.evry.free.fr. 1. Informations générales Le site renvoi au site via un javascript.

Présentation au sujet: "Structure du site cpe.evry.free.fr. 1. Informations générales Le site renvoi au site via un javascript."— Transcription de la présentation:

1 Structure du site cpe.evry.free.fr

2 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 surhttp://cpe.evry.free.frhttp://cpe.apeiron-prod.com/ 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 ( ) respectivement nommées (did): navigation, principal et encart. Site #navigation#principal#encart Généralités (1/3).: Informations générales et Structures

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

4 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. Généralités (3/3).: Informations générales et Structures Styles spip_style.csstypographie.csshabillage.css

5 La division #navigation (1/15).: #navigation (1/3) : la typographie. Cette division permet laffichage des principaux menus du site. Balise racine : 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-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.

7 La division #navigation (3/15).: #navigation (3/3) : lhabillage. Rendu final : EcranZone texte de division #navigation Division #navigation Top : 0px, Left : 0px Width : 14% Margin-top: 1.5em Margin : 0px Padding : 0px

8 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 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. Sous menu titre liens

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 à : le titre du menu lien 1 lien 2 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 : Accueil du site.: Espace privé.: Forum.: Contacts.: Logiciels Libres

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 /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 » nest définit. 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-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.

12 La division #navigation (8/15).: #navigation : class menu (2/2). Cela rendra alors : Zone de texte Bordure grise dun pixel Marge intérieure basse de 10px Pas de bordure en haut Pas de marge intérieure Pas de marge extérieure

13 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 » nest définit. 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). Rendu final : Texte centré Couleur de fond : #eaeaff Dans tous les cas, la class.general est appliqué à un objet de type. 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.

15 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 » nest définit.

16 La division #navigation (12/15).: #navigation : class menu-titre (2/2). Dans ce cas précis, du fait que le soit un enfant (child) de, 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 : 4pxPadding-right: 3px Padding-top : 4px Padding-bottom : 2px Zone texte Rendu final :

17 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 » nest définit. 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 /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 » nest définit. 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-left : 4pxPadding-right: 3px Padding-top : 1px Padding-bottom : 1px Zone de texte

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 : entête corps Contenu Titre Contenu

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; width:63%; }

22 La division #principal (3/6).: #principal (3/3) : la typographie et lhabillage (2/2). Rendu final : EcranZone texte de division #principal Top : 0px Margin-top: 1.5em Width : 63% Margin-right : 3% Margin : 0px Padding : 0px Left : 20% 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 ( 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 Corps div class boite #principal div class boite div class header 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 SPIPEditeur darticles Mambo

26 La division #encart (1/3).: #encart :: La typographie et lhabillage (1/2). 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 : /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.

27 La division #encart (2/3).: #encart :: La typographie et lhabillage (2/2). Rendu final : Float : right Width : 20% Margin-left : 4% Margin-top: 1.5em Margin : 0px EcranZone texte de division #encart Division #encart

28 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 sont remplacés par des : La lutte dans les autres facs ! § - Censier en lutte § - Collectif des doctorants.divers est une class muette.