Boucles et Balises SPIP 1.7.2 de 10 types de fichiers Fichier HTML Règles CSS Boîtes imbriquées Arborescence des balises HTML </BOUCLEn> <BOUCLEn(TYPE){critère1}...{critèrex}> Code HTML + Balises SPIP Boucles et Balises SPIP Prendre en compte les éléments Maîtriser la syntaxe et exploiter les add-on pour Dreamwaever et le WEB et relations François Daniel Giezendanner, SEM (Service Ecoles et Medias) - DIP - Genève, 4-5 Théodore-de-Bèze, 1205 CH-Genève Tél: +41 22 / 388-33-14, francois-daniel.giezendanner@edu.ge.ch - http://p7app.geneve.ch/spip/plan.php3 Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h00-1200

Télécharger le présent document Powerpoint : « Boucles et Balises SPIP 1.7.2 de 10 types de fichiers » : http://p7app.geneve.ch:8007/spip/article.php3?id_article=176 Avant de lire ce document et les codes sources y relatifs, il est profitable de consulter les documents et pages web suivants : CSS : Quelques exemples de mise en page fluide en n colonnes CSSnColZdUfIs_V2.ppt Téléchargement : http://p7app.geneve.ch:8007/spip/article.php3?id_article=166 Les CSS dans SPIP 1.7.2 CssSpip172Article_v04.ppt Téléchargement : http://p7app.geneve.ch/spip/ article.php3?id_article=169 Les Boucles et Balises SPIP 1.7.2 » Téléchargement : http://p7app.geneve.ch:8007/spip/article.php3?id_article=172 Et basez-vous sur les manuel de référence présentés aux pages suivantes :

Mise en page : manuel de référence Mise en page : manuel de référence. Comment créer sa propre mise en page pour un site géré sous SPIP : http://www.spip.net/fr_rubrique143.html Principe général Des boucles et des balises La syntaxe des boucles La syntaxe des balises SPIP La boucle ARTICLES La boucle RUBRIQUES La boucle BREVES La boucle AUTEURS La boucle FORUMS La boucle MOTS La boucle SITES (ou SYNDICATION) La boucle DOCUMENTS La boucle SYNDIC_ARTICLES La boucle SIGNATURES La boucle HIERARCHIE Les critères communs à toutes les boucles Les balises propres au site Les formulaires Les boucles de recherche Les filtres de SPIP Les boucles récursives La « popularité » des articles La gestion des dates Exposer un article dans une liste

SPIP pas à pas. Pas à pas, comment créer un SPIP qui défie les limites. http://www.spip.net/fr_rubrique144.html Mon premier squelette (je le sors du placard). Comment écrire un premier squelette qui marchouille. Un squelette, plusieurs articles, c’est à ça que ça sert… Et voici le premier contexte. Une rubrique ou comment faire des listes du contenu de la base. Faire des listes avec une boucle SPIP. Boucles en boucles, plusieurs niveaux de lecture. Affichons sur une même page des éléments en provenance de plusieurs endroits. Gérer le cache et éviter de faire ramer le serveur qui n’a pas que ça à faire. Le cache, ou comment faire un site dynamique qui ne bouge pas trop. Des filtres. Subtilités squelettiques. Les filtres transforment le contenu de la base de données en code HTML présentable.

Guide des fonctions avancées : http://www.spip.net/fr_rubrique257.html Au-delà du manuel de référence, vous trouverez ici une description détaillée des fonctions plus avancées à la disposition du webmestre : Spip et les feuilles de style <INCLURE> d’autres squelettes Réaliser un site multilingue Internationaliser les squelettes Utiliser des URLs personnalisées Le moteur de recherche Les variables de personnalisation Le support LDAP La structure de la base de données

Trucs et astuces : http://www.spip.net/fr_rubrique172.html Afficher automatiquement selon la date ou selon un ordre imposé Trier des articles par ordre alphabétique, sauf un qu’il faut afficher en premier Plusieurs logos pour un article Afficher les derniers articles de vos redacteurs par rubrique Afficher des éléments par lignes dans un tableau Ne pas afficher les articles publiés depuis plus d’un an Présenter les résultats d’une recherche par secteurs Afficher le nombre de messages du forum lié à un article Un menu déroulant pour présenter une liste d’articles Remplir les meta-tags HTML des pages d’article

Tutorial : utilisation avancée des boucles et des mots-clés : http://www.spip.net/fr_rubrique154.html Introduction Le but du jeu : un site consacré aux jeux vidéo La structure du site Mise en place de la structure Écrire des articles Première version du squelette des articles La page des rubriques Les mots-clés dans les articles Les mots-clés dans les rubriques L’interface des news Et encore d’autres moyens de se compliquer la vie ! Noter les jeux, annoncer les dates de sortie Quelques sommaires alternatifs Une première version du sommaire Un sommaire pour chaque machine Référencer des articles sur le Web Un forum pour chaque jeu Le site complet

10 Fichiers HTML principaux du squelette de SPIP 1.7.2 1. article-dist.html 2. auteur-dist.html 3. breve-dist.html 4. forum-dist.html 5. mot-dist.html 6. plan-dist.html 7. recherche-dist.html 8. resume-dist.html 9. rubrique-dist.html 10. sommaire-dist.html

4. FORUM 3. BREVE 2. AUTEUR 1. ARTICLE 5. MOT 6. PLAN 7. RECHERCHE 8. RESUME 9. RUBRIQUE 10. SOMMAIRE

Des Boucles et des Balises SPIP. Modifier le squelette de SPIP 1.7.2 c’est intervenir dans le code au plan : Des Feuilles de style en cascade (CSS) : pour moult aspects en général et le positionnement des blocs en particulier. Permet d’intervenir sur la répartition des boîtes blocs/en-ligne, les plans graphique, esthétique, cosmétique … et le mode de présentation (écran, imprimante, audio, etc) ... Du HTML : du type, du rôle et de l’imbrication des balises, et donc de sa hiérarchie arborescente. Permet d’intervenir sur les plans de la répartition séquentielle et hiérarchique arborescente des informations présentées, ... Des Boucles et des Balises SPIP. Détermine les information lues dans la base de données et présentées. En d’autres termes cela signifie que l’on ne peut aucunement se contenter d’intervenir uniquement au niveau «Des boucles et des Balises SPIP».

Dans la mesure où la nature des informations présentées Modifier le squelette de SPIP 1.7.2 c’est intervenir dans le code au plan : Des Feuilles de style en cascade (CSS) : pour moult aspects en général et le positionnement des blocs en particulier. Permet d’intervenir sur la répartition des boîtes blocs/en-ligne, les plans graphique, esthétique, cosmétique … et le mode de présentation (écran, imprimante, audio, etc) ... De nombreux utilisateur qui créent leur propre site avec SPIP désirent essentiellement modifier le look de leur application. Dans la mesure où la nature des informations présentées par la version originale SPIP 1.7.2 leur convient, une part considérable du look peut être complètement transformée en intervenant au niveau des feuilles de style en cascade (CSS).

au plan des code HTML et CSS. Modifier le squelette de SPIP 1.7.2 c’est intervenir dans le code au plan : Du HTML : du type, du rôle et de l’imbrication des balises, et donc de sa hiérarchie arborescente. Permet d’intervenir sur les plans de la répartition séquentielle et hiérarchique arborescente des informations présentées, ... Dans un deuxième temps, les modifications plus importantes à apporter au look des applications SPIP nécessitent des interventions corrélées au plan des code HTML et CSS.

Des Boucles et des Balises SPIP. Modifier le squelette de SPIP 1.7.2 c’est intervenir dans le code au plan : Des Boucles et des Balises SPIP. Détermine les information lues dans la base de données et présentées. Finalement, lorsque la nature même des informations lues dans la base de données (MySQL) et affichées pour le lecteur ne répond pas à vos attentes, … vous devez intervenir au niveau des Boucles et Balises SPIP pour obtenir les « bonnes informations », avec aussi évidemment d’inévitables interventions aux plans des codes HTML et CSS.

les CSS et les Boucles & Balises SPIP pour intervenir dans le codes Modifier le squelette de SPIP 1.7.2 c’est intervenir dans le code au plan : Par conséquent, Modifier le squelette en profondeur, au sens large du terme, nécessite de maîtriser suffisamment le HTML purgé, les CSS et les Boucles & Balises SPIP pour intervenir dans le codes des 10 types de documents du Squelette SPIP. Chaque instruction en elle-même est simple à comprendre, cependant l’association du HTML-purgé, des CSS et du langage SPIP (Boucles & Balises SPIP) produit un code résultant dont la bonne interprétation nécessite une maîtrise suffisante de ces trois composante. Une fois passé le stade de cette apprentissage préliminaire, on pourra alors se lancer dans les modifications pertinentes des codes existants ainsi que dans l’écriture de nouveaux types de fichiers SPIP.

1. ARTICLE

1. ARTICLE

dans le navigateur Mozilla) (Article.html dans le navigateur Mozilla)

dans le navigateur Mozilla) (Article.html dans le navigateur Mozilla)

1. ARTICLE (Article.html dans Dreamweaver

1. ARTICLE (Article.html dans Dreamweaver

En « dur » dans le code HTML (dans la balise) : 1. ARTICLE En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 1. ARTICLE <div class="contenu" id="principal"> <div id="navigation"> <body bgcolor="white" dir="#LANG_DIR">

<div class="cartouche"> 1. ARTICLE [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <div class="menu"> <h1 class="structure"> <ul class="forum-total"> <div class="encart"> <div class="cartouche"> <table class="signatures"> [<div class="signatures-titre"> [<div class="chapo">(#CHAPO)</div>] [<div class="texte">(#TEXTE)</div>] [<div class="ps">(#PS)</div>] [<div class="notes">(#NOTES)</div>] <BOUCLE_documents_joints(DOCUMENTS)... <body bgcolor="white" dir="#LANG_DIR"> <div class="contenu" id="principal">

1. ARTICLE Les positions relatives des boîtes principales habillage.css Les positions relatives des boîtes principales

Mise en page : manuel de référence 1. ARTICLE La description qui suit commente les codes des « Boucles et Balise SPIP 1.7.2 » (de l’article) Pour toute information complémentaire, on consultera le site « spip.net », en particulier la partie intitulée : Mise en page : manuel de référence Comment créer sa propre mise en page pour un site géré sous SPIP http://www.spip.net/fr_rubrique143.html ainsi que les autres parties mentionnées en début de document

1. ARTICLE 1/13 Boucle article_principal de type ARTICLES et sélectionnant l’article invoqué dans la barre d’adresse du navigateur http://localhost/spip/article.php3?id_article=176 La balise #TITRE est utilisée pour extraire le titre de l’article sélectionné (il sera affiché dans la barre de titre du navigateur)0

Un formulaire de recherche 1. ARTICLE 1.1. Colonne Navigation 1.1.1. Menu Navigation 2a/13 Lien vers le site #URL_SITE_SPIP portant le nom #NOM_SITE_SPIP info-bulle Appel du plan du site avec le fichier PHP « plan.php3 »; le libellé est : <:plan_site:> info-bulle Appel du résumé du site avec le fichier PHP « resume.php3 »; le libellé est : <:en_resume:> Accède à l’espace privé avec: « ecrire/ »; le libellé est : <:espace_privé:> Un formulaire de recherche

1. ARTICLE 1.1. Colonne Navigation 1.1.1. Menu Navigation 2b/13 La balise : #FORMULAIRE_RECHERCHE affiche le formulaire de l’interface de recherche. Par défaut, le formulaire enverra les requêtes vers une page recherche.php3; vous devez donc réaliser un squelette recherche.html permettant d’afficher les résultats. Vous pouvez décider d’utiliser une autre page d’affichage des résultats. Pour cela, il faut utiliser la balise de la manière suivante : [(#FORMULAIRE_RECHERCHE|adresse.php3)] où adresse.php3 est la page vers laquelle vous désirez envoyer l’utilisateur.

3/13 Une boucle HIERARCHIE effectue une récursivité. Elle retourne la liste des RUBRIQUES qui mènent de la racine du site jusqu’à l’article en cours (article invoqué dans la barre d’adresse du navigateur et sélectionné par id_article). 1. ARTICLE Dans la boucle HIERARCHIE susmentionnée, lien vers la rubrique #URL_RUBRIQUE portant le nom #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] Dans la boucle (sous) RUBRIQUES, lien vers la rubrique #URL_RUBRIQUE portant le nom #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] info-bulle Boucle RUBRIQUES (sous-rubrique) avec le filtre « même_parent », elle retourne donc la liste des rubrique dépendant de la même rubrique que la rubrique en cours. Elle permet d ’afficher les rubriques sœurs qui se trouvent au même niveau dans la hiérarchie info-bulle

1. ARTICLE 4/13 1.1. Colonne Navigation 1.1.4. Menu Navigation mots-clés 4/13 Une boucle MOTS retourne les mots clés associés à l’article identifié par id_article Lien #URL_MOT vers le mots #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] Boucle ARTICLES, retourne les articles correspondant à cet identifiant de mot-clé (utile pour indiquer la liste des articles traitant d ’un sujet donné) info-bulle Lien #URL_ARTICLE vers l’article dont le titre est #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] info-bulle

1. ARTICLE Boucle FORUMS : retourne une liste de messages de forums associés à l’article identifié par id_article. ?? Ne retourne rien car: Aussi vite fermée qu ’elle a été ouverte ?! Aucune balise ?! 5/13 1.1. Colonne Navigation 1.1.4. Liens Forums Si la boucle FORUMS donne lieu à au moins une réponse, SPIP affiche un titre h1 « derniers_commentaires » et le nombre d ’éléments de la boucle (c’est subtil, voir la note ci-dessous et l’article sous spip.net). Boucle FORUMS faisant suite à une boucle FORUM: retourne une liste de messages de forums associés à l’article identifié par id_article : #DATE et #TITRE Afficher le nombre de messages du forum lié à un article. C’est un poil acrobatique. http://www.spip.net/fr_article1495.html À première vue, il est très simple de connaître le nombre d’éléments d’une boucle : il suffit d’utiliser le code SPIP : #TOTAL_BOUCLE. Ce code peut s’utiliser non seulement à l’intérieur de la boucle, mais aussi (c’est le seul dans ce cas) dans le texte conditionnel après (le texte qui s’affiche après la boucle si elle contient des éléments) et le texte conditionnel alternatif (le texte qui s’affiche si la boucle est vide) ... Balise #FORMULAIRE_ADMIN : améliore le placement sur la page des boutons réservés aux admins («Recalculer cette page», «Modifier cet article»). Balise optionnelle : si elle est présente, les boutons d’administration s’afficheront à son emplacement, sinon ils viendront en bas de page.

1. ARTICLE 6/13 1.2. Colonne principale 1.2.1. Cartouche Boîte bloc «contenu» «principal» Boîte bloc «cartouche» en haut de la boîte bloc «contenu» «principal». Elle est utilisée pour afficher le logo, le surtitre, le titre, le sous-titre et la date de l’article. [(#LOGO_ARTICLE|left)] affiche le logo de l’article et l’aligne à gauche #SURTITRE affiche le surtitre de l’article #TITRE affiche le titre de l’article #SOUSTITRE affiche le soustitre de l’article #DATE affiche la date de l’article

1. ARTICLE 7/13 Boîte bloc «encart» sous la boîte «cartouche» et à droite dans la boîte bloc «contenu» «principal». Elle est utilisée pour afficher le nom des auteurs, le nom et lien de leurs sites, leur biographie et la liste de leurs articles. Boucle AUTEURS retourne tous les auteurs de l’article assigné par id_article Lien #URL_AUTEUR vers le nom de l’auteur #NOM Lien #URL_SITE vers le site #NOM_SITE (nom du site de l’auteur) #BIO retourne la biographie de l’auteur Boucle ARTICLES retourne les articles correspondant à cet identifiant d’auteur id_auteur Lien #URL_ARTICLE de titre #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] info-bulle .

1. ARTICLE 8/13 1.2. Colonne principale 1.2.2. Encart (suite) Boucle ARTICLES retourne les articles correspondant à cet identifiant d’auteur id_auteur Lien #URL_ARTICLE de titre #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] info-bulle Le #FORMULAIRE_SIGNATURE autorise la signature des pétitions associées aux articles (ce formulaire se place donc dans une boucle ARTICLES.

1. ARTICLE 9/13 1.2. Colonne principale 1.2.3. Article #CHAPO retourne le texte d’introduction (chapeau) #TEXTE affiche le TEXTE de l’article #PS affiche le post-scriptum de l’article #NOTES affiche les notes de bas de page de l’article La BOUCLE DOCUMENTS retourne une liste de documents multimédia associés à un article (cela peut être à un article, à une rubrique, éventuellement les images incluses dans une brève). #LOGO_DOCUMENT affiche le logo (vignette de prévisualisation) associé à cet article ; si une vignette personnalisée n’a pas été installée manuellement par l’auteur de l’article, SPIP utilise une vignette standard selon le type du fichier. #URL_DOCUMENT est l’URL du fichier multimédia. Pour afficher une vignette cliquable pointant vers le document multimédia, on utilisera donc le code suivant : [(#LOGO_DOCUMENT|#URL_DOCUMENT)]

1. ARTICLE 10/13 1.2. Colonne principale. 1.2.4. Signatures <BOUCLEn(SIGNATURES){id_article} utilisée ici sans balise interne. 1.2. Colonne principale. 1.2.4. Signatures <BOUCLEn(SIGNATURES){id_article}{par date}{inverse}> : cette boucle SIGNATURES retourne une liste de signataires d’une pétition associée à un article. Elle permet ici d’affiche la date, le nom et le nom-du-site des 30 derniers signataires (ordre anti-chronologique). Code #TOTAL_BOUCLE placé dans le texte conditionnel de la boucle BOUCLEn(SIGNATURES) qui n ’est affiché que si la boucle n’a trouvé aucune réponse. Donne le nombre de signatures associées à l’article. Il est très simple de connaître le nombre d’éléments d’une boucle : il suffit d’utiliser le code SPIP : #TOTAL_BOUCLE. Ce code peut s’utiliser non seulement à l’intérieur de la boucle, mais aussi (c’est le seul dans ce cas) dans le texte conditionnel après (le texte qui s’affiche après la boucle si elle contient des éléments) et le texte conditionnel alternatif (le texte qui s’affiche si la boucle est vide)

1. ARTICLE 11/13 1.2. Colonne principale. 1.2.5. Forum Le code #PARAMETRES_FORUM fabrique la liste des variables exploitées par l’interface du formulaire permettant de répondre à cet article (à cette rubrique, à cette brève, à ce message). Par exemple : [<A HREF="forum.php3?(#PARAMETRES_FORUM)"> Répondre à cet article</A>] BOUCLE FORUM retournant les messages du forum correspondant à l’article {id_article} dans l’ordre antichronologique) #ID_FORUM affiche l’identifiant unique du message Date #DATE et lien #EMAIL de titre #NOM auteur Lien #URL_SITE de titre #NOM_SITE

Relevez l’usage fait des codes optionnels 1. ARTICLE 12/13 BOUCLE FORUM retourne les messages du forum correspondant à l’article {id_article} dans l’ordre antichronologique). Le code {Id_parent} retourne les messages dépendants d’un autre message. #ID_FORUM affiche l’identifiant unique du message Date #DATE et lien #EMAIL de titre #NOM auteur Lien #URL_SITE de titre #NOM_SITE Le code #PARAMETRES_FORUM fabrique la liste des variables exploitées par l’interface du formulaire permettant de répondre à cet article (à cette rubrique, à cette brève, à ce message). Par exemple : [<A HREF="forum.php3?(#PARAMETRES_FORUM)"> Répondre à cet article</A>] Relevez l’usage fait des codes optionnels

1. ARTICLE 13/13

Pour les chapitres 2 à 10 qui suivent, vous êtes invités à commenter le code Des Boucles et Balises SPIP sur le modèle du chapitre 1. ARTICLE

2. AUTEUR

(auteur.html dans Mozilla)

(auteur.html dans Dreamweaver)

En « dur » dans le code HTML (dans la balise) : 2. AUTEUR En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 2. AUTEUR <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal">

<div class="liste-articles"> <div class="cartouche"> 2. AUTEUR [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <h1 class="structure"> <div class="menu"> <div class="liste-articles"> <div class="cartouche"> <div class="contenu" id="principal"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; }

2. AUTEUR Les positions relatives des boîtes principales habillage.css .liste-articles { margin-top: 1em; margin-bottom: 1em; clear: left; background-color: #FFCCCC; } Les positions relatives des boîtes principales

2. AUTEUR 1/5

2. AUTEUR 2/5

2. AUTEUR 3/5

2. AUTEUR 4/5

2. AUTEUR 5/5

3. BREVE

3. BREVE (breve.html dans Mozilla)

3. BREVE (breve.html dans Dreamweaver)

3. BREVE

3. BREVE

En « dur » dans le code HTML (dans la balise) : 3. BREVE En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 3. BREVE <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal">

<div class="cartouche"> 3. BREVE [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <div class="menu"> <h1 class="structure"> <ul class="forum-total"> <div class="encart"> <div class="cartouche"> [<div class="texte">(#TEXTE)</div>] <:voir_en_ligne:>: #NOM_SITE. [<div class="notes">(#NOTES)</div>] <div class="contenu" id="principal"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; }

3. BREVE habillage.css Les positions relatives des boîtes principales

3. BREVE 1/11

3. BREVE 2/11

3. BREVE 3/11

3. BREVE 4/11

3. BREVE 5/11

3. BREVE 6/11

3. BREVE 7/11

3. BREVE 8/11

3. BREVE 9/11

3. BREVE 10/11

3. BREVE 11/11

4. FORUM

4. FORUM (forum.html dans Mozilla)

(forum.html dans Dreamweaver)

4. FORUM

En « dur » dans le code HTML (dans la balise) : 4. FORUM En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

4. FORUM <div class="contenu" id="principal"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal"> <div class="extrait">(#TEXTE) <div class="extrait">(#INTRODUCTION)

4. FORUM habillage.css .extrait { margin: 0.1em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 2em; margin-right: 0.1em; line-height: 1.4em; }

4. FORUM 1/4

4. FORUM 2/4

4. FORUM 3/4

4. FORUM 4/4

5. MOT

(mot.html dans Mozilla)

(mot.html dans Dreamweaver)

En « dur » dans le code HTML (dans la balise) : 5. MOT En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 5. MOT <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal">

<div class="cartouche"> 5. MOT [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <div class="menu"> <div class="encart"> <div class="cartouche"> <div class="contenu" id="principal"> <div class="liste-articles"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } [<div class="chapo">(#TEXTE)</div>] [<div class="notes">(#NOTES)</div>]

5. MOT Les positions relatives des boîtes principales habillage.css .liste-articles { margin-top: 1em; margin-bottom: 1em; clear: left; background-color: #FFCCCC; } Les positions relatives des boîtes principales

5. MOT 1/9

5. MOT 2/9

5. MOT 3/9

5. MOT 4/9

5. MOT 5/9

5. MOT 6/9

5. MOT 7/9

5. MOT 8/9

5. MOT 9/9

6. PLAN

6. PLAN (plan.html dans Mozilla)

(plan.html dans Dreamweaver)

6. PLAN

6. PLAN <div id="plan" class="contenu">

<div class="encart"> 6. PLAN <div class="plan-secteur"> <div class="encart"> <div id="plan" class="contenu">

6. PLAN Les positions relatives des boîtes principales .plan-secteur { margin-top: 0em; margin-bottom: 3em; clear: right; background-color: #FFCC33; } habillage.css #plan { position: absolute; left: 32px; top: 21px; margin: 0px; padding: 0px; margin-right: 2em; margin-top: 2em; background-color: #FF6633; } Les positions relatives des boîtes principales

6. PLAN 1/4

6. PLAN 2/4

6. PLAN 3/4

6. PLAN 4/4

7. RECHERCHE

7. RECHERCHE (recherche.html dans Mozilla)

(recherche.html dans Dreamweaver)

7. RECHERCHE

En « dur » dans le code HTML (dans la balise) : 7. RECHERCHE En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 7. RECHERCHE <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal">

<div class="cartouche"> 7. RECHERCHE [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <div class="menu"> <div class="encart"> <div class="cartouche"> <div class="contenu" id="principal"> <div class="liste-articles"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; }

7. RECHERCHE Les positions relatives des boîtes principales habillage.css .liste-articles { margin-top: 1em; margin-bottom: 1em; clear: left; background-color: #FFCCCC; } Les positions relatives des boîtes principales

7. RECHERCHE 1/10

7. RECHERCHE 2/10

7. RECHERCHE 3/10

7. RECHERCHE 4/10

7. RECHERCHE 5/10

7. RECHERCHE 6/10

7. RECHERCHE 7/10

7. RECHERCHE 8/10

7. RECHERCHE 9/10

7. RECHERCHE 10/10

8. RESUME

8. RESUME (resume.html dans Mozilla)

(resume.html dans Dreamweaver)

8. RESUME

En « dur » dans le code HTML (dans la balise) : 8. RESUME En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 8. RESUME <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal">

8. RESUME <div class="contenu" id="principal"> [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <div class="menu"> <div class="encart"> <div class="contenu" id="principal"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="extrait">(#INTRODUCTION)</div>

8. RESUME Les positions relatives des boîtes principales habillage.css .extrait { margin: 0.1em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 2em; margin-right: 0.1em; line-height: 1.4em; } habillage.css Les positions relatives des boîtes principales

8. RESUME 1/6

8. RESUME 2/6

8. RESUME 3/6

8. RESUME 4/6

8. RESUME 5/6

8. RESUME 6/6

9. RUBRIQUE

(rubrique.html dans Mozilla)

(rubrique.html dans Dreamweaver)

9. RUBRIQUE

En « dur » dans le code HTML (dans la balise) : 9. RUBRIQUE En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 9. RUBRIQUE <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal">

<div class="cartouche"> 9. RUBRIQUE [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <div class="menu"> <div class="encart"> <div class="cartouche"> <div class="contenu" id="principal"> <div class="liste-articles"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } [<div class="chapo">(#TEXTE)</div>] [<div class="notes">(#NOTES)</div>]

9. RUBRIQUE Les positions relatives des boîtes principales habillage.css Les positions relatives des boîtes principales .liste-articles { margin-top: 1em; margin-bottom: 1em; clear: left; background-color: #FFCCCC; }

9. RUBRIQUE 1/10

9. RUBRIQUE 2/10

9. RUBRIQUE 3/10

9. RUBRIQUE 4/10

9. RUBRIQUE 5/10

9. RUBRIQUE 6/10

9. RUBRIQUE 7/10

9. RUBRIQUE 8/10

9. RUBRIQUE 9/10

9. RUBRIQUE 10/10

10. SOMMAIRE

(sommaire.html dans Mozilla)

(sommaire.html dans Dreamweaver)

10. SOMMAIRE

En « dur » dans le code HTML (dans la balise) : 10. SOMMAIRE En « dur » dans le code HTML (dans la balise) : <body bgcolor="white" dir="#LANG_DIR"> Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; }

<div class="contenu" id="principal"> 10. SOMMAIRE <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="contenu" id="principal">

10. SOMMAIRE <div class="menu"> [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] <div class="menu"> <div class="encart"> <div class="contenu" id="principal"> <body bgcolor="white" dir="#LANG_DIR"> body { background: white; margin: 10px; } <div class="extrait">(#INTRODUCTION)</div>

10. SOMMAIRE Les positions relatives des boîtes principales .extrait { margin: 0.1em; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: 2em; margin-right: 0.1em; line-height: 1.4em; } habillage.css Les positions relatives des boîtes principales

10. SOMMAIRE 1/7

10. SOMMAIRE 2/7

10. SOMMAIRE 3/7

10. SOMMAIRE 4/7

10. SOMMAIRE 5/7

10. SOMMAIRE 6/7

10. SOMMAIRE 7/7

des positionnements relatifs des boîtes principales Présentation groupée des positionnements relatifs des boîtes principales pour les dix types de fichiers du squelette SPIP 1.7.2 exposé ici

1. ARTICLE

2. AUTEUR

3. BREVE

4. FORUM

5. MOT

6. PLAN

7. RECHERCHE

8. RESUME

9. RUBRIQUE

10. SOMMAIRE

1. ARTICLE 2. AUTEUR 3. BREVE 4. FORUM 5. MOT 6. PLAN 7. RECHERCHE 8. RESUME 9. RUBRIQUE 10. SOMMAIRE