Как оформить главную страницу сайта?

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


«Шапка» сайта.


Первое, на что обращает внимание посетитель сайта – это на его «шапку», где расположен логотип и несколько основных разделов.


Чтобы создать «шапку», используют парный тег <div>, который создает что-то наподобие контейнеров. Таким образом, в одном «диве» расположен логотип, в другом категория, в третьем промо и так далее. Чтобы браузер смог увидеть разницу между каждым блоком, нужно указывать еще класс, обозначающий, что за элемент расположен в контейнере. Например, .header.top – класс, указывающий на логотип сайта.


Особенности.


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


Чтобы создать данный раздел, используется <div> с классом .features. Чтобы указать сами особенности, каждую нужно подписывать классом .feature-item. Стоит запомнить, что приставка item обозначает что-то одно. То есть, ее можно использовать при перечислении и других параметров.


Допустим, что особенностью является «Выбор» с подписью «Большой ассортимент». В таком случае внутри «дива» с классом .feature-item «Выбор» нужно обернуть в <h2>, а «Большой ассортимент» в <p>.


Отзывы.


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


Блок с отзывами обозначается классом .reviews. Далее идет заголовок, с помощью которого посетитель сайта понимает, что это именно отзывы, а не что-то другое. Его оборачивают в тег <h2>. Сами же отзывы оборачивают в <div> с классом .reviews-list.


Далее прописываются сами отзывы. Допустим, что вместе с отзывом пишется и местоположение клиента. Тогда каждый отзыв оборачивается в абзац (<p>), местоположение – в парный тег <strong>.


«Подвал» сайта


«Подвал» сайта – это самая нижняя его часть, где обычно расположены контакты, ссылки и прочее. Чтобы его создать используют <div> с классом .page-footer.


«Подвал» сайта разделяют на верхнюю его часть с логотипом, нижнюю на список контактов и центральную с меню. В этот раз программисты не стали задумываться над их названиями и обозначили их footer-top, footer-middle и footer-bottom соответственно.


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

Категория Услуги
Комментарии

К заметке нет комментариев. Вы можете быть первым!

Интересные заметки:

Основные работы при кузовном ремонте автомобиля

Основные работы при кузовном ремонте автомобиля

Кузов – одна из самых трудоемких в плане ремонта частей автомобиля. По нему сразу видно, как владелец относится к своей машине, как часто проводит профилактические работы, как часто попадает в ДТП и т.д. Кузов несет в себе несколько функций. Это, что видят в первую очередь в автомобиле, он отвечает за эстетическую составляющую. Но именно к кузову крепятся все детали механизмов и системы машины.
Комментарии 0
3
В чем преимущества мебели под заказ

В чем преимущества мебели под заказ

Мебель под заказ обладает рядом преимуществ. Огромным плюсом покупки мебели под заказ является то, что цены на готовую мебель, и мебель под заказ идентичны. Разница заключается в индивидуальном подходе при изготовлении элементов мебели. Заказчикам, которые тщательно продумывают все элементы интерьера и дизайна, будет приятно, когда шкаф-купе, кухня или подвесные полочки займут свое место без зазоров и неуместных отступов.
Комментарии 0
3
Двери из стекла для террас загородных домов

Двери из стекла для террас загородных домов

Двери из стекла на террасах загородных домов смотрятся очень красиво. Современное прозрачное полотно устойчиво к механическим нагрузкам и атмосферным осадкам. Полимерные материалы на террасах устанавливаются на участках с высокими сплошными заборами, чтобы не привлекать внимание посторонних прохожих. Принцип действия таких устройств основан на открытии и закрытии дверей посредством перемещения створок по специальным направляющим.
Комментарии 0
5

Сетумерова Катибе

Watsapp: +79780752391

Поделиться заметкой