A Firefox Inspect Element fejlesztői eszköze lehetővé teszi, hogy pontosan meghatározza a HTML -kódot mindazokhoz, amelyeket a weboldalán lát. A HTML és a hozzá tartozó CSS stíluslap teljesen szerkeszthető, miután ezeket az eszközöket megnyitotta. Kísérletezzen tetszőleges változtatásokkal, majd frissítse az oldalt, hogy visszatérjen a weboldal kívánt megjelenéséhez.
Lépések
Rész 1 /2: Elemek vizsgálata
1. lépés: Kattintson a jobb gombbal bármely weboldal elemre
Jobb egérgombbal kattinthat a képekre, szövegre, hátterekre vagy bármely más elemre. Ha nincs kétgombos egere, kattintson a bal egérgombbal, miközben lenyomva tartja a Control gombot.
Lépés 2. Kattintson az Elem vizsgálata elemre a legördülő menüben
Egy eszköztárnak kell megjelennie az ablak alján. Az eszköztár alatt megjelenik egy panel is, amely megjeleníti az oldal HTML -kódját.
3. lépés. Azonosítsa az eszköztárakat és az ablaktáblákat
Ha az Elem vizsgálata elemre kattint, több ablak nyílik meg az ablak alján. Íme a használatuk és neveik bontása:
- A felső sor az Eszköztár eszköztár. Ennek számos fejlesztői eszköze van, de minket érdekel a bal oldali Inspector. Tartsa ezt kiválasztva (kékkel kiemelve) az egész útmutatóhoz.
- Az eszköztár alatt egyetlen Breadcrumbs HTML -elemsor található, amely a kiválasztott elem teljes elérési útját mutatja.
- A sor alatti panelen az oldal HTML -fája vagy "Jelölő nézete" látható. Ebben az ablaktáblában a kiválasztott elem HTML -je kiemelve jelenik meg.
- A jobb oldali ablaktáblán megjelenik az oldal CSS -stíluslapja.
4. lépés. Válasszon másik elemet
Miután megnyílt az eszköztár, könnyű kiválasztani egy másik elemet. Íme három módja ennek:
- Mutasson az egérrel egy HTML sor fölé a megfelelő elem kiemeléséhez (Firefox 34+ szükséges). Kattintson a HTML -re az elem kiválasztásához.
- Kattintson az Eszköz kiválasztása eszközre az eszköztár bal szélén: az ikon egy négyzet fölé mutat. Vigye az egérmutatót az oldal fölé az elemek kiemeléséhez, majd kattintson az elem kiválasztásához.
5. lépés. Navigáljon a kódon
Kattintson bárhová a HTML panelen. A billentyűzet bal és jobb nyilaival mozoghat a kódon (Firefox 39+ szükséges). Ez akkor hasznos, ha az elemek túl kicsik ahhoz, hogy kézzel válasszák ki őket.
- A szürke HTML olyan elemekre vonatkozik, amelyek nem jelennek meg az oldalon. Ide tartoznak a megjegyzések, bizonyos csomópontok, például a CSS megjelenítési tulajdonsággal elrejtett elemek.
- Kattintson a tárolók bal oldalán található nyílra a tartalom kibontásához vagy elrejtéséhez. Az összes tartalom kibontásához tartsa lenyomva az alt="Kép" vagy az opciót, miközben kattint.
6. lépés. Keresse meg az elemet
Keresse meg a keresősávot (nagyító ikon) a Breadcrumbs sor jobb szélén. Kattintson erre a kibontáshoz, majd írja be a keresett HTML -kódot. Gépelés közben megjelenik egy előugró ablak, amely felsorolja a megfelelő elemeket. Kattintson az egyikre az elem kiválasztásához, és görgesse a HTML panelt a kódjához.
2. rész 2: A HTML szerkesztése
1. lépés. Frissítse az oldalt, hogy bármikor újrakezdhesse
Ha még nem ismeri a webfejlesztői eszközöket, ne feledje, hogy ezek nem hajtanak végre állandó változtatásokat. A szerkesztések csak a képernyőn lesznek láthatók, és csak addig, amíg be nem zárja vagy frissíti az oldalt. Ne habozzon kísérletezni, még akkor sem, ha nem tudja, mi fog történni.
2. lépés Kattintson duplán a HTML -re a szöveg szerkesztéséhez
Kattintson duplán egy HTML sorra. Írja be az új szöveget, és nyomja meg az enter billentyűt a módosítások mentéséhez.
3. lépés: További lehetőségekért kattintson és tartsa lenyomva a navigációs morzsát
Ne feledje, hogy a Breadcrumb eszköztár a teljes HTML -fa és a felső eszköztár közé van helyezve. Kattintson és tartsa lenyomva a sor bármely elemét a kiterjedt menü megnyitásához. Itt van egy hiányos útmutató ezekhez a lehetőségekhez:
- A "Szerkesztés HTML -ként" segítségével a csomópont és annak összes tartalma szerkeszthetővé válik a HTML -fában, ahelyett, hogy minden sort külön -külön kellene szerkesztenie.
- A "Belső HTML másolása" a csomópont összes tartalmát másolja, míg a "Külső HTML másolása" a csomópontot is (például
- A "Beillesztés →" számos lehetőséget kínál a beillesztéshez, például a csomópont előtt vagy a csomópont első gyermeke után.
- : hover,: aktív és: fókusz megváltoztatja az elem megjelenését, amikor a felhasználó interakcióba lép vele. A pontos hatást a CSS stíluslap határozza meg (szerkeszthető a jobb oldali ablaktáblából).
4. lépés Húzza és vidd
A kód elemeinek átrendezéséhez kattintson és tartsa lenyomva a HTML -t, amíg szaggatott vonal meg nem jelenik. Mozgassa felfelé vagy lefelé a fán, és engedje el, amikor a szaggatott vonal a kívánt helyen van.
Ehhez Firefox 39 vagy újabb verzió szükséges
5. lépés Zárja be a fejlesztői eszköztárat
Mindezen divatos ablakok bezárásához nyomja meg az X gombot az eszköztár jobb szélén, a CSS panel felett.
Tippek
- Az eszköztárat az alábbi felső menüopciókkal is megnyithatja:
- Windows: Firefox → Webfejlesztő → Eszközök váltása
- Mac vagy Linux: Eszközök → Webfejlesztő → Eszközök váltása
- A Firefox 40 bevezette a CSS ablaktábla elrejtésének lehetőségét, hogy több helyet kapjon a HTML szerkesztése közben. Keresse meg a nyíl ikont a Breadcrumbs sor jobb szélén, a keresősáv jobb oldalán. Kattintson erre az ikonra a CSS ablaktábla elrejtéséhez, majd kattintson rá újra a kibontáshoz.
- A CSS ablaktábla is szerkeszthető, de ez túlmutat ezen útmutató keretein. Ez a cikk megtanítja a CSS alapjait.
