Как сделать сайт
Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах: ПК, ноутбуке, планшете и телефоне.
Создать сайт с нуля
«Черновик макета»
Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:
Панель навигации
Дополнительный контент
Какой-то текст какой-то текст..
Основное содержание
Какой-то текст какой-то текст..
Какой-то текст какой-то текст..
Какой-то текст какой-то текст..
Нижний колонтитул
Первый шаг — базовая HTML-страница
HTML — это стандартный язык разметки для создания веб-сайтов, а CSS — это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать базовую веб-страницу.
Примечание. Если вы не знаете HTML и CSS, мы предлагаем вам начать с чтения нашего руководства по HTML .
Пример
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page 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>My Website</h1>
<p>A website created by me.</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>My Website</h1>
<p>A website
created by me.</p>
</div>
Затем мы используем CSS для оформления заголовка:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.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 для оформления панели навигации:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Содержание
Создайте макет с двумя колонками, разделенными на «дополнительный контент» и «основной контент».
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Мы используем CSS Flexbox для обработки макета:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Затем добавьте медиа-запросы, чтобы сделать макет адаптивным. Это гарантирует, что ваш сайт будет хорошо выглядеть на всех устройствах (настольных компьютерах, ноутбуках, планшетах и телефонах). Измените размер окна браузера, чтобы увидеть результат.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@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 можно прочитать в нашем учебнике по CSS Box Sizing Tutorial .
Нижний колонтитул
Наконец, мы добавим нижний колонтитул.
<div class="footer">
<h2>Footer</h2>
</div>
И стилизуйте его:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Поздравляем! Вы создали адаптивный сайт с нуля.
W3Schools Пространства
Если вы хотите создать свой собственный веб-сайт и разместить файлы .html, попробуйте наш бесплатный конструктор веб-сайтов под названием W3schools Spaces :
