Pārbaudes elementa izstrādātāja rīks pārlūkā Firefox ļauj precīzi noteikt HTML kodu visam, ko redzat savā tīmekļa lapā. Pēc šo rīku atvēršanas HTML un pievienotā CSS stila lapa ir pilnībā rediģējama. Eksperimentējiet ar jebkādām izmaiņām, kas jums patīk, un pēc tam atsvaidziniet lapu, lai atgrieztos paredzētajā tīmekļa lapas izskatā.
Soļi
1. daļa no 2: Elementu pārbaude
1. solis. Ar peles labo pogu noklikšķiniet uz jebkura tīmekļa lapas elementa
Varat ar peles labo pogu noklikšķināt uz attēliem, teksta, fona vai jebkura cita elementa. Ja jums nav peles ar divām pogām, turiet nospiestu Control, turot nospiestu peles kreiso taustiņu.
2. solis. Nolaižamajā izvēlnē noklikšķiniet uz Pārbaudīt elementu
Rīkjoslai vajadzētu parādīties loga apakšā. Zem rīkjoslas parādīsies arī rūts, kurā tiks parādīts lapas HTML kods.
3. solis. Identificējiet rīkjoslas un rūts
Noklikšķinot uz Pārbaudīt elementu, loga apakšdaļā tiks atvērtas vairākas rūts. Šeit ir to lietojuma un nosaukumu sadalījums:
- Augšējā rinda ir rīkjoslas rīkjosla. Tam ir vairāki izstrādātāju rīki, taču mūs interesē Inspector kreisajā pusē. Saglabājiet šo opciju atlasītu (iezīmētu zilā krāsā) visu šo ceļvedi.
- Zem rīkjoslas ir viena HTML elementu rīvmaizes rinda, kas parāda pilnu ceļu, kas attiecas uz atlasīto elementu.
- Rūtī zem šīs rindas tiek parādīts lapas HTML koks vai iezīmēšanas skats. Šajā rūtī atlasītā elementa HTML ir iezīmēts un centrēts.
- Labajā rūtī tiek parādīta šīs lapas CSS stilu lapa.
4. solis. Izvēlieties citu elementu
Kad rīkjosla ir atvērta, cita elementa izvēle ir vienkārša. Šeit ir trīs veidi, kā to izdarīt:
- Virziet kursoru virs HTML rindas, lai iezīmētu atbilstošo elementu (nepieciešama pārlūkprogramma Firefox 34+). Noklikšķiniet uz HTML, lai atlasītu šo elementu.
- Rīkjoslas kreisajā malā noklikšķiniet uz rīka Atlasīt elementu: ikona ir kursors virs kvadrāta. Virziet kursoru virs lapas, lai iezīmētu elementus, pēc tam noklikšķiniet, lai atlasītu elementu.
5. solis. Pārvietojieties pa kodu
Noklikšķiniet jebkurā HTML rūtī. Izmantojiet tastatūras kreiso un labo bultiņu, lai pārvietotos pa kodu (nepieciešama pārlūkprogramma Firefox 39+). Tas ir noderīgi elementiem, kas ir pārāk mazi, lai tos atlasītu ar rokām.
- Pelēks HTML attiecas uz elementiem, kas netiek parādīti lapā. Tas ietver komentārus, noteiktus mezglus, piemēram, un elementus, kas ir paslēpti ar CSS displeja rekvizītu.
- Noklikšķiniet uz bultiņas pa kreisi no konteineriem, lai izvērstu vai paslēptu tā saturu. Lai izvērstu visu saturu, noklikšķinot turiet alt="Attēls" vai opciju.
6. solis. Meklējiet elementu
Atrodiet meklēšanas joslu (palielināmā stikla ikona) Rīvmaizes rindas labajā malā. Noklikšķiniet uz šī, lai to izvērstu, un pēc tam ierakstiet meklēto HTML kodu. Rakstīšanas laikā parādīsies uznirstošais logs, kurā būs uzskaitīti atbilstošie elementi. Noklikšķiniet uz viena, lai atlasītu šo elementu, un ritiniet HTML rūti līdz tā kodam.
2. daļa no 2: HTML rediģēšana
1. solis. Atsvaidziniet lapu, lai jebkurā brīdī sāktu no jauna
Ja esat jauns tīmekļa izstrādātāju rīku lietotājs, saprotiet, ka tie neveic nekādas pastāvīgas izmaiņas. Jūsu veiktie labojumi būs redzami tikai ekrānā un tikai līdz lapas aizvēršanai vai atsvaidzināšanai. Nevilcinieties eksperimentēt, pat ja neesat pārliecināts, kas notiks.
2. solis. Veiciet dubultklikšķi uz HTML, lai rediģētu tekstu
Veiciet dubultklikšķi uz HTML rindas. Ierakstiet jauno tekstu un nospiediet taustiņu Enter, lai saglabātu izmaiņas.
3. solis. Lai iegūtu vairāk iespēju, noklikšķiniet un turiet rīvmaizi
Atcerieties, ka Rīkjoslas rīkjosla atrodas starp pilnu HTML koku un augšējo rīkjoslu. Noklikšķiniet un turiet kādu no šīs rindas elementiem, lai atvērtu plašu izvēlni. Šeit ir nepilnīga šo iespēju rokasgrāmata:
- "Rediģēt kā HTML" padara mezglu un visu tā saturu rediģējamu HTML kokā, tā vietā, lai rediģētu katru rindu atsevišķi.
- “Kopēt iekšējo HTML” kopē visu mezgla saturu, savukārt “Kopēt ārējo HTML” kopē arī mezglu (piemēram, vai
- "Ielīmēt →" piedāvā vairākas iespējas, kur ielīmēt, piemēram, pirms šī mezgla vai pēc mezgla pirmā mezgla.
- : kursors,: aktīvs un: fokuss maina elementa izskatu, kad lietotājs ar to mijiedarbojas. Precīzu efektu nosaka CSS stilu lapa (rediģējama no labās puses rūts).
4. solis. Velciet un nometiet
Lai pārkārtotu koda elementus, noklikšķiniet un turiet HTML, līdz tiek parādīta punktēta līnija. Pārvietojiet to uz augšu vai uz leju kokā un atlaidiet, kad pārtrauktā līnija atrodas vēlamajā vietā.
Tas prasa Firefox 39 vai jaunāku versiju
5. solis. Aizveriet izstrādātāja rīkjoslu
Lai aizvērtu visus šos izsmalcinātos logus, vienkārši nospiediet X rīkjoslas labajā stūrī virs CSS rūts.
Padomi
- Rīkjoslu var atvērt arī ar šīm augšējās izvēlnes opcijām:
- Windows: Firefox → Web izstrādātājs → Pārslēgt rīkus
- Mac vai Linux: Rīki → Web izstrādātājs → Pārslēgt rīkus
- Firefox 40 ieviesa iespēju paslēpt CSS rūti, lai HTML rediģēšanas laikā iegūtu vairāk vietas. Meklējiet bultiņas ikonu Rīvmaizes rindas labajā malā, meklēšanas joslas labajā pusē. Noklikšķiniet uz šīs ikonas, lai paslēptu CSS rūti, un noklikšķiniet uz tās vēlreiz, lai to vēlreiz izvērstu.
- Arī CSS rūti var rediģēt, taču tas nav šīs rokasgrāmatas darbības jomā. Šis raksts māca CSS pamatus.
