Что такое макет страницы

Макет страницы — это схема расположения элементов сайта.

Перед созданием сайта разработчики определяют: - где будет шапка - где будет меню - где будет основной текст - где будет подвал

Пример макета: ```id="g83nxt"

MAIN CONTENT


---
# Основные блоки макета

При создании макета страницы обычно используются следующие блоки:

|Блок|Назначение|
|---|---|
|Header|шапка сайта|
|Navigation|меню|
|Main|основной контент|
|Section|раздел страницы|
|Footer|подвал сайта|

---
# Создание каркаса страницы

HTML-код макета:
```html
<!DOCTYPE html>
<html>

<head>
<title>Макет сайта</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<header>
<h1>Мой сайт</h1>
</header>

<nav>
<a href="#">Главная</a>
<a href="#">О нас</a>
<a href="#">Контакты</a>
</nav>

<main>

<section>
<h2>Новости</h2>
<p>Последние новости сайта.</p>
</section>

</main>

<footer>
<p>© 2025 Мой сайт</p>
</footer>

</body>

</html>

Этот код создаёт базовую структуру страницы.

Оформление макета с помощью CSS

CSS можно использовать для оформления и расположения элементов.

Пример:

body {
font-family: Arial;
margin: 0;
}

header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

nav {
background-color: #555;
padding: 10px;
}

nav a {
color: white;
margin-right: 15px;
text-decoration: none;
}

main {
padding: 20px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}

Использование Flexbox для меню

Меню можно выровнять с помощью Flexbox.

CSS:

nav {
display: flex;
justify-content: center;
gap: 20px;
}

Теперь элементы меню будут располагаться в одну строку.

Пример страницы

Страница может выглядеть так: ```id="u7b8ql"

    МОЙ САЙТ

Главная О нас Контакты

Текст страницы


---
# Добавление контентных блоков

На странице можно добавлять дополнительные блоки.

Пример:
```html
<section>

<h2>Статья</h2>

<p>Текст статьи</p>

</section>

Пример нескольких блоков

HTML:

<main>

<section>
<h2>Новости</h2>
<p>Новость 1</p>
</section>

<section>
<h2>Статьи</h2>
<p>Статья 1</p>
</section>

</main>

Что такое макет страницы

HEADER

MENU