Inspect Element մշակողի գործիքը Firefox- ում թույլ է տալիս ճշգրիտ նշել HTML կոդը այն ամենի համար, ինչ տեսնում եք ձեր վեբ էջում: HTML- ը և դրան ուղեկցող CSS ոճաթերթը լիովին խմբագրելի են, երբ այդ գործիքները բացվեն: Փորձարկեք ցանկացած փոփոխություն, որը ձեզ դուր է գալիս, այնուհետև թարմացրեք էջը ՝ վերադառնալու համար վեբ էջի նախատեսված տեսքին:
Քայլեր
2 -րդ մաս 1 -ին. Տարրերի ստուգում
Քայլ 1. Աջ սեղմեք ցանկացած վեբ էջի տարր:
Կարող եք աջ սեղմել պատկերների, տեքստի, հետնաշերտի կամ որևէ այլ տարրի վրա: Եթե չունեք երկու կոճակ ունեցող մկնիկ, Control- ը պահելիս ձախ սեղմեք:
Քայլ 2. Սեղմեք բացվող ընտրացանկից Ստուգել տարրը:
Գործիքի տողը պետք է հայտնվի ձեր պատուհանի ներքևում: Գործիքադարակի ներքևում կհայտնվի նաև պատուհան ՝ ցուցադրելով էջի HTML կոդը:
Քայլ 3. Որոշեք գործիքագոտիներն ու պատուհանները:
Երբ սեղմում եք Inspect Element- ը, ձեր պատուհանի ներքևում կբացվեն մի քանի պատուհաններ: Ահա դրանց օգտագործման և անունների համառոտ նկարագրությունը.
- Վերին տողը Toolbox Toolbar- ն է: Սա ծրագրավորողի մի քանի գործիք ունի, բայց մեզ հետաքրքրում է Inspector- ը ձախ կողմում: Պահպանեք այս ընտրվածը (ընդգծված է կապույտ գույնով) այս ամբողջ ուղեցույցի համար:
- Գործիքադարակի ներքևում կա HTML տարրերի մեկ Breadcrumbs տող, որը ցույց է տալիս ընտրված տարրի հետ կապված ամբողջական ուղին:
- Այս տողի ներքևի պատուհանը ցույց է տալիս HTML ծառը կամ էջի «Նշման դիտում»: Ձեր ընտրած տարրի HTML- ն ընդգծված և կենտրոնացված է այս պատուհանում:
- Աջ կողմի պատուհանը ցուցադրում է այս էջի CSS ոճաթերթը:
Քայլ 4. Ընտրեք մեկ այլ տարր:
Գործիքադարակը բացելուց հետո այլ տարր ընտրելը հեշտ է: Ահա դա անելու երեք եղանակ.
- Սավառնել HTML տողի վրա `համապատասխան տարրը ընդգծելու համար (պահանջում է Firefox 34+): Այդ տարրը ընտրելու համար կտտացրեք HTML- ին:
- Կտտացրեք Գործիքադարակի ձախ կողմում գտնվող «Ընտրել տարր» գործիքին: պատկերակը կուրսորը քառակուսու վրա է: Տեղափոխեք ձեր կուրսորը էջի վրայով ՝ տարրերն ընդգծելու համար, այնուհետև կտտացրեք ՝ տարր ընտրելու համար:
Քայլ 5. Նավարկեք կոդի միջով:
Կտտացրեք HTML վահանակի ցանկացած վայրում: Օգտագործեք ձեր ստեղնաշարի ձախ և աջ սլաքները ՝ կոդի միջով անցնելու համար (պահանջում է Firefox 39+): Սա օգտակար է այն տարրերի համար, որոնք չափազանց փոքր են ձեռքով ընտրելու համար:
- Մոխրագույն HTML- ը վերաբերում է էջում չցուցադրված տարրերին: Սա ներառում է մեկնաբանություններ, օրինակ ՝ որոշակի հանգույցներ և տարրեր, որոնք թաքնված են CSS ցուցադրման հատկությամբ:
- Կտտացրեք բեռնարկղերի ձախ սլաքը `դրա բովանդակությունը ընդլայնելու կամ թաքցնելու համար: Ամբողջ բովանդակությունը ընդլայնելու համար սեղմելիս պահեք alt="Image" կամ տարբերակը:
Քայլ 6. Որոնեք տարր:
Փնտրեք որոնման տողը (խոշորացույցի պատկերակ) Breadcrumbs տողի ծայրամասային աջ կողմում: Կտտացրեք այն ՝ այն ընդլայնելու համար, այնուհետև մուտքագրեք ձեր փնտրած HTML կոդը: Տեքստ մուտքագրելիս կհայտնվի բացվող պատուհան, որտեղ կան համապատասխան տարրեր: Կտտացրեք մեկի վրա ՝ այդ տարրը ընտրելու և HTML վահանակը ոլորելու դեպի դրա կոդը:
2 -րդ մաս 2 -ից. HTML- ի խմբագրում
Քայլ 1. Թարմացրեք էջը ՝ ցանկացած պահի նորից սկսելու համար:
Եթե դուք նոր եք վեբ մշակողի գործիքների հետ, հասկացեք, որ դրանք ոչ մի մշտական փոփոխություն չեն կատարում: Ձեր խմբագրումները տեսանելի կլինեն միայն ձեր էկրանին և միայն մինչև էջը փակելը կամ այն թարմացնելը: Մի հապաղեք փորձարկել, նույնիսկ եթե վստահ չեք, թե ինչ կլինի:
Քայլ 2. Տեքստը խմբագրելու համար կրկնակի կտտացրեք HTML- ին:
Կրկնակի կտտացրեք HTML տողի վրա: Մուտքագրեք նոր տեքստը և սեղմեք Enter ՝ ձեր փոփոխությունները պահպանելու համար:
Քայլ 3. Լրացուցիչ ընտրանքների համար կտտացրեք և պահեք պաքսիմատը:
Հիշեք, որ Breadcrumb գործիքագոտին տեղադրված է ամբողջական HTML ծառի և վերին գործիքագոտու միջև: Կտտացրեք և պահեք այս տողի ցանկացած տարրից ՝ ընդարձակ ընտրացանկ բացելու համար: Ահա այս ընտրանքների թերի ուղեցույցը.
- «Խմբագրել որպես HTML» - ը հանգույցը և դրա ամբողջ բովանդակությունը խմբագրելի է դարձնում HTML ծառում ՝ յուրաքանչյուր տողն առանձին խմբագրելու փոխարեն:
- «Պատճենել ներքին HTML» - ը պատճենում է հանգույցի բոլոր բովանդակությունը, մինչդեռ «Պատճենել արտաքին HTML» - ն էլ է հանգույցը (օրինակ ՝ կամ
- «Կպցնել →» - ը հանգեցնում է տեղադրման մի քանի տարբերակների, օրինակ ՝ այս հանգույցից առաջ կամ հանգույցի առաջին երեխայից հետո:
- : hover,: active, and: focus- ը փոխում է տարրի տեսքը, երբ օգտագործողը փոխազդում է դրա հետ: Exactշգրիտ ազդեցությունը որոշվում է CSS- ի ոճաթերթով (խմբագրելի է աջ վահանակից):
Քայլ 4. Քաշեք և թողեք:
Կոդի տարրերը վերադասավորելու համար կտտացրեք և պահեք HTML- ը մինչև գծի գծի հայտնվելը: Տեղափոխեք այն ծառի վեր կամ վար և բաց թողեք, երբ գծանշված գծը ցանկալի տեղում լինի:
Սա պահանջում է Firefox 39 կամ ավելի ուշ:
Քայլ 5. Փակեք մշակողի գործիքագոտին:
Այս բոլոր շքեղ պատուհանները փակելու համար պարզապես սեղմեք X- ը Գործիքադարակի ծայրամասային աջ անկյունում `CSS վահանակի վերևում:
Խորհուրդներ
- Գործիքադարակը կարող եք բացել նաև վերևի ընտրացանկի հետևյալ ընտրանքներով.
- Windows: Firefox → Վեբ ծրագրավորող → Փոխարկել գործիքները
- Mac կամ Linux. Գործիքներ → Վեբ ծրագրավորող → Փոխարկել գործիքները
- Firefox 40 -ը ներկայացրեց CSS- ի պատուհանը թաքցնելու տարբերակը ՝ HTML- ը խմբագրելիս ձեզ ավելի շատ տարածք տրամադրելու համար: Փնտրեք սլաքի պատկերակը Breadcrumbs տողի աջ կողմում ՝ որոնման տողի աջ կողմում: Կտտացրեք այս պատկերակին ՝ CSS- ի պատուհանը թաքցնելու համար և նորից կտտացրեք այն ՝ նորից ընդլայնելու համար:
- CSS- ի պատուհանը նույնպես խմբագրելի է, բայց դա դուրս է այս ուղեցույցի շրջանակներից: Այս հոդվածը սովորեցնում է CSS- ի հիմունքները:
