Способи 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 пропонує послуги з верстки сайту . Ми вміємо робити будь-яку з вищеописаних версток, але вважаємо за краще працювати тільки з блочною.