Orodje za razvijalce Inspect Element v Firefoxu vam omogoča, da natančno določite kodo HTML za vse, kar vidite na svoji spletni strani. Ko so ta orodja odprta, je HTML in pripadajoča tabela slogi CSS v celoti mogoče urejati. Eksperimentirajte z vsemi spremembami, ki so vam všeč, nato osvežite stran, da se vrnete na predvideni videz spletne strani.
Koraki
1. del od 2: Pregled elementov
Korak 1. Z desno miškino tipko kliknite kateri koli element spletne strani
Z desno miškino tipko kliknite slike, besedilo, ozadje ali kateri koli drug element. Če nimate miške z dvema gumboma, z levim gumbom miške držite tipko Control.
Korak 2. V spustnem meniju kliknite Pregled elementa
Orodna vrstica bi se morala pojaviti na dnu okna. Pod orodno vrstico se prikaže tudi podokno, ki prikazuje kodo HTML strani.
Korak 3. Opredelite orodne vrstice in podokna
Ko kliknete Pregled elementa, se na dnu okna odpre več podoknov. Tu je razčlenitev njihove uporabe in imen:
- Zgornja vrstica je orodna vrstica Toolbox. To ima več orodij za razvijalce, vendar nas na levi strani zanima Inšpektor. Naj bo to izbrano (označeno z modro barvo) za celoten vodnik.
- Pod orodno vrstico je ena vrstica elementov HTML, prikazana celotna pot do izbranega elementa.
- Podokno pod to vrstico prikazuje drevo HTML ali "Pogled označbe" strani. HTML za izbrani element je označen in centriran v tem podoknu.
- Podokno na desni prikazuje tabelo slogi CSS za to stran.
Korak 4. Izberite drug element
Ko je orodna vrstica odprta, je izbira drugega elementa enostavna. Tukaj so trije načini:
- Premaknite miškin kazalec nad vrstico HTML, da označite ustrezen element (zahteva Firefox 34+). Kliknite HTML, da izberete ta element.
- Kliknite orodje Izberi element na skrajni levi strani orodne vrstice: ikona je kazalec nad kvadratom. Premaknite kazalec nad stran, da označite elemente, nato kliknite, da izberete element.
Korak 5. Krmarite po kodi
Kliknite kjer koli v podoknu HTML. Za premikanje po kodi uporabite puščici levo in desno na tipkovnici (zahteva Firefox 39+). To je uporabno za premajhne elemente, da bi jih lahko izbrali ročno.
- Sivi HTML se nanaša na elemente, ki niso prikazani na strani. To vključuje komentarje, nekatera vozlišča, na primer, in elemente, ki so bili skriti z lastnostjo prikaza CSS.
- Kliknite puščico na levi strani vsebnikov, da razširite ali skrijete njeno vsebino. Če želite razširiti vso vsebino, med klikom kliknite alt="Slika" ali možnost.
Korak 6. Poiščite element
Poiščite iskalno vrstico (ikona povečevalnega stekla) na skrajni desni strani vrstice drobtin. Kliknite to, da jo razširite, nato vnesite kodo HTML, ki jo iščete. Med tipkanjem se prikaže pojavno okno z ujemajočimi se elementi. Kliknite enega, da izberete ta element, in se pomaknite do podokna HTML do njegove kode.
2. del od 2: Urejanje HTML -ja
Korak 1. Osvežite stran, če želite kadar koli začeti znova
Če ste nova orodja za spletne razvijalce, se zavedajte, da ne spreminjajo trajno. Vaše spremembe bodo vidne samo na vašem zaslonu in le, dokler ne zaprete strani ali je osvežite. Ne oklevajte z eksperimentiranjem, tudi če niste prepričani, kaj se bo zgodilo.
Korak 2. Dvokliknite HTML, da uredite besedilo
Dvokliknite vrstico HTML. Vnesite novo besedilo in pritisnite Enter, da shranite spremembe.
Korak 3. Kliknite in držite drobtinico za več možnosti
Ne pozabite, da je orodna vrstica Breadcrumb stisnjena med celotno drevo HTML in zgornjo orodno vrstico. Kliknite in držite kateri koli element v tej vrstici, da odprete obsežen meni. Tu je nepopoln vodnik po teh možnostih:
- »Uredi kot HTML« omogoča, da vozlišče in vso njegovo vsebino urejate v drevesu HTML, namesto da bi morali urejati vsako vrstico posebej.
- "Kopiraj notranji HTML" kopira vso vsebino vozlišča, medtem ko "Kopiraj zunanji HTML" kopira tudi vozlišče (na primer oz.
- "Prilepi →" vodi do več možnosti, kam prilepite, na primer pred tem vozliščem ali po prvem podrejenem vozlišču.
- : hover,: active in: focus spremeni videz elementa, ko uporabnik z njim komunicira. Natančen učinek je določen s slogovno listo CSS (urejeno v desnem podoknu).
Korak 4. Povlecite in spustite
Če želite preurediti elemente v kodi, kliknite in držite HTML, dokler se ne prikaže črtkana črta. Premaknite ga navzgor ali navzdol po drevesu in ga spustite, ko je črtkana črta na želenem mestu.
To zahteva Firefox 39 ali novejši
Korak 5. Zaprite orodno vrstico razvijalca
Če želite zapreti vsa ta elegantna okna, pritisnite X v skrajnem desnem kotu orodne vrstice nad podoknom CSS.
Nasveti
- Orodno vrstico lahko odprete tudi s temi možnostmi v zgornjem meniju:
- Windows: Firefox → Spletni razvijalec → Preklopi orodja
- Mac ali Linux: Orodja → Spletni razvijalec → Preklopi orodja
- Firefox 40 je uvedel možnost, da skrije podokno CSS, da boste imeli več prostora med urejanjem HTML -ja. Poiščite ikono puščice na skrajni desni strani vrstice drobtin, desno od iskalne vrstice. Kliknite to ikono, če želite skriti podokno CSS, in jo znova kliknite, da jo znova razširite.
- Podokno CSS je prav tako mogoče urejati, vendar to presega obseg tega priročnika. Ta članek uči osnove CSS.
