Sivuston live-muokkaus Firefoxin Web Developer Tool -työkalulla

Näyttäisikö sivustosi paremmalta, jos logo olisi siirretty viisi pikseliä oikealle tai jos siinä olisi sininen tausta? Tekeekö reunuksen tai varjojen lisääminen suosituksissasi oleviin kuviin niitä enemmän? Nykyaikaisissa selaimissa, kuten Firefoxissa, on Web Developer Tools -työkalut, joiden avulla voit tarkastaa sivuston sisäistä toimintaa ja tehdä reaaliaikaisia ​​muokkauksia ja katsella tuloksia reaaliajassa.

Tässä opetusohjelmassa opit käyttämään Firefoxin Web Developer Tools -työkaluja minkä tahansa sivuston reaaliaikaiseen muokkaamiseen.

Huomautus: Tämä opetusohjelma koskee useimpia selaimia, mukaan lukien Chrome, Opera ja Safari.

Tutustu verkkokehittäjätyökaluihin

Firefoxin Web Developer Tools on kattava työkalusarja kaikkien DOM-elementtien näyttämisestä sen nopeuden mittaamiseen. Tätä opetusohjelmaa varten tarvitset vain ”Tarkastaja” ja ”Tyylieditori” -työkalut.

Käynnistä Firefox ja käy missä tahansa/sivustossasi. Valitse Firefoxin hampurilaisvalikosta (oletuksena oikeassa yläkulmassa) ”Web Developer -> Style Editor” tai paina Siirtää + F7 yhdistelmä näppäimistölläsi.

Firefoxin Web Developer -paneeli näkyy sen ikkunan toisella puolella – yleensä alaosassa. Voit muuttaa sen sijaintia napsauttamalla paneelin oikeassa yläkulmassa olevaa kolmen pisteen painiketta ja valitsemalla ”Dock to Right/Left” tai ”Separate Window”.

Huomautus: Tämä opetusohjelma ei osoita HTML:n ja CSS:n koodaamista. Voit oppia perusasiat täältä.

Elementin tarkastus

Jotta voit vaikuttaa siihen, miltä elementti näyttää, sinun on kyettävä tunnistamaan se. Napsauta työkalupalkin ensimmäistä painiketta tai paina Ctrl + Siirtää + C näppäimistöllä ottaaksesi elementinvalitsintilan käyttöön.

Liikuta hiirtä sivustolla nähdäksesi verkkosivun eri elementit korostettuina. Niiden vieressä näet heidän ensisijaisen tunnisteensa leijuvan ponnahdusikkunassa.

Kun napsautat elementtiä, se valitaan Kehittäjätyökalujen Tarkastaja-välilehdeltä.

Kun löydät muokattavan elementin, napsauta hiiren kakkospainikkeella sen merkintää Developer Tools Inspectorissa ja valitse avautuvasta ponnahdusikkunasta ”Kopioi -> CSS-valitsin”.

Aloita Live Edit

Kun elementin CSS-valitsin on kopioitu leikepöydälle, siirry takaisin Tyylieditori-välilehteen Kehittäjän työkalut -ikkunassa. Napsauta vasemmassa yläkulmassa olevaa ”+” -painiketta ”Luo ja liitä asiakirjaan uusi tyylitaulukko”.

Liitä CSS-valitsin uuteen, tyhjään tyylitaulukkoon. Lisää välilyönti ja sen jälkeen joukko avautuvia ja sulkevia kiharoita.

CSS:ssä elementin ulkoasu määritellään ”kohdistamalla se” käyttämällä CSS-valitsimen kaltaista tunnistetta ja lisäämällä sitten joitakin sen ulkonäköön vaikuttavia sääntöjä ryhmiteltynä kiharahakasulkeisiin. Kaikki avautuvien ja sulkevien kiharoiden väliin sijoitettu vaikuttaa ”kohdennettuun elementtiin”.

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

display: none;

Tämä piilottaa näkymästä elementin, jossa sitä käytetään. Se on luultavasti helpoin tapa tietää, että kohdistat sivusi oikeaan elementtiin. Jos se katoaa, se oli todellakin haluamasi, ja voit poistaa tämän säännön kokeillaksesi muita. Jos se ei katoa, on aika palata Tarkastajaan ja valita jotain muuta.

Emme näytä sinulle, kuinka CSS-koodataan täällä, mutta voit leikkiä joillakin suosituilla säännöillä, kuten:

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

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

Lopuksi muista, että mitään ei tallenneta. Jos pidät muokkauksistasi, kopioi koodisi jonnekin – TXT-tiedostoon tai suosikkimuistiinpanosovellukseesi – jotta sinä tai suunnittelija/kehittäjä voitte lisätä sen sivustojesi tyylitaulukkoon tehdäkseen muutoksista pysyviä. Jos haluat oppia CSS:stä, tutustu joihinkin verkkopeleihin, jotka auttavat hallitsemaan taidon.