Sivun muokkaaminen Firefox Web Developer Tool -työkalun avulla

Näyttääkö sivustoltasi paremmalta, jos logoa siirretään viisi pikseliä oikealle tai jos sillä on sininen tausta? Aikooko reunusten tai varjojen lisääminen esiteltyjen viestien valokuviin lisää niitä? Nykyaikaiset selaimet, kuten Firefox, on varustettu Web-kehittäjätyökaluilla, joiden avulla voit tarkistaa sivuston sisäisen toiminnan ja tehdä muutoksia reaaliajassa tarkkailemalla tuloksia.

Tässä opetusohjelmassa opit käyttämään Firefoxin verkkosivun luontityökaluja minkä tahansa sivuston muokkaamiseen live-tilassa.

Note: Tämä opas koskee useinta selainta, mukaan lukien Chrome, Opera ja Safari.

Tutustu verkkokehittäjän työkaluihin

Firefoxin verkkovastaavan työkalut ovat kattava työkalusarja kaikkien DOM-elementtien näyttämisestä sen nopeuden mittaamiseen. Tarvitset vain tämän opetusohjelman Inspector- ja Style Editor -työkalut.

Käynnistä Firefox ja käy millä tahansa sivustolla. Valitse Firefox-hampurilavalikosta (oletusarvoisesti oikeassa yläkulmassa) "Web Developer -> Style Editor" tai paina näppäimistön Shift + F7.

Sivusto reaaliaikaiseen muokkaukseen Firefox Launch Style Editorilla

Firefox-kehittäjäpaneeli tulee ikkunan toiselle puolelle, yleensä alaosaan. Voit muuttaa sen sijaintia napsauttamalla paneelin oikeassa yläkulmassa olevaa kolme pistepainiketta ja valitsemalla "Telakointi oikealle / vasemmalle" tai "Erillinen ikkuna".

Live-editointisivusto erillisessä Firefox-ikkunassa

Note: Tämä opetusohjelma ei osoita sinulle, kuinka HTML ja CSS koodataan. Täältä voit oppia perusteet.

Tarkastetaan esine

Sinun on kyettävä tunnistamaan se vaikuttamaan esineen ulkonäköön. Napsauta työkalurivin ensimmäistä painiketta tai paina näppäimistön Ctrl + Shift + C salliaksesi kohteen valintatilan.

Live-editointisivusto Firefox-näytteenottimella

Siirrä hiirtä sivuston ympäri korostaaksesi verkkosivuston eri osia. Heidän vieressä näet heidän pää-tunnuksensa ponnahdusikkunassa.

Live-editointisivusto Firefoxissa Valitse logo

Kun napsautat kohdetta, se valitaan Kehittäjän työkalujen Tarkastaja-välilehdessä.

Live-editointisivusto Firefox Inspectorin kanssa

Kun löydät parannettavan kohteen, napsauta hiiren kakkospainikkeella sen merkintää Kehitystyökalujen tarkastajassa ja valitse ponnahdusikkunasta "Kopioi -> CSS-valitsin".

Live-editointisivusto Firefox-kopiointivalitsimella

Aloita editointi

Kun olet kopioinut CSS-elementin valitsimen leikepöydälle, palaa Tyylieditori-välilehdelle Kehittäjän työkalut -ikkunassa. Napsauta vasemmassa yläkulmassa olevaa "+" -painiketta "Luo ja liitä uusi tyylisivu asiakirjaan".

Live-editointisivu uudella Firefox-tyylisivulla

Liitä CSS-valitsin uuteen tyhjään tyylitaulukkoon. Lisää välilyönti, sitten sarja avautuvat ja sulkevat ahdin.

Live-editointisivusto Firefox-liitäntävalitsimella

CSS: ssä elementin ulkonäkö määritetään "osoittamalla se" tunnisteella, kuten CSS-valitsimella, ja lisäämällä sitten muutama säännöt, jotka vaikuttavat sen ulkonäköön ja jotka on ryhmitelty aaltosulkeisiin. Kaikki aukkojen ja sulkemiskiinnikkeiden väliin sijoitettu vaikuttaa "kohteeseen".

Jos esimerkiksi lisäät säännön alla:

Tämä piilottaa kohteen, jossa sitä käytetään. Tämä on luultavasti helpoin tapa saada selville, että kohdistat oikealle elementille sivustossasi. Jos se katoaa, se todella oli haluamasi, ja voit poistaa tämän säännön kokeillaksesi muita. Jos sitä ei ole poissa, on aika palata tarkastajalle ja valita jotain muuta.

Live-editointisivusto Firefoxissa Vaihda taustaväri

Emme näytä sinulle miten CSS koodataan täällä, mutta voit pelata joidenkin suosittujen sääntöjen, kuten:

border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;

Huomaat, että sivuelementti muuttuu, kun lisäät sääntöjä CSS-tyylitaulukkoon.

Lopuksi muista, että mitään ei tallenneta. Jos pidät korjaustiedostojen ulkoasusta, kopioi koodi jonnekin TXT-tiedostoon tai suosikki muistiinpanosi sovellukseen, jotta sinä tai suunnittelija / ohjelmoija voi lisätä sen sivustosi tyylitaulukkoon tehdäksesi muutoksia pysyvästi. Jos haluat oppia CSS: stä, tutustu joihinkin online-peleihin, jotka auttavat sinua hallitsemaan tätä taitoa.

Lue lisää:

Onko artikkeli hyödyllinen?