Как сделать - Веб сайт самостоятельно
Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбуке, планшете и телефоне.
Создать сайт с нуля
Сайт "Проект макета"
Это может быть разумно, чтобы нарисовать макет проекта страницы перед созданием веб-сайта:
Навигационная панель
Боковое содержание
Какой-то текст какой-то текст..
Main Content
Какой-то текст какой-то текст..
Какой-то текст какой-то текст..
Какой-то текст какой-то текст..
Подвал
Первая шаг - базовая 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="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</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;
}
}
/* Адаптивный макет-когда экран меньше 400 пикселей в ширину, сделайте навигационные ссылки стекаются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Совет: Чтобы создать другой вид макета, просто измените ширину flex (но убедитесь, что он добавляет до 100%).
Совет: Вам интересно, как работает правило @media? Подробнее об этом читайте в главе CSS Медиа запросы.
Совет: Чтобы узнать больше о модуле гибкая компоновка коробки, прочитайте нашу главу CSS Flexbox.
Что такое размер коробки?
Вы можете легко создать три плавающие коробки бок о бок. Однако, когда вы добавляете что-то, что увеличивает ширину каждой коробки (например, заполнение или границы), коробка сломается. Свойство box-sizing позволяет нам включить отступ и границу в общую ширину (и высоту) коробки, убедившись, что отступ остается внутри коробки и что он не ломается.
Вы можете прочитать больше о свойстве box-sizing в нашем CSS Размер коробки Учебник.
Подвал
Наконец, мы добавим нижний колонтитул.
<div class="footer">
<h2>Footer</h2>
</div>
И его стиль:
.footer {
padding: 20px; /* Немного отступов */
text-align: center; /* Текст по центру */
background: #ddd; /* Серый фон */
}
Поздравляю! Вы создали адаптивный сайт с нуля.
