La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Utilisation de loutil Firebug Sébastien PONTAILLIER.

Présentations similaires


Présentation au sujet: "Utilisation de loutil Firebug Sébastien PONTAILLIER."— Transcription de la présentation:

1 Utilisation de loutil Firebug Sébastien PONTAILLIER

2 Loutil – Présentation générale Outil de développement web Inspection des pages web (html, css, javascript) et modifications en temps réel Développeurs : Rob Campbell, Joe Hewitt, Justin Dolske Version (compatible Firefox 2 et 3) Gratuit et open source

3 Loutil – Présentation générale

4 Loutil - Lancement

5 Loutil - Fonctionnalités Accès au code source + CSS correspondant pour la balise sélectionnée Différents onglets Console : permet de voir les scripts exécutés sur la page courante HTML : permet de voir le code HTML (dynamique) CSS : permet de voir le CSS associé Script : permet de voir le code HTML (statique)

6 Loutil - Fonctionnalités Deux modes Inspecter Affiche le code source (HTML et CSS) correspondant à lélément de la page survolé par la souris Conserve laffichage du code source dun élément lors dun clique sur cet élément Editer Extrait le code de lélément sélectionné et le rend éditable Edition possible dans tous les cadres affichant du texte Changements entraînés par la modification visibles immédiatement

7 Exemple – Récupérer un menu existant Contexte Super le menu ! Je le veux ! Comment faire ? Contacter le développeur nest pas toujours aisé ni efficace Affichage incomplet du code via le navigateur (pas de CSS) Utilisons Firebug !

8 Exemple – Récupérer un menu existant CSS utilisé par le bloc sélectionné mode « inspecter », sélection de lélément sur la page, affichage du bloc correspondant dans la console Copie du code HTML

9 Exemple – Récupérer un menu existant Eléments basiques sans style appliqué

10 Exemple – Récupérer un menu existant Copie du code CSS correspondant aux balises utilisées Plus de puces, police changée, un bloc pour chaque item, couleurs respectées

11 Exemple – Récupérer un menu existant Ajout du conteneur (et du CSS correspondant) pour limiter la largeur du menu

12 Exemple – Récupérer un menu existant Attention ! code CSS affichant les bordures non affiché automatiquement par Firebug

13 Exemple – Récupérer un menu existant Depuis la fenêtre CSS, clique sur le lien vers le fichier complet

14 Exemple – Récupérer un menu existant Copie du code CSS manquant Reste à arrondir les angles des bordures

15 Exemple – Récupérer un menu existant Copie des images manquantes


Télécharger ppt "Utilisation de loutil Firebug Sébastien PONTAILLIER."

Présentations similaires


Annonces Google