La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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,

Présentations similaires


Présentation au sujet: "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,"— Transcription de la présentation:

1 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: / , - Tél: / , - Cours « Squelettes-SPIP » - Mardi 25 janvier 2005, 8h00-18h00 et Jeudi 3 février 2005, 8h Prendre en compte les éléments Maîtriser la syntaxe et exploiter les add-on pour Dreamwaever et le WEB Fichier HTML Règles CSS Boîtes imbriquées Arborescence des balises HTML Code HTML + Balises SPIP Boucles et Balises SPIP Boucles et Balises SPIP de 10 types de fichiers et relations

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

3 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 Mise en page : manuel de référence. Comment créer sa propre mise en page pour un site géré sous SPIP :

4 Mon premier squelette (je le sors du placard). Comment écrire un premier squelette qui marchouille. Un squelette, plusieurs articles, cest à ç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 na 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. SPIP pas à pas. Pas à pas, comment créer un SPIP qui défie les limites.

5 Spip et les feuilles de style dautres 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 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 : Guide des fonctions avancées :

6 Afficher automatiquement selon la date ou selon un ordre imposé Trier des articles par ordre alphabétique, sauf un quil 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 dun an Présenter les résultats dune recherche par secteurs Afficher le nombre de messages du forum lié à un article Un menu déroulant pour présenter une liste darticles Remplir les meta-tags HTML des pages darticle Trucs et astuces :

7 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 Linterface des news Et encore dautres 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 Tutorial : utilisation avancée des boucles et des mots-clés :

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

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

10 Modifier le squelette de SPIP cest intervenir dans le code au plan : Du HTML : du type, du rôle et de limbrication des balises, et donc de sa hiérarchie arborescente. Des Feuilles de style en cascade (CSS) : pour moult aspects en général et le positionnement des blocs en particulier. Des Boucles et des Balises SPIP. En dautres termes cela signifie que lon ne peut aucunement se contenter dintervenir uniquement au niveau «Des boucles et des Balises SPIP». En dautres termes cela signifie que lon ne peut aucunement se contenter dintervenir uniquement au niveau «Des boucles et des Balises SPIP». Permet dintervenir sur les plans de la répartition séquentielle et hiérarchique arborescente des informations présentées,... Permet dintervenir 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)... Détermine les information lues dans la base de données et présentées.

11 Modifier le squelette de SPIP cest 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 dintervenir 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 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). 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 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).

12 Modifier le squelette de SPIP cest intervenir dans le code au plan : Du HTML : du type, du rôle et de limbrication des balises, et donc de sa hiérarchie arborescente. Permet dintervenir 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. 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.

13 Modifier le squelette de SPIP cest 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 dinévitables interventions aux plans des codes HTML et CSS. 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 dinévitables interventions aux plans des codes HTML et CSS.

14 Modifier le squelette de SPIP cest 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. 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 lassociation 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. Chaque instruction en elle-même est simple à comprendre, cependant lassociation 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.

15 1. ARTICLE

16

17

18

19

20

21 (Article.html dans le navigateur Mozilla)

22 (Article.html dans le navigateur Mozilla)

23 (Article.html dans Dreamweaver 1. ARTICLE

24 (Article.html dans Dreamweaver 1. ARTICLE

25 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 1. ARTICLE

26 1. ARTICLE

27 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] [ [ (#CHAPO) ] [ (#TEXTE) ] [ (#PS) ] [ (#NOTES) ]

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

29 La description qui suit commente les codes des « Boucles et Balise SPIP » (de larticle) 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 ainsi que les autres parties mentionnées en début de document 1. ARTICLE

30 1/131/13 La balise #TITRE est utilisée pour extraire le titre de larticle sélectionné (il sera affiché dans la barre de titre du navigateur)0 Boucle article_principal de type ARTICLES et sélectionnant larticle invoqué dans la barre dadresse du navigateur Boucle article_principal de type ARTICLES et sélectionnant larticle invoqué dans la barre dadresse du navigateur

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

32 1. ARTICLE 2b/132b/13 La balise : #FORMULAIRE_RECHERCHE affiche le formulaire de linterface 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 dafficher les résultats. Vous pouvez décider dutiliser une autre page daffichage des résultats. Pour cela, il faut utiliser la balise de la manière suivante : [(#FORMULAIRE_RECHERCHE|adress e.php3)] où adresse.php3 est la page vers laquelle vous désirez envoyer lutilisateur. La balise : #FORMULAIRE_RECHERCHE affiche le formulaire de linterface 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 dafficher les résultats. Vous pouvez décider dutiliser une autre page daffichage des résultats. Pour cela, il faut utiliser la balise de la manière suivante : [(#FORMULAIRE_RECHERCHE|adress e.php3)] où adresse.php3 est la page vers laquelle vous désirez envoyer lutilisateur Colonne Navigation Menu Navigation

33 1. ARTICLE 3/13 Une boucle HIERARCHIE effectue une récursivité. Elle retourne la liste des RUBRIQUES qui mènent de la racine du site jusquà larticle en cours (article invoqué dans la barre dadresse du navigateur et sélectionné par id_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"] 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 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

34 1. ARTICLE 4/134/13 Une boucle MOTS retourne les mots clés associés à larticle 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é) Lien #URL_ARTICLE vers larticle dont le titre est #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] 1.1. Colonne Navigation Menu Navigation mots-clés info-bulle

35 1. ARTICLE 5/135/13 Boucle FORUMS : retourne une liste de messages de forums associés à larticle identifié par id_article. ?? Ne retourne rien car: Aussi vite fermée qu elle a été ouverte ?! Aucune balise ?! 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 (cest subtil, voir la note ci- dessous et larticle sous spip.net). Afficher le nombre de messages du forum lié à un article. Cest un poil acrobatique. À première vue, il est très simple de connaître le nombre déléments dune boucle : il suffit dutiliser le code SPIP : #TOTAL_BOUCLE. Ce code peut sutiliser non seulement à lintérieur de la boucle, mais aussi (cest le seul dans ce cas) dans le texte conditionnel après (le texte qui saffiche après la boucle si elle contient des éléments) et le texte conditionnel alternatif (le texte qui saffiche si la boucle est vide)... Afficher le nombre de messages du forum lié à un article. Cest un poil acrobatique. À première vue, il est très simple de connaître le nombre déléments dune boucle : il suffit dutiliser le code SPIP : #TOTAL_BOUCLE. Ce code peut sutiliser non seulement à lintérieur de la boucle, mais aussi (cest le seul dans ce cas) dans le texte conditionnel après (le texte qui saffiche après la boucle si elle contient des éléments) et le texte conditionnel alternatif (le texte qui saffiche si la boucle est vide)... Boucle FORUMS faisant suite à une boucle FORUM: retourne une liste de messages de forums associés à larticle identifié par id_article : #DATE et #TITRE 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 dadministration safficheront à son emplacement, sinon ils viendront en bas de page Colonne Navigation Liens Forums

36 1. ARTICLE 6/136/13 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 larticle. [(#LOGO_ARTICLE|left)] affiche le logo de larticle et laligne à gauche #SURTITRE affiche le surtitre de larticle #TITRE affiche le titre de larticle #SOUSTITRE affiche le soustitre de larticle #DATE affiche la date de larticle 1.2. Colonne principale Cartouche

37 1. ARTICLE 7/137/13 Boucle AUTEURS retourne tous les auteurs de larticle assigné par id_article 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.. Lien #URL_AUTEUR vers le nom de lauteur #NOM #BIO retourne la biographie de lauteur Lien #URL_ARTICLE de titre #TITRE avec Texte de survol [title="(#DESCRIPTIF|textebrut|entites_html"] Boucle ARTICLES retourne les articles correspondant à cet identifiant dauteur id_auteur Lien #URL_SITE vers le site #NOM_SITE (nom du site de lauteur) info-bulle

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

39 1. ARTICLE 9/139/13 #NOTES affiche les notes de bas de page de larticle #PS affiche le post-scriptum de larticle #TEXTE affiche le TEXTE de larticle #CHAPO retourne le texte dintroduction (chapeau) #LOGO_DOCUMENT affiche le logo (vignette de prévisualisation) associé à cet article ; si une vignette personnalisée na pas été installée manuellement par lauteur de larticle, SPIP utilise une vignette standard selon le type du fichier. #URL_DOCUMENT est lURL 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)] #LOGO_DOCUMENT affiche le logo (vignette de prévisualisation) associé à cet article ; si une vignette personnalisée na pas été installée manuellement par lauteur de larticle, SPIP utilise une vignette standard selon le type du fichier. #URL_DOCUMENT est lURL 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)] 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). 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) Colonne principale Article

40 1. ARTICLE 10/1310/13 Il est très simple de connaître le nombre déléments dune boucle : il suffit dutiliser le code SPIP : #TOTAL_BOUCLE. Ce code peut sutiliser non seulement à lintérieur de la boucle, mais aussi (cest le seul dans ce cas) dans le texte conditionnel après (le texte qui saffiche après la boucle si elle contient des éléments) et le texte conditionnel alternatif (le texte qui saffiche si la boucle est vide)

41 11/1311/13 1. ARTICLE Le code #PARAMETRES_FORUM fabrique la liste des variables exploitées par linterface du formulaire permettant de répondre à cet article (à cette rubrique, à cette brève, à ce message). Par exemple : [ Répondre à cet article ] Le code #PARAMETRES_FORUM fabrique la liste des variables exploitées par linterface du formulaire permettant de répondre à cet article (à cette rubrique, à cette brève, à ce message). Par exemple : [ Répondre à cet article ] #ID_FORUM affiche lidentifiant unique du message Lien #URL_SITE de titre #NOM_SITE BOUCLE FORUM retournant les messages du forum correspondant à larticle {id_article} dans lordre antichronologique) Date #DATE et lien # de titre #NOM auteur 1.2. Colonne principale Forum

42 12/1312/13 1. ARTICLE Relevez lusage fait des codes optionnels Lien #URL_SITE de titre #NOM_SITE Le code #PARAMETRES_FORUM fabrique la liste des variables exploitées par linterface du formulaire permettant de répondre à cet article (à cette rubrique, à cette brève, à ce message). Par exemple : [ Répondre à cet article ] #ID_FORUM affiche lidentifiant unique du message Date #DATE et lien # de titre #NOM auteur BOUCLE FORUM retourne les messages du forum correspondant à larticle {id_article} dans lordre antichronologique). Le code {Id_parent} retourne les messages dépendants dun autre message.

43 1. ARTICLE 13/1313/13

44 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

45 2. AUTEUR

46 (auteur.html dans Mozilla)

47 (auteur.html dans Dreamweaver)

48 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 2. AUTEUR

49 body { background: white; margin: 10px; } 2. AUTEUR

50 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] body { background: white; margin: 10px; } 2. AUTEUR

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

52 2. AUTEUR 1/51/5

53 2/52/5

54 3/53/5

55 4/54/5

56 5/55/5

57 3. BREVE

58 (breve.html dans Mozilla) 3.BREVE

59 (breve.htmldansDreamweaver) 3. BREVE

60

61

62 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 3. BREVE

63 body { background: white; margin: 10px; } 3. BREVE

64 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] [ (#TEXTE) ] : #NOM_SITE. [ (#NOTES) ] body { background: white; margin: 10px; } 3. BREVE

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

66 3. BREVE 1/111/11

67 2/112/11

68 3/113/11

69 4/114/11

70 5/115/11

71 6/116/11

72 7/117/11

73 8/118/11

74 9/119/11

75 10/1110/11

76 11/1111/11

77 4. FORUM

78 (forum.html dans Mozilla) 4. FORUM

79 (forum.html dans Dreamweaver)

80 4. FORUM

81

82

83 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 4. FORUM

84 body { background: white; margin: 10px; } (#TEXTE) (#INTRODUCTION) 4. FORUM

85 .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 4. FORUM

86 1/41/4

87 2/42/4

88 3/43/4

89 4/44/4

90 5. MOT

91 (mot.html dans Mozilla)

92 (mot.html dans Dreamweaver)

93 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 5. MOT

94 body { background: white; margin: 10px; } 5. MOT

95 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] body { background: white; margin: 10px; } [ (#TEXTE) ] [ (#NOTES) ] 5. MOT

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

97 5. MOT 1/91/9

98 2/92/9

99 3/93/9

100 4/94/9

101 5/95/9

102 6/96/9

103 7/97/9

104 8/98/9

105 9/99/9

106 6. PLAN

107 (plan.html dans Mozilla) 6. PLAN

108 (plan.html dans Dreamweaver)

109 6. PLAN

110

111

112 6. PLAN

113 6. PLAN

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

115 6. PLAN 1/41/4

116 2/42/4

117 3/43/4

118 4/44/4

119 7. RECHERCHE

120 (recherche.html dans Mozilla) 7. RECHERCHE

121 (recherche.html dans Dreamweaver)

122 7. RECHERCHE

123

124 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 7. RECHERCHE

125 body { background: white; margin: 10px; } 7. RECHERCHE

126 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] body { background: white; margin: 10px; } 7. RECHERCHE

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

128 1/101/10 7. RECHERCHE

129 2/102/10

130 3/103/10

131 4/104/10

132 5/105/10

133 6/106/10

134 7/107/10

135 8/108/10

136 9/109/10

137 10/1010/10

138 8. RESUME

139 (resume.html dans Mozilla) 8. RESUME

140 (resume.html dans Dreamweaver)

141 8. RESUME

142

143

144 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 8. RESUME

145 body { background: white; margin: 10px; } 8. RESUME

146 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] body { background: white; margin: 10px; } (#INTRODUCTION) 8. RESUME

147 .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 8. RESUME Les positions relatives des boîtes principales

148 1/61/6 8. RESUME

149 2/62/6

150 3/63/6

151 4/64/6

152 5/65/6

153 6/66/6

154 9. RUBRIQUE

155 (rubrique.html dans Mozilla)

156 (rubrique.html dans Dreamweaver)

157 9. RUBRIQUE

158

159 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 9. RUBRIQUE

160 body { background: white; margin: 10px; } 9. RUBRIQUE

161 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] body { background: white; margin: 10px; } [ (#TEXTE) ] [ (#NOTES) ] 9. RUBRIQUE

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

163 1/101/10 9. RUBRIQUE

164 2/102/10

165 3/103/10

166 4/104/10

167 5/105/10

168 6/106/10

169 7/107/10

170 8/108/10

171 9/109/10

172 10/1010/10

173 10. SOMMAIRE

174 (sommaire.html dans Mozilla)

175 (sommaire.html dans Dreamweaver)

176 10. SOMMAIRE

177

178 En « dur » dans le code HTML (dans la balise) : Et dans la feuille de style « typographie.css » : body { background: white; margin: 10px; } 10. SOMMAIRE

179 body { background: white; margin: 10px; } 10. SOMMAIRE

180 [(#FORMULAIRE_RECHERCHE)] [(#FORMULAIRE_ADMIN)] body { background: white; margin: 10px; } (#INTRODUCTION) 10. SOMMAIRE

181 .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 10. SOMMAIRE Les positions relatives des boîtes principales

182 1/71/7 10. SOMMAIRE

183 2/72/7

184 3/73/7

185 4/74/7

186 5/75/7

187 6/76/7

188 7/77/7

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

190 1. ARTICLE

191 2. AUTEUR

192 3. BREVE

193 4. FORUM

194 5. MOT

195 6. PLAN

196 7. RECHERCHE

197 8. RESUME

198 9. RUBRIQUE

199 10. SOMMAIRE

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


Télécharger ppt "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,"

Présentations similaires


Annonces Google