CSS Макет веб-сайта
Макет веб-страницы и веб-сайта
Что такое дизайн-макет сайта?
Дизайн-макет сайта – это визуальный образ будущего сайта, разработанный с учётом технических возможностей HTML вёрстки. Такой макет является демонстрацией того, как визуально будет выглядеть сайт после вёрстки и наполнения.
Веб-сайт обычно состоит из набора визуально идентичных веб-страниц (либо набора веб-страниц). Поэтому макет веб-сайта - это макет самих веб-страниц, из которых и состоит весь веб-сайт.
Веб-страница обычно состоит из заголовка (header), навигационного меню (nav), контента (основного и дополнительного) и нижнего колонтитула (footer):
Есть множество различных макетов на выбор. Однако приведенная выше структура является одной из наиболее распространенных, и мы подробнее рассмотрим её в этом учебнике.
Header - Заголовок
Заголовок обычно расположен в верхней части веб-страницы (или прямо перед верхним меню навигации). Он часто содержит логотип или название сайта:
Пример
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Результат:
Header
Навбар - панель навигации
Панель навигации (навбар) содержит список ссылок, помогающих посетителям перемещаться по вашему сайту:
Пример
/* Контейнер navbar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Ссылки - изменяющие цвет при наведении мыши */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Результат:
Content - Содержимое
Макет секции из содержимым часто зависит от целевых пользователей. Наиболее распространенный макет - это одна секция (или комбинирование их из нескольких):
- 1-колонка (часто используется для мобильных браузеров)
- 2-колонки (часто используется для планшетов и ноутбуков)
- 3-колонки (используется только для настольных компьютеров)
1-колонка:
2-колонки:
3-колонки:
Мы создадим макет с 3 столбцами (колонками) и изменим его на 1 колонку на меньших экранах:
Пример
/* Создадим три равных колонки, которые плавают рядом друг с другом */
.column {
float: left;
width: 33.33%;
}
/* Очищаем float после колонок */
.row:after {
content: "";
display: table;
clear: both;
}
/* Адаптивный макет - три колонки располагаются друг над другом, а не рядом друг с другом на меньших экранах (шириной 600 пикселей или меньше) */
@media screen and (max-width: 600px) {
.column
{
width: 100%;
}
}
Результат:
Колонка
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Колонка
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Колонка
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Совет: Чтобы создать макет с двумя колонками, измените ширину на 50%. Чтобы создать макет с 4 колонками, используйте 25% и т.д.
Совет: Хотите знать, как работает правило @media? Узнайте больше об этом в разделе CSS Медиа запросы.
Совет: Более современный способ создания колончатых макетов - использовать CSS Flexbox. Однако этот способ не поддерживается в Internet Explorer 10 и более ранних версиях. Если вам требуется поддержка IE6-10, используйте float (как показано выше).
Чтобы узнать больше о модуле Flexible Box Layout (макет гибкого блока), прочитайте раздел о CSS Flexbox на нашем сайте.
Неодинаковые колонки
Основной контент (раздел main) - самая большая и самая важная часть веб-страницы.
На веб-странице могут быть колонки неодинаковой (различной) ширины, поэтому большая часть пространства зарезервирована для основного контента. Дополнительный контент (если он есть) часто используется в качестве альтернативной навигации или для указания информации, относящейся к основному контенту. Измените ширину колонок так, как вам нравится, только помните, что она должна давать в сумме всего 100%:
Пример
.column {
float: left;
}
/* Левая и правая колонки */
.column.side {
width: 25%;
}
/* Колонка посередине */
.column.middle
{
width: 50%;
}
/* Адаптивный макет - три колонки располагаются друг над другом, а не рядом друг с другом. */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Результат:
Боковая сторона
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Основной контент
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Боковая сторона
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Footer - Нижний колонтитул
Нижний колонтитул (footer) находится внизу веб-страницы. Он часто содержит информацию, такую как авторское право и контактная информация:
Пример
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Результат:
Адаптивный макет веб-сайта
Используя приведенный выше CSS код, мы создали адаптивный макет сайта, который меняется между двумя столбцами и столбцами на всю ширину в зависимости от ширины экрана:
