Верстка сайта. Что это за процесс?

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

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

Короче говоря, верстка сайта – это процесс формирования веб-страницы по готовому макету. Этот процесс заключает в себе создание кода страницы при помощи понятного браузерам языка размётки гипертекста html, и оформление её с помощью каскадных таблиц стилей (CSS).

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

Кроссбраузерность

На сегодняшний день существует много браузеров, лидеры конечно же среди всех это: Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari. Все они имеют свои версии, и каждая из версий, отображает одну и ту же страницу по разному. Все создатели браузеров стремятся прийти к единому стандарту использования языка гипертекстовой разметки, но пока существуют разногласия, поэтому верстка сайтов должна учитывать кроссбраузерность.

Чистый код

Одно из правило хорошего тона при верстке сайта – это чистый и красивый код.

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

Это значит, что код html разметки страницы должен быть красиво отформатирован, содержать комментарии (там где это нужно). Использование каскадных таблиц стилей(CSS), позволит очистить код от лишних тэгов, и сделать вес сайта в целом значительно меньше. Плюс ко всему, Вам же будет проще форматировать код в дальнейшем!

Ширина макета

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

Существует два варианта макета сайта: сайт с фиксированной шириной и резиновый сайт.

Ширина фиксированного сайта определяется из расчета того, что по статистическим данным большинство пользователей используют мониторы с разрешением 1024х768 пикселей. Следовательно, для того, чтобы избежать появления горизонтальной полосы прокрутки и искажения дизайна, нужно в среднем брать ширину макета примерно 800-990 пикселей.

Недостаток при таком методе верстки – это неэффективное использование свободной площади.

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

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

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

Более удобно и правильно, с точки зрения убеждений о разделении содержания и оформления, верстать сайт при помощи блоков (блочная верстка). Блочная верстка сайтов дает больше возможностей, позволяет сделать код компактнее, и увеличить скорость загрузки веб-страницы. Через CSS свойства слоев настраивать гораздо удобнее. При помощи верстки слоями можно гораздо более эффективно разработать сайт, который будет корректно отображаться в браузерах.

Вывод

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

P.S. Верстка сайтов – дело профессионалов