Je maintiens, à mes heures perdues, le site des CE2-CM1-CM2 de l’école bilingue de Baillargues, que gère mon frère. J’ai revampé une partie du site ce week-end.
Le site est développé sous SPIP, les squelettes de pages sont faits main. Mon frère et moi avons retouché le site par petites touches au cours du temps, principalement pour améliorer la convivialité et mettre à disposition des documents multimédia (images, sons, panoramiques).
Je présente ici quelques techniques assez simples à mettre en œuvre.
Menus déroulants pour la barre de navigation
Pour donner accès à des sous-menus depuis la barre de navigation à gauche. Cet article de spip-contrib.net explique en détail comment procéder, sur la base d’un article de alsacreations.com. Un exemple de mise en œuvre est visible depuis chaque page du site, notamment depuis l’accueil.
A noter que les effets de transparence et de coins arrondis ne fonctionnent que sous Mozilla Firefox.
Aperçu d’un article lors du survol à la souris
L’idée était ici de donner un aperçu du contenu d’un article depuis la rubrique à laquelle est il est rattaché. Ça donne des effets particulièrement intéressants pour les articles présentant les figures géométriques à colorier (mandalas, grecques, …).
J’utilise ici la librairie Ajax Mootools et j’affiche, lorsqu’il existe, le ‘logo pour survol’ de l’article SPIP. Lorsqu’il n’existe pas je me contente d’afficher le début du texte de l’article. Un exemple sur le site ici.
Jolies boîtes à coins arrondis
C’est une habitude à la maison, la manie de tout ranger dans des boîtes, de préférence de belles boîtes. Transposé en HTML/CSS ça donne des div sympas, à coins arrondis bien sûr.
Cet article propose 25 techniques pour créer des boîtes à coins arrondis. J’ai choisi celle-ci, qui s’appuie sur une image de fond que l’on peut personnaliser au préalable en fonction de ses goûts. Des exemples un peu partout sur le site, par exemple ici.
Post a Comment