HTML de blog [5.4] Modules complexes

Le régal du bricoleur de CSS. Très formateur ! Je vous recommande le module "Calendrier", héhé…

[1] Infos générales - Haut et bas de page

[2] La cellule des articles

[3] Articles et quasi-articles

[4] Annexes des articles

[5] Modules

[5.1] Modules : Infos générales - Modules simples

1. Structure d'une colonne de modules
2. Structure commune à tous les modules
3. Modules simples
   • Module Texte Libre
   • Module Overblog
   • Module Partager

[5.2] Modules en liste - début

1. Module Articles Récents
2. Module Derniers Commentaires
3. Module Catégories
4. Module Archives
5. Module Pages
6. Module Liens

[5.3] Modules en liste - fin

1. Module Présentation
2. Module Profil
3. Module Communautés
4. Module Syndication
5. Module Images Aléatoires
6. Module Albums

[5.4] Modules complexes

1. Module Recherche
2. Module Newsletter
3. Module Calendrier
   • Vue d'ensemble
   • Le mois
   • Les jours de la semaine
   • Les jours du mois
   • Le bandeau de navigation

[6] Diablogs

Module Recherche box recherche

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

divbox-content

Contenu du module

form

Formulaire

div

Emballage

input

Champ de saisie (caché)

input

Champ de texte [type=text] : texte à chercher

inputbutton

Bouton d'envoi [type=submit] Texte réglable dans l'admin

Module Newsletter box newsletter

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

divbox-content

Contenu du module

pas de balise

texte "Inscription à la newsletter"

formnewsletter_form_XXXXcleansize

Formulaire. XXXX=n° d'ordre de je ne sais quoi

fieldset

Groupe de champs

legend

invisible à l'écran

perror

Message en cas d'erreur pendant l'inscription (normalement masqué)

inputnewsletter_email_XXXXcheckMail notNull

Zone de saisie de l'adresse

fieldsetextends

Groupe de champs (apparaît lors de la saisie d'une adresse)

legend

invisible à l'écran

ul

Liste d'emballage des options

li

Emballage d'une option

label

Emballage d'une case à cocher

inputalert

Case à cocher

pas de balise

texte "Notifications de publication d'articles"

li

Emballage d'une option

label

Emballage d'une case à cocher

inputnewsletter

Case à cocher

pas de balise

texte "Newsletters du blog"

li

Emballage du bouton d'envoi

spanbutton

Emballage

spanfirst-child

Emballage

input

Bouton d'envoi [type=submit] Texte "OK" (non réglable)

Schéma mis à jour en avril 2012.

Pour finir, le plus monstrueux de la bande :

Module Calendrier box calendrier

• Table
• Structure commune à tous les modules
• Structure d'une colonne de modules

divbox-content

Contenu du module

tablecalendarTable1

Une bonne vieille table

tbody

Le corps de la table

tr

Le mois affiché (détails)

tr

Les jours de la semaine (détails)

tr

Sept jours, du lundi au dimanche (détails)

tr

Ainsi de suite, jusqu'à la fin du mois

tr

Navigation (détails)

Module Calendrier - le mois

• Table
• Module Calendrier

tr

1ère ligne de la table

tdcalendarTop1

Une seule cellule

a

Le mois affiché, lien vers la page d'archive correspondante.

Module Calendrier - les jours de la semaine

• Table
• Module Calendrier

tr

2e ligne de la table

tdcalendarHeader1

Une cellule

b

L (lundi)

tdcalendarHeader1

Ainsi de suite : M, M, J, V, S, D

Module Calendrier - les jours du mois

• Table
• Module Calendrier

tr

3e ligne de la table et suivantes, sauf la dernière

tdcalendarDays1
tdcalendarToday1

Une cellule. calendarDays1/calendarToday1 : date quelconque/du jour

a
pas de balise

lien vers l'archive d'un jour OU
jour sans article OU espace

tdcalendarDays1
tdcalendarToday1

Ainsi de suite pour six cellules

• Le td de classe calendarToday1 contient évidemment la date du jour ou, pour les pages d'archive, celle de l'archive. On ne la trouve donc qu'une fois au plus dans le calendrier. Ce td ne porte pas la classe calendarDays1 .
• Quand le 1er du mois n'est pas un lundi la première tranche de sept jours commence par des td vides, mais toujours de classe calendarDays1 .
• Quand le dernier jour du mois n'est pas un dimanche la dernière tranche de sept jours finit par des td vides, mais toujours de classe calendarDays1 .
• Il arrive que la dernière ligne de jours se compose uniquement de td vides. Pas approfondi la question, je pense qu'il s'agit d'afficher un minimum de cinq semaines (exemple : mois de février).

Module Calendrier - bandeau de navigation

• Table
• Module Calendrier

tr

Dernière ligne de la table

tdcalendarDays1

Une seule cellule

table

Sous-table

tbody

Corps de la sous-table

tr

Une seule ligne

tdcalendarDays1

Bouton <<

a
pas de balise

lien vers une page OU
texte "<<"

tdcalendarDays1

Bouton <

tdcalendarDays1

Bouton >

tdcalendarDays1

Bouton >>

• Il s'agit bien d'une table à l'intérieur d'une table !
• Sa ligne unique contient toujours quatre cellules exactement.
• Chaque cellule contient toujours du texte, qu'il soit simple ou inclus dans un lien.

Oublis, erreurs : merci de me les signaler en commentaire :-)