Obično pri uređivanju web stranice koristimo određeni alat za uređivanje, kao što su Adobe Dreamweaver, CoffeeCup, Bluefish ili jedan od drugih razvojnih alata. Ali što je s tim da samo razmišljamo ili želimo isprobati nešto na stranici uživo? Mogli bismo napraviti kopiju stranice u našem alatu po izboru i igrati se s tim. Ili bismo to mogli učiniti u našem web pregledniku. Ovaj će vam vodič pokazati kako urediti web stranicu u pregledniku.
Nazvani kao Alati za razvojne programere, Firefox naziva značajku Inspect Element, dok je Chrome naziva Inspect. Bilo kako bilo, to je način da preglednik zaviri iza sjaja vašeg dizajna i pogleda kôd koji ga pokreće. Ova je značajka prilično poznata i puno se koristi. Ono što nije baš tako dobro poznato je mogućnost da se taj kôd promijeni u pokretu.
Svaka promjena koju učinite neće biti spremljena i neće utjecati na "live". Ako ne želite učitati stranicu u alat za razvojne programere, ovo je uredan način eksperimentiranja.
Uredite bilo koju web stranicu u svom pregledniku
Dreamweaver i slični alati imaju ugrađeni emulator preglednika koji simulira izgled dizajna u različitim preglednicima. Koliko god bili dobri, nisu uvijek precizni i često prilikom pokretanja web stranice često otkrijete da ono što je izgledalo fantastično u vašem alatu za razvojne programere izgleda samostalno u samostalnom pregledniku.
Obično biste web stranicu pokrenuli na internom web poslužitelju i testirali u pregledniku prije pokretanja uživo iz samo ovog razloga. Ako je stranica već aktivna ili želite pokušati nešto, nema potrebe kopirati je i učitati u svoj alat za razvoj, jednostavno možete upotrijebiti Alat za razvojne programere preglednika.
Koristim Firefox pa ću vam pokazati kako to koristiti. Chrome je ipak potpuno isti.
- Otvorite web stranicu s kojom želite eksperimentirati u svom pregledniku.
- Desnom tipkom miša kliknite bilo gdje na stranici i odaberite Uvidi.
Trebali biste vidjeti svoju stranicu podijeljenu na dva dijela, a na dnu će se pojaviti novo okno s nekim kodom. Ovaj je kôd pokretačka snaga stranice koju ste odabrali. Različiti elementi stranice dostupni su s kartica na vrhu donje kartice. Na primjer, u Firefoxu vidimo Inspektora, Konzole, Debugera, Uređivača stilova i tako dalje.
Ako pokažete pokazivač iznad redaka u donjem oknu, vidjet ćete različite dijelove isticanja web stranica. Linija koda na kojoj se nalazite tijekom označavanja je kôd koji utječe na taj dio stranice.
- Ako se želite poigrati s izgledom stranice, pokušajte sa uređivač stilova.
- Ako se želite poigrati s načinom rada stranice, isprobajte Konzola ili Pristupačnost.
- Ako želite isprazniti bugove ili riješiti problem, koristite Console ili Debugger
Učinak je koristan za SEO na terenu, ali memorija, mreža i pohrana ne koriste se toliko.
Upamtite da se unutar Alata za razvojne programere možete brkati koliko želite i to neće utjecati na web mjesto. Svaka promjena vrši se samo na način na koji se stranica prikazuje u vašem pojedinačnom pregledniku, ne utječete na samu web stranicu. Jednom kada zatvorite alat, sve promjene se gube.
Unošenje promjena na stranici
Sada znate da možete promijeniti sve što želite bez utjecaja na stvarnu web stranicu, hajde da se malo zabavimo. Na stranici pronađite element koji želite urediti. Možete promijeniti font, boju fonta, pozadinsku sliku ili što god želite. Za ovaj primjer, promijenit ću boju fonta naslova.
- Desnom tipkom miša kliknite točan element koji želite promijeniti i odaberite Inspect.
- Označite liniju bilo s "naslov" ili s "H1" tako da je tekst označen u gornjem oknu.
- Pomaknite se do dva lijeva okna i pronađite boju fonta.
- Promijenite vrijednost u nešto drugo ili odaberite točku boje da biste koristili selektor.
Promjena će se pojaviti dinamično dok završite. Možete promijeniti boju, veličinu, font, pozadinu i sve o fontu. Ne možete spremiti djelo, ali izmjene će ostati za tu sesiju.
Možete promijeniti sve o stranici što je idealno ako imate ideju i želite je brzo provjeriti prije pokretanja svih razvojnih aplikacija. Sve što trebate učiniti je zapamtiti koje ste promjene napravili i gdje ih ne možete ovdje spremiti. Morat ćete napraviti snimku zaslona ili snimiti promjene i kopirati ih unutar alata za razvojne programere kako biste ih zalijepili.
Uređivanje web stranice u pregledniku uredan je način eksperimentiranja ili igranja sa stranicama. To je također dobar način da naučite malo o web razvoju bez potrebe da kupujete u skupe razvojne alate. Sad znate kako, pođite i igrajte se!
