Slik oppretter du falske nettstedskjermbilder med firebug

Når du tenker på faked eller redigert skjermbilder, vil programmer som Photoshop sikkert stikke inn i tankene dine. Jeg har aldri vært veldig kreativ når det gjelder design og grafisk arbeid, så det er nesten ute av spørsmålet for meg. Hvis du prøver å bytte ansikter i et bilde, må du lære hvordan du bruker programmer som det. Hvis du prøver å gjøre noe som endrer teksten i en Facebook-samtale, er det ikke nødvendig. Alt du trenger er Firebug og en PrtScrn-nøkkel.

Firebug er tilgjengelig for alle større nettlesere. Slik installerer du Firebug på IE, Safari, Chrome og Opera. Slik installerer du Firebug på IE, Safari, Chrome og Opera. Les mer: IE6 +, Firefox, Opera, Safari og Chrome. I dette eksemplet kjører jeg deg gjennom en veiledning om hvordan du bruker den til sin egen nettleser, Firefox. Hva er Firebug skjønt? Firebug er en nettleser add-on som lar deg redigere, feilsøke og overvåke CSS De neste trinnene på vei til å bli en CSS Jedi Master De neste trinnene på vei til å bli en CSS Jedi Master CSS er absolutt en av de viktigste teknologier rundt på Internett i dag, og mens de fleste innrømmer å kjenne litt HTML, er vi generelt ikke klare på CSS. Siste gang jeg introduserte deg ... Les mer, HTML og JavaScript. For å manipulere nettsider som jeg skal vise deg i dag, trenger du ikke å vite noe av disse språkene.

Installere Firebug

Installasjon er utrolig enkelt. Gå videre til den offisielle nettsiden for å laste ned tillegget [Ikke lenger tilgjengelig]. Derfra velger du nettleseren din (Firefox foretrukket, slik at det er enklere å følge med). Installer tillegget og start nettleseren om nødvendig.

Bruke Firebug

Når du installerer Firebug, skal ikonet som standard vises i tilleggsmenyen, Verktøy-menyen, og muligens kontekstmenyen. Klikk på ikonet i tilleggslinjen, og du får se en ny fanebrett oppe nederst på skjermen.

Det du ser her er en HTML-visning av elementene på nettsiden du er på. I dette eksemplet er det Firebug-nedlastingssiden på Firefox-tillegg. Hvis du er interessert i å bruke Firebug for de mer vanlige formål, kan du kaste deg rundt på fanene og få en følelse av funksjonene.

Knappen som jeg har markert i det skjermbildet, er inspeksjonsverktøyet. Dette er verktøyet vi skal bruke. Klikk på den knappen og så vil du legge merke til at hvert område med tekst som du holder markøren over, vil bli uthevet i websiden, og deretter markert ned i Firebug HTML-visning.

Endre tekst

Klikk på tekstblokken du vil manipulere. Du ser at teksten er valgt i Firebug HTML-visning. Derfra, dobbeltklikk på linjen HTML som inneholder teksten du vil endre. Du kan begynne å skrive inn hva du vil.

Når du skriver, ser du at forhåndsvisningsoppdateringene lever på nettsiden.

Cool, ikke sant? Det er spesielt enkelt på grunn av måten Firebug gjør at du kan isolere rå tekst fra innpakket HTML. På den måten blir alle HTML-elementer, CSS-stiler og andre viktige visuelle bevaret slik at det ser ut som den ekte kopien.

Når du blir mer komfortabel med Firebug, eller hvis du allerede kjenner HTML, finner du det like lett å endre andre elementer på siden, som bilder. Mulighetene er ganske uendelige, og jeg er sikker på at du allerede kommer opp med måter du kan bruke og misbruke dette lille trikset på.

Gi meg beskjed om hva du synes om dette lille tipset, og del dine kreative måter å sette den i bruk i kommentarene!

Utforsk mer om: HTML, Mozilla Firefox, Screen Capture, WYSIWYG Editors.