Nesting կայք: Ինչպես դարձնել ֆոնային նկարը HTML

Շատ novice վեբ դիզայներները, միայն խորանալու էությանը ստեղծման վայրերի, հաճախ զարմանում են, թե ինչպես պետք է անել HTML ֆոնային պատկեր. Եւ եթե նրանցից ոմանք կարող են զբաղվել այս խնդրի, դա դեռ մի խնդիր պահին ձգվող ամբողջ լայնությունը պատկերը մոնիտորի վրա. Միեւնույն ժամանակ, ես կցանկանայի տեսնել կայքը ցուցադրվում նույնությամբ բոլոր բրաուզերների, ուստի այն պետք է կատարել պահանջները խաչաձեւ բրաուզերի. Դուք կարող եք սահմանել է հետին պլան է երկու եղանակներով `օգտագործելով HTML թեգերը եւ CSS ոճեր: Յուրաքանչյուր իր համար ընտրում է լավագույն տարբերակը. Իհարկե, CSS ոճը շատ ավելի հարմար է, քանի որ դրա կոդը միացված է պահվում է առանձին ֆայլը եւ չի վերցնել լրացուցիչ խոսնակների են հիմնական կայքի թեգերը, բայց առաջին հերթին քննենք մի պարզ մեթոդ տեղադրելու պատկերը ֆոնի վրա կայքում.

Հիմնական HTML թեգերը է ստեղծել ֆոն

Այնպես որ, մենք գնում ենք այն հարցին, թե ինչպես պետք է անել, ապա հետին պլանի պատկերը է HTML էկրանի վրա: Որպեսզի նայում գեղեցիկ կայքը, դուք պետք է հասկանալ, թե մեկ, այլ ոչ կարեւոր մանրուք: դա բավական է միայն կատարել գրադիենտ ֆոն կամ նկարել այն միագույն, բայց, եթե դուք պետք է տեղադրեք հետին պլանի պատկերը, ապա դա չի ձգում է լիարժեք լայնությունը մոնիտորի վրա. Որ պատկերը սկզբանե անհրաժեշտ է վերցնել, կամ կատարել ձեր սեփական դիզայնի այս երկարաձգման, որը դուք կարող եք ցուցադրվող էջը կայքում: Միայն այն ժամանակ, երբ հետին պլանի պատկերը պատրաստ է, քաշել այն մի թղթապանակ անունով «Նկարներ»: Իսկ դրա համար, մենք պետք է պահել բոլոր օգտագործված պատկերները, անիմացիաներ եւ այլ գրաֆիկական ֆայլեր. Այս թղթապանակը պետք է տեղակայված լինի արմատային դիրեկտորիայում ձեր բոլոր html ֆայլերը. Այժմ դուք կարող եք տեղափոխել, եւ օրենսգրքի: Կան մի քանի տարբերակներ համար գրելու կոդը, ըստ որի կփոխվի ֆոնային նկարը.

1. Գրել tag հատկանիշը:
2. Միջոցով CSS ոճով HTML կոդը.
3. Գրել CSS ոճեր առանձին ֆայլում:

Քանի որ HTML դարձնել հետին պլանի պատկերը, դուք որոշեք, բայց ես կուզենայի մի քանի խոսք ասել, թե ինչպես դա կլինի առավել օպտիմալ: Առաջին մեթոդը, ըստ գրավոր միջոցով tag հատկանիշի վաղուց արդեն հնացած: Երկրորդ տարբերակը, օգտագործվում է շատ հազվադեպ, քանի որ ստացվում է, որ շատ է նույն օրենսգրքի: Երրորդ տարբերակ է առավել տարածված եւ արդյունավետ: Այստեղ օրինակներ են HTML թեգերը:

1. Առաջին ձայնագրությունը մեթոդը միջոցով tag հատկանիշի (մարմին) index.htm ֆայլը. Այն պահվում է այս ձեւով: (մարմնի ֆոնի = "պանակը / Nazvanie_kartinki.rasshirenie») (/ մարմին): Այսինքն, եթե մենք ունենք մի պատկեր է կոչում «Նկար» եւ երկարացման JPG, եւ թղթապանակում մենք անունով «Նկարներ», ապա HTML կոդ մուտքն նման այս խմբին: (մարմինը ֆոն = "Images / Picture.jpg») ... (/ մարմին) ,
2. Երկրորդ մեթոդը ներառում արձանագրելով CSS ոճը, բայց դա գրված է նույն ֆայլը անվան հետ index.htm: (Body style = "ֆոն: URL (« ../ Images / Picture.jpg ') »):
3. Երրորդ մեթոդը ձայնագրության կատարվում է երկու ֆայլեր. Փաստաթուղթը, ինչպես նաեւ անունը index.htm թեգով (ղեկավար), որը գրված է այնպիսի գիծ `(ղեկավար) (հղում rel =" stylesheet "type =" text / CSS «href =" http: // site / հոդված / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ») (/ ղեկավար): A ֆայլ կոչվում style.css ոճը արդեն գրել: մարմին {ֆոնային: URL (Images / Picture.jpg ')}:

, Քանի որ HTML դարձնել հետին պլանի պատկերը, մենք հասկանում ենք: Այժմ դուք պետք է պարզել, թե ինչպես պետք է ձգվել, որ պատկերը ամբողջ լայնությամբ ողջ էկրանի.

Եղանակներ ձգվել ֆոնային պատկեր լայնությամբ պատուհանից

Մենք ներկայացնում ենք մեր էկրանի ձեւով տոկոսային. Ստացվում է, որ ամբողջ լայնությունը եւ երկարությունը էկրանի կլինի 100% × 100%: Մենք պետք է ձգվել, որ պատկերը այս լայնությամբ. Ավելացնել պատկերի ֆայլի ձայնագրությունը style.css գծի, որը ձգվել, որ պատկերը ամբողջ լայնությամբ եւ երկարության մոնիտորի վրա. Քանի որ գրուած է CSS ոճով. Դա պարզ է!

մարմին

{

ֆոն: URL (Images / Picture.jpg ')

ֆոն-size: 100%; / * Այս հաղորդագրությունը հարմար է ժամանակակից բրաուզերների համար * /

}

Այնպես որ, մենք նախշավոր, թե ինչպես կարելի է կատարել նկարներով ֆոն html էկրանի վրա: Կա նաեւ մի մեթոդ արձանագրելով է index.htm ֆայլը. Թեեւ այս մեթոդի եւ հնացած, բայց սկսնակների համար դա անհրաժեշտ է իմանալ եւ հասկանալ. Պիտակների (ղեկավար) (ոճը) div {ֆոն-size: կազմ; } (/ Style) (/ ղեկավար), դա ռեկորդային նշանակում է, որ մենք հատկացնել հատուկ ստորաբաժանում է ֆոնի վրա, որը կարող է դիրքերում ամբողջ լայնությամբ պատուհանից: Մենք պետք է երկու ուղիները, թե ինչպես է ֆոնային նկարը html կայքը, այնպես որ պատկերը ձգվել է ամբողջ լայնությամբ էկրանի ցանկացած ժամանակակից բրաուզերների.

Ինչպես կատարել մի ֆիքսված ֆոն

Եթե դուք որոշեք օգտագործել պատկերը որպես հետին պլան ապագա վեբ ռեսուրսի, ապա դուք պարզապես անհրաժեշտ է իմանալ, թե ինչպես պետք է անել, դա ամրագրված, այնպես, որ այն չի ձգվում է երկարություն եւ չի փչացնել գեղագիտական տեսքը: Պարզապես օգտագործելով HTML կոդը գրանցել մի փոքր լրացում: Դուք պետք է դիմել style.css է ավելացնել մի արտահայտություն, հետո ֆոնին: URL (Images / Picture.jpg ') ամրագրված; կամ դրա փոխարեն ավելացրել է այն բանից հետո, ստորակետ առանձին տողով - պաշտոնում: ֆիքսված. Այսպիսով, ձեր Պաստառը պետք է ամրագրվի. Ընթացքում գույն, բովանդակությունը կայքում, Դուք կարող եք տեսնել, որ տեքստը գծեր են շարժվում, բայց հիմքը մնում է տեղում. Այսպիսով, դուք սովորել, թե ինչպես պետք է անել html ֆոնային պատկեր, մի քանի ձեւերով.

Հետ աշխատելու սեղանների HTML

Շատ անփորձ վեբ մշակողները, կանգնած սեղանների եւ բլոկների, հաճախ չեն հասկանում, թե ինչպես պետք է անել, HTML պատկերի ֆոնի սեղան. Ինչպես բոլոր թիմերը HTML եւ CSS ոճերի, վեբ ծրագրավորման լեզու, բավականին պարզ է. Եւ որ լուծում է այս խնդիրը պետք է գրել մի զույգ գծերի կոդ: Դուք պետք է իմանա, որ գրել աղյուսակը շարքերում ու սյուները, համապատասխանաբար, ինչպես նշված է թեգերը (tr) եւ (TD): Կատարել ֆոնը սեղանի ձեւով պատկերի վրա, որ անհրաժեշտ է ավելացնել թեգով (սեղանի), (tr) կամ (TD) մի բառակապակցության հետ, հղում անելով էտալոնային պատկերով: ֆոնին = URL պատկերներով. Պարզության համար, մենք տալիս ենք մի քանի օրինակներով:

Աղյուսակ մի նկարի փոխարեն ֆոնին: HTML օրինակները

Ոչ ոքի մի 2x3 սեղան, եւ դարձնել այն հետին պլանի պատկերը պահվում թղթապանակի "Images": (սեղանի ֆոնի = "images / Picture.jpg») (tr) (TD) 1 (/ td) (TD) 2 (/ td) (TD) 3) (/ td) (/ tr) (tr) (TD) 4 (/ td) (TD) 5 (/ td) (TD) 6 (/ td) (/ tr) (/ սեղան): Այնպես որ, մեր սեղանը կկազմվի է ֆոնին պատկերված.

Այժմ հրավիրել նույն ափսե չափերի 2x3, բայց մտցրեք նկարը սյուների համարակալման 1, 4, 5 եւ 6 (սեղանի) (tr) (TD ֆոն = "Images / Picture.jpg») 1 (/ td) (TD) 2 (/ td) (TD) 3 (/ td) (/ tr) (tr) (TD ֆոն = "Images / Picture.jpg»): 4 (/ td) (TD ֆոն = "Images / Picture.jpg») 5 ( / td) (TD ֆոն = "Images / Picture.jpg») 6 (/ TD) (/ tr) (/ սեղան): Դիտումից հետո մենք կարող ենք տեսնել, որ ֆոն հայտնվում է միայն այն բջիջները, որը մենք գրանցված, եւ ոչ թե ամբողջ աղյուսակը:

Cross-բրաուզերը համատեղելիություն Կայքի

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