54 lines
3.9 KiB
Markdown
54 lines
3.9 KiB
Markdown
---
|
||
title: Layouts
|
||
localeTitle: Макеты
|
||
---
|
||
## Макеты
|
||
|
||
Макеты организуют различные области веб-страницы.
|
||
|
||
Почти каждая веб-страница, которую мы видим, можно разделить на поля, которые можно упорядочить в определенном порядке для создания этой веб-страницы. Ниже приведен один из примеров.
|
||
|
||
|
||
|
||
> Веб-сайты часто отображают контент в нескольких столбцах (например, в журнале или в газете).
|
||
|
||
И методы компоновки HTML помогают нам помещать необходимую информацию в нужный заказ или дизайн.
|
||
|
||
### Методы реализации макетов
|
||
|
||
#### Таблицы HTML
|
||
|
||
Один из самых простых инструментов для реализации макетов на веб-странице, это обеспечивается HTML. Но по мере того, как макет становится сложным, таблицы HTML быстро теряют свою легкость из-за увеличения текста разметки.
|
||
|
||
#### CSS Float
|
||
|
||
Если вы хотите создать страницу с двумя столбцами с левой навигационной панелью и центральной областью просмотра контента, ее легко сделать с помощью CSS-поплавков. Просто установите левую навигационную страницу в `<div>` со свойством style `float: left;` , И ты получишь этот дизайн. Но что, если у вас было 4 столбца в одном разделе. Конечно, можно сделать это с помощью float, но синтаксис HTML, который вы написали, будет легко понять.
|
||
|
||
#### Шаблоны CSS
|
||
|
||
Здесь появляются CSS-фреймы, такие как [Bootstrap](http://getbootstrap.com/) и [Materialize](http://materializecss.com/) . Эти структуры обеспечивают функциональность сетки, которая позволяет разделить каждый раздел вашей веб-страницы на 12 столбцов, которые вы можете заказать для проектирования.
|
||
|
||
|
||
|
||
> Пример загрузочной сетки
|
||
|
||
### HTML-семантические элементы
|
||
|
||
Веб-сайты часто отображают контент в нескольких столбцах (например, в журнале или в газете).
|
||
|
||
HTML5 предлагает новые семантические элементы, которые определяют разные части веб-страницы:
|
||
```
|
||
<header> - Defines a header for a document or a section
|
||
<nav> - Defines a container for navigation links
|
||
<section> - Defines a section in a document
|
||
<article> - Defines an independent self-contained article
|
||
<aside> - Defines content aside from the content (like a sidebar)
|
||
<footer> - Defines a footer for a document or a section
|
||
<details> - Defines additional details
|
||
<summary> - Defines a heading for the <details> element
|
||
```
|
||
|
||
#### Дополнительная информация:
|
||
|
||
* [Школы W3 - макет](https://www.w3schools.com/html/html_layout.asp)
|
||
* [CodeMentorTeam](https://www.codementor.io/codementorteam/4-different-html-css-layout-techniques-to-create-a-site-85i9t1x34) - методы компоновки для создания сайта |