Верстка

HTML-верстка — это процесс создания (X)HTML-страниц.

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

Пример блока

Без оформления с использованием CSS результат выглядит следующим образом:

Но стоит добавить нужные стили, и блок примет необходимый нам вид, например так:

.exampleBlock {
     border: solid 1px #777;
     background: #ddd;
     padding: 1em;
     margin: 1em;
     font-size: 1.5em;
     color: blue;
}

Результат:

Это был пример из широко используемого стандарта CSS 2.1.

А теперь шагнем в новые технологии и посмотрим что предлагает нам CSS 3. Как пример, возьмем наш блок со всем оформлением и добавим в него новые свойства CSS 3:

    border-radius: 1em;
    box-shadow: 0 0 1em #888;

Это далеко не все свойства, а лишь небольшая демонстрация. Итак, что получилось:

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

Из примера наглядно видно, что CSS 3 дает гораздо больше возможностей для оформления HTML-страниц, но его использование затрудняется тем, что популярный браузер Internet Explorer до 9-й версии не поддерживает этот стандарт. До сих пор спорным решением остается использование CSS 3, несмотря на то, что суммарная часть пользователей, использующих альтернативные браузеры, значительно превышает часть пользователей IE. Тем не менее, в IE вся информация на странице будет доступна в полном объеме, но при этом, само оформление будет чуть менее красивым (свойства CSS 3 будут проигнорированы).

Важным показателем качества верстки является валидность сверстанных станиц. В теории — валидная страница должна одинакого выглядеть во всех браузерах, на практике — валидность только помогает браузеру чуть быстрее отобразить эту страницу, и еще, что немало важно, положительно влияет на место в поиске Google и Яndex. Мы стараемся придерживаться стандартов и создавать валидную верстку.

На завершающем этапе верстки в дело вступает программирование скриптов Javascript на страницах. С их помощью возможно создавать анимацию элементов и блоков, открытие дополнительных окон прямо на странице, увеличение фотографий, проверку ввода данных в полях форм, отправку AJAX-запросов и еще многое другое. Как правило, для программирования JS-скриптов используются фреймворки (библиотеки функций), значительно облегчающие разработку и дальнейшее наращивание функционала. Самый популярный и удобный JS-фреймворк — jQuery, наша компания использует его в качестве основного, и все проекты создаются с использованием этого фреймворка.