Что такое вёрстка и с чем её едят.

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

• Книжная

• Газетно-журнальная

• Верстка веб-документов

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

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

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

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

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

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

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

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

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

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

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

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

Небольшой пример кода:

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

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr colspan="2"> <td class="header" colspan="2">Шапка</td> </tr> <tr> <td class="content">Контент</td> <td class="sidebar">Меню</td> </tr> <tr colspan="2"> <td class="footer" colspan="2">Подвал</td> </tr> </table>

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

<div id="header">Шапка</div> <div id="wrapper"> <div id="content">Контент</div> <div id="sidebar">Меню</div> </div> <div id="footer">Подвал</div>

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

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

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

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

• Notepad++

• Macromedia Dreamweaver

• Microsoft FrontPage

• CoffeeCup HTML Editor

• NetBeans

• Coda

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

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

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

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

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

#designindesigneвёрстка