Часто возникает вопрос, что такое верстка? Простым языком, верстка – это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа. Верстка бывает следующих видов:

  • Книжная
  • Газетно-журнальная
  • Верстка веб-документов

Любое печатное издание является уникальной и индивидуальной продукцией, несущей в себе определенную заложенную идею.

Кроме того, основная задача у каждого из них разная. Есть научная литература, которая помимо актуальной и классической по своему стилю обложки содержит большое количество страниц, испещренных ровными строчками текста.

Такие издания порой даже не содержат каких-либо изображений, так как представляют сами по себе высокую ценность для читателя. А существует отдельная категория коммерческой рекламы. Такие журналы должны привлекать внимание на фоне конкурентов, быть яркими и запоминающимися. Поэтому очень важно подойти к их созданию с особой долей фантазии. При этом не стоит забывать про основной набор правил.

Теперь давайте разберёмся что такое вёрстка веб-страниц. Чтобы лучше понять, что это такое рассмотрим процесс создания сайта. Сначала создают дизайн-макет: рисуют каждую страницу и все его элементы. В итоге получают изображение сайта, но это всего лишь «картинка».

Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.

Методы верстки

При верстке веб-страниц можно выделить два основных метода:

  • Табличная верстка
  • Блочная верстка

Табличная верстка раньше была основной. Преимущество верстки с помощью таблиц заключается в ее простом исполнении и практически одинаковом отображении в разных браузерах. Недостатки – сложная и объемная структура, которая в разы увеличивает количество кода ( по сравнению с блочной). Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру.

На сегодняшний день продолжают верстать сайты табличной версткой, но профессионалы уже давно перешли на более гибкую - блочную. Табличную верстку рекомендуют использовать только для отображения таблиц.

Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов

. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

 

Небольшой пример

Табличная верстка

Шапка
Меню Контент
Подвал

Код блочной верстки

Шапка
Контент
Меню
Подвал

Результат получается одинаковый:

ШАПКА
МЕНЮ КОНТЕНТ
ПОДВАЛ

Даже для самого простого макета уже видна разница в коде, а с увеличением элементов разница будет расти в геометрической прогрессии.

Программы для верстки

Чтобы сверстать простую веб-страницу можно обойтись и обычным блокнотом. Для более сложных проектов не обойтись без специальных html-редакторов. Они подсвечивают код, что значительно упрощает процесс верстки. В профессиональной среде используют следующие программы:

  • Notepad++
  • Macromedia Dreamweaver
  • Microsoft FrontPage
  • CoffeeCup HTML Editor
  • NetBeans
  • Coda

Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор, сверстать страницу сможет даже неопытный пользователь. Но стоит понимать, что визуальный редактор дописывает много лишнего кода ( мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.

Какие проблемы возникают при вёрстке?

Основная проблема при верстке сайтов – не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.

Причина в том, что каждый браузер разрабатывают разные компании и используют различные технологии и правила. Попытки прийти к единому стандарту уже делаются, но до конечного результата еще далеко.

Часто верстке не уделяют должного внимания. С таким подходом можно загубить даже самый креативный дизайн и сложный функционал сайта. Если посетители вашего личного блога это вам простят, то разваливающаяся верстка корпоративного сайта или магазина серьезно отразится на имидже компании. Самое верное решение – доверить работу профессионалам.