06 Февраль 2015, 3:22

Зачем нужна верстка сайта и что это такое?

HTML верстка – это язык разметки, с помощью которого создаются элементы страницы: абзацы, заголовки, кнопки, изображения и т.д.

html js css

Макет дизайна должен быть создан на языке разметки HTML, для того, чтобы сайт мог корректно отображаться браузерами и работать интерактивно. Результаты работ тестируются на самых известных браузерах, таких как IE, Opera, Chrome, Mozzilla и др.

Верстка макета это один из главных этапов в создании сайта с нуля. Так как она отвечает за скорость загрузки страниц и правильное отображение сайта на различных устройствах.

При верстке сайта, я делаю:

  • табличный, блочный, или смешанный тип верстки;
  • валидный и семантичный код;
  • кроссбраузерность (FF, IE7+, Chrome, Opera, Safari, Safari (Mac));
  • верстку в HTML4, HTML5, CSS3;
  • использую CSS-спрайты, jQuery, JavaScript нестандартные и стандартные шрифты;
  • «резиновую», статичную вёрстку;
  • шаблоны e-mail рассылок;
  • полное соответствие стандартам W3C.

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

Блочная верстка – это способ оформления страниц с использованием тега div. Структура сайта, при таком подходе, в дальнейшем может с легкостью меняться. Из минусов можно выделить – сложность построения сайтов с большим количеством блоков (резиновых сайтов). Из плюсов компактность исходного кода. Типы верстки, которые будут использованы, для своего сайта не зависят от системы управления содержимым и могут применяться как в Joomla, Битрикс, в OpenCart и другие cms. Не всегда использование блочной верстки является предпочтительней к верстке на таблицах, в зависимости от задач, уместней применять ту или иную верстку.

Основными требованиями к правильной верстке сайта являются ширина страниц (фиксированная, под определенное разрешение экрана или резиновая), кроссбраузерная верстка (стабильное отображение страниц сайта во всех браузерах) и компактность html кода (что важно для правильной поисковой оптимизации).

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

Наверх