Admin CliCours
Décorations et gestion des images
Afin de donner au site une apparence un peu plus attrayante, nous pouvons agrémenter le squelette d’images, statiques ou dynamiques. Les images statiques seront définies dans le fichier source HTML, ou dans la feuille de style associée. Les images dynamiques seront ajoutées via l’interface d’administration de SPIP, et intégrées à la page via les boucles SPIP, ce dont nous parlerons plus tard. Nous ne nous intéressons ici qu’aux images statiques.
Image du bandeau de titre
Pour ajouter une image à ce bandeau, nous avons le choix entre deux solutions :
− Ajouter une boite contenant le logo du site ; − Définir cette image comme paramètre de la boite BANDEAU.
Utilisation du paramètre background-image
Nous allons dans un premier temps définir une image pour le bandeau-titre.
Le paramètre background-image permet, comme son nom l’indique, d’appliquer une image de fond à une boite, selon le principe du « fond d’écran ». Dans cet exemple, l’image bandeau-moto.png fait exactement la taille de la boite, ce qui permet de s’affranchir de toutes les options de positionnement. Vous pouvez consulter les documentations sur le CSS pour en apprendre plus sur les paramètres backgroundattachment, background-repeat, et background-position. Nous ne les aborderons pas dans ce tutoriel.
Insertion d’une image à l’aide de
Exercice : Il est possible d’insérer une image dans la boite BANDEAU à l’aide de la commande vue en cours, éventuellement en créant une nouvelle boite LOGOSITE qui sera utilisée comme container à cette image. Proposez une solution permettant d’y arriver.
Logos des secteurs
Nous souhaitons faire apparaître les logos des secteurs (rubriques de premier niveau) dans la boite MENUSECTEUR. Ces logos seront cliquables, et conduiront aux rubriques concernées. Pour corser un peu la chose, nous souhaitons que ces logos apparaissent dans un cadre graphique représentant un roue de moto.
Exemple : a. + b. = c.
L’image « a » est l’image de la rubrique, enregistrée via l’interface d’administration, est référencée dans la base de données. L’image « b » est une image utilisée via le squelette pour encadrer la précédente : son centre est donc transparent. Pour ce faire, nous allons exploiter la gestion de la transparence (couche alpha) des images GIF, ainsi que la notion de « profondeur » des boites CSS via le paramètre z-index.
