Блог разработчиков

Скелет веб-страницы. Как делать правильно, чтобы потом не стыдно было

14 августа 2014

Для начала стоит определить какие части сайта существуют, или из каких блоков состоит любая веб-страница:

1. header (шапка);
2. content (основной контент);
3. footer (подвал).

Теперь остановимся на каждом и дадим описание.

Header (шапка)

Шапка неотъемлемый элемент веб-страницы, содержащий в себе сводную и короткую информацию о ресурсе на котором находится посетитель. Этот блок самый первый который видит посетитель при старте сайта, поэтому для него очень важно правильная расстановка информации. Что может включать в себя данный блок:

1. Логотип
2. Короткое описание услуг или товара
3. Главное меню - меню в котором отражены все основные пункты, которые могут быть полезны посетителю
4. Контактная информация - телефоны, адреса, ссылка на карту местоположения
5. Слайдер изображений, если это необходимо для более полного представления о чем ваш сайт
6. Модуль входа, если на сайте есть личный кабинет, здесь следует отразить либо форму входа, либо ссылки на саму форму
7. Поиск по сайту, очень удобно для посетителя, если ему некогда "бродить" по вашему веб-сайту с целью найти что-то нужное
8. Дополнительные модули, главное чтобы эти модули не были перегружены лишней информацией, т.к. это может оттолкнуть посетителя

Лучше всего оформить всю информацию содержащуюся в шапке в следующую конструкцию:

<div id="head">
   <div class="header">
      <!-- информация в шапке -->
   </div>
</div>

Content (основной контент)

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

<div id="content">
   <div class="content">
      <!-- информация в контенте -->
   </div>
</div>

Footer (подвал)

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

1. Карта сайта. Очень удобна для посетителей если ресурс имеет множество страниц, ссылки на которые по какой-то причине не удалось разместить в главном меню.
2. Контактная информация
3. Копирайт
4. Форма обратной связи
5. Дополнительные модули, незагружающие лишней информацией

Подвал стоит заключать в данную конструкцию:

<div id="footer">
   <div class="footer">
      <!-- информация в подвале -->
   </div>
</div>