Узнать, как создать адаптивный сайт, который будет работать на всех устройствах: ПК, ноутбуке, планшете и телефоне.
Создание веб-сайта с нуля
«Черновик макета»
Может быть разумно нарисовать черновик макета дизайна страницы перед созданием веб-сайта:
Навигация bar
С боку
Какой-то текст какой-то текст..
Основное содержимое
Какой-то текст какой-то текст..
Какой-то текст какой-то текст..
Какой-то текст какой-то текст..
Нижний колонтитул
Первый шаг — базовая страница HTML
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль документа HTML. Мы объединим HTML и CSS для создания базовой веб-страницы.
Примечание: если вы не знаете HTML и CSS, мы предлагаем вам начать с прочтения нашего руководства по HTML.
<!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>элемент определяет абзац
Создание содержимого страницы
Внутри элемента <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; /* Измените 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; /* Небольшой отступ */
}
Затем добавьте медиазапросы, чтобы сделать макет адаптивным. Это гарантирует, что ваш сайт будет хорошо выглядеть на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефонах). Измените размер окна браузера, чтобы увидеть результат.
/* Адаптивная верстка — если ширина экрана меньше 700 пикселей, расположите два столбца друг над другом, а не рядом друг с другом */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Адаптивная разметка — если ширина экрана меньше 400 пикселей,
навигационные ссылки должны располагаться друг над другом, а не рядом друг с другом */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Совет: чтобы создать другой вид макета, просто измените ширину гибкого элемента (но убедитесь, что она составляет 100%).
Совет: интересно, как работает правило @media? Подробнее об этом в нашей главе CSS Media Queries.
Совет: чтобы узнать больше о модуле Flexible Box Layout, прочитайте нашу главу CSS Flexbox.
Что такое box-sizing?
Вы можете легко создать три плавающих блока рядом друг с другом. Однако, если вы добавите что-то, что увеличит ширину каждого блока (например, отступ или границы), блок сломается. Свойство box-sizing позволяет нам включать отступ и границу в общую ширину (и высоту) блока, гарантируя, что отступ останется внутри блока и не сломается.
Вы можете прочитать больше о свойстве box-sizing в нашем Учебнике по определению размеров блоков CSS.
Нижний колонтитул
Наконец, мы добавим нижний колонтитул.
<div class="footer">
<h2>Нижний колонтитул</h2>
</div>
И стилизовать его:
.footer {
padding: 20px; /* Некоторый отступ */
text-align: center; /* Центрировать текст*/
background: #ddd;
/* Серый фон */
}
Поздравляем! Вы создали адаптивный веб-сайт с нуля.
Schoolsw3 Облоко
Если вы хотите создать свой собственный веб-сайт и разместить свои файлы .html, попробуйте наш конструктор веб-сайтов, который называется Schoolsw3 Облоко:
