Logiciels libres > Mozilla Project >

Logiciels libres & gratuits Web Developer

Attention : si vous utilisez, ou souhaitez utiliser les CSS (Cascading Style Sheet) vous risquez de devenir accroc à Web Developer...

Une feuille de style est un fichier dont l’extension est .css. Il peut être associé à une page Web pour définir son style (couleur de fond, taille des caractères, caractéristique des blocs...) séparant ainsi contenus et mise en forme.

Exemple de l’intégration de la feuille de style framastyle.css sur la page d’accueil du site de Framasoft. Voici le code, placé entre les balises <head> et </head> :

<link href="css/framastyle.css" rel="stylesheet" type="text/css">

On voit ici que la feuille de style est placée dans le répertoire « css ».

Je ne m’étendrai pas sur l’intérêt d’utiliser des feuilles de style pour concevoir des pages Web (rapidité, accessibilité, respect des standards...).

Avant, les CSS, c’était souvent la galère... il fallait éditer le fichier CSS, rentrer des valeurs (sans voir le résultat), enregistrer, revenir au navigateur pour rafraîchir la page Web associé au style... et recommencer tout ça jusqu’à l’obtention du résultat voulu.

L’installation de l’extension Web Developer est identique aux autres extensions de Firefox. L’interface est francisée (choisir « Localized Version » sur la page « Download » du site de l’auteur, si la fenêtre d’installation de l’extension n’apparaît pas, vérifier que Firefox autorise l’ouverture du popup pour le site considéré). Redémarrez votre navigateur préféré, clic droit dans la barre des menus puis choisissez "Barre d’outils Web Developer". Une nouvelle barre d’outils apparaît.

Web Developper va vous permettre maintenant d’éditer vos feuilles de styles en affichant directement le résultat.

Tenez, petit exemple basique :

  1. Vous avez une page Web (en local) : ouvrez-là avec Firefox.
  2. Vous avez une feuille de style vide (créer un fichier texte, et changer l’extension .txt en .css).
  3. Cliquez sur l’icône CSS puis « ajouter une feuille de style personnalisée » et ouvrez votre fichier CSS vide précédemment créé. Puis faites, toujours dans le menu CSS, « Edit CSS ». Une SideBar s’ouvre et vous permet d’essayer vos propres paramètres CSS avec affichage du résultat immédiat.

Essayez par exemple l’instruction suivante qui met le fond de la page web en rouge :

body
{
background-color : red ;
}

Là où cela devient intéressant et pédagogique, c’est que Web Developer va vous permettre d’éditer, de modifier, n’importe quelle CSS de n’importe quelle page Web. Cliquez sur « CSS / voir les styles d’un élément particulier » pour que l’information CSS d’un élément particulier s’affiche dans la barre d’état du navigateur. Pour éditer la feuille Css : cliquez simplement sur « CSS / Edit CSS » et essayez de modifier quelques paramètres. Vous pourrez bien sûr enregistrer votre Css modifée en local puis la transférer sur votre site...

J’ai beaucoup appris comme cela sur les CSS.

Cette extension permet d’autres chose utiles au développement de sites, citons par exemple :

  • affichage / suppression / informations sur les images
  • afficher le chemin des liens
  • vérifier le texte de remplacement pour les images
  • afficher la page dans différentes résolutions d’écran
  • voir le code source
  • vider le cache du navigateur exécuter des test de validation WC3 (HTML, CSS...) - même pour une page en local -

Web Developer permet aussi d’obtenir d’autres informations plus spécifiques comme sur les cookies, les formulaires, les entêtes http, les informations d’authentification, les informations JavaScript...

Web Developer est assez intuitif à l’utilisation et se prend donc rapidement en main. Par ailleurs cette extension permet de configurer de nombreux raccourcis-clavier ainsi que de personnaliser les couleurs d’affichage des informations.

Difficile de s’en passer une fois que l’on y a goûté !

SITE OFFICIELcopie d'écran

Url d'origine: framasoft.net
Licence: Creative Common
Base de liens  |  Ajouter lien  |  Contact Rss
On est 54 visiteur(s) en ligne