ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

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;
}

Результат:

Footer
Попробуйте сами »

Адаптивный макет веб-сайта

Используя приведенный выше CSS код, мы создали адаптивный макет сайта, который меняется между двумя столбцами и столбцами на всю ширину в зависимости от ширины экрана:

Попробуйте сами »