„Inspect Element“kūrėjo įrankis „Firefox“leidžia tiksliai nustatyti viską, ką matote savo tinklalapyje, HTML kodą. Atidarius šiuos įrankius, HTML ir pridedamą CSS stiliaus lapą galima visiškai redaguoti. Eksperimentuokite su bet kokiais jums patinkančiais pakeitimais, tada atnaujinkite puslapį, kad grįžtumėte į numatytą tinklalapio išvaizdą.
Žingsniai
1 dalis iš 2: Elementų tikrinimas
Žingsnis 1. Dešiniuoju pelės mygtuku spustelėkite bet kurį tinklalapio elementą
Galite dešiniuoju pelės klavišu spustelėti vaizdus, tekstą, foną ar bet kurį kitą elementą. Jei neturite dviejų mygtukų pelės, laikykite nuspaudę „Control“ir spustelėkite kairįjį pelės klavišą.
Žingsnis 2. Išskleidžiamajame meniu spustelėkite Tikrinti elementą
Lango apačioje turėtų būti rodoma įrankių juosta. Po įrankių juosta taip pat bus rodoma sritis, kurioje bus rodomas puslapio HTML kodas.
Žingsnis 3. Nustatykite įrankių juostas ir langus
Spustelėjus „Tikrinti elementą“, lango apačioje atsidarys kelios sritys. Štai jų naudojimo ir pavadinimų suskirstymas:
- Viršutinė eilutė yra įrankių juostos įrankių juosta. Tai turi keletą kūrėjų įrankių, tačiau mus domina „Inspector“kairėje. Visą šį vadovą palikite pasirinktą (paryškintą mėlyna spalva).
- Po įrankių juosta yra viena HTML elementų „Duonos džiūvėsių“eilutė, rodanti visą kelią, susijusį su pasirinktu elementu.
- Po šia eilute esančioje srityje rodomas puslapio HTML medis arba „Žymėjimo rodinys“. Pasirinkto elemento HTML yra paryškintas ir centre.
- Dešinėje esančioje srityje rodomas šio puslapio CSS stiliaus lapas.
Žingsnis 4. Pasirinkite kitą elementą
Atidarius įrankių juostą, lengva pasirinkti kitą elementą. Štai trys būdai, kaip tai padaryti:
- Užveskite pelės žymeklį virš HTML eilutės, kad paryškintumėte atitinkamą elementą (reikalingas „Firefox 34+“). Spustelėkite HTML, kad pasirinktumėte tą elementą.
- Spustelėkite įrankio pasirinkimo elementą, esantį kairėje įrankių juostos pusėje: piktograma yra žymeklis virš kvadrato. Perkelkite žymeklį virš puslapio, kad paryškintumėte elementus, tada spustelėkite, kad pasirinktumėte elementą.
Žingsnis 5. Naršykite kodą
Spustelėkite bet kurią HTML srities vietą. Norėdami pereiti per kodą, naudokite klaviatūros rodykles kairėn ir dešinėn (reikalinga „Firefox 39+“). Tai naudinga elementams, kurie yra per maži rankiniu būdu pasirinkti.
- Pilkas HTML susijęs su elementais, kurie nerodomi puslapyje. Tai apima komentarus, tam tikrus mazgus, pvz., Ir elementus, kurie buvo paslėpti naudojant CSS rodymo ypatybę.
- Spustelėkite rodyklę konteinerių kairėje, kad išplėstumėte arba paslėptumėte turinį. Norėdami išplėsti visą turinį, spustelėdami palaikykite nuspaudę alt="Vaizdas" arba parinktį.
Žingsnis 6. Ieškokite elemento
Ieškokite paieškos juostos (didinamojo stiklo piktograma), esančios dešinėje eilutės „Duonos trupiniai“pusėje. Spustelėkite šį, kad jį išplėstumėte, tada įveskite ieškomą HTML kodą. Kai įvesite tekstą, pasirodys iššokantis langas su atitinkamais elementais. Spustelėkite vieną, kad pasirinktumėte tą elementą, ir slinkite HTML sritį iki jo kodo.
2 dalis iš 2: HTML redagavimas
Žingsnis 1. Atnaujinkite puslapį, kad bet kada pradėtumėte iš naujo
Jei dar nesate susipažinę su žiniatinklio kūrėjų įrankiais, supraskite, kad jie neatlieka jokių nuolatinių pakeitimų. Jūsų pakeitimai bus matomi tik jūsų ekrane ir tik tol, kol uždarysite puslapį arba atnaujinsite. Nesivaržykite eksperimentuoti, net jei nesate tikri, kas atsitiks.
2 veiksmas. Norėdami redaguoti tekstą, dukart spustelėkite HTML
Dukart spustelėkite HTML eilutę. Įveskite naują tekstą ir paspauskite „Enter“, kad išsaugotumėte pakeitimus.
Žingsnis 3. Jei norite gauti daugiau parinkčių, spustelėkite ir palaikykite naršymo skydelį
Atminkite, kad „Breadcrumb“įrankių juosta yra tarp viso HTML medžio ir viršutinės įrankių juostos. Spustelėkite ir palaikykite bet kurį šios eilutės elementą, kad atidarytumėte platų meniu. Štai neišsamus šių parinkčių vadovas:
- „Redaguoti kaip HTML“leidžia mazgą ir visą jo turinį redaguoti HTML medyje, o ne kiekvieną eilutę redaguoti atskirai.
- „Kopijuoti vidinį HTML“nukopijuoja visą mazgo turinį, o „Kopijuoti išorinį HTML“taip pat nukopijuoja mazgą (pvz., Arba
- „Įklijuoti →“suteikia kelias parinktis, kur įklijuoti, pvz., Prieš šį mazgą arba po pirmojo mazgo antrinio elemento.
- : hover,: active ir: focus pakeičia elemento išvaizdą, kai naudotojas sąveikauja su juo. Tikslus efektas nustatomas pagal CSS stiliaus lapą (redaguojamas iš dešinės srities).
Žingsnis 4. Vilkite ir numeskite
Norėdami pertvarkyti kodo elementus, spustelėkite ir palaikykite HTML, kol pasirodys punktyrinė linija. Perkelkite medį aukštyn arba žemyn ir paleiskite, kai punktyrinė linija yra norimoje vietoje.
Tam reikia „Firefox 39“ar naujesnės versijos
5 veiksmas. Uždarykite kūrėjo įrankių juostą
Norėdami uždaryti visus šiuos išgalvotus langus, tiesiog paspauskite X, esantį dešiniajame įrankių juostos kampe, virš CSS srities.
Patarimai
- Įrankių juostą taip pat galite atidaryti naudodami šias viršutinio meniu parinktis:
- „Windows“: „Firefox“→ „Web Developer“→ „Toggle Tools“
- „Mac“arba „Linux“: Įrankiai → Žiniatinklio kūrėjas → Perjungti įrankius
- „Firefox 40“pristatė galimybę paslėpti CSS sritį, kad redaguojant HTML būtų daugiau vietos. Ieškokite rodyklės piktogramos dešinėje eilutės „Duonos trupiniai“pusėje, dešinėje paieškos juostos pusėje. Spustelėkite šią piktogramą, kad paslėptumėte CSS sritį, ir spustelėkite ją dar kartą, kad vėl ją išplėstumėte.
- CSS sritį taip pat galima redaguoti, tačiau tai nėra šio vadovo taikymo sritis. Šis straipsnis moko CSS pagrindų.
