Alat za razvoj Inspect Element u Firefoxu omogućuje vam da odredite HTML kôd za sve što vidite na svojoj web stranici. HTML i prateći CSS stilovi mogu se potpuno uređivati kada se otvore ovi alati. Eksperimentirajte sa svim promjenama koje volite, a zatim osvježite stranicu da biste se vratili na predviđeni izgled web stranice.
Koraci
1. dio 2: Pregled elemenata
Korak 1. Desnom tipkom miša kliknite bilo koji element web stranice
Možete desnom tipkom miša kliknuti slike, tekst, pozadinu ili bilo koji drugi element. Ako nemate miš s dva gumba, pritisnite lijevu tipku miša dok držite tipku Control.
Korak 2. Kliknite Inspect Element iz padajućeg menija
Traka s alatima trebala bi se pojaviti pri dnu prozora. Ispod trake s alatima pojavit će se okno koje prikazuje HTML kôd stranice.
Korak 3. Identificirajte alatne trake i okna
Kada pritisnete Inspect Element, nekoliko okna će se otvoriti pri dnu prozora. Evo podjele njihove upotrebe i naziva:
- Gornji red je Toolbox Toolbar. Ovo ima nekoliko razvojnih alata, ali nas zanima Inspector s lijeve strane. Neka ovo bude odabrano (označeno plavom bojom) za cijeli vodič.
- Ispod trake s alatima nalazi se jedan niz HTML elemenata u obliku krušnih mrvica koji prikazuje punu putanju koja se odnosi na odabrani element.
- Okno ispod ovog retka prikazuje HTML stablo ili "Prikaz oznaka" stranice. HTML za element koji ste odabrali je istaknut i centriran u ovom oknu.
- Okno s desne strane prikazuje CSS stilsku tablicu za ovu stranicu.
Korak 4. Odaberite drugi element
Kada se alatna traka otvori, odabir drugog elementa je lak. Evo tri načina da to učinite:
- Zadržite pokazivač miša iznad linije HTML -a kako biste označili odgovarajući element (potreban je Firefox 34+). Pritisnite HTML da biste odabrali taj element.
- Kliknite na alatku Select Element na krajnjem lijevom dijelu trake s alatkama: ikona je kursor iznad kvadrata. Pomaknite pokazivač miša preko stranice kako biste označili elemente, a zatim kliknite za odabir elementa.
Korak 5. Krećite se kroz kôd
Kliknite bilo gdje u HTML oknu. Za kretanje kroz kôd koristite strelice lijevo i desno na tastaturi (potreban je Firefox 39+). Ovo je korisno za premale elemente za ručno biranje.
- Sivi HTML odnosi se na elemente koji nisu prikazani na stranici. To uključuje komentare, određene čvorove poput, i elemente koji su skriveni sa svojstvom prikaza CSS -a.
- Kliknite strelicu lijevo od spremnika da biste proširili ili sakrili njegov sadržaj. Da biste proširili sav sadržaj, držite alt="Slika" ili opciju dok kliknete.
Korak 6. Potražite element
Potražite traku za pretraživanje (ikona povećala) krajnje desno u redu Krušne mrvice. Kliknite ovo za proširenje, a zatim upišite HTML kôd koji tražite. Dok kucate, pojavit će se skočni prozor s popisom odgovarajućih elemenata. Kliknite na jedan da biste odabrali taj element i pomaknite HTML okno do njegovog koda.
2. dio 2: Uređivanje HTML -a
Korak 1. Osvježite stranicu da započnete u bilo kojem trenutku
Ako ste tek počeli s alatima za web programere, shvatite da oni ne unose nikakve trajne promjene. Vaše izmjene bit će vidljive samo na vašem ekranu i samo dok ne zatvorite stranicu ili je osvježite. Ne ustručavajte se eksperimentirati čak i ako niste sigurni što će se dogoditi.
Korak 2. Dvaput kliknite na HTML da biste uredili tekst
Dvaput kliknite na liniju HTML -a. Upišite novi tekst i pritisnite enter za spremanje promjena.
Korak 3. Kliknite i držite mrvicu za više opcija
Upamtite, alatna traka Breadcrumb nalazi se između cijelog HTML stabla i gornje trake s alatima. Pritisnite i držite bilo koji element u ovom retku da biste otvorili opsežan izbornik. Evo nepotpunog vodiča za ove opcije:
- "Uredi kao HTML" čini čvor i sav njegov sadržaj uredivim u HTML stablu, umjesto da svaki redak treba uređivati zasebno.
- "Kopiraj unutrašnji HTML" kopira sav sadržaj čvora, dok "Kopiraj vanjski HTML" kopira i čvor (poput ili
- "Zalijepi →" vodi do nekoliko opcija za mjesto lijepljenja, na primjer prije ovog čvora ili nakon prvog djeteta čvora.
- : hover,: active i: focus menjaju izgled elementa kada korisnik stupi u interakciju sa njim. Tačan učinak određen je CSS stilskom tablicom (može se uređivati s desnog okna).
Korak 4. Povucite i ispustite
Da biste preuredili elemente u kodu, kliknite i držite HTML dok se ne pojavi isprekidana linija. Pomaknite ga gore ili dolje po drvetu i pustite ga kad je isprekidana linija na željenom mjestu.
Za to je potreban Firefox 39 ili noviji
Korak 5. Zatvorite traku s alatima za programere
Da biste zatvorili sve ove prozore, samo pritisnite X u krajnjem desnom uglu trake sa alatkama, iznad CSS okna.
Savjeti
- Alatnu traku možete otvoriti i sa ovim glavnim opcijama menija:
- Windows: Firefox → Web programer → Alati za uključivanje / isključivanje
- Mac ili Linux: Alati → Web programer → Alati za uključivanje / isključivanje
- Firefox 40 je predstavio opciju skrivanja CSS okna kako bi vam dao više prostora za uređivanje HTML -a. Potražite ikonu strelice krajnje desno u redu Krušne mrvice, desno od trake za pretraživanje. Pritisnite ovu ikonu da biste sakrili CSS okno, a zatim je ponovo kliknite da biste je ponovo proširili.
- CSS okno se takođe može uređivati, ali to izlazi iz okvira ovog vodiča. Ovaj članak uči osnove CSS -a.
