Ինչպես փաթաթել տեքստի նկարը

Նայիր ցանկացած վեբ էջ եւ կտեսնեք տեքստային բովանդակության եւ պատկերների համադրություն: Այս երկու տարրերն էլ կարեւորագույն բաղադրիչ են կայքի հաջողությունների մեջ: Տեքստի բովանդակությունը այն է, թե կայքի այցելուները կարդում են եւ որոնման համակարգերը կօգտագործեն իրենց վարկանիշային ալգորիթմների մաս: Պատկերները տեսողական տեսք կունենան կայքում եւ օգնում են ընդգծել տեքստի բովանդակությունը:

Թեմաներ եւ պատկերներ կայքերի համար հեշտությամբ ավելացնելը հեշտ է: Տեքստը ավելացված է ստանդարտ HTML տառերով, ինչպես պարբերությունները, վերնագրերը եւ ցուցակները, իսկ պատկերները տեղադրվում են տարրով էջում: Այնուամենայնիվ, ձեր պատկերն ավելացրել է ձեր վեբ-էջը, սակայն դուք կարող եք ունենալ տեքստի հոսքը պատկերի կողքին, այլ ոչ թե ներքեւում տեղակայված տեքստի հոսքը (որը կանխադրված ձեւն է, HTML- ի համար ավելացված պատկերը կցուցադրի բրաուզերում): Տեխնիկապես կան երկու տարբերակ, որը կարող եք հասնել այս տեսքին, կամ օգտագործելով CSS- ը (խորհուրդ է տրվում) կամ ցուցադրելով տեսողական հրահանգները ուղղակիորեն HTML- ում (խորհուրդ չի տրվում, քանի որ ցանկանում եք պահպանել ձեր կայքի ոճը եւ կառուցվածքը):

CSS- ի օգտագործումը

Էջի տեքստի եւ պատկերների դասավորության ձեւափոխման ճիշտ ձեւը եւ դրանց տեսողական ոճերը դիտարկչում հայտնվում են CSS- ով : Պարզապես հիշեք, քանի որ մենք խոսում ենք էջի տեսողական փոփոխության մասին (տեքստային հոսք նկարում), դա նշանակում է, դա Cascading Style Sheets- ի տիրույթն է:

1. Նախ, ձեր պատկերն ավելացրեք ձեր վեբ էջում: Հիշեք, որ այդ HTML- ից բացառելու ցանկացած տեսողական հատկանիշներ (ինչպես լայնությունը եւ բարձրության արժեքները): Սա կարեւոր է, հատկապես պատասխանող կայքի համար, որտեղ պատկերը չափը տարբեր կլինի զննարկչի հիման վրա: Որոշ ծրագրեր, ինչպիսիք են Adobe Dreamweaver- ը, կավելացնեն լայնությունը եւ բարձրության տվյալները այն գործիքներին, որոնք տեղադրվում են այդ գործիքով, այնպես որ համոզվեք, որ այս տեղեկությունները հանել HTML կոդը: Համոզված եղեք, սակայն, պետք է ներառեք համապատասխան ենթատեքստը : Ահա մի օրինակ, թե ինչպես կարող է ձեր HTML կոդը նայել:
2. Ստիլինգի նպատակների համար կարող եք նաեւ պատկեր ավելացնել դասին: Այս դասի արժեքը այն է, ինչ մենք կօգտագործենք մեր CSS ֆայլում: Նշենք, որ այստեղ օգտագործվող արժեքը կամայական է, չնայած որ տվյալ ոճով մենք ձգտում ենք օգտագործել «ձախ» կամ «ճիշտ» արժեքները, կախված նրանից, թե ինչպիսի ձեւով ենք ուզում մեր պատկերն է հավասարեցնել: Մենք գտնում ենք, որ պարզ սինթետիկան լավ աշխատելու եւ հեշտ կլինի ուրիշների համար, ովքեր կարող են ապագայում որոշել կայքի տեղակայել, բայց դուք կարող եք տալ այն ցանկացած դասի արժեք, որը ցանկանում եք:
   2. Այս դասի արժեքը ինքնին ոչինչ չի անի: Պատկերը ինքնաբերաբար չի վերածվում տեքստի ձախ կողմում: Դրա համար մենք հիմա պետք է դիմել մեր CSS ֆայլին:

1. Ձեր ոճաթերթում, այժմ կարող եք ավելացնել հետեւյալ ոճը.
   1. .ձախ {
   2. float: ձախ;
   3. padding: 0 20px 20px 0;
   4. }
   5. Այն, ինչ դուք արել եք, օգտագործում է CSS «float» հատկությունը , որը կստիպի պատկերը նորմալ փաստաթղթային հոսքերից (այն կերպարը, որը սովորաբար ցուցադրվում է տեքստը ներքեւում) եւ այն կկտրի այն իր կոնտեյների ձախ կողմում . Տեքստը, որը բխում է HTML- ի դրոշմումից հետո, այժմ պատված է դրա վրա: Մենք նաեւ ավելացրեցինք մի շարք լրացուցիչ արժեքներ, որպեսզի այս տեքստը ոչ թե ուղղակիորեն դեմ լինի պատկերի դեմ: Փոխարենը, այն կունենա որոշակի լավ հեռավորություն, որը էջի նախագծման տեսանկյունից գրավիչ կլինի: CSS- ի ստեղնաշարում լրացնելու համար մենք ավելացրեցինք 0 արժեք, պատկերի վերեւում եւ ձախ կողմում, իսկ ձախ եւ ներքեւի 20 պիքսել: Հիշեք, որ դուք պետք է ավելացնել որոշ ձախ կողմում աջ կողմը: Ճիշտ գամված պատկերը (որը մենք մի պահ նայում ենք) կունենա լիցք, որը կիրառվում է ձախ կողմում:
2. Եթե ​​դիտեք ձեր վեբ-էջը զննարկիչում, ապա այժմ պետք է տեսնեք, որ ձեր պատկերը գունավոր է էջի ձախ կողմում, եւ տեքստը լավ է շրջապատում: Ահա այսպես ասած մեկ այլ ձեւ է, որ պատկերը «ձախ կողմում է»:

1. Եթե ​​ցանկանում եք փոխել այս կերպարը, որը կցված է աջ կողմում (ինչպես օրինակ, այս հոդվածին կցված լուսանկարների օրինակով), պարզ կլինի: Նախ, դուք պետք է համոզվեք, որ բացի «ձախ» դասի արժեքի համար մենք ավելացրել ենք մեր CSS- ին միայն ոճը, մենք ունենք նաեւ աջ կողմի համար: Դա նման էր:
   1. .ճիշտ {
   2. float: աջ;
   3. padding: 0 0 20px 20px;
   4. }
   5. Դուք կարող եք տեսնել, որ սա գրեթե նույնն է գրված մեր առաջին CSS- ի: Միակ տարբերությունն այն արժեքն է, որը մենք օգտագործում ենք «float» գույքի համար, եւ մենք օգտագործում ենք լրացուցիչ արժեքներ (լրացուցիչ `աջ կողմում մեր պատկերի ձախ կողմում):
2. Վերջապես, ձեր HTML- ում կփոխեք պատկերը դասի արժեքը «ձախից» դեպի «աջ»:
3. Նայեք ձեր էջը հիմա զննարկիչում, եւ ձեր պատկերը պետք է ճիշտ կողմնորոշվի, դրա շուրջ կոշտ փաթաթված տեքստով: Մենք ձգտում ենք ավելացնել այս երկու ոճերը, «ձախ» եւ «ճիշտ» բոլոր մեր ոճաթերթերը, այնպես որ մենք կարող ենք օգտագործել այս տեսողական ոճերը, անհրաժեշտության դեպքում, երբ ստեղծում ենք վեբ էջեր: Այս երկու ոճերը դառնում են գեղեցիկ, կրկնվող առանձնահատկություններ, որոնք մենք կարող ենք դիմել այն ժամանակ, երբ մենք պետք է ոճային պատկերներ ունենանք դրանց շուրջ տեքստերի փաթաթանով:

CSS- ի փոխարեն HTML- ի օգտագործումը (եւ ինչու չպետք է դա անել)

Թեեւ հնարավոր է HTML- ով պատկերի վրա հղկել տեքստը, վեբ ստանդարտները թելադրում են, որ CSS- ն (եւ վերը ներկայացված քայլերը) այն ձեւն է, որպեսզի մենք կարողանանք պահպանել կառուցվածք (HTML) եւ ոճ (CSS): Սա հատկապես կարեւոր է, երբ հաշվի առնեք, որ որոշ սարքերի եւ դասավորությունների համար այդ տեքստը գուցե կարիք չունի շրջանցել շուրջը: Ավելի փոքր էկրանների համար պատասխանատու կայքերի դասավորությունը կարող է պահանջել, որ տեքստը իսկապես ներքեւում պատկերն է, եւ պատկերը տարածվում է էկրանի լրիվ լայնությամբ: Դա հեշտությամբ արվում է լրատվամիջոցների հարցումներով, եթե ձեր ոճերը առանձնացված են ձեր HTML ձեւաչափից: Այսօրվա բազմաբնույթ սարքի աշխարհում, որտեղ պատկերներն ու տեքստը տարբեր տեսք կունենան տարբեր այցելուների եւ տարբեր էկրանների համար, այս բաժանումը կարեւոր է երկարատեւ հաջողության եւ վեբ էջի կառավարման համար: