Спосабы HTML вёрсткі

  1. прамая вёрстка
  2. Таблічная вёрстка
  3. блочная вёрстка
  4. фреймовая вёрстка

Вёрстка - гэта працэс ператварэння графічнага макета карцінкі (звычайна з psd-фармату) у вэб-старонку па пэўных правілах. Іншымі словамі - ператварэнне карцінкі ў спецыяльны код (html-код), выконваючы афармленне, экраннае дазвол і патрабаванні браўзэраў.

У цяперашні час можна вылучыць 4 спосабу вёрсткі вэб-старонак:

  1. прамая вёрстка
  2. фреймовая вёрстка
  3. Таблічная вёрстка
  4. блочная вёрстка

прамая вёрстка

У першы час свайго існавання інтэрнэт быў звычайным наборам дакументаў, якія прадстаўляюць з сябе самы просты набор загалоўкавых элементаў, тэксту, малюнкаў і табліц. Такія дакументы былі ня прывабныя, і па меры павелічэння папулярнасці WWW ўзнікала задача кіравання знешнім выглядам старонкі. Замест загалоўкавых элементаў распрацоўшчыкі пачалі ўжываць паўтлустыя шрыфты, каб стварыць жаданыя візуальныя эфекты на старонцы.

Таблічная вёрстка

На змену прамой вёрстцы прыйшла Таблічная вёрстка, якая ўжываецца і па сённяшні дзень. Пры прамой вёрстцы табліцы ўжываліся па сваім прамым прызначэнні - для адлюстравання таблічных дадзеных (зводныя табліцы, вынікі матчаў, прэйскуранты коштаў, пералікі тавараў). Пры таблічнай вёрстцы табліца памяняла свой прамы сэнс - яна стала падмуркам дызайну - элементы дызайну: лагатып, фонавыя малюнкі, кнопкі, лагатып, асноўны тэкст, меню і астатнія элементы сайта, сталі размяшчацца ў вочках табліцы, ствараючы вонкава скончаную структуру.

прыклад:

1 - паказаны звычайная табліца з вочкамі

2 - структурны від макета, заснаванага на табліцы

3 - з выкарыстаннем мадэлі 2 зробленая старонка сайта (мяжы табліцы з'яўляюцца нябачнымі, што дазваляе выкарыстоўваць табліцу як падмурак старонкі)

Звычайна ў гатовым html-дакуменце адной табліцай усё не заканчваецца. Для стварэння складаных структур даводзіцца пэўным чынам влаживать і іншыя табліцы ў вочкі існых табліц, што прыводзіць да складанасці чытальнасці кода, цяжкасці праўкі і, акрамя таго, павялічваецца аб'ём такой старонак, такую ​​старонку цяжка затым праграмаваць.

Каб прасцей кіраваць знешнім выглядам дакумента (тлустасць слоў, падкрэсліванне, курсіў, выраўноўванне) былі распрацаваны візуальныя рэдактары - WYSISYG інструменты (What You See Is What You Get, «што бачыш, то і атрымаеш»). На жаль, замест таго, каб упростисть сітуацыю візуальныя рэдактары, наадварот, яе ўскладнілі - у дакуменце з'явілася велізарная колькасць залішняй кода, які стала зразумець яшчэ цяжэй. І web-старонка стала настолькі складанай ў разуменні, што ўручную яе рэдагаваць стала практычна немагчыма, каб не разбурыць код WYSISYG. Сітуацыю выратавала якая з'явілася на свет тэхналогія css (Cascading Style Sheets - каскадныя табліцы стыляў), пры якой усе візуальнае афармленне (тлустасць і колер шрыфтоў і інш.) Цяпер знаходзіцца ў вонкавым файле і які падключаецца да html старонцы, г.зн. структура (падмурак) старонкі знаходзіцца ў адным html файле, а візуальнае афармленне ў іншым - css файле. З з'яўленнем css з'явіўся новы блочны спосаб html-вёрсткі.

блочная вёрстка

Пры такой вёрстцы графічныя макеты вярстаюцца з дапамогай прастакутных блокаў (div). Такія блокі на старонцы можна размяшчаць любым чынам. Дадзены спосаб вёрсткі пазбаўлены ўсіх недахопаў таблічнага падыходу. Колькасць кода скарачаецца ў разы, у параўнанні з таблічных спосабам.

Пры таблічным падыходзе блок тэксту апіша так:

Пры таблічным падыходзе блок тэксту апіша так:

Пры блокавай вёрстцы той жа самы блок апісваецца так:

Код старонкі чытаецца лёгка і зразумела (+ выкарыстанне css дазваляе вынесці ўсе афармленне ў вонкавы файл, што прыводзіць да скарачэння і лёгкай понимаемости самага html-кода).

Праграмістам працаваць з такім кодам вельмі прыемна.

Блочны спосаб можа камбінавацца з таблічных - табліцы зноў могуць прымяняцца па сваім прамым прызначэнні, дазваляючы ў зручным выглядзе адлюстроўваць інфармацыю.

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

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

фреймовая вёрстка

Фрэйм (ад англ. Frame - рамка) - гэта асобны, скончаны HTML-дакумент, які разам з іншымі HTML-дакументамі можа быць паказаных ў акне браўзэра.

Фрэймы нагадваюць вочка табліцы. У кожнай такой вочку можа быць выведзены асобны html дакумент і яны з'яўляюцца незалежнымі адзін ад аднаго. Фрэймы зусім па рознаму могуць адлюстроўвацца ў розных браўзэрах, г.зн. прысутнічае момант несумяшчальнасці. Выкарыстоўваць фрэймы ў сучаснай сеткі можна, але не рэкамендуецца. Некаторыя пошукавыя сістэмы і каталогі адмаўляюць у рэгістрацыі такіх сайтаў, дзе выкарыстоўваюцца фрэймы.

рэзюмэ:

- Прамая вёрстка - выкарыстоўвалася ў пачатку пачаў.

- Таблічная вёрстка - грувасткая і няёмкая, але простая ў рэалізацыі.

- блокавыя вёрстка - простая па структуры кода, але мае патрэбу ў пэўных правілах выканання, патрабуе пэўных навыкаў і з'яўляецца самым сучасным спосабам вёрсткі вэб-старонак.

- фреймовую вёрстка - ня реккомендуемый да выкарыстання спосаб.

proverstka.local прапануе паслугі па вёрстцы сайта . Мы ўмеем рабіць любую з вышэйапісаных версток, але аддаем перавагу працаваць толькі з блокавай.