21bd031a52
* fix: imgur to s3 for russian guide without conflict (cherry picked from commit ac90750e36b0dd1fe508c69a2277b75be48e4b95) * fix: remove extra links Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: revert unrelated changes * fix: revert changes
4.0 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Layouts | Макеты |
Макеты
Макеты организуют различные области веб-страницы.
Почти каждую веб-страницу, которую мы видим, можно разделить на поля, которые можно упорядочить в определенном порядке для создания этой веб-страницы. Ниже приведен один из примеров.
Веб-сайты часто отображают контент в нескольких столбцах (например, в журнале или в газете).
И методы компоновки HTML помогают нам помещать необходимую информацию в нужном порядке или дизайне.
Методы реализации макетов
Таблицы HTML
Один из самых простых инструментов для реализации макетов на веб-странице обеспечивается HTML. Но по мере того, как макет становится сложным, таблицы HTML быстро теряют свою простоту из-за увеличения текста разметки.
CSS Float
Если вы хотите создать страницу с двумя столбцами с левой навигационной панелью и центральной областью просмотра контента, ее легко сделать с помощью CSS-поплавков. Просто установите левую навигационную страницу в <div> со свойством style float: left; , и вы получите этот дизайн. Но что, если у вас было 4 столбца в одном разделе? Конечно, можно сделать это с помощью float, но синтаксис HTML, который вы пишете, будет легко понять.
Шаблоны CSS
Здесь появляются CSS-фреймы, такие как Bootstrap и Materialize . Эти структуры обеспечивают функциональность сетки, которая позволяет разделить каждый раздел вашей веб-страницы на 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 - макет
- CodeMentorTeam - методы компоновки для создания сайта