Верстка сайта с нуля

Здесь вы узнаете, как сделать верстку адаптивного веб-сайта, который будет работать на всех устройствах - настольных компьютерах, ноутбуках, планшетах и мобильных телефонах.

Верстка сайта с нуля

Попробовать самому »

Проект верстки

Перед началом создания кода стоит нарисовать макет верстки страницы будущего веб-сайта:

Шапка
Панель навигации
Боковой контент

Некоторый текст некоторый текст..

Основной контент

Некоторый текст некоторый текст..

Некоторый текст некоторый текст..

Некоторый текст некоторый текст..

Подвал

Шаг 1 - Базовая HTML страница

HTML - стандартный язык разметки для создания веб-сайтов, а CSS - язык, описывающий стили HTML документа. Для создания базовой веб-страницы мы будем использовать комбинацию HTML и CSS.

Пример


<!DOCTYPE html>
<html lang="ru">
<head>
<title>Заголовок страницы</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

<h1>Мой веб-сайт</h1>
<p>Веб-сайт создан мной.</p>

</body>
</html>
Попробовать самому »

Объяснение примера:

  • Декларация <!DOCTYPE html> определяет, что это документ HTML5
  • Элемент <html> - корневой элемент HTML страницы
  • Элемент <head> содержит мета информацию о документе
  • Элемент <title> определяет заголовок документа
  • Элемент <meta> должен определять набор символов в кодировке UTF-8
  • Элемент <meta> с атрибутом name="viewport" делает так, чтобы веб-сайт хорошо выглядел на всех устройствах и разрешениях экрана
  • Элемент <style> содержит стили веб-сайта (верстка/дизайн)
  • Элемент <body> содержит видимый контент страницы
  • Элемент <h1> определяет большой заголовок
  • Элемент <p> определяет параграф

Шаг 2 - Создание контента страницы

Внутри элемента <body>, опираясь на наш "Проект верстки", мы будем создавать:

  • Шапку
  • Панель навигации
  • Основной контент
  • Боковой контент
  • Подвал

Шапка

Шапка обычно располагается в самом верху веб-сайта (или же сразу под верхним меню навигации). Часто она содержит логотип или/и название веб-сайта:


<div class="header">
  <h1>Мой веб-сайт</h1>
  <p>Веб-сайт создан мной.</p>
</div>

Затем мы используем CSS, чтобы определить стили шапки:


.header {
  padding: 80px; /* поля */
  text-align: center; /* текст по центру */
  background: #1abc9c; /* зеленый фон */
  color: white; /* белый текст */
}

/* Увеличим размер шрифта у элемента <h1> */
.header h1 {
  font-size: 40px;
}
Попробовать самому »

Панель навигации

Панель навигации содержит список ссылок, которые помогают посетителям перемещаться по разделам вашего веб-сайта:


<div class="navbar">
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#" class="right">Ссылка</a>
</div>

Используем CSS, чтобы определить стили панели навигации:


/* Стили верхней панели навигации */
.navbar {
  overflow: hidden; /* Скрываем полосы прокрутки */
  background-color: #333; /* Темный фон */
}

/* Стили ссылок панели навигации */
.navbar a {
  float: left; /* Определяем, чтобы ссылки выводились рядом друг с другом */
  display: block; /* Переводим их в блоковый статус для адаптивности (см. ниже) */
  color: white; /* Белый текст */
  text-align: center; /* Текст по центру */
  padding: 14px 20px; /* Добавляем поля */
  text-decoration: none; /* Убираем подчеркивание */
}

/* Ссылка, выровненная по правому краю */
.navbar a.right {
  float: right;
}

/* Изменяем цвет ссылки при наведении курсора  */
.navbar a:hover {
  background-color: #ddd; /* Серый фон */
  color: black; /* Черный текст */
}
Попробовать самому »

Контент

Создаем 2-х колоночную раскладку, поделенную на "боковой" и "основной" контент.


<div class="row">
  <div class="side">...</div>
  <div class="main">...</div>
</div>

Чтобы задать расположение элементов раскладки, мы используем CSS Flexbox:


/* Обеспечим корректное исчисление размеров */
* {
  box-sizing: border-box;
}

/* Контейнер колонок */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Создаем две неравные колонки, которые стоят рядом друг с другом */
/* Боковая/левая колонка */
.side {
  flex: 30%; /* Ширина колонки */
  background-color: #f1f1f1; /* Серый фон */
  padding: 20px; /* Поля */
}

/* Основная колонка */
.main {
  flex: 70%; /* Ширина колонки */
  background-color: white; /* Белый фон */
  padding: 20px; /* Поля */
}
Попробовать самому »

Теперь, чтобы сделать нашу раскладку адаптивной, добавим медиа-запросы. Это позволит вашему веб-сайту хорошо выглядеть на всех устройствах (настольных компьютерах, ноутбуках, планшетах и мобильных телефонах). Чтобы увидеть результаты, измените размер окна браузера.


/* Адаптивная раскладка - когда ширина экрана меньше 700px, сделаем,
 чтобы две колонки отображались друг под другом, а не рядом друг с другом */
@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

/* Адаптивная раскладка - когда ширина экрана меньше 400px, сделаем,
 чтобы ссылки навигации отображались друг под другом, а не рядом друг с другом */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}
Попробовать самому »

Подвал

И, наконец, добавим подвал.


<div class="footer">
  <h2>Подвал</h2>
</div>

И определим для него стили:


.footer {
  padding: 20px; /* Поля */
  text-align: center; /* Текст по центру */
  background: #ddd; /* Серый фон */
}
Попробовать самому »

Поздравляем! Вы создали адаптивный веб-сайт с нуля.

Дрожание изображения
Панель навигации