Vývojársky nástroj Inspect Element vo Firefoxe vám umožňuje presne určiť kód HTML pre čokoľvek, čo vidíte na svojej webovej stránke. Hneď ako sú tieto nástroje otvorené, je možné HTML a sprievodný list štýlov CSS úplne upravovať. Experimentujte so všetkými zmenami, ktoré sa vám páčia, a potom stránku obnovte, aby ste sa vrátili k plánovanému vzhľadu webovej stránky.
Kroky
Časť 1 z 2: Kontrola prvkov
Krok 1. Kliknite pravým tlačidlom myši na ľubovoľný prvok webovej stránky
Na obrázky, text, pozadie alebo iný prvok môžete kliknúť pravým tlačidlom myši. Ak nemáte dvojtlačidlovú myš, kliknite ľavým tlačidlom myši a podržte kláves Control.
Krok 2. V rozbaľovacej ponuke kliknite na položku Skontrolovať prvok
V spodnej časti okna by sa mal objaviť panel s nástrojmi. Pod panelom s nástrojmi sa zobrazí aj tabla zobrazujúca kód HTML stránky.
Krok 3. Identifikujte panely nástrojov a tably
Keď kliknete na položku Skontrolovať prvok, v spodnej časti okna sa otvorí niekoľko tabiel. Tu je rozpis ich použití a názvov:
- Horný riadok je panel nástrojov Toolbox. Má niekoľko vývojárskych nástrojov, ale nás zaujíma Inšpektor vľavo. Nechajte toto vybraté (zvýraznené modrou farbou) pre celého tohto sprievodcu.
- Pod panelom s nástrojmi sa nachádza jeden riadok HTML prvkov typu Breadcrumbs, ktorý zobrazuje úplnú cestu k vybratému prvku.
- Tabla pod týmto riadkom zobrazuje strom HTML alebo „zobrazenie značiek“stránky. HTML pre prvok, ktorý ste vybrali, je zvýraznený a vycentrovaný na tejto table.
- Na table vpravo sa zobrazuje šablóna štýlov CSS pre túto stránku.
Krok 4. Vyberte iný prvok
Keď je panel s nástrojmi otvorený, výber iného prvku je jednoduchý. Tu sú tri spôsoby, ako to urobiť:
- Umiestnením kurzora myši na riadok HTML zvýraznite príslušný prvok (vyžaduje Firefox 34+). Kliknutím na HTML prvok vyberiete.
- Kliknite na nástroj Vybrať prvok úplne vľavo na paneli s nástrojmi: ikona je kurzor nad štvorcom. Pohybom kurzora po stránke zvýraznite prvky a kliknutím vyberte prvok.
Krok 5. Navigujte v kóde
Kliknite kdekoľvek na table HTML. V kóde sa pohybujte pomocou šípok doľava a doprava (vyžaduje Firefox 39+). To je užitočné pre prvky, ktoré sú príliš malé na to, aby ste ich mohli ručne vyberať.
- Sivý HTML sa týka prvkov, ktoré nie sú na stránke zobrazené. To zahŕňa komentáre, určité uzly, ako napríklad, a prvky, ktoré boli skryté s vlastnosťou zobrazenia CSS.
- Kliknutím na šípku vľavo od kontajnerov rozbalíte alebo skryjete jeho obsah. Ak chcete rozšíriť všetok obsah, podržte pri kliknutí alt=„obrázok“alebo možnosť.
Krok 6. Vyhľadajte prvok
Hľadajte vyhľadávací panel (ikona lupy) úplne vpravo v riadku Breadcrumbs. Kliknutím naň rozbalíte a potom zadajte hľadaný kód HTML. Počas písania sa zobrazí vyskakovacie okno so zoznamom zodpovedajúcich prvkov. Kliknutím na jeden prvok vyberiete a posuniete tablu HTML na jeho kód.
Časť 2 z 2: Úprava HTML
Krok 1. Obnovte stránku, aby ste mohli kedykoľvek začať odznova
Ak ste s nástrojmi pre vývojárov webu nováčik, pochopte, že nevykonávajú žiadne trvalé zmeny. Vaše úpravy budú viditeľné iba na vašej obrazovke a iba dovtedy, kým stránku nezavriete alebo neobnovíte. Neváhajte experimentovať, aj keď si nie ste istí, čo sa stane.
Krok 2. Text upravíte dvojitým kliknutím na HTML
Dvakrát kliknite na riadok HTML. Zadajte nový text a stlačením klávesu Enter uložte zmeny.
Krok 3. Ďalšie možnosti zobrazíte kliknutím a podržaním strúhanky
Panel s nástrojmi Breadcrumb je vložený medzi celý strom HTML a horný panel s nástrojmi. Kliknutím a podržaním na ľubovoľnom z prvkov v tomto riadku otvoríte rozsiahlu ponuku. Tu je neúplný sprievodca týmito možnosťami:
- „Upraviť ako HTML“umožní uzol a všetok jeho obsah upravovať v strome HTML, namiesto toho, aby bolo potrebné upravovať každý riadok jednotlivo.
- „Kopírovať vnútorný HTML“skopíruje všetok obsah uzla, zatiaľ čo „Kopírovať vonkajší HTML“uzol skopíruje tiež (ako napr.
- „Prilepiť →“vedie k niekoľkým možnostiam umiestnenia, napríklad pred tento uzol alebo za prvé dieťa uzla.
- : hover,: active, and: focus zmení vzhľad prvku, keď s ním používateľ interaguje. Presný účinok určuje šablóna so štýlmi CSS (upraviteľné z pravého panela).
Krok 4. Presuňte myšou
Ak chcete zmeniť usporiadanie prvkov v kóde, kliknite a podržte tlačidlo HTML, kým sa nezobrazí prerušovaná čiara. Pohybujte stromom nahor alebo nadol a pustite ho, keď je prerušovaná čiara na požadovanom mieste.
Vyžaduje to Firefox 39 alebo novší
Krok 5. Zatvorte panel s nástrojmi pre vývojárov
Ak chcete zavrieť všetky tieto efektné okná, stačí stlačiť X v pravom rohu panela s nástrojmi nad panelom CSS.
Tipy
- Panel s nástrojmi môžete otvoriť aj pomocou týchto možností hornej ponuky:
- Windows: Firefox → Web Developer → Prepnúť nástroje
- Mac alebo Linux: Nástroje → Web Developer → Prepnúť nástroje
- Firefox 40 predstavil možnosť skryť tablu CSS, aby vám poskytol viac miesta pri úprave HTML. Vyhľadajte ikonu šípky úplne vpravo v riadku Drobečková navigácia, napravo od vyhľadávacieho panela. Kliknutím na túto ikonu skryjete tablu CSS a ďalším kliknutím ju znova rozbalíte.
- Tablu CSS je tiež možné upravovať, ale to presahuje rámec tejto príručky. Tento článok učí základy CSS.
