Што такое блочная вёрстка? Як звярстаць простую старонку сайта самастойна?

Ёсць жаданне навучыцца рабіць самастойна старонкі сайтаў? Тады давайце асвоім, што такое блочная вёрстка. Вярстальшчыкі-пачаткоўцы сустракаюць шэраг цяжкасцяў, у іх з'яўляецца мноства пытанняў. Разгледзім, што ўяўляе сабой блочная вёрстка.

важны савет

Ужывайце візуальны рэдактар, каб усё было навочней. Тыя, хто добра ведаюць HTML, працуюць у нататніку, так як ім усё зразумела. А пачаткоўцы могуць скарыстацца такімі праграмамі, як FrontPage або, напрыклад, Dreamweaver.

Віды вёрсткі сайтаў

Ёсць некалькі тыпаў вёрсткі:

1. Таблічная.
2. Блочная.
3. Змяшаная.

Нас цікавіць блочная вёрстка. У чым яе адрозненне ад таблічнай? У вёрсткі блокаў пры дапамозе тэга DIV ёсць пэўныя перавагі:

1. Загрузка пры дызайне блокамі адбываецца хутчэй.
2. Змесціва блокаў адлюстроўваецца (у адрозненне ад табліц) па меры таго, як адбываецца загрузка. Як вядома, дадзеныя табліц з'явяцца толькі пасля адлюстравання ўсёй табліцы.
3. Код з div-амі лягчэй чытаецца.

Гэта не ўсе добрыя якасці, якімі славіцца блочная вёрстка.

Як змяніць размяшчэннем div-блокаў?

У гэтым нам дапаможа float - гэта ўласцівасць, якое здольна прымаць наступныя значэнні:

1. Выраўноўванне па левым краі - left.
2. Для выраўноўвання па правым краі - right.
3. Элемент застаецца там, дзе быў, ён нікуды не перамяшчаецца, калі зададзена none. Дадзенае значэнне будзе па змаўчанні.

Іншая важная ўласцівасць, якое нам спатрэбіцца - clear. У яго можа быць 4 значэння:

1. Для ўстаноўкі элемента пад папярэднім, перамешчаным направа, блокам - right.
2. Left ўсталёўвае элемент ніжэй папярэдняга, які перамешчаны налева.
3. Both - ўстаноўка пад папярэднім перамешчаным блокам.
4. None кажа пра адсутнасць абмежаванняў па становішчы блока адносна тых элементаў, якія перамешчаныя.

прыклад

Разгледзім, як будзе выглядаць блочная вёрстка div. Пішам наш код:

Пад кодам вы бачыце вынік. Такім чынам, на аснове некалькіх уласцівасцяў можна кіраваць размяшчэннем блокаў па сваім жаданні. Пераходзім да наступнага моманту. У нас выкарыстана text-align: center, каб адцэнтраваны кожны блок для любога браўзэра.

Як бачыце, блочная вёрстка сайта робіцца даволі проста. Важна вывучыць і прымяняць на практыцы больш уласцівасцяў, што дазволіць тварыць больш гнуткую структуру старонак.

Яшчэ сёе-тое важнае

Ёсць адно папулярнае ўласцівасць, якое ўжываюць у вёрстцы - position, яго выкарыстоўваюць для пазіцыянавання.

Значэння для ўласцівасці position:

1. Relative - усталёўвае становішча элементаў адносна іх зыходных месцаў. Прымяненне left, top, righ, bottom зрушвае элемент у пэўным кірунку.
2. Static - звычайная адлюстраванне элемента. Няма сэнсу выкарыстоўваць right / left, top / bottom - гэта ні да чаго не прывядзе.
3. Absolute - абсалютная пазіцыянаванне элемента.
4. Fixed - аналагічна absolute. Элемент прывязаны да вызначанай кропкі на экране, але ён не мяняе сваё становішча нават у тым выпадку, калі старонку гартаць.

Многія вярстальшчыкі заўважалі, што пры ўжыванні фіксаванага, абсалютнага або адноснага пазіцыянавання адбываецца накладанне блокаў. І тады цікава ведаць, які з блокаў ніжэй, якой вышэй. Каб адказаць на гэтае пытанне, неабходна ўласцівасць z-index. Яно вывела вёрстку блокамі на якасна новы ўзровень. Гэта дае магчымасць рабіць пазіцыянаванне не толькі на плоскасці, але і пры дапамозе трэцяй восі Z. Значэнне такога ўласцівасці можа быць станоўчым і адмоўным.

Створым 3 блока. Далей паэксперыментуем Абсалютна размешчаны.

Як відаць з прыкладу, нескладана мяняць пазіцыі блокаў. На аснове таго, што вы цяпер ўмееце, любы зробіць элементарную блокавую вёрстку старонкі сайта. А ужываючы больш уласцівасцяў, вы будзеце ўдасканальваць сваё майстэрства.