Utilisation de l’outil Firebug

Slides:

Advertisements

Présentations similaires

HTML Abda Anne Plan Présentation Structure Texte Listes Images Liens Tableaux Formulaires.

Advertisements

Création de pages Web dynamiques et sympathiques.

Le site de Vic-sur-Cère. Page daccueil Image de fond BANNIERE 1 BAN.2 CONTENU pied BARRE réservée Administration MENU DEROULANT 6 RUBRIQUES 4 WIDGETS:

Comprendre lergonomie du module Sconet BEE. La page daccueil de Sconet BEE Nom de létablissement Version du module Nom du module Sconet BEE Code de létablissement.

Comprendre l’ergonomie du module STSWEB

Lexique des manœuvres de base pour utiliser à PowerPoint

12 novembre 2012 Grégory Petit

Firebug Dévermineur Debugger.

Introduction aux Web Services Partie 1. Technologies HTML-XML

Présentation générale. Définition La fonction dutilisateur détermine ce quil peut faire sur le site les tâches qui lui sont possibles deffectuer dans.

Enregistrement d’un document

PROJET DATELIEU 20 MARS 2012LCP SALLE B105 création du site internet avec Weebly.

Mars 2013 Grégory Petit

Comprendre l’environnement Web

TracenPoche Les fichiers >.

28 novembre 2012 Grégory Petit

Créer une interface graphique avec Photoshop.

Netscape Présentation par : Aleksandra Krul et Aurélia Marcus Jeudi 31/

Feuilles de styles CSS Syntaxe d'application d'un style à une balise HTML : Les différents types de style : Pourquoi utiliser un style ? Possibilité étendue.

31 octobre 2012 Grégory Petit

Lancement de Microsoft Word

Auteur : Frédéric Thériault 1. À quoi ça sert !?  Cascading Style Sheet  Modifier la page Web en ajoutant des styles aux balises  Modifier l’apparence.

PROCEDURE TYPE PROCEDURE TYPE DE

Introduction à l’informatique en gestion 1 Plan de la leçon Modalités d’affichage La navigation Ouvrir/Enregistrer La saisie La sélection La.

SI 28 - Écriture interactive & multimédia Dreamweaver Séance 1 Petit Clara & Palfart Julien Printemps2008 Printemps 2008.

Initiation au JavaScript

WebAnnotator Thibault BASTE Jingjing LI Jialin LIU 3, Mai, 2011 Projet Web/BD Extension Firefox pour l'annotation de pages Web.

Éléments de présentation

Lancement de Microsoft Word 1. Cliquer avec le bouton droit de la souris sur le raccourci de « Microsoft Office Word 2003 » sur le bureau, 2. Dans le menu.

CSS et DREAMWEAVER.

Contribution CMS.Eolas

24 octobre 2012 Grégory Petit

1 Madeleine Hébert MSI. 2 3 Objectifs de la formation 1.Ouvrir la base de données (bibliothèque) Zotéro 2.L’alimenter: Importer des références bibliographiques.

Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.

Dreamweaver Séance 1.

SI28 Dreamweaver- Séance 1

1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.

Présentation de Dreamveawer

Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.

Dreamweaver MX.

Guillaume MICHAUD – Yvan LECOMTE

DreamWeaver Séance 2 HMIDA Ahmed A2008. Plan 1.Calques 2.CSS 3.Modèles 4.Formulaires 5.Comportements 6.Mise en ligne.

DREAMWEAVER Première séance Villaron Audrey – Shibly Tarek.

Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004.

Exposé DREAMWEAVER 2 Guillaume DUBREUIL Adrien HADOUX.

SI28 - Écriture multimédia interactive – A2004 Présentation Dreamweaver Partie 2 Pierre Malet GSU05.

Dreamweaver le retour Avec Les Formulaires Les Calques

Plan de la présentation Le langage HTML Dreamweaver MX Les premiers outils pour créer une page web :  Propriétés d’une page  Création de cadres  Création.

FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.

Dreamweaver 2 Plan 1.Calques 2.CSS 3.Modèles 4.Comportements 5.Formulaires 6.Mise en ligne 1 Timothée Devaux Myriam Roudy Dreamweaver 2 Printemps 2008.

Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.

SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P PRESENTATION Dreamweaver 2.

SI28 – Ecriture interactive et multimédia Sylvain Slaton – Pierre Laporte.

DREAMWEAVER SEANCE 1 Axel JACQUET GM05 – Julien VAN MOORLEGHEM GM05 A2008 Écriture interactive & multimédia Présentation Dreamweaver 8.

Dreamweaver MX Séance 2 Présenté par : Bastien Durizy Cedric Le-Rest Formulaire Comportement Style css Gestion de site Calque Scénario Modèle.

DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.

On va découvrir la magie de ....

SI 28 - Présentation Image Ready Aurélie Letenoux GSU 4.

Introduction au HTML Qu’est ce que le HTML ?

Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements

Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.

Séance 2 Marie Lavogez Justine Leleu Dreamweaver MX.

SI28 : Ecriture interactive et multimédia

DREAMWEAVER SÉANCE 2 SI28 Jonathan Barone – Thomas Lulé.

1 Dreamweaver SI28: Ecriture interactive et multimédia Vincent Drapier Nabil El Hefni Automne 2006.

SI28 : D REAMWEAVER 2 Audrey BUISSON – GSU05 Romain LASSALLE – GI05 1 SI28 – Ecriture interactive et multimedia.

1 er séance SI28 A2004 YIN Lei Emmanuel Eugene. Plan de l’exposé  Introduction au HTML  Le HTML dans le bloc-notes (notepad)  Présentation de Dreamweaver.

TP ISN-Terminale S Notion de code HTML. I) Visualisation du code source d’une page web Se mettre sur une page web quelconque : clic droit, Afficher la.

Bande dessinée par Denis Théorêt. 2 On ouvre une nouvelle image.

Transcription de la présentation:

Utilisation de l’outil Firebug Sébastien PONTAILLIER

L’outil – 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 1.2.1 (compatible Firefox 2 et 3) Gratuit et open source

L’outil – Présentation générale

L’outil - Lancement

L’outil - 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)

L’outil - Fonctionnalités Deux modes Inspecter Affiche le code source (HTML et CSS) correspondant à l’élément de la page survolé par la souris Conserve l’affichage du code source d’un élément lors d’un 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

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

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

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

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

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

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

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

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

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