Угнежђења сајт: како направити слику у позадини ХТМЛ

Многи почетници веб дизајнери, само да улазите у суштину стварања локација, често се питам како то да урадите ХТМЛ позадинску слику. И ако неки од њих може да се бави овим проблемом, и даље представља проблем у тренутку истезања целу ширину слике на монитору. Истовремено, желео бих да видим су идентично приказан на свим бровсерима сајт, тако да би требало да испуни захтеве унакрсног претраживача. Можете подесити позадину на два начина: помоћу ХТМЛ ознаке и ЦСС стилове. Сваки за себе изабере најбољу опцију. Наравно, ЦСС стила је много једноставније, јер је његова код чува у посебној датотеци и не узима екстра звучника у ознакама главном сајту, али прво да размотримо једноставан начин за инсталирање слику на позадини сајта.

Основни ХТМЛ ознаке да створи позадину

Дакле, идемо на питање како да позадинску слику у хтмл на екрану. Како би изгледала прелепо сајт, морате разумети један прилично важан детаљ: довољно је само да се направи градиент позадину или Паинт Ит солидну боју, али ако треба да убаците слику у позадини, то неће протежу пуну ширину монитора. Слика је првобитно неопходно да покупи или направите свој дизајн са овом екстензијом, у којој ће приказати страницу сајта. Тек када је позадина слика је спреман, превуците га у фолдер под називом «слике». У њој ћемо чувати све машине слике, анимације и друге графичке фајлове. Овај директоријум би требало да се налази у основном директоријуму са свим својим хтмл фајлова. Сада можете прећи на и на коду. Постоји неколико опција за писање кода, којим ће позадина променити слику.

1. Напишите таг атрибут.
2. Кроз ЦСС стила у ХТМЛ коду.
3. Врите ЦСС стилове у посебном фајлу.

Као у ХТМЛ како би позадинску слику, одлучите, али бих желео да кажем неколико речи о томе како би било најоптималније. Први метод је пишући кроз таг атрибут је дуго била застарела. Друга опција се користи врло ретко, јер се испоставило да је много истим кодом. Трећа опција је најчешћи и ефикасна. Ево примера ХТМЛ ознаке:

1. Метод први снимак кроз таг атрибут (тело) у индек.хтм фајл. Чува се у овом облику: (боди бацкгроунд = "ФОЛДЕР_НАМЕ / Название_картинки.рассхирение") (/ тело). То је, ако имамо слику са насловом «Пицтуре» и продужења ЈПГ, па затим и фолдер смо назвали «Слике», онда је унос ХТМЛ код ће изгледати овако: (тело позадина = "Слике / Пицтуре.јпг") ... (/ тело) .
2. Други метод подразумева снимање стил ЦСС, али је написано у истом фајлу са именом индек.хтм. (Тела цласс = "бацкгроунд: урл ( '../ имагес / Пицтуре.јпг')").
3. Трећи метод снимања врши се у два фајла. Документ са именом индек.хтм таг (глава) пише такву линију: (главе) (линк рел = "стилесхеет" типе = "тект / цсс" хреф = "хттп: // сајт / чланак / 193110 /% Д0% 9Ф % Д1% 83% Д1% 82% Д1% 8Ц_% Д0% ЦСС_фаилу ") (/ глава). Фајл под називом стиле.цсс стил већ пишем: Тело {бацкгроунд: урл (имагес / Пицтуре.јпг ')}.

Као у ХТМЛ би позадинску слику, ми разумемо. Сада треба да смислимо како да развуче слику по ширини целог екрана.

Начини да се протегне позадинску слику ширине прозора

Ми представљамо наше екран у облику процента. Испоставило се да ће цела ширина и дужина екрана бити 100% × 100%. Морамо да развуче слику на овој ширини. Додај на слику датотека снимања стиле.цсс линије која ће се простирати слику по целој ширини и дужини монитора. Као што је написано у ЦСС стилом? То је једноставно!

тело

{

урл (слике / Пицтуре.јпг ')

бацкгроунд-сизе: 100%; / * Овај пост је погодан за већину модерних претраживача * /

}

Па смо смислили како да направите позадину слику у ХТМЛ на екрану. Постоји и метод снимања у индек.хтм фајл. Мада ове методе и застарела, али за почетнике је потребно знати и разумети. Таг (глава) (стил) ДИВ {фонт-сизе: поклопац; } (/ Стил) (/ глава), ово рекорд значи да издвоје специјалну јединицу за позадину, која ће бити постављен преко целе ширине прозора. Ми смо сматрали два начина, како направити неку слику као позадину хтмл сајт, тако да је слика протезао на целој ширини екрана у било ком од модерних претраживача.

Како направити фиксну позадину

Ако одлучите да користите слику као позадину будућег веб ресурса, онда само треба да знате како да га поправим, тако да се не протезао у дужину и није покварио естетски изглед. Једноставно помоћу ХТМЛ код да региструјете мали додатак. Потребно је да поднесе стиле.цсс да додате фразу после бацкгроунд: урл (имагес / Пицтуре.јпг ') фикед; или уместо додато после зарез одвојена линији - Положај: фикед. Тако, ваш Тапете ће бити фиксна. Током померање садржаја на сајту, видећете да је текст линије креће, али је позадина остаје на свом месту. Тако сте научили како се то хтмл позадинску слику, на више начина.

Рад са табелама у ХТМЛ

Многи неискусни веб програмери, суочени са столовима и блокова, често не разумеју како да ХТМЛ слика у позадини сто. Као и сви тимови ХТМЛ и ЦСС стилова, веб програмски језик је прилично једноставан. И решење за овај проблем је да напише пар линија кода. Требало би да већ знате да је писање сто редова и колона, односно, како је наведено од стране ознака (тр) и (ТД). Да би позадину табеле у виду слике, потребно је да додате ознаке (табела), (ТР) или (ТД) једноставну фразу са освртом на референтну слику: бацкгроунд = УРЛ слике. За јасноће, дајемо неколико примера.

Табела са сликом уместо позадине: ХТМЛ примери

Нацртајте 2к3 сто и чине га позадина слика чува у фолдеру "Слике": (стони бацкгроунд = "имагес / Пицтуре.јпг") (ср) (ТД) 1 (/ ТД) (ТД) 2 (/ ТД) (ТД) 3) (/ tD) (/ тд) (ру) (tD) 4 (/ tD) (tD) 5 (/ tD) (tD) 6 (/ tD) (/ тд) (/ табела). Дакле, наш сто ће се извући у позадини слике.

Скренем исте величине тањир 2к3, али убаците слику у колонама бројевима 1, 4, 5 и 6. (табела) (ТР) (тд бацкгроунд = "имагес / Пицтуре.јпг") 1 (/ ТД) (тд) 2 (/ тд) (тд) 3 (/ тд) (/ тр) (тр) (тд бацкгроунд = "Слике / Пицтуре.јпг") 4 (/ тд) (тд бацкгроунд = "имагес / Пицтуре.јпг") 5 ( / tD) (тд бацкгроунд = "имагес / Пицтуре.јпг") 6 (/ тд) (/ тр) (/ табле). Након гледања можемо видети да је позадина се појављује само у оним ћелијама у којима смо регистровани, а не цео сто.

Цросс-прегледник компатибилност сајт

Постоји таква ствар као што је унакрсно претраживача компатибилност веб ресурса. То значи да се ваш сајт једнако добро приказан у различитим врстама и верзије претраживача. Требало би да буде ХТМЛ код и ЦСС стилове за прилагођавање неопходну бровсера. Осим тога, у модерној ери паметних телефона, многи веб програмери покушавају да створе сајтове и прилагођен за мобилне уређаје и компјутерску изгледом.