Vývojářský nástroj Inspect Element ve Firefoxu vám umožňuje určit HTML kód pro cokoli, co vidíte na své webové stránce. HTML a doprovodné šablony stylů CSS lze plně upravovat, jakmile jsou tyto nástroje otevřené. Experimentujte se všemi požadovanými změnami a poté stránku obnovte, abyste se vrátili k zamýšlenému vzhledu webové stránky.
Kroky
Část 1 ze 2: Kontrola prvků
Krok 1. Klepněte pravým tlačítkem na libovolný prvek webové stránky
Na obrázky, text, pozadí nebo jakýkoli jiný prvek můžete kliknout pravým tlačítkem. Pokud nemáte dvoutlačítkovou myš, klikněte levým tlačítkem a podržte klávesu Control.
Krok 2. V rozevírací nabídce klikněte na Inspect Element
V dolní části okna by se měl objevit panel nástrojů. Pod panelem nástrojů se také zobrazí podokno zobrazující kód HTML stránky.
Krok 3. Identifikujte panely nástrojů a podokna
Když kliknete na Zkontrolovat prvek, ve spodní části okna se otevře několik podoken. Zde je rozpis jejich použití a názvů:
- Horní řádek je panel nástrojů Toolbox. To má několik vývojářských nástrojů, ale nás zajímá inspektor vlevo. Ponechte toto vybrané (zvýrazněné modře) pro celý tento průvodce.
- Pod panelem nástrojů je jeden řádek Breadcrumbs prvků HTML, který ukazuje úplnou cestu k vybranému prvku.
- Podokno pod tímto řádkem zobrazuje strom HTML nebo „Zobrazení značek“stránky. HTML pro prvek, který jste vybrali, je v tomto podokně zvýrazněn a vycentrován.
- Podokno vpravo zobrazuje šablonu stylů CSS pro tuto stránku.
Krok 4. Vyberte jiný prvek
Jakmile je panel nástrojů otevřený, výběr dalšího prvku je snadný. Zde jsou tři způsoby, jak to udělat:
- Umístěním kurzoru na řádek HTML zvýrazněte odpovídající prvek (vyžaduje Firefox 34+). Kliknutím na HTML vyberte tento prvek.
- Klikněte na nástroj Vybrat prvek zcela vlevo na panelu nástrojů: ikona je kurzor nad čtvercem. Pohybem kurzoru po stránce zvýrazněte prvky a kliknutím vyberte prvek.
Krok 5. Procházejte kódem
Klikněte kamkoli v podokně HTML. V kódu se pohybujte pomocí šipek doleva a doprava (vyžaduje Firefox 39+). To je užitečné pro prvky příliš malé na ruční výběr.
- Šedý HTML se vztahuje k prvkům, které nejsou na stránce zobrazeny. To zahrnuje komentáře, určité uzly, jako například, a prvky, které byly skryty pomocí vlastnosti zobrazení CSS.
- Kliknutím na šipku nalevo od kontejnerů rozbalíte nebo skryjete jeho obsah. Chcete -li rozbalit veškerý obsah, podržte při kliknutí alt="Obrázek" nebo možnost.
Krok 6. Vyhledejte prvek
Vyhledejte vyhledávací lištu (ikona lupy) zcela vpravo v řádku Drobečková navigace. Kliknutím na toto pole jej rozbalíte a poté zadáte hledaný kód HTML. Při psaní se zobrazí vyskakovací okno se seznamem odpovídajících prvků. Kliknutím na jeden prvek vyberete a v podokně HTML přejdete na jeho kód.
Část 2 ze 2: Úpravy HTML
Krok 1. Obnovením stránky můžete kdykoli začít znovu
Pokud jste s nástroji pro webové vývojáře nováčkem, pochopte, že neprovádějí žádné trvalé změny. Vaše úpravy budou viditelné pouze na obrazovce a pouze do doby, než stránku zavřete nebo ji obnovíte. Neváhejte experimentovat, i když si nejste jisti, co se stane.
Krok 2. Text upravíte dvojitým kliknutím na HTML
Poklepejte na řádek HTML. Zadejte nový text a změny uložte stisknutím klávesy Enter.
Krok 3. Kliknutím a podržením strouhanky zobrazíte další možnosti
Pamatujte, že panel nástrojů Breadcrumb je vložen mezi celý strom HTML a horní panel nástrojů. Kliknutím a podržením na některém z prvků v tomto řádku otevřete rozsáhlou nabídku. Zde je neúplný průvodce těmito možnostmi:
- "Upravit jako HTML" umožňuje uzel a veškerý jeho obsah upravovat ve stromu HTML, místo aby bylo nutné upravovat každý řádek jednotlivě.
- „Kopírovat vnitřní HTML“zkopíruje veškerý obsah uzlu, zatímco „Kopírovat vnější HTML“zkopíruje také uzel (jako např.
- „Vložit →“vede k několika možnostem, kam vložit, například před tento uzel nebo za první podřízený uzel.
- : hover,: active a: focus změní vzhled prvku, když s ním uživatel interaguje. Přesný účinek určuje šablona stylů CSS (upravitelná z pravého podokna).
Krok 4. Přetáhněte
Chcete -li změnit uspořádání prvků v kódu, klikněte a podržte HTML, dokud se nezobrazí přerušovaná čára. Pohybujte stromem nahoru nebo dolů a pusťte ho, když je přerušovaná čára na požadovaném místě.
To vyžaduje Firefox 39 nebo novější
Krok 5. Zavřete panel nástrojů pro vývojáře
Chcete -li zavřít všechna tato efektní okna, stačí stisknout X v pravém horním rohu panelu nástrojů nad podoknem CSS.
Tipy
- Panel nástrojů můžete také otevřít pomocí těchto možností horní nabídky:
- Windows: Firefox → Web Developer → Přepnout nástroje
- Mac nebo Linux: Nástroje → Web Developer → Přepnout nástroje
- Firefox 40 představil možnost skrýt podokno CSS, aby vám při úpravách HTML poskytlo více místa. Vyhledejte ikonu šipky zcela vpravo v řádku Drobečková navigace, napravo od vyhledávacího panelu. Kliknutím na tuto ikonu skryjete podokno CSS a dalším kliknutím jej znovu rozbalíte.
- Podokno CSS lze také upravovat, ale to je mimo rozsah této příručky. Tento článek učí základy CSS.
