#TITRE
#TEXTE
[(#REM) On affiche le titre de la rubrique]
#TITRE
[(#REM)On sélectionne les articles de la rubrique
grâce au paramètre id_rubrique présent dans le contexte]
#TITRE
[(#CHAPO)
]
[(#REM) On affiche le texte en limitant la taille des images à 300px]
[(#TEXTE|image_reduire{300})]
On voit apparaitre ici la syntaxe complète des balises spip :\\
[texte_optionnel-avant(#MA_BALISE|mon_filtre)texte_optionnel_après]\\
Les textes optionnels ne s'affichent que si MA_BALISE est renseigné dans la base. D'autre part, un "filtre" (une moulinette !) s'applique à la balise.
La balise #REM permet de commenter son code de façon à le rendre plus compréhensible pour soi-même et pour les autres.
===== Un peu de xhtml et css =====
==== xhtml ====
Une page html se compose au minimum :
* d'un [[http://www.w3.org/QA/2002/04/valid-dtd-list|DOCTYPE]] : il indique au navigateur le codage (html 4.0, xhtml 1.0, ...) utilisé pour la page.
* d'une balise "html"
* d'une balise "head"="en-tête" avec une balise "title"="titre" de la page.
* d'une balise "body"="le corps du document"
exemple :
Largeur fixe (750px, header/menu haut/menu gauche flottant/menu
droite flottant/contenu/footer.
Header (modèle utilisant les positionnement flottants)
(voir tous les modèles)
menu gauche
largeur fixe : 150px avec utilisation de la propriété float:left;
menu droit
largeur fixe : 150px avec utilisation de la propriété float:right;
Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété clear:both; sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.
Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.
pied de page (se place en dessous des éléments flottants grâce à clear:both;)
En xhtml, toutes les balises doivent être fermés et sont écrites en minuscules.
==== css ====
Css signifie "Cascading Style Sheets"="Feuilles de style en cascade".
Les css permettent de mettre en forme un document html.
exemple :
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
width:750px;
margin:0 auto;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
Le site [[http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS|alsacréations]] présentent d'excellents modèles de mise en page.
===== Liens =====
* Site officiel avec une documentation en ligne très bien faite : www.spip.net
* Site de ressources (infos, plugins, ...) - www.spip-contrib.net
* Des squelettes pas chers sur [[http://www.spip-art.net/|spip-art.net]]
* [[http://www.oreilly.fr/catalogue/2841774139|livre xhtml et ccs]] : Collection tête la première chez Oreilly