Firefoxin Inspect Element -kehitystyökalun avulla voit määrittää HTML -koodin kaikelle, mitä näet verkkosivullasi. HTML ja siihen liittyvä CSS -tyylitaulukko ovat täysin muokattavissa, kun nämä työkalut ovat auki. Kokeile haluamiasi muutoksia ja päivitä sivu palataksesi haluamallesi verkkosivun ulkoasulle.
Askeleet
Osa 1/2: Elementtien tarkastus
Vaihe 1. Napsauta hiiren kakkospainikkeella mitä tahansa verkkosivun elementtiä
Voit napsauttaa hiiren kakkospainikkeella kuvia, tekstiä, taustoja tai mitä tahansa muuta elementtiä. Jos sinulla ei ole kahden painikkeen hiirtä, napsauta hiiren kakkospainikkeella pitämällä Control-näppäintä painettuna.
Vaihe 2. Valitse avattavasta valikosta Tarkasta elementti
Työkalurivin pitäisi näkyä ikkunan alareunassa. Työkalurivin alle ilmestyy myös ruutu, joka näyttää sivun HTML -koodin.
Vaihe 3. Tunnista työkalurivit ja ruudut
Kun valitset Tarkasta elementti, ikkunan alareunaan avautuu useita ruutuja. Tässä on erittely niiden käytöstä ja nimistä:
- Ylärivi on Toolbox -työkalupalkki. Tässä on useita kehittäjätyökaluja, mutta meitä kiinnostaa vasemmalla oleva tarkastaja. Pidä tämä valittuna (korostettuna sinisellä) koko oppaan osalta.
- Työkalupalkin alla on yksi HTML -elementtien rivi, joka näyttää valitun elementin koko polun.
- Tämän rivin alapuolella oleva ruutu näyttää sivun HTML -puun tai merkintänäkymän. Valitsemasi elementin HTML -koodi on korostettu ja keskitetty tässä ruudussa.
- Oikealla oleva ruutu näyttää tämän sivun CSS -tyylitaulukon.
Vaihe 4. Valitse toinen elementti
Kun työkalurivi on auki, toisen elementin valitseminen on helppoa. Tässä on kolme tapaa tehdä se:
- Vie hiiri HTML -rivin päälle korostaaksesi vastaavan elementin (vaatii Firefox 34+). Valitse kyseinen elementti napsauttamalla HTML -koodia.
- Napsauta työkalurivin vasemmassa reunassa olevaa Valitse elementti -työkalua: kuvake on kohdistin neliön päällä. Siirrä kohdistin sivun päälle korostaaksesi elementtejä ja valitse sitten elementti napsauttamalla.
Vaihe 5. Selaa koodia
Napsauta mitä tahansa HTML -ruudun kohtaa. Käytä näppäimistön vasenta ja oikeaa nuolta selataksesi koodia (vaatii Firefox 39+). Tästä on hyötyä elementteille, jotka ovat liian pieniä käsin valittaviksi.
- Harmaa HTML liittyy elementteihin, joita ei näytetä sivulla. Tämä sisältää kommentit, tietyt solmut, kuten ja elementit, jotka on piilotettu CSS -näyttöominaisuuden kanssa.
- Laajenna tai piilota sisältö napsauttamalla säilöjen vasemmalla puolella olevaa nuolta. Jos haluat laajentaa kaiken sisällön, pidä alt="Kuva" tai vaihtoehto painettuna samalla, kun napsautat.
Vaihe 6. Etsi elementti
Etsi hakupalkki (suurennuslasikuvake) Breadcrumbs -rivin oikeasta reunasta. Laajenna se napsauttamalla tätä ja kirjoita sitten etsimäsi HTML -koodi. Kun kirjoitat, näkyviin tulee ponnahdusikkuna, jossa luetellaan vastaavat elementit. Napsauta yhtä valitaksesi elementin ja vieritä HTML -ruutu sen koodiin.
Osa 2/2: HTML -muokkaaminen
Vaihe 1. Päivitä sivu aloittaaksesi alusta milloin tahansa
Jos olet uusi verkkokehitystyökalujen käyttäjä, ymmärrä, että ne eivät tee pysyviä muutoksia. Muokkauksesi näkyvät vain näytölläsi ja vain kunnes suljet sivun tai päivität sen. Älä epäröi kokeilla, vaikka et olisikaan varma mitä tapahtuu.
Vaihe 2. Muokkaa tekstiä kaksoisnapsauttamalla HTML -koodia
Kaksoisnapsauta HTML -riviä. Kirjoita uusi teksti ja tallenna muutokset painamalla Enter.
Vaihe 3. Saat lisää vaihtoehtoja napsauttamalla ja pitämällä korppileipä painettuna
Muista, että Breadcrumb -työkalupalkki on sijoitettu koko HTML -puun ja ylemmän työkalurivin väliin. Avaa laaja valikko napsauttamalla mitä tahansa tämän rivin elementtejä. Tässä on epätäydellinen opas näihin vaihtoehtoihin:
- "Muokkaa HTML -muodossa" tekee solmusta ja sen sisällöstä muokattavissa HTML -puussa sen sijaan, että joutuisit muokkaamaan jokaista riviä erikseen.
- "Kopioi sisäinen HTML" kopioi solmun kaiken sisällön, kun taas "Kopioi ulompi HTML" kopioi myös solmun (kuten tai
- "Liitä →" johtaa useisiin liitäntävaihtoehtoihin, kuten ennen tätä solmua tai solmun ensimmäisen alatason jälkeen.
- : hover,: active ja: focus muuttaa elementin ulkoasua, kun käyttäjä on vuorovaikutuksessa sen kanssa. Tarkan vaikutuksen määrittää CSS-tyylitaulukko (muokattavissa oikeanpuoleisesta ruudusta).
Vaihe 4. Vedä ja pudota
Jos haluat järjestää koodin elementtejä uudelleen, napsauta HTML -painiketta ja pidä sitä painettuna, kunnes katkoviiva tulee näkyviin. Siirrä puuta ylös tai alas ja päästä irti, kun katkoviiva on halutussa paikassa.
Tämä vaatii Firefox 39: n tai uudemman
Vaihe 5. Sulje kehittäjän työkalurivi
Voit sulkea kaikki nämä hienot ikkunat painamalla X -painiketta työkalurivin oikeassa alakulmassa CSS -ruudun yläpuolella.
Vinkkejä
- Voit myös avata työkalurivin seuraavilla valikkovaihtoehdoilla:
- Windows: Firefox → Web -kehittäjä → Vaihda työkalut
- Mac tai Linux: Työkalut → Web -kehittäjä → Vaihda työkalut
- Firefox 40 esitteli mahdollisuuden piilottaa CSS -ruudun, jotta saat enemmän tilaa HTML -muokkauksen aikana. Etsi nuolikuvake Breadcrumbs -rivin oikeasta reunasta hakupalkin oikealta puolelta. Piilota CSS -ruutu napsauttamalla tätä kuvaketta ja laajenna se uudelleen napsauttamalla sitä uudelleen.
- Myös CSS -ruutua voidaan muokata, mutta tämä ei kuulu tämän oppaan soveltamisalaan. Tämä artikkeli opettaa CSS: n perusteet.
