Amateurgids voor het aanpassen van websiteontwerp met FireBug

Advertentie

Ik heb een enorm probleem met webdesigners: ik ben zelden tevreden met wat mij wordt aangeboden en kan niet in woorden uitdrukken wat ik eigenlijk wil. Als internetmarketeer moet ik vrij vaak nieuwe sites lanceren, dus natuurlijk kom ik het probleem vaak tegen.

Dus wat te doen? Ik kan me geen tijd veroorloven om webdesign te leren en een professionele webontwikkelaar te worden. Bovendien kan ik niet alles alleen doen. Gelukkig ben ik onlangs een coole tool voor webontwikkeling tegengekomen waarmee ik CSS on-the-fly kan aanpassen en de ultieme versie kan bedenken waar ik me prettig bij voel.

De tool is een FireFox-add-on genaamd FireBug en het is zo cool dat veel webontwikkelaars FireFox gebruiken om de enige reden dat het kan worden uitgebreid met FireBug. Het is een ultieme Firefox-add-on voor webontwikkelaars. Dus in dit bericht deel ik de trucs van mijn amateur om een ​​website-ontwerp te maken met FireBug.

Invoering:

Navigeer naar de sitesjabloon die u wilt bewerken en activeer Firebug: gebruik de F12-toets voor snelle toegang.

U zult de tool in de onderste helft van uw browservenster zien openen met 6 tabbladen: "Console", "HTML", "CSS", "Script", "Dom" en "Net". Ik heb het hier over twee tabbladen: 'HTML' en 'CSS'.

CSS-tabblad:

Bewerk attributen en attribuutwaarden

Om een ​​attribuut of de waarde van een attribuut te veranderen, klikt u erop en bewerkt u het in de code. Het effect van de wijziging is direct zichtbaar in het browservenster hierboven.

Bekijk kleuren en afbeeldingen in CSS

Met Firebug kunnen amateurs zoals ik de CSS beter begrijpen door me een voorbeeld van elke visuele eigenschap te laten zien:

Bereken eenvoudig de exacte positionering, opvulling en marges

De tool biedt geweldige ondersteuning bij het veranderen numerieke waarden. Klik eenvoudig op de numerieke waarde die u wilt wijzigen en wijzig deze met de cijfers op uw toetsenbord - zie het effect onmiddellijk op de bovenstaande pagina en wijzig indien nodig de bewerking.

Laat de tool u vragen welke eigenschap kan worden gebruikt

Markeer de eigenschap en gebruik de pijltoetsen omhoog / omlaag op uw toetsenbord om alle toegestane CSS-eigenschappen in alfabetische volgorde weer te geven.

HTML-tabblad:

Leer de eigenschappen van elke box on-the-fly (marge, rand, opvulling en inhoud): open HTML-tabblad + lay-out aan de rechterkant en klik op "Inspecteren" in de bovenste balk van het toolvenster. Nu kunt u door de pagina navigeren en het volgende observeren:

• elk pagina-element in het blauwe frame;
• het overeenkomstige gebied in de broncode blauw gemarkeerd (HTML-tabblad);
• de box-eigenschappen gevisualiseerd (tabblad Layout).

Het tabblad Layout van Firebug geeft u een visuele uitsplitsing van elke doos in het doosmodel en de breedte van elke rand. Bovendien toont het u de breedte en hoogte van het binnenste vak en de x- en y-offset van het element ten opzichte van de ouder.

Bewerk een eigenschap rechts op het lay-outtabblad en bekijk de wijzigingen live op een pagina:

Een paar handige tips:

• Gebruik Control + F12 (of Command + F12 op Mac) om Firebug in een apart venster te openen.
• Behoud zwarte lijsten en witte lijsten: Firebug laat u een lijst bijhouden van websites die wel of niet moeten worden ingeschakeld. U kunt in twee modi bladeren: schakel Firebug in voor alle websites behalve die op de "zwarte lijst" of schakel Firebug uit voor alle websites behalve die op de "witte lijst".
• Krijg wat meer hulp hier: FireFox-zelfstudie in eenvoudige woorden.

Dus zoals je hebt gezien met FireBug Firefox-add-on, kun je website-ontwerpen maken en aanpassen, zelfs als je absoluut niet bekend bent met webdesign zoals ik. Natuurlijk heeft FireBug veel bredere mogelijkheden dan hierboven beschreven, dus ik zou graag willen dat je meer tips en trucs van deze geweldige tool deelt.