Pri úprave webovej stránky sa zvyčajne používa špecifický nástroj na úpravu, ako napríklad Adobe Dreamweaver, CoffeeCup, Bluefish alebo jeden z ďalších vývojových nástrojov. Ale čo keby sme len brainstorming alebo chceli niečo vyskúšať na živej stránke? Mohli by sme si vytvoriť kópiu stránky v našom nástroji výberu a pohrať sa s tým. Alebo by sme to mohli urobiť v našom webovom prehliadači. Tento tutoriál vám ukáže, ako upraviť webovú stránku v prehliadači.
Firefox, označený ako vývojárske nástroje, volá funkciu Inspect Element, zatiaľ čo Chrome ju nazýva Inspect. V oboch prípadoch ide o spôsob, ako prehliadač nahliadnuť do lesku svojho dizajnu a pozrieť sa na kód, ktorý ho poháňa. Táto funkcia je pomerne dobre známa a používa sa veľa. To, čo nie je celkom známe, je schopnosť vykonávať zmeny tohto kódu za behu.
Žiadne zmeny, ktoré vykonáte, sa neuložia a nebudú mať vplyv na živé vysielanie. Ak nechcete načítať stránku do vývojového nástroja, jedná sa o elegantný spôsob experimentovania.
Upravte akúkoľvek webovú stránku v prehliadači
Dreamweaver a podobné nástroje majú zabudovaný emulátor prehliadača, ktorý simuluje, ako bude vyzerať dizajn v rôznych prehľadávačoch. Aj keď sú také dobré, nie sú vždy presné a pri spúšťaní stránok často zistíte, že to, čo vo vašom vývojárskom nástroji vyzeralo fantasticky, vyzerá v samostatnom prehliadači trochu inak.
Zvyčajne by ste spustili web na internom webovom serveri a otestovali ho v prehliadači pred jeho priamym spustením. Ak je stránka už aktívna alebo ak chcete niečo vyskúšať, nie je potrebné ju kopírovať a načítať do vývojového nástroja, môžete použiť iba vývojársky nástroj prehliadača.
Používam prehliadač Firefox, preto vám ukážem, ako ho používať. Chrome je však takmer rovnaký.
- V prehliadači otvorte webovú stránku, s ktorou chcete experimentovať.
- Kliknite pravým tlačidlom myši kdekoľvek na stránke a vyberte položku Skontrolovať.
Mali by ste vidieť, ako sa vaša stránka delí na dve časti, pričom v dolnej časti sa objaví nová tabla s nejakým kódom. Tento kód je hnacou silou vybranej stránky. Rôzne prvky stránky sú prístupné z kariet v hornej časti dolnej karty. Napríklad vo Firefoxe vidíme Inspector, Console, Debugger, Editor štýlov a podobne.
Ak umiestnite kurzor na riadky v dolnom paneli, zobrazia sa rôzne časti zvýraznenia webovej stránky. Riadok kódu, ktorý ste počas zvýraznenia zvýraznili, je kód, ktorý ovplyvňuje túto časť stránky.
- Ak sa chcete pohrať s tým, ako stránka vyzerá, vyskúšajte Editor štýlov.
- Ak si chcete zahrať s tým, ako stránka funguje, vyskúšajte Konzolu alebo Prístupnosť.
- Ak chcete chyby odstrániť alebo vyriešiť problém, použite konzolu alebo ladiaci program
Výkon je užitočný pre miestne SEO, ale pamäť, sieť a úložisko sa toľko nevyužívajú.
Nezabudnite, že v rámci nástrojov pre vývojárov si môžete vymieňať správy podľa vlastného uváženia a nebude to mať vplyv na lokalitu. Akékoľvek zmeny sa uskutočňujú iba v tom, ako sa stránka zobrazuje vo vašom individuálnom prehliadači. Neovplyvní to samotný web. Po zatvorení nástroja sa všetky zmeny stratia.
Vykonávanie zmien na stránke
Teraz viete, že môžete zmeniť všetko, čo sa vám páči, bez toho, aby ste ovplyvnili skutočný web. Nájdite na stránke prvok, ktorý chcete upraviť. Mohli by ste zmeniť písmo, farbu písma, obrázok na pozadí alebo čo sa vám páči. V tomto príklade zmením farbu písma nadpisu bannera.
- Pravým tlačidlom myši kliknite na presný prvok, ktorý chcete zmeniť, a vyberte príkaz Skontrolovať.
- Zvýraznite riadok buď „nadpisom“ alebo „H1“, aby bol text v hornom paneli zvýraznený.
- Prejdite doľava na dve tabule a nájdite farbu písma.
- Zmeňte hodnotu na niečo iné alebo vyberte farebný bod, ktorý chcete použiť.
Po dokončení zmeny sa vaša zmena zobrazí dynamicky. Môžete zmeniť farbu, veľkosť, písmo, pozadie a všetko o písme. Nemôžete uložiť prácu, ale vaše zmeny zostanú pre túto reláciu.
Všetko, čo je na stránke ideálne, môžete zmeniť, ak máte nápad a chcete ho rýchlo vyskúšať pred spustením všetkých vývojových aplikácií. Všetko, čo musíte urobiť, je zapamätať si, aké zmeny ste vykonali a kde ich nemôžete uložiť. Budete musieť urobiť snímku obrazovky alebo zaznamenať zmeny a replikovať ich v rámci svojich vývojárskych nástrojov, aby sa zachovali.
Úpravy webovej stránky v prehliadači sú elegantným spôsobom experimentovania alebo hrania so stránkami. Je to tiež dobrý spôsob, ako sa niečo málo naučiť o vývoji webových aplikácií bez toho, aby ste museli kupovať drahé vývojárske nástroje. Teraz viete ako, choďte sa hrať!
