Макеты веб-страниц

Содержание:

Дентис — готовый многостраничный HTML шаблон стоматологического сайта
Добавляем разметку HTML
Русский шаблон MetaSoft — готовый HTML шаблон для компании по разработке ПО
Главные блоки (верх, середина и низ)
Новые элементы макета в HTML5
- Новые элементы разметки в HTML5
- Пример: Макет на основе элементов HTML5
Макеты по ширине
Макеты по колонкам
Платные цифровые телеканалы
CSS Float макет
- ÃÂÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ
CSS Flexbox ÃÂ¼ÃÂ°ÃÂºÃÂµÃÂ
- ÃÂÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ
CSS Grid ÃÂ¼ÃÂ°ÃÂºÃÂµÃÂ
Макеты на основе DIV-элементов
- Пример: Макет на основе DIV-элементов

Дентис — готовый многостраничный HTML шаблон стоматологического сайта

Дентис — готовый к использованию русифицированный шаблон сайта для стоматологической клиники. Это функциональное решение от TemplateMonster, созданно специально для медицинских учреждений.

Шаблон Дентис имеет элегантный и продуманный дизайн, а также цвета и формы, которые максимально упрощают передачу содержимого сайта пользователям.

Эффективный многостраничный HTML5 шаблон Дентис, выполненный в минималистичном стиле, идеально подходит малому или среднему бизнесу. Несмотря на минималистичность, в шаблоне есть всё, что вам может понадобиться. Адаптивный дизайн, интуитивно понятный интерфейс и полностью настраиваемый внешний вид с интеграции с социальными сетями.

Шаблон Дентис был создан с помощью визуального редактора Novi Builder. Он позволяет работать с шаблоном без специальных навыков программирования и веб-разработки.

В комплект шаблона Дентис также входят полностью настраиваемые страницы описания услуг.

Демо Детали

Надеюсь, подборка русских шаблонов сайтов от TemplateMonster вам понравилась. Напомню еще раз, что все эти шаблоны снабжены подробнейшей документацией. И даже если вы никогда не создавали сайты самостоятельно, то легко разберетесь со всем. А встроенный визуальный редактор Novi Builder в любом из шаблонов станет отличным навигатором и помощником в этом деле.

Удачи!

Добавляем разметку HTML

Нумерация страниц в powerpoint

Друзья, говорю, сразу, что будем верстать на HTML5, если Вы новичёк, учитесь сразу этой новой верстке.

Открываем наш текстовый документ index и вставляем в него следующий код:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<meta charset="utf-8" />

<title>Макет</title>

</head>
<body>

<!-- Начало хидер -->
<header class="header">
<div id="headerInner">

</div>
</header><!-- Конец хидер -->

<!-- начало врапер -->

<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">

</div><!-- Конец коллефт -->

<aside id="colRight">

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

<!-- Начало футер -->

<footer id="footer">
<div id="footerInner">

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

</body>
</html>

Теперь давайте подробнее остановимся на коде.

Будущий шаблон у нас будет делиться на три части. Это шапка сайта, середина, и низ сайта.

Шапка сайта

За верх сайта у нас отвечает вот этот код:

<!-- Начало хидер -->
<header class="header">
<div id="headerInner">

</div>
</header><!-- Конец хидер -->

В нашем случае класс «header» это голубая полоска в макете, которая растягивается на всю ширину страницы.

А вот в id=»headerInner» будет входить верхнее и главное нижнее меню, а так же кнопки социальных закладок. Ещё id=»headerInner» имеет ширину в 1200 рх и размещается по середине окна браузера. Далее для него мы зададим соответствующие стили CSS.

Середина сайта

За средний участок отвечает вот этот код:

<!— начало врапер —>

<section id="wrapper">
<div id="middle">
<div id="content">
<div id="colLeft">

</div><!-- Конец коллефт -->

<aside id="colRight">

</aside><!-- Конец колрайт -->

</div><!-- Конец контент -->
</div><!-- Конец мидл -->
</section><!-- Конец врапер -->

id=»wrapper» — это большой средний блок в который будут входить левая и правая сторона сайта. Другими словами с левой стороны у нас будут отображаться последние посты, а с правой виджеты сайдбара.
id=»content» — отвечает за выравнивание левой и правой стороны по верхней части.
id=»colLeft» — левая сторона сайта (Посты)
id=»colRight» — правая сторона (Сайдбар)

Низ сайта

С футером сайта я думаю что всё понятно. В принципе он почти такой же как и верхняя голубая полоса макета.

<!-- Начало футер -->

<footer id="footer">
<div id="footerInner">

</div><!-- Конец футериннер -->
</footer><!-- Конец футер -->

Ну а сейчас начнём наполнять наш код, и начнём мы из шапки.

Русский шаблон MetaSoft — готовый HTML шаблон для компании по разработке ПО

Нумерация страниц в microsoft word

Если вы хотите начать успешный бизнес онлайн, вам нужен хороший сайт. Особенно, когда речь идет о компании по разработке программного обеспечения. Ваш сайт — это лицо компании. Он должен хорошо выглядеть и быть многофункциональным.

Вот почему разработчики TemplateMonster создали многостраничный HTML-шаблон MetaSoft. Шаблон MetaSoft имеет чистый, но привлекательный дизайн. Выполненный в корпоративном стиле, он создает атмосферу доверия.

Кроме того, шаблон MetaSoft содержит множество готовых страниц, и вы можете заполнить их презентациями своих услуг и продуктов. Вы также можете украсить свой сайт различными элементами дизайна и эффектами. Шаблон очень быстро грузится и имеет адаптивный дизайн.

MetaSoft имеет много других полезных функций, таких как: карты Google, рассылка, интеграция с соцсетями и многое другое. Вы можете проверить их все на странице продукта. Так что скачивайте MetaSoft прямо сейчас и добавьте новые возможности в свой бизнес.

Благодаря визуальному конструктору страниц Novi шаблон MetaSoft имеет множество дополнительных функций и огромный набор плагинов. Он позволяет редактировать любую часть дизайна или структуры сайта простым перетаскиванием.

Демо Детали

Главные блоки (верх, середина и низ)

Как сделать разную ориентацию страниц в одном документе word

Теперь вставляем вот этот код стилей CSS, которые отвечают за расположение главных трёх блоков на странице браузера.

/* -------------------------------
Главные блоки
----------------------------------*/

#wrapper {
 margin-top:40px;
 width: 1200px;
 margin: 0 auto;
 height: auto !important;
 }

.header{
 width:100%;
 background: #0dbfe5;
 height:57px;
 z-index: 4;
 }

#headerInner {

 position:relative;
 border:0px solid #333;
 width:1200px;
 height:250px;
 margin:0 auto;
 margin-top:0px;
 }
#content {
 margin-top:40px;
}

#content #colLeft {
 background: #fff;
 float:left;
 width:800px;
 margin-right:0px;
 }

#content #colRight {
 margin-left:45px;
 float:left;
 width:350px;
 position:relative;
}

#middle:after {
 content: '.';
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

Как видите, что id #wrapper (большой средний блок) имеет ширину в 1200рх, а также выравнивается по середине окна браузера с помощью margin: 0 auto;

Класс .header растягивается на 100%. Это наша голубая полоса, о которой я говорил выше, и в которую входят верхнее меню и социальные закладки. #headerInner имеет фиксированную ширину в 1200 рх, точно такая же ширина как и в блоке середины макета. #content будет выравнивать сверху левую и правую сторону сайта.

#colLeft отвечает за блок постов (левая сторона), а #colRight за правую сторону. Оба они имеют выравнивание по левой стороне (float:left;) для того чтобы сайдбар располагался после левой стороны сайта.

Верхнее меню

В коде HTML между тегами <div id=»headerInner»></div> добавляем следующий код, который отвечает за меню:

<nav class="topMenuRight">

 <ul>
 <li><a href="#">Страница 1</a></li>
 <li><a href="#">Страница 2</a></li>
 <li><a href="#">Страница 3</a></li>
 <li><a href="#">Страница 4</a></li>
 </ul>

</nav>

Перед тем как добавить стили к меню нужно из макет PSD вырезать полоску, которая разделяет список:

Новые элементы макета в HTML5

Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов <article>, чем содержимому <header> или <footer>.

Новые элементы разметки в HTML5

Элемент
Значение / описание

<header>
Определение заголовка страницы или раздела.

<nav>
Определение области навигации страницы или раздела.

<section>
Определение логической области страницы или группировка контента.

<article>
Определение статьи (логически завершенного блока контента).

<aside>
Определение вторичного или связанного контента.

<footer>
Определение завершителя страницы или раздела.

<details>
Определяет дополнительные детали.

<summary>
Определяет заголовок для элемента <details>.

Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы:

Пример: Макет на основе элементов HTML5

Результат
HTML-код
Попробуй сам »

Главное меню

HTML Элементы
HTML Атрибуты
HTML Таблицы
…

Основной контент…

HTML Фреймы
HTML JavaScript

Макеты по ширине

Различают пять типов макетов, связанных с шириной:

фиксированные;
резиновые;
эластичные;
адаптивные;
комбинированные.

Фиксированный макет

Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн.

Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис. 5.1).

Рис. 5.1. Фиксированный макет в браузере

Преимущества

Из-за того, что ширина всех колонок известна, проще указывать размеры изображений, видео и других элементов страницы.
Браузеры, как правило, лояльнее относятся к таким макетам, поэтому на вёрстку и отладку уходит меньше времени.

Недостатки

Сайт смотрится плохо на мониторах с высоким разрешением, неэффективно используя свободное место. Некоторые владельцы таких мониторов даже уменьшают окно браузера по ширине, чтобы скрыть пустое место слева и справа от макета.

Резиновый макет

Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.

Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис. 5.2).

Рис. 5.2. Резиновый макет в браузере

Преимущества

Используется вся эффективная область страницы.
Веб-страницы удобно печатаются на бумаге любого формата.
Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.

Недостатки

На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-width. Опять же некоторые владельцы больших мониторов уменьшают окно браузера до комфортных для них размеров.
Резиновые макеты сложнее верстать и отлаживать в разных браузерах.

Эластичный макет

Этот макет по своему виду может не отличаться от фиксированного или резинового макета. До тех пор, пока вы не измените размер шрифта в браузере, тогда вы заметите, что размер поменяли и элементы веб-страницы. Размер элементов задаётся не в пикселах и процентах, а в em, привязанному к размеру шрифта. Значение em можно использовать не для всех элементов, оставляя ширину некоторых фиксированной.

Преимущества

Макет целиком или отдельные его части легко масштабировать, подгоняя под комфортный для восприятия размер.
Макет будет одинаково смотреться на разных операционных системах, имеющих различия в выборе размера и типа шрифта.

Недостатки

В современных браузерах функция масштаба страницы уже встроена, и пользоваться ей довольно удобно.
Верстать эластичный макет крайне сложно, поскольку единица em имеет относительные размеры и зависит от используемого шрифта.
В действительности сфера применения этого макета очень ограниченна.

http://www.csszengarden.com/?cssfile=http://green-beast.com/portfolio/zen/css/zen.css

Адаптивный макет

Этот макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Для этого заготавливается несколько стилевых правил или файлов под разный диапазон разрешений, выбор правил происходит через скрипты или CSS3, которые и определяют нужную для этого информацию о пользователе.

Преимущества

Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них.
Макет комфортно можно смотреть на любом устройстве.

Недостатки

Это самый сложный тип из всех макетов, ведь, по сути, вместо одного требуется сделать несколько макетов со своей графикой и CSS, а также прописать механизм определения разрешения монитора или ширины окна браузера.
За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.

Вид сайта http://www.w3.org показан на рис. 5.3. При уменьшении ширины окна до 500 пикселов и менее, дизайн сайта сменится (рис. 5.4).

Рис. 5.3. Сайт W3C при обычной ширине

Рис. 5.4. Сайт W3C при узкой ширине

Комбинированный макет

Альтернативные названия: гибрид, hybrid (англ.).

Этот макет предполагает использование разной ширины для отдельных частей страницы, например, шапку и подвал делают резиновыми, а контент фиксированным (рис. 5.3).

Рис. 5.5. Комбинированный макет

Этот макет в действительности не является самостоятельным типом, поэтому наследует все плюсы и минусы фиксированного и резинового макета.

Надо отметить, что некоторые макеты, хотя и выглядят комбинированными, в действительности ими не являются. Резиновая шапка страницы может оказаться всего-навсего широким фоновым рисунком.

Макеты по колонкам

Колонки в веб-дизайн пришли из полиграфии, где они используются в качестве способа разбивки широкого текста на более узкие фрагменты, а также для разделения различной информации. На сайтах текст всегда идёт одной колонкой, потому что универсальных способов для создания многоколоночного текста пока не существует. Кроме того, сайт по своей структуре и виду отличается от страницы в журнале, которую можно охватить одним взглядом, это тоже накладывает свои ограничения на распространение многоколоночного текста. Возможно в недалёком будущем сайты, специально «заточенные» под iPad и другие планшеты, станут активно применять колонки по своему прямому назначению. Пока же колонки преимущественно применяются для смыслового деления материала. Например, одна колонка содержит контент, другая навигацию, а третья рекламный баннер и т.д.

Платные цифровые телеканалы

CSS Float макет

О±ÃÂÃÂÃÂ½ÃÂ¾ ÃÂÃÂµÃÂ»ÃÂÃÂµ ÃÂ²ÃÂµÃÂ± ÃÂ¼ÃÂ°ÃÂºÃÂµÃÂÃÂ ÃÂÃÂ¾ÃÂ·ÃÂ´ÃÂ°ÃÂÃÂÃÂÃÂ ÃÂ ÃÂ¿ÃÂ¾ÃÂ¼ÃÂ¾ÃÂÃÂÃÂ ÃÂÃÂ²ÃÂ¾ÃÂ¹ÃÂÃÂÃÂ²ÃÂ° CSS float.
Float ÃÂ»ÃÂµÃÂ³ÃÂºÃÂ¾ ÃÂ¾ÃÂÃÂ²ÃÂ¾ÃÂ¸ÃÂÃÂ — ÃÂ²ÃÂ°ÃÂ¼ ÃÂ¿ÃÂÃÂ¾ÃÂÃÂÃÂ¾ ÃÂ½ÃÂÃÂ¶ÃÂ½ÃÂ¾ ÃÂ·ÃÂ°ÃÂ¿ÃÂ¾ÃÂ¼ÃÂ½ÃÂ¸ÃÂÃÂ, ÃÂºÃÂ°ÃÂº ÃÂÃÂ°ÃÂ±ÃÂ¾ÃÂÃÂ°ÃÂÃÂ ÃÂÃÂ²ÃÂ¾ÃÂ¹ÃÂÃÂÃÂ²ÃÂ° float ÃÂ¸ clear.
ÃÂÃÂµÃÂ´ÃÂ¾ÃÂÃÂÃÂ°ÃÂÃÂºÃÂ¸: ÃÂÃÂ»ÃÂ°ÃÂ²ÃÂ°ÃÂÃÂÃÂ¸ÃÂµ ÃÂÃÂ»ÃÂµÃÂ¼ÃÂµÃÂ½ÃÂÃÂ ÃÂ¿ÃÂÃÂ¸ÃÂ²ÃÂÃÂ·ÃÂ°ÃÂ½ÃÂ ÃÂº ÃÂ´ÃÂ¾ÃÂºÃÂÃÂ¼ÃÂµÃÂ½ÃÂÃÂ¾ÃÂ¾ÃÂ±ÃÂ¾ÃÂÃÂ¾ÃÂÃÂ, ÃÂÃÂÃÂ¾ ÃÂ¼ÃÂ¾ÃÂ¶ÃÂµÃÂ ÃÂ¿ÃÂ¾ÃÂ²ÃÂÃÂµÃÂ´ÃÂ¸ÃÂÃÂ ÃÂ³ÃÂ¸ÃÂ±ÃÂºÃÂ¾ÃÂÃÂÃÂ¸.
ÃÂ£ÃÂ·ÃÂ½ÃÂ°ÃÂ¹ÃÂÃÂµ ÃÂ±ÃÂ¾ÃÂ»ÃÂÃÂÃÂµ ÃÂ¾ float ÃÂ² ÃÂÃÂ°ÃÂ·ÃÂ´ÃÂµÃÂ»ÃÂµ CSS Float ÃÂ¸ Clear.

ÃÂÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ

CSS Flexbox ÃÂ¼ÃÂ°ÃÂºÃÂµÃÂ

Flexbox — ÃÂÃÂÃÂ¾ ÃÂ½ÃÂ¾ÃÂ²ÃÂÃÂ¹ ÃÂÃÂµÃÂ¶ÃÂ¸ÃÂ¼ ÃÂºÃÂ¾ÃÂ¼ÃÂ¿ÃÂ¾ÃÂ½ÃÂ¾ÃÂ²ÃÂºÃÂ¸ ÃÂ² CSS3.

ÃÂÃÂÃÂ¿ÃÂ¾ÃÂ»ÃÂÃÂ·ÃÂ¾ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂµ flexbox ÃÂ³ÃÂ°ÃÂÃÂ°ÃÂ½ÃÂÃÂ¸ÃÂÃÂÃÂµÃÂ, ÃÂÃÂÃÂ¾ ÃÂÃÂ»ÃÂµÃÂ¼ÃÂµÃÂ½ÃÂÃÂ ÃÂ²ÃÂµÃÂ´ÃÂÃÂ ÃÂÃÂµÃÂ±ÃÂ ÃÂ¿ÃÂÃÂµÃÂ´ÃÂÃÂºÃÂ°ÃÂ·ÃÂÃÂµÃÂ¼ÃÂ¾,
ÃÂºÃÂ¾ÃÂ³ÃÂ´ÃÂ° ÃÂ¼ÃÂ°ÃÂºÃÂµÃÂ ÃÂÃÂÃÂÃÂ°ÃÂ½ÃÂ¸ÃÂÃÂ ÃÂ´ÃÂ¾ÃÂ»ÃÂ¶ÃÂµÃÂ½ ÃÂÃÂ¾ÃÂ¾ÃÂÃÂ²ÃÂµÃÂÃÂÃÂÃÂ²ÃÂ¾ÃÂ²ÃÂ°ÃÂÃÂ ÃÂÃÂ°ÃÂ·ÃÂ»ÃÂ¸ÃÂÃÂ½ÃÂÃÂ¼ ÃÂÃÂ°ÃÂ·ÃÂ¼ÃÂµÃÂÃÂ°ÃÂ¼ ÃÂÃÂºÃÂÃÂ°ÃÂ½ÃÂ° ÃÂ¸ ÃÂÃÂ°ÃÂ·ÃÂ»ÃÂ¸ÃÂÃÂ½ÃÂÃÂ¼ ÃÂÃÂÃÂÃÂÃÂ¾ÃÂ¹ÃÂÃÂÃÂ²ÃÂ°ÃÂ¼ ÃÂ¾ÃÂÃÂ¾ÃÂ±ÃÂÃÂ°ÃÂ¶ÃÂµÃÂ½ÃÂ¸ÃÂ.

ÃÂ£ÃÂ·ÃÂ½ÃÂ°ÃÂ¹ÃÂÃÂµ ÃÂ±ÃÂ¾ÃÂ»ÃÂÃÂÃÂµ ÃÂ¾ flexbox ÃÂ² ÃÂÃÂ°ÃÂ·ÃÂ´ÃÂµÃÂ»ÃÂµ CSS Flexbox.

ÃÂÃÂÃÂ¸ÃÂ¼ÃÂµÃÂ

CSS Grid ÃÂ¼ÃÂ°ÃÂºÃÂµÃÂ

ÃÂÃÂ¾ÃÂ´ÃÂÃÂ»ÃÂ CSS Grid ÃÂ¿ÃÂÃÂµÃÂ´ÃÂ»ÃÂ°ÃÂ³ÃÂ°ÃÂµÃÂ ÃÂÃÂµÃÂÃÂ¾ÃÂÃÂ½ÃÂÃÂ ÃÂÃÂ¸ÃÂÃÂÃÂµÃÂ¼ÃÂ ÃÂºÃÂ¾ÃÂ¼ÃÂ¿ÃÂ¾ÃÂ½ÃÂ¾ÃÂ²ÃÂºÃÂ¸ ÃÂÃÂ¾ ÃÂÃÂÃÂÃÂ¾ÃÂºÃÂ°ÃÂ¼ÃÂ¸ ÃÂ¸ ÃÂÃÂÃÂ¾ÃÂ»ÃÂ±ÃÂÃÂ°ÃÂ¼ÃÂ¸, ÃÂÃÂÃÂ¾ ÃÂÃÂ¿ÃÂÃÂ¾ÃÂÃÂ°ÃÂµÃÂ ÃÂ¿ÃÂÃÂ¾ÃÂµÃÂºÃÂÃÂ¸ÃÂÃÂ¾ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂµ ÃÂ²ÃÂµÃÂ± ÃÂÃÂÃÂÃÂ°ÃÂ½ÃÂ¸ÃÂ ÃÂ±ÃÂµÃÂ· ÃÂ¸ÃÂÃÂ¿ÃÂ¾ÃÂ»ÃÂÃÂ·ÃÂ¾ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂ ÃÂ¿ÃÂ¾ÃÂ¿ÃÂ»ÃÂ°ÃÂ²ÃÂºÃÂ¾ÃÂ² ÃÂ¸ ÃÂ¿ÃÂ¾ÃÂ·ÃÂ¸ÃÂÃÂ¸ÃÂ¾ÃÂ½ÃÂ¸ÃÂÃÂ¾ÃÂ²ÃÂ°ÃÂ½ÃÂ¸ÃÂ.

ÃÂ£ÃÂ·ÃÂ½ÃÂ°ÃÂ¹ÃÂÃÂµ ÃÂ±ÃÂ¾ÃÂ»ÃÂÃÂÃÂµ ÃÂ¾ grids ÃÂ² ÃÂÃÂ°ÃÂ·ÃÂ´ÃÂµÃÂ»ÃÂµ CSS Grid.

Макеты на основе DIV-элементов

В течение долгого времени веб-дизайнеры используют элементы <div> для группировки элементов на странице (например, оформирующих шапку сайта, статьи, футер или боковую панель). Таким образом разработчики, как правило, помещают эти основные разделы страницы внутри элементов <div> и используют атрибуты class или id, чтобы указать назначение конкретной части страницы.

Ниже приведена визуализация макета с использованием тегов <div> для группировки элементов на странице: