Le Sommaire
popularité : 1%
– Sommaire
Le sommaire est la maquette la plus riche, elle concentre tous les éléments dont nous pourrons avoir besoin...
Invisible : le Header
Nous allons réécrire en grande partie cet entête, non qu’il soit déplacé, mais nous aurons besoin de nouveau fichiers, et d’aller editer du contenu à l’intérieur
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Harmonisation des sites du CNRS : Maquette modele UNE</title>
<!-- InstanceEndEditable --><link rel="stylesheet" type="text/css" href="../styles/xcharte.css">
<link rel="stylesheet" type="text/css" href="../styles/styles.css">
<script type="text/JavaScript" language="JavaScript" src="../z-outils/init.js"></script>
<script type="text/JavaScript" language="JavaScript" src="../z-outils/outils.js"></script>
<script language="JavaScript" type="text/JavaScript">
var numImage = Math.round(Math.random()*9)+1;
</script>
</head>devient
<head>
<meta http-equiv="Content-Language" content="#LANG">
<meta http-equiv="Content-Type" content="text/html; charset=#CHARSET">
<title>#NOM_SITE_SPIP</title>
<BOUCLE_meta(ARTICLES){tout}{titre=="META"}>
#TEXTE
</BOUCLE_meta>
<link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/styles/xcharte.css">
<link rel="stylesheet" type="text/css" href="#DOSSIER_SQUELETTE/styles/styles.css">
<script language="JavaScript" src="menujs.php"></script>
<script language="JavaScript" src="outilsjs.php"></script>Ont changé dans cet entête :
- le nom du site, la langue le charset récupérés des balises SPIP correspondantes
- les scripts javascripts que nous verrons dans un autre article.
Premiere zone : le Nom en haut à gauche
En effet, en haut à gauche : le nom de l’unité en lien sur la page d’accueil du site. Remplacer cela par un code spip se fait aisément :
A la fin du fichier, il suffit de remplacer le contenu de la cellule de tableau appelée Xnavhaut lignes 296 à 298 par :
<div style='width:45%'><A HREF=#URL_SITE_SPIP>#NOM_SITE_SPIP</A></div>Le width:45% sert a limiter la largeur de la zone de texte...
Les 3 liens à droite : CNRS, Acceuil SDV et Autres
Il faut modifier dans le kit le fichier styles/styles.css afin de transformer les mots lienCNRS, lienAccueil et lienAutres par lien1 lien2 et lien3, il est plus facile de boucler sur des numeros que sur des noms...
Donc le pavé 29-35 :
<div class="bandeau-liens" id="divbandeau-lienCNRS"> <a href="http://www2.cnrs.fr/band/2.htm" target="_blank">Le CNRS</a> </div>
<div id="divbandeau-traitvert1"><img src="../z-outils/images/charte/trait-vertical.gif" alt=""></div>
<div id="divbandeau-lienAccueil" class="bandeau-liens"> <a href="http://institut.in2p3.fr/" target="_blank">Accueil IN2P3</a></div>
<div id="divbandeau-traitvert2"><img src="../z-outils/images/charte/trait-vertical.gif" alt=""></div>
<div id="divbandeau-lienAutres" class="bandeau-liens"><a href="http://www2.cnrs.fr/band/5.htm" target="_blank">Autres sites CNRS</a></div>
<div id="divbandeau-traitvert3"><img src="../z-outils/images/charte/trait-vertical.gif" alt=""></div>est converti en boucle SPIP :
<BOUCLE_LIENS(SITES){id_rubrique=2}{par num nom_site}>
<div class="bandeau-liens" id="divbandeau-lien#COMPTEUR_BOUCLE"> <a href="#URL_SITE" target="_blank">[(#NOM_SITE|supprimer_numero)]</a> </div>
<div id="divbandeau-traitvert#COMPTEUR_BOUCLE"><img src="#DOSSIER_SQUELETTE/images/charte/trait-vertical.gif"></div>
</BOUCLE_LIENS>Ici, la rubrique 2 est la rubrique appelée plus haut "Rubrique 1-2". elle contient 3 sites appelés 1. CNRS, 2. Acueil SDV et 3. Autres sites CNRS
Bloc suivant : logo CNRS et ...
Sous le nom de l’unité, on trouvera le logo CNRS, pointant vers le site du CNRS, et un ou 2 autres logos pointant vers les hypothétiques autres tutelles. Ici aussi on peut utiliser une boucle SPIP pour transformer le tout (lignes 191 a 206 :
<div id="divpartenaires" >
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr><td><a href="http://www.cnrs.fr" target="_blank"><img src="../z-outils/images/charte/logo-cnrs.jpg" alt="CNRS Centre National de la recherche scientifique" width="150" height="65" border="0"></a></td>
</tr>
<tr><td class="separateur"><img src="../z-outils/images/boite-outils/espaceur.gif" alt="" width="150" height="1"></td>
</tr>
<tr><td><img src="../z-outils/images/site/logo-chups.jpg" alt="CHU-PS Pitié Salpétrière" width="150" height="43" border="0"></td>
</tr>
<tr><td class="separateur"><img src="../z-outils/images/boite-outils/espaceur.gif" alt="" width="150" height="1"></td>
</tr>
<tr><td><img src="../z-outils/images/site/logo-univ2.jpg" alt="Université Pierre et Marie Curie" width="150" height="50" border="0"></td>
</tr>
<tr><td><img src="../z-outils/images/site/logo-univ.jpg" alt="Université des sciences de la vie" width="150" height="40" border="0"></td>
</tr>
</table>
</div>vers
<div id="divpartenaires" >
<table width="150" border="0" cellspacing="0" cellpadding="0">
<BOUCLE_SITES_INST(SITES){id_rubrique=3}>
<tr><td><a href="#URL_SITE" target="_blank">#LOGO_SITE</a></td>
</tr>
<tr><td class="separateur"><img src="#DOSSIER_SQUELETTE/images/boite-outils/espaceur.gif" width="150" height="1"></td></tr>
</BOUCLE_SITES_INST>
<tr><td class="separateur"><img src="#DOSSIER_SQUELETTE/images/boite-outils/espaceur.gif" width="150" height="1"></td></tr>
</table>
</div>Si la rubrique 3 est la rubrique contenant les affiliations
Le bandeau
Un script javascript charge une image au hasard dans un répertoire...
- On peut changer cela en SPIP :
- suppression du script dans l’entete lignes 13-15 :
<script language="JavaScript" type="text/JavaScript"> var numImage = Math.round(Math.random()*1)+1; </script> - Remplacement dans le corps du fichier de
<script> var UrlCredits = '../z-outils/images/charte/une/bandeaux-une/credits/'+numImage + '.htm'; var OnClickStr='MM_openBrWindow(UrlCredits,\'popup\',\'width=750,height=600,scrollbars=yes\')'; document.write('<a href="javascript:'+ OnClickStr + ';"><img width=600 height=135 alt="" border="0" src="../z-outils/images/charte/une/bandeaux-une/' + numImage + '.jpg' + '"></a>');
- suppression du script dans l’entete lignes 13-15 :
par
<BOUCLE_artdocs(ARTICLES){id_rubrique=5}{par hasard}{0,1}>
<BOUCLE_DOCS(DOCUMENTS){id_article}{titre="bandeau"}{0,1}>
<script>
var UrlCredits ='#URL_SITE_SPIP/popup.php3?id_article=#ID_ARTICLE';
var OnClickStr='MM_openBrWindow(UrlCredits,\'popup\',\'width=750,height=600,scrollbars=yes\')';
document.write('<a href="javascript:'+ OnClickStr + ';"><img width=600 height=135 alt="" border="0" src="#URL_DOCUMENT"></a>');
</script><!-- InstanceEndEditable --></td>
</BOUCLE_DOCS>
</BOUCLE_artdocs>La rubrique 5 comporte une série d’articles destinés aux bandeaux du site. Chaque article de cette rubrique possède un titre, un descriptif de l’image et 3 documents.
Le premier document est l’image entiere, le second a une taille de 600x135 pixels et porte le titre bandeau le troisieme porte le titre bandeauc et a une taille de 600x62 pixels, ce dernier est appelé dans les autres pages du site.
Centre sous le bandeau
Cette zone sert de présentation au laboratoire. Y est dumpé le contenu d’un article, le premier de la rubrique appelée Présentation plus haut dans ce texte soit la rubrique 9 dans l’exemple ci dessous :
<B_PRES>
<BOUCLE_PRES(ARTICLES) {id_rubrique=6}{0,1}>
<p class="intertitre">[(#LOGO_ARTICLE|left)] #TITRE</p>
<p>#TEXTE</p>
</BOUCLE_PRES>
</B_PRES>
<//B_PRES>Sous cette présentation
L’idée a fait jour de ne pas afficher les dernières pages publiées sur le site quelque soit leur rubrique, mais de limiter cela à certaines d’entre elles.
En fait dans ce cas, à 2 rubriques : Les actualités rubrique 16 ici et A la une, pour un focus sur un sujet particulier rubrique 19.
<BOUCLE_rubactu(RUBRIQUES){id_rubrique=16} {lang_select=non}>
<tr>
<td width="35">#LOGO_RUBRIQUE</td>
<td>
<p class="titre">#TITRE</p>
</td>
</tr>
</BOUCLE_rubactu>
<tr>
<td> </td>
<td>
<BOUCLE_artactu(ARTICLES){id_rubrique=16}{lang}{par date}{inverse}{0,2}>
<p class="intertitre">[(#LOGO_ARTICLE_RUBRIQUE|left)] #TITRE</p>
<p> #INTRODUCTION</p>
<p><img src="#DOSSIER_SQUELETTE/images/boite-outils/lire-la-suite.gif" alt="" width="25" height="14" border="0" align="absmiddle"><a href="#URL_ARTICLE"><:suite:></a> </p>
<p style='clear:both'> </p>
</BOUCLE_artactu>
</td>
</tr>
<tr>
<td colspan="2">
<p><img src="#DOSSIER_SQUELETTE/images/boite-outils/filet-couleur.gif" width="100%" height="1"></p>
</td>
</tr>
</B_artactu>
<BOUCLE_rubune(RUBRIQUES){id_rubrique=19}{lang_select=non}>
<B_artune>
<tr>
<td width="35">#LOGO_RUBRIQUE</td>
<td>
<p class="titre">#TITRE<br>
<br>
</p>
</td>
</tr>
<tr>
<td width="35"> </td>
<td>
<BOUCLE_artune(ARTICLES){id_rubrique=19}{lang}{par date}{inverse}{age<1 mois}{0,2}>
<p class="intertitre">[(#LOGO_ARTICLE_RUBRIQUE|left)] #TITRE</p>
<p>#INTRODUCTION</p>
<p><img src="#DOSSIER_SQUELETTE/images/boite-outils/lire-la-suite.gif" alt="" width="19" height="11" border="0" align="absmiddle"><a href="#URL_ARTICLE"><:suite:></a> </p>
</BOUCLE_artune>
</td>
</tr>
</B_artune>
</BOUCLE_rubune>Le pavé central est donc rempli avec l’info de l’unité
La colonne de droite
Dans la maquette CNRS, cette colonne est remplie de contenu labellisé "A noter".
Ce sont des infos courtes, a interet limité dans le temps. SPIP développe un outil qui peut servir pour ce genre de contenu. Ce sont les breves.
Les breves sont des articles courts sans auteur, mais avec un lien web. Elles ne sont rattachables qu’à des rubriques de niveau 0 (situées à la racine).
On affiche les dernieres breves sur la page d’accueil :
<BOUCLE_bractu(BREVES){tout}{lang?}{par date}{inverse}{age<30}>
<tr>
<td class="Xnavdroite">
<p class="intertitre"><a href="#URL_BREVE">#TITRE</a></p>
<p> [(#TEXTE|couper{80})]</p>
</td>
</tr>
</BOUCLE_bractu>Sous ce pavé de brèves, il a semblé interessant de faire paraître des évènements futurs. Ces évènements sont des articles particuliers.
Pour les évènements, on utilise des articles dont les date de publication et les date de précédente publication sont renseignées en dates de début et de fin d’évènement, respectivement. Le surtitre sert à décrire l’organisateur, le soustitre le lieu.
Ceci donne, si la rubrique agenda est la rubrique 17 :
<BOUCLE_Rbagenda(RUBRIQUES){id_rubrique=17}>
<BOUCLE_agenda(ARTICLES){branche} {par date} {age_redac<=0} {0,5}>
<tr>
<td class="Xnavdroite">
<?php
$date_pub= '[(#DATE|affdate)]';
$date_redac= '[(#DATE_REDAC|affdate)]';
$jour_pub= '[(#DATE|nom_jour)]';
$jour_redac= '[(#DATE_REDAC|nom_jour)]';
// Ces particules sont Ã| énir dans les fichiers ecrire/lang/local_??.php3.
$langue_le='<:le:> '; // date unique, exemple: LE 1 janvier 1970
$langue_du='<:du:> '; // dates multiples, exemple: DU 1 janvier 1970 AU 2 janvier 1970
$langue_au=' <:au:> ';
// Configuration de l'affichage du jour de la semaine:
// 0: <:le:>date ou <:du:>date1<:au:>date2.
// 1: <:le:>jour date ou <:du:>jour date1<:au:>jour date2.
// 2: <:le:>date [jour] ou <:du:>date1 [jour]<:au:>date2 [jour].
$affiche_jour = 0;
include "agenda-sequentiel-3.inc";
?>
[<p class=intertitre><A HREF="#URL_ARTICLE">(#TITRE)</a></p>]
<b><?php echo $dateaffiche; ?></b>[<b> <:at:>(#SOUSTITRE|supprimer_tags).</b>]
[ <i><par:> (#SURTITRE|supprimer_tags)</i>]
[<br>(#DESCRIPTIF)]
</BOUCLE_agenda>Le bas de page
Le menu de gauche sera traité à part...
La série de 5 icones pointe sur divers liens :
qui sont modifiés pour prendre en compte les liens SPIP. Ces liens pointent donc sur la page d’accueil, une page credits.php3, ou le répertoire ecrire.
