Amatörens guide för att anpassa webbplatsdesign med FireBug

Annons

Jag har ett enormt problem med webbdesigners: Jag är sällan nöjd med vad jag erbjuds och kan inte uttrycka i ord vad jag faktiskt vill ha. Som internetmarknadsförare måste jag lansera nya webbplatser ganska ofta, så naturligtvis stöter jag ofta på problemet.

Så vad ska man göra? Jag har inte tid att lära mig webbdesign och förvandlas till en professionell webbutvecklare. Dessutom kan jag inte göra allt själv. Lyckligtvis har jag nyligen stött på ett coolt webbutvecklingsverktyg som gör att jag kan finjustera CSS on-the-fly och komma med den ultimata versionen jag känner mig bekväm med.

Verktyget är ett FireFox-tillägg som heter Pyroman och det är så coolt att många webbutvecklare använder FireFox av det enda skälet att det kan utökas med FireBug. Det är ett ultimat Firefox-tillägg för webbutvecklare. Så i det här inlägget delar jag min amatörs knep för att skapa en webbplatsdesign med FireBug.

Introduktion:

Navigera till webbplatsmallen du vill redigera och aktivera Firebug: använd F12-tangenten för snabb åtkomst.

Du ser verktyget öppet i den nedre halvan av webbläsarfönstret med 6 flikar: "Konsol", "HTML", "CSS", "Script", "Dom" och "Net". Jag kommer att prata om två flikar här: "HTML" och "CSS".

CSS-flik:

Redigera attribut och attributvärden

Om du vill ändra ett attribut eller värdet på ett attribut klickar du bara på det och redigerar det rätt i koden. Effekten av förändringen kommer att visas omedelbart i webbläsarfönstret ovan.

Förhandsgranska färger och bilder i CSS

Firebug tillåter amatörer som jag att bättre förstå CSS genom att visa mig förhandsgranskningen av varje visuell egenskap:

Lätt enkelt ta reda på exakt positionering, stoppning och marginaler

Verktyget ger underbart stöd för att ändra numeriska värden. Klicka bara på det numeriska värdet du vill ändra och ändra det med siffrorna på tangentbordet - se effekten omedelbart på sidan ovan och ändra redigeringen vid behov.

Låt verktyget fråga dig vilken egenskap som kan användas

Markera egenskapen och använd piltangenterna upp / ned på tangentbordet för att lista alla tillåtna CSS-egenskaper i alfabetisk ordning.

HTML-flik:

Lär dig varje rutaegenskaper on-the-fly (marginal, kant, utfyllnad och innehåll): öppna HTML-fliken + Layout till höger och klicka på "Inspektera" i verktygsfönstrets övre fält. Nu kan du navigera genom hela sidan och observera följande:

• varje sidelement i den blå ramen;
• motsvarande område i källkoden markerad med blått (HTML-fliken);
• boxens egenskaper visualiseras (fliken Layout).

Firebug's Layout-flik ger dig en visuell uppdelning av varje ruta i rutmodellen och bredden på varje kant. Dessutom visar det bredden och höjden på den innersta rutan och förskjutningen x och y för elementet i förhållande till dess överordnade.

Redigera valfri egendom höger i layoutfliken och se ändringarna live på en sida:

Några användbara tips:

• Använd Control + F12 (eller Command + F12 på Mac) för att öppna Firebug i ett separat fönster.
• Underhålla svartlistor och vitlistor: Firebug låter dig hålla en lista över webbplatser som den ska eller inte bör aktiveras för. Du kan bläddra i två lägen - antingen aktivera Firebug för alla webbplatser utom de på "svartlistan", eller inaktivera Firebug för alla webbplatser utom de på "vitlistan".
• Få lite mer hjälp här: FireFox handledning i enkla ord.

Så som du har sett med FireBug Firefox addon kan du skapa och anpassa webbdesign även om du är helt okunnig i webbdesign som jag själv. Naturligtvis har FireBug mycket bredare möjligheter än beskrivet ovan, så jag skulle älska dig att dela fler tips och tricks av det här fantastiska verktyget.