web-garden

Een Nederlandse handleiding voor Firebug

Posted on 17. Mar, 2009 by admin in Diverse, HTML, Tutorials HTML en CSS

Er zijn zo van die tools die niet weg te denken zijn uit de dagelijkse instrumenten van een webdesigner.
Firebug is er zo eentje. Firebug laat je toe om van iedere publieke webpagina inhoud te selecteren en daarvan de HTML, CSS en Javascript code on line weer te geven.
Beelden zeggen meer dan woorden. Voor een voorbeeld, klik hier.
Echter, tot onze  verrassing blijkt er relatief weinig Nederlandse uitleg bij deze tool te vinden. Web-garden probeert hier iets aan te doen.

We hebben niet de ambitie om hier een gedetailleerde uitleg over te geven. We behandelen even de basis. Voldoende voor de beginnende webdesigner om er snel wat resultaat mee te boeken.

Firebug werkt alleen met de gratis browser Firefox. Als je nog geen Firefox op je PC hebt, dan kun je deze hier installeren. Voor diegene die wel Firefox gebruiken, gelieve er voor te zorgen dat je beschikt over versie 3.0.
De Add-on “Firebug” kun je hier downloaden en installeren.
Controleer even of je add-on succesvol is geinstalleerd.
Klik op tools>Add-ons

Vervolgens krijg je onderstaande pop up te zien.

Open nu in Firefox een willekeurige website (waarom niet www.Web-garden.nl :)).
Selecteer een stukje tekst ergens willekeurig op de home-pagina. Met de geselcteerde tekst voer je een rechter muis klik uit. Selecteer daar “inspect element”.
Zo hebben we de afbeelding, die we initieel hebben getoond, gereproduceerd.

In de rechter boven hoek van het nieuwe horizontale vak onderaan je scherm, vind je de mogelijkheid om Firebug te openen in een nieuw scherm

Aan de bovenzijde van Firebug zie je een balk die de HTML opbouw van de pagina mooi weergeeft. Als je met je muis over de verschillende elementen geen beweegt, dan zie je op de webpagina in het lichtblauw de bijhorende inhoud.

In het linkervak zie je dus de HTML code.
Klik in dit vak nu eens op de tekst.

Je ziet dat de tekst geactiveerd is. Wijzig even de tekst. Terzelfdertijd wijzigt de tekst op de webpagina. Je kunt dus online de HTML inhoud en code aanpassen, en direct het effect zienin je webpagina. De wijzigingen kun je niet opslaan.

Het zelfde kunnen we nu doen met de bijhorende CSS code in de linkerhelft.

In ons voorbeeld klikken we even op de “100%”.

We kunnen nu de 100% vervangen door 150%. Bekijk het effect maar even op je webpagina
We willen hierbij een aantal bijkomende zaken meegeven betreffende het CSS gedeelte.
In bovenstaande afbeelding zie je CSS code die is doorstreept. Dit betekent dat deze CSS code niet toepasbaar is, om dat ze “overschreven” is in een onderliggend element.
Beweeg even met je muis voor een stukje CSS code. Dan zie je een grijs verbodsteken verschijnen.

Klik nu even op dit grijze teken. Het teken zelf wordt rood. En de bijhorende CSS code wordt licht grijs.

Je schakelt alles terug, door nogmaals op het rode teken te klikken.

Tenslotte wiilen we bij de CSS code nog even wijzen op de handige weergave van de geërfde eigenschappen.

Als je meer wil weten over CSS, verwijzen we graag naar de cursus HTML/CSS op deze site.

Tags: Firebug