Ինչպես ֆոն ավելացնել վեբ կայքին. 14 քայլ (նկարներով)

2024 Հեղինակ: Gilbert Ryder | [email protected]. Վերջին փոփոխված: 2024-01-31 09:02

Ֆոնը վեբ կայքի ամենակարևոր տարրերից մեկն է: Լավ ֆոնը ստեղծում է վեբ կայքի երանգը և լրացնում բովանդակությունը: Կան բազմաթիվ տարբեր եղանակներ `ֆոն ավելացնելու համար, որոնցից յուրաքանչյուրն ունի տարբեր նպատակներ: Որոշ մեթոդներ թույլ են տալիս ֆոնը կիրառել վեբ կայքի բոլոր էջերի վրա, իսկ մյուսները սահմանափակում են միայն որոշակի էջի ֆոնը: Այս հոդվածը սովորեցնում է ձեզ, թե ինչպես ավելացնել ֆոն ձեր վեբ կայքին ՝ օգտագործելով HTML կամ CSS:

Քայլեր

Մեթոդ 1 2 -ից ՝ HTML մեթոդներ

Պինդ գունավոր ֆոն

Ավելացնել նախապատմություն վեբ կայքին Քայլ 1

Քայլ 1. Պինդ գունավոր ֆոնը ֆոնի ամենահիմնական տեսակն է, որը կարող եք տեղադրել կայքում:

Փաստորեն, յուրաքանչյուր կայք սկսվում է լռելյայն սպիտակ ֆոնով: Այնուամենայնիվ, մինչ սպիտակ ֆոնը կարող է լինել շատ խնամված և մաքուր տեսք, երբ օգտագործվում է ներդաշնակ գունային սխեմայով, տարբեր գույնի ֆոնը կարող է նախընտրելի լինել տարբեր թեմաներով:

Վեբ կայքի նախապատմություն ավելացնել Քայլ 2

Քայլ 2. Բացեք ձեր վեբ կոդը (աղբյուրը):

Վեբ կայքի նախապատմություն ավելացնել Քայլ 3

Քայլ 3. Մարմնի պիտակում ավելացրեք bgcolor կոչվող հատկանիշ:

Այժմ, ձեր մարմնի պիտակը պետք է ունենա այս տեսքը-

որտեղ COLORNAME- ը գույնի անունն է: ԳՈLՅՆԱԳՈՅՆԸ կարելի է լրացնել բազմաթիվ տեսակի գույնի ներկայացուցիչներով-

(գույնի անուն)
(վեցանկյուն արժեք)
(RGB արժեքը)

Վեբ կայքի նախապատմություն ավելացնել Քայլ 4

Քայլ 4. RGB- ի և # -ի հետ փորձարկումը կարող է հանգեցնել բազմաթիվ երանգների, բայց դուք կարող եք անցնել առաջին հեշտ ճանապարհը:

Բայց հիշեք, որ անսովոր գույն մուտքագրելը որպես «Ultramarine Blueish Green» կհանգեցնի սպիտակի:

Ֆոնային պատկերի ավելացում

Ֆոնային պատկեր ավելացնելը մի փոքր ավելի բարդ է, քան ամուր գունավոր ֆոնը:

Վեբ կայքի նախապատմություն ավելացնել Քայլ 5

Քայլ 1. Ավելացրեք հետնաշերտի հատկությունը մարմնի պիտակին, որպեսզի այն այսպիսին լինի-

որտեղ ՊԵԿ -ը պատկերի աղբյուրն է ՊԵԿ -ը կարող է լինել նույն թղթապանակում կամ այլ թղթապանակում/վեբ էջում:

(նույն թղթապանակում)
(այլ թղթապանակի ներսում)
(այլ վեբ էջում)

Վեբ կայքի նախապատմություն ավելացնել Քայլ 6

Քայլ 2. Հիշեք, որ մուտքագրեք.gif /-j.webp" />

Մեթոդ 2 2 -ից ՝ CSS մեթոդներ

Պինդ գունավոր ֆոն

Վեբ կայքի նախապատմություն ավելացնել Քայլ 7

Քայլ 1. CSS- ում ամուր գունավոր ֆոն ավելացնելու համար ավելացրեք ոճի հատկանիշ:

Կարող եք նաև ID և դասեր տալ և օգտագործել արտաքին և ներքին ոճաթերթեր:

Վեբ կայքի նախապատմություն ավելացնել Քայլ 8

Քայլ 2. Ձեր մարմնի պիտակը պետք է նման լինի-

որտեղ COLORNAME- ը գույնի, վեցանկյուն արժեքի կամ RGB- ի անունն է (Հիշեք նաև HTML- ում ամուր գունավոր ֆոնի վերջին քայլերը, դրանք նույնպես կիրառելի են այստեղ):

Պատկերի ավելացում

Վեբ կայքի նախապատմություն ավելացնել Քայլ 9

Քայլ 1. Պատկեր ավելացնելու համար ավելացրեք ոճի հատկանիշը մարմնի պիտակին:

Կարող եք նաև ID և դասեր տալ և օգտագործել ինչպես արտաքին, այնպես էլ ներքին ոճաթերթեր:

Վեբ կայքին ավելացրեք նախապատմություն Քայլ 10

Քայլ 2. Ձեր մարմնի պիտակը այժմ պետք է նման լինի-

Վեբ կայքի նախապատմություն ավելացնել Քայլ 11

Քայլ 3. Հիշեք, որ ՊԵԿ -ը աղբյուրն է:

Այն կարող է լինել նույն թղթապանակից, տարբեր թղթապանակից կամ այլ վեբ էջից:

(նույն թղթապանակում)
(այլ թղթապանակի ներսում)
(տարբեր վեբ էջերում):

Վեբ կայքի նախապատմություն ավելացնել Քայլ 12

Քայլ 4. Հիշեք ավելացնել.extensions- ը նույնպես:

Կրկնվող նախշերով նախապատմություն

Վեբ կայքի նախապատմություն ավելացնել Քայլ 13

Քայլ 1. Կրկնվող օրինակի ֆոն ստեղծելու համար ավելացրեք ֆոն, ինչպես ասված է վերը նշված քայլերում:

Ձեր մարմնի պիտակը այժմ պետք է փոխվի-

Որտեղ REPEAT-SETTINGS- ը պարամետրերն են: Կարող են լինել բազմաթիվ կրկնվող կարգավորումներ, օրինակ ՝

(Ֆոնը կկրկնվի ինչպես ուղղահայաց, այնպես էլ հորիզոնական):
(Ֆոնը կկրկնվի հորիզոնական):
(Ֆոնը կկրկնվի ուղղահայաց):

Ֆիքսված պատկերի ֆոն

Վեբ կայքի նախապատմություն ավելացնել Քայլ 14

Քայլ 1. Պատկերի ֆիքսված ֆոնները հիանալի տեսք ունեն և չեն փոխվում ներքև ոլորելիս:

Դրանք կատարելու համար պարզապես անհրաժեշտ է մի քանի պարզ փոփոխություններ կատարել վերը նշված բաժնի ծածկագրին: Կատարեք փոփոխություններ, որպեսզի մարմնի պիտակն այսպիսի տեսք ունենա-