HTML верстка

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

Как выглядит верстка?

  1. Берется макет дизайна, например, в формате PSD, где каждый элемент — это определенный текстовый или графический слой;
  2. При просмотре макета принимается решение о том, какая должна быть верстка и по какой модульной сетке;
  3. По необходимости графические объекты макета «нарезаются» на кусочки и/или спрайты, которые в дальнейшем связываются с помощью CSS в отдельные элементы и блоки;
  4. Подготавливается индивидуальных HTML каркас (либо за ранее приготовленный типовой);
  5. HTML код выстраивается в размеченные области в соответствии тому, как это представлено в макете дизайна.

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

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

  1. Верстка должна быть блочной. Блочная верстка создается благодаря семантическим html-конструкциям, где каждый элемент соответствует своему предназначению.
  2. Верстка должна иметь семантический корректный код. Сверстанная страница должна сохранять свою функциональность и логичность без использования каскадных таблиц стилей (CSS).
  3. Сверстанная страница должна соответствовать рекомендациям W3C и успешно проходить валидацию, как HTML/XHTML, так и CSS в строгой спецификации, за исключением необходимости использования проприетарных свойств.
  4. Сверстанные страницы должны одинаково отображаться во всех браузерах актуальных версий (Internet Explorer, Mozilla FireFox, Opera, Google Chrome, Safari) и на всех платформах (Windows, Linux, Mac OS, BSD), в том числе на мобильных устройствах.
  5. Сверстанные страницы и графика, находящаяся в них, а так же подключенные стили оформления и динамические приложения должны быть правильно оптимизированы.

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

Одним из преимуществ работы с нами является применение новых технологий в разработке сайта:

  • jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
    // http://ru.wikipedia.org/wiki/JQuery
  • HTML5 — новая версия основного языка разметки html страниц.
  • CSS3.

Услуги DivMotive

Свежие проекты