Mjeti i zhvilluesit Inspect Element në Firefox ju lejon të përcaktoni me saktësi kodin HTML për çdo gjë që shihni në faqen tuaj të internetit. Fleta e stilit HTML dhe shoqëruese CSS janë plotësisht të redaktueshme sapo këto mjete të jenë hapur. Eksperimentoni me çdo ndryshim që ju pëlqen, pastaj rifreskoni faqen për t'u kthyer në pamjen e synuar të faqes në internet.
Hapa
Pjesa 1 nga 2: Inspektimi i Elementeve
Hapi 1. Klikoni me të djathtën mbi çdo element të faqes në internet
Mund të klikoni me të djathtën mbi imazhet, tekstin, sfondet ose ndonjë element tjetër. Nëse nuk keni miun me dy butona, klikoni me të majtën ndërsa mbani Control.
Hapi 2. Klikoni Inspect Element nga menyja zbritëse
Një shirit veglash duhet të shfaqet në fund të dritares tuaj. Një panel do të shfaqet gjithashtu poshtë shiritit të veglave, duke shfaqur kodin HTML të faqes.
Hapi 3. Identifikoni shiritat e veglave dhe xhamat
Kur klikoni Inspect Element, disa dritare do të hapen në fund të dritares tuaj. Këtu është një ndarje e përdorimeve dhe emrave të tyre:
- Rreshti i sipërm është Toolbar Toolbox. Kjo ka disa mjete zhvilluesi, por ne jemi të interesuar për Inspektorin në të majtë. Mbajeni këtë të zgjedhur (të theksuar me blu) për të gjithë këtë udhëzues.
- Nën shiritin e veglave, ekziston një rresht i vetëm i elementeve HTML të Breadcrumbs, që tregon rrugën e plotë në lidhje me elementin e zgjedhur.
- Paneli nën këtë rresht tregon pemën HTML ose "Markup View" të faqes. HTML për elementin që keni zgjedhur theksohet dhe përqendrohet në këtë panel.
- Paneli në të djathtë shfaq fletën e stilit CSS për këtë faqe.
Hapi 4. Zgjidhni një element tjetër
Pasi të jetë hapur shiriti i veglave, zgjedhja e një elementi tjetër është e lehtë. Këtu janë tre mënyra për ta bërë atë:
- Rri pezull mbi një linjë HTML për të nxjerrë në pah elementin përkatës (kërkon Firefox 34+). Klikoni në HTML për të zgjedhur atë element.
- Klikoni mjetin Select Element në anën e majtë të shiritit të veglave: ikona është një kursor mbi një katror. Zhvendoseni kursorin mbi faqe për të nxjerrë në pah elementet, pastaj klikoni për të zgjedhur një element.
Hapi 5. Lundroni nëpër kod
Klikoni kudo në panelin HTML. Përdorni shigjetat majtas dhe djathtas në tastierën tuaj për të lëvizur nëpër kod (kërkon Firefox 39+). Kjo është e dobishme për elementët shumë të vegjël për tu zgjedhur me dorë.
- HTML gri lidhet me elementët që nuk shfaqen në faqe. Kjo përfshin komente, nyje të caktuara si p.sh. dhe elementë që janë fshehur me vetinë e ekranit CSS.
- Klikoni shigjetën në të majtë të kontejnerëve për të zgjeruar ose fshehur përmbajtjen e tij. Për të zgjeruar të gjithë përmbajtjen, mbani alt="Image" ose opsion gjatë klikimit.
Hapi 6. Kërkoni për një element
Shikoni shiritin e kërkimit (ikonën e xhamit zmadhues) në anën e djathtë të rreshtit të Breadcrumbs. Klikoni këtë për ta zgjeruar, pastaj shkruani kodin HTML që po kërkoni. Ndërsa shtypni, do të shfaqet një dritare që shfaq elemente që përputhen. Klikoni mbi njërën për të zgjedhur atë element dhe lëvizni panelin HTML në kodin e tij.
Pjesa 2 nga 2: Redaktimi i HTML
Hapi 1. Rifreskoni faqen për të filluar nga e para në çdo kohë
Nëse jeni i ri në mjetet e zhvilluesit të uebit, kuptoni që ato nuk bëjnë ndonjë ndryshim të përhershëm. Ndryshimet tuaja do të jenë të dukshme vetëm në ekranin tuaj, dhe vetëm derisa ta mbyllni faqen ose ta rifreskoni atë. Mos hezitoni të eksperimentoni edhe nëse nuk jeni të sigurt se çfarë do të ndodhë.
Hapi 2. Klikoni dy herë në HTML për të redaktuar tekstin
Klikoni dy herë në një rresht të HTML. Shkruani tekstin e ri dhe shtypni enter për të ruajtur ndryshimet tuaja.
Hapi 3. Klikoni dhe mbani një thërrime bukë për më shumë opsione
Mos harroni, shiriti i veglave Breadcrumb është i vendosur midis pemës së plotë HTML dhe shiritit të sipërm të veglave. Klikoni dhe mbani cilindo nga elementët në këtë rresht për të hapur një menu të gjerë. Këtu keni një udhëzues jo të plotë për këto opsione:
- "Ndrysho si HTML" e bën nyjen dhe të gjithë përmbajtjen e saj të redaktueshme në pemën HTML, në vend që të duhet të redaktoni secilën rresht individualisht.
- "Copy Inner HTML" kopjon të gjithë përmbajtjen e nyjes, ndërsa "Copy Outer HTML" kopjon gjithashtu nyjen (si p.sh.
- "Paste" çon në disa opsione se ku të ngjiteni, të tilla si para kësaj nyje ose pas fëmijës së parë të nyjës.
- : rri pezull,, aktiv dhe: fokusi ndryshojnë pamjen e elementit kur përdoruesi ndërvepron me të. Efekti i saktë përcaktohet nga fleta e stilit CSS (e redaktueshme nga paneli i djathtë).
Hapi 4. Zvarrit dhe lësho
Për të riorganizuar elementet në kod, klikoni dhe mbani HTML derisa të shfaqet një vijë e ndërprerë. Zhvendoseni atë lart ose poshtë pemës dhe lëreni kur vija e ndërprerë të jetë në vendin e dëshiruar.
Kjo kërkon Firefox 39 ose më vonë
Hapi 5. Mbyll shiritin e veglave të zhvilluesit
Për të mbyllur të gjitha këto dritare të mrekullueshme, thjesht shtypni X në këndin e djathtë të shiritit të veglave, mbi panelin CSS.
Këshilla
- Ju gjithashtu mund të hapni shiritin e veglave me këto opsione të menysë kryesore:
- Windows: Firefox → Web Developer → Toggle Tools
- Mac ose Linux: Mjetet → Zhvilluesi i uebit → Ndryshimi i veglave
- Firefox 40 prezantoi opsionin për të fshehur panelin CSS për t'ju dhënë më shumë hapësirë gjatë redaktimit të HTML. Shikoni për ikonën e shigjetës në të djathtën e djathtë të rreshtit Breadcrumbs, në të djathtë të shiritit të kërkimit. Klikoni këtë ikonë për të fshehur panelin CSS dhe klikoni përsëri për ta zgjeruar përsëri.
- Paneli CSS është gjithashtu i redaktueshëm, por kjo është përtej qëllimit të këtij udhëzuesi. Ky artikull mëson bazat e CSS.
