SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 282 visiteurs en ce moment

Accueil > Squelettes > Squelettes par défaut > Variations sur la dist 1.9 > Comment analyser une page HTML et sa feuille de style CSS ?

Comment analyser une page HTML et sa feuille de style CSS ?

13 octobre 2007 – par erational – commentaires

8 votes

Apprendre à lire les feuilles de styles d’un squelette pour les adapter facilement

Séparation du fond et de la forme

L’aspect des pages publiques d’un site SPIP est défini par son squelette. Par défaut (le squelette livré avec SPIP) est appelé dist. Vous pouvez aussi installer d’autres squelettes (voir la rubrique Squelettes de ce site).

Le but d’un squelette est de définir :

  1. la structure des pages, le mode de navigation grâce au code HTML et aux boucles SPIP
  2. l’aspect graphique des pages grâce aux feuilles de style CSS

Cette séparation du fond et de la forme est très avantageux .

Pour modifier l’aspect graphique d’une page, il suffit uniquement de modifier sa feuille de style sans toucher au HTML. Si vous êtes sceptique, jetez un coup d’oeil au fameux site css zengarden dans lequel des designers proposent un design uniquement via la CSS et sans toucher au code HTML.

Nous allons voir maintenant comment analyser une CSS pour ensuite facilement la modifier pour l’adapter à nos besoins.

L’important dans un premier temps est de repérer les blocs principaux et leurs emboitements.

Exemple : analyse schématique du squelette Lebanon

Lire aussi Analyse de la CSS des squelettes par défaut (dist) pour SPIP v1.9

Pour cela vous disposez de plusieurs outils. Je vous recommande Firefox qui n’est pas un simple navigateur mais un véritable outil pour construire votre site.

Lire le code source

En analysant le code HTML et CSS , il est possible de comprendre la façon dont le code est agencé. Toutefois si le code n’est pas commenté ou mal indenté, la tâche peut s’avérer difficile pour des débutants.

Le code source HTML de la dist : un peu dur à lire ...

Le code source du fichier habillage.css de la dist : des commentaires pour nous aider

Utiliser l’inspecteur DOM de Firefox

Firefox dispose d’un outil qui permet d’analyser le code des pages : il s’agit de l’inspecteur DOM (attention, il faut avoir activé l’option « Installer l’inspecteur DOM » lors de l’installation de Firefox sinon il faut le re-installer)

Pour l’utiliser aller dans le menu Outils > Inspecteur DOM. Ce petit logiciel est très puissant, il analyse tous les éléments HTML. En cliquant sur les "+", vous pouvez déplier les blocs

Utiliser l’extension webdevelopper de Firefox

L’extension Webdelopper de Firefox dispose de nombreux outils d’analyse de page regroupés dans le menu "information". C’est pratique pour les gens qui ne sont pas trop à l’aise avec le code car l’information s’affiche directement sur la page web.

Télécharger Webdevelopper

Activer l’affichage des div

Le résultat sur le squelette dist

Utiliser l’extension Firebug de Firefox

C’est la roll-royce pour l’analyse des pages. Vous disposez d’un batterie d’outils pour comprendre la structure des pages.

Télécharger Firebug

Activer firebug en bas à droite de firefox

Informations sur le div #navigation dur squelette dist

P.-S.

La première version de cette article a été publié sur le site le GenerationCyb.net

Dernière modification de cette page le 13 octobre 2007

Retour en haut de la page

Vos commentaires

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Facteur

    21 janvier 2010 – 383 commentaires

    Un plugin pour regrouper toutes les fonctions avancées autour de l’envoi de courriels. Introduction SPIP propose une fonction générique envoyer_mail() pour envoyer un courriel. Elle est assez simple d’utilisation mais peut paraître limitée (...)

  • Albums 3

    8 août 2014 – 224 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • ciag : plugin « Groupes d’auteurs »

    30 novembre 2011 – 22 commentaires

    Ce plugin facilite l’affectation des auteurs aux rubriques, via des groupes d’auteurs. Il offre également des vues globales des affectations de rubriques aux auteurs. Les objectifs de ce plugin Le premier objectif est de faciliter (...)

  • Tickets, suivi de bugs

    28 novembre 2008 – 45 commentaires

    Tickets est un outil de suivi de bugs directement intégré à l’espace privé de SPIP. Il est conçu pour faciliter la phase de développement du site (notamment les squelettes du site public). Tickets est un système simple de suivi de bugs directement (...)

  • Titre de logo v2

    23 mai 2014 – 17 commentaires

    La version 2 du plugin Titre de logo reprend les mêmes fonctions que la v1 mais étend le titre et le descriptif aux logos de tout objet éditorial de SPIP. Vous pouvez toujours vous référer à l’article de la version 1 pour retrouver les fonctions (...)