Главная / Технологии сайтостроения / КАК ДЕЛАЮТ САЙТЫ / Разработка WEB-интерфейса / Верстка дизайна сайта

САЙТЫ, которые ПРОДАЮТ!
(965) 368 - 44 - 43
info@imho-design.ru

Верстка дизайна сайта

Фактически, работа дизайнера заканчивается на создании графического макета сайта, подобного тем, которые размещены в портфолио, только в высоком разрешении (макет обычно готовится в Adobe Photoshop, Gimp и других графических пакетах). Окончательный макет должен быть утверждён заказчиком, после чего графический файл передаётся верстальщику и создаётся вёрстка дизайна сайта.

Рис. 1. Графический файл дизайна сайта:
Утверждённый дизайн сайта

 

В чём же заключается верстка дизайна сайта?

Верстальщик, исходя из геометрии предложенного дизайна, разрабатывает «сетку сайта» (структуру вложенности таблиц, позволяющую разместить на странице все его элементы) или, если верстка дизайна сайта ведётся «блоками» (div-ами), делит его содержимое на элементы, каждый из которых будет отображаться в определённом блоке.

Рис. 2. Создание «сетки сайта» и «нарезка» его графических элементов:
Нарезка элементов и их размещение в сетке сайта

 

После этого все готовые элементы собираются в файл готового шаблона с помощью языка разметки гипертекстовых документов (HTML). Этот процесс и называется «верстка сайта».

Рис 3. Фрагмент html-кода файла шаблона:
Фрагмент html-кода шаблона сайта

 

Рис 4. Шаблон сайта, готовый к подключению к CMS:
Готовый шаблон сайта

 

После того, как шаблон для сайта свёрстан, он направляется постановщику задач на тестирование.

Тестирование верстки дизайна сайта

Главная задача при тестировании вёрстки — определить, корректно ли отображается шаблон при:

  • разных разрешениях экрана;
  • разных используемых браузерах (Internet Explorer, Mozilla Firefox, Opera и т.д.);
  • разных степенях сжатия страницы документа (разворачивании на весь экран или, наоборот, сжимании, вертикальном или горизонтальном).

Все найденные ошибки должны быть корректно задокументированы (сохранён скриншот, сделано подробное описание условий, при которых можно повторить ошибку) и направлены верстальщику на исправление.

Ясно, что трудоёмкость тестирования верстки дизайна сайта напрямую связана с техническими требованиями к количеству версий браузеров, при использовании которых сайт должен отображаться корректно. В imho принято обязательное тестирование всех выпускаемых сайтов в Internet Explorer, Google Chrome, Opera и Firefox. Однако заказчиком может быть заказано и дополнительное тестирование сайта в любом количестве версий любых браузеров (таких как Safari, Яндекс и пр.).

Готовый, надёжно протестированный шаблон верстки сайта принимается у верстальщика постановщиком задач и направляется в дальнейшее производство по проекту (подключается к CMS сайта).

Типы верстки дизайна сайта

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

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

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

Табличная вёрстка дизайна сайта

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

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

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

JavaScript вёрстка

Технология подобна предыдущей, но выполняется не с помощью таблиц стилей, а с помощью скриптов JavaScript, которые меняют отображаемое на экране содержимое в зависимости от его размера. Этот способ верстки дизайна сайта применяется для придания адаптивности интерактивным web-приложениям и в тех случаях, когда реализовать адаптивное поведение блоков с помощью CSS представляется затруднительным.

Отдельно следует упомянуть, что блочная и табличная вёрстка могут быть реализованы как в статическом варианте (фиксированная верстка), так и гибко изменяемом при растяжении окна браузера (резиновая верстка). При создании адаптивного сайта каждый из его экранов также может быть свёрстан фиксированно или с растяжением. Комбинацию адаптивности и резиновой вёрстки часто называют «отзывчивым дизайном».

Вверх Предыдующий раздел: «Дизайн сайта» >>>
Вниз Следующий раздел: «Программирование сайтов» >>>

 

 

Другие материалы:

 

Устройства и разрешения для адаптивной вёрсткиЛюбой адаптивный дизайн начинается с определения состава устройств, под которые он разрабатывается. Рассмотрим самые популярные размеры экранов мониторов. ноутбуков, планшетов и смартфонов.

подробнее>>>

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

подробнее>>>

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

подробнее>>>

Дизайн с использованием 3-D сценИногда возможностей двухмерных графических пакетов не хватает для решения задач, стоящих перед дизайнером. Когда требуется особенная реалистичность в изображении трёхмерных объектов, дизайнер использует в своей работе 3-d моделирование. Эта технология трудоёмка и достаточно дорога, но в умелых руках позволяет создавать очень красивые и реалистичные композиции.

подробнее>>>

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

подробнее>>>

Дизайн сайтаЧто такое «хороший дизайн сайта»? Это не красивый сайт. Хотя это приветствуется. Это не удобное расположение кнопок. Хотя это строго обязательно. Это не ясная структура меню и понятная навигация. Хотя хороший сайт без этого не жилец.

подробнее>>>