О верстке сайтов
    Выберите бюджет
    200-500 тыс. РУб. ОТ 500 тыс. РУб.

    О верстке сайтов


    Верстка сайта — это HTML-разметка страницы. Верстку делают на основе макетов, нарисованных дизайнером. Существует несколько основных методов верстки: табличная, блочная и адаптивная верстка. Рассмотрим каждый из них.


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

    При такой верстке страница строится из табличных элементов (<table>, <tr>, <td> и т.д.), что задает своеобразную жесткость конструкции. С помощью таблиц довольно просто реализовать кроссбраузерную верстку.

    Способ достаточно прост в использовании, но имеет ряд недостатков:
    — излишняя массивность кода;
    — невысокая скорость обработки браузером;
    — вероятность ошибок в коде из-за множественной вложенности таблиц;
    — необходимость использования «распорок» (прозрачные GIF изображения).
    Кроме того, далеко не все макеты можно сверстать с помощью таблиц.

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


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

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

    Основные преимущества такой верстки:
    — небольшое количество кода;
    — понятная структура кода;
    — высокая скорость обработки браузером;
    — возможность реализации сложных структурных элементов.
    В связке с JavaScript и CSS данный вид верстки позволяет создавать сайты с различными интерактивными элементами.


    Адаптивная верстка

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

    Основные принципы:
    — макет на основе пропорций;
    — «резиновые» изображения, которые меняют свои размеры, подстраиваясь под родительский блок;
    — использование разных стилей для разных разрешений; — отображение того или иного контента в зависимости от разрешения (устройства).

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

    Конечно, такой вид дизайна и верстки требует больше времени для реализации, нежели блочная верстка, но результат стоит ожидания и затраченных усилий ;)


    Использованы материалы: htmlbook.ru.