Как создать html макет
Используем полученные из прошлых тем сведения и создадим более менее осмысленный макет самой простейшей веб-страницы. Для начала определим базовую структуру веб-страницы:
- Главная
- Блог
- Форум
- Контакты
- О сайте
- Item1
- Item2
- Item3
В начале идет шапка сайта — блок с header, который содержит заголовок страницы и панель навигации. Далее идет блок wrapper, в котором два сайдбара и блок основного содержимого страницы. Сайдбары условно тоже содержат некоторое содержимое, но главное, что они определены до основного блока. И в самом низу небольшой футер.
В начале веб-страницы определено поключение файла styles.css , который будет стилизовать веб-страницу. Поэтому создадим в одном каталоге с веб-страницей файл styles.css и определим в нем следующее содержимое:
* < box-sizing: border-box; >html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, ul, li < margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; >body < font-family: Verdana, Arial, sans-serif; background-color: #f7f7f7; >#header < background-color: #f4f4f4; >#header h1 < font-size: 24px; text-transform: uppercase; font-weight: bold; padding: 30px 30px 30px 10px; clear: both; >#nav < background-color: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; >#nav li < float: left; list-style: none; >#nav a < display: block; color: black; padding: 10px 25px; text-decoration: none; border-right: 1px solid #ccc; >#nav li:last-child a < border-right: none; >#nav a:hover < font-weight: bold; >#nav:after < content: " "; display: table; clear: both; >.wrapper < background-color: #f7f7f7; >.aside h2 < font-size: 0.95em; margin-top: 15px; >.aside h3 < font-size: 0.85em; margin-top: 10px; >.aside p, .aside li < font-size: .75em; margin-top: 10px; >.aside li < list-style-type: none; >#sidebar1 < float: left; width: 20%; padding: 0 10px 0 20px; >#sidebar2 < float: right; width: 20%; padding: 0 20px 0 10px; >#article < background-color: #fafafa; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin-left: 20%; margin-right: 20%; padding: 15px; width: 60%; >#article:after < clear:both; display:table; content:''; >#article h2 < font-size: 1.3em; margin-bottom:15px; >#article p < line-height: 150%; margin-bottom: 15px; >#footer < border-top: 1px solid #ccc; font-size: .8em; text-align: center; padding: 10px 10px 30px 10px; >#nav ul, #header h1, .wrapper, #footer p < max-width: 1200px; margin: 0 auto; >.wrapper, #nav, #header, #footer
Первые три стиля сбрасывают стилевые настройки по умолчанию для используемых нами элементов, а также устанавливат стиль элемента body.
Следующая пара стилей управляет отображением шапки (хедера) и заголовка страницы:
Следующий набор стилей управляет созданием горизонтальной панели навигации:
#nav < background-color: #eee; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; >#nav li < float: left; list-style: none; >#nav a < display: block; color: black; padding: 10px 25px; text-decoration: none; border-right: 1px solid #ccc; >#nav li:last-child a < border-right: none; >#nav a:hover < font-weight: bold; >#nav:after
Далее идет настройка средней части страницы, в частности, сайдбаров:
.wrapper < background-color: #f7f7f7; >.aside h2 < font-size: 0.95em; margin-top: 15px; >.aside h3 < font-size: 0.85em; margin-top: 10px; >.aside p, .aside li < font-size: .75em; margin-top: 10px; >.aside li < list-style-type: none; >#sidebar1 < float: left; width: 20%; padding: 0 10px 0 20px; >#sidebar2
Стиль класса wrapper позволяет установить фоновый цвет для боковых панелей. Для каждого сайдбара определяется ширина в 20% от ширины страницы. Процентные значения позволят автоматически подстраивать ширину блоков под ширину окна браузера при его расширении или сужении.
Далее следуют стили блока основного содержимого и футера:
#article < background-color: #fafafa; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin-left: 20%; margin-right: 20%; padding: 15px; width: 60%; >#article:after < clear:both; display:table; content:''; >#article h2 < font-size: 1.3em; margin-bottom:15px; >#article p < line-height: 150%; margin-bottom: 15px; >#footer
Поскольку боковые панели имеют ширину в 20% каждая, то для главного блока устанавливается ширина в 60% и отступы справа и слева в 20%.
И в конце идет пара довольно важных стилей:
#nav ul, #header h1, .wrapper, #footer p < max-width: 1200px; margin: 0 auto; >.wrapper, #nav, #header, #footer
В начале для ряда селекторов определяется максимальная ширина в 1200 пикселей. Это значит, что основные элементы страницы не выйдут за пределы 1200 пикселей. А автоматический внешний отступ слева и справа позволит центрировать содержимое элементов. То есть при ширине браузера в 1400 пикселей эти элементы с шириной в 1200 пикселей будут размещаться как бы по середине, а справа и слева будут отступы шириной в (1400-1200)/2 = 100 пикселей.
Второй стиль позволят сделать фиксированную минимальную ширину для ряда элементов. То есть в итоге при сжатии окна браузера сайдбары и основной блок будут выглядеть более менее, а при сжатии окна менее 768 пикселей образуется полоса прокрутки.
Данная модель размеров не идеальна. И далее мы рассмотрим более гибкие и распространенные концепции на основе адаптивной верстки.
В итоге у нас получится следующий простенький макет:
HTML Макеты
Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, в котором проживает более 13 миллионов жителей. Лондон, расположенный на берегу Темзы, был крупным поселением на протяжении двух тысячелетий, его история восходит к моменту основания римлянами, которые назвали его Лондиниум. Footer
HTML Элементы макета
Веб-сайты часто отображают контент в нескольких столбцах (например, журнал или газета). HTML предлагает несколько семантических элементов, которые определяют различные части веб-страницы:
— Определяет контейнер для ссылок навигации
— Определяет раздел в документе
— Определяет независимую автономную статью
— Определяет контент помимо основного контента (например, боковую панель)
— Определяет нижний колонтитул (footer) для документа или раздела
— Определяет дополнительные детали
— Определяет заголовок для элемента
- — Определяет заголовок для документа или раздела
- — Определяет контейнер для ссылок навигации
- — Определяет раздел в документе
- — Определяет независимую автономную статью
- — Определяет контент помимо основного контента (например, боковую панель)
- — Определяет нижний колонтитул (footer) для документа или раздела
- — Определяет дополнительные детали
- — Определяет заголовок для элемента
Подробнее о семантических элементах вы можете прочитать в главе HTML Семантика на нашем сайте W3Schools.
HTML Методы размещения
Существует пять различных способов создания многоколоночных макетов. У каждого способа есть свои плюсы и минусы:
- HTML таблицы (не рекомендуется)
- CSS свойство float (поплавок)
- CSS flexbox (флексбокс)
- CSS framework (фреймворк)
- CSS grid (сетка)
Какой выбрать?
HTML Таблицы
Совет: НЕ ИСПОЛЬЗУЙТЕ таблицы для вашего макета страницы!
CSS фреймворки
Если вы хотите быстро создать макет, вы можете использовать фреймворк, например W3.CSS или Bootstrap.
CSS Float (поплавки)
Распространено делать целые веб-макеты, используя свойство CSS float. Float прост в освоении — вам просто нужно помнить, как работают свойства float и clear. Недостатки: Плавающие элементы привязаны к потоку документов, что может нанести ущерб гибкости. Подробнее о float читайте в разделе CSS Float и Clear.
Float Пример
Города
Лондон
Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, в котором проживает более 13 миллионов жителей.
Лондон, расположенный на берегу Темзы, был крупным поселением на протяжении двух тысячелетий, его история восходит к моменту основания римлянами, которые назвали его Лондиниум.
CSS Flexbox (флексбокс)
Flexbox — новый режим макета в CSS3.
Использование flexbox обеспечивает предсказуемое поведение элементов, когда макет страницы должен соответствовать разным размерам экрана и разным устройствам отображения. Недостатки:. Не работает в IE10 и более ранних версиях.
Узнайте больше о flexbox в разделе CSS Flexbox.
Flexbox Пример
Города
Лондон
Лондон — столица Англии. Это самый густонаселенный город Соединенного Королевства, в котором проживает более 13 миллионов жителей.
Лондон, расположенный на берегу Темзы, был крупным поселением на протяжении двух тысячелетий, его история восходит к моменту основания римлянами, которые назвали его Лондиниум.
CSS Grid. Вид сетки
Модуль CSS Grid Layout предлагает систему макетов на основе сетки со строками и столбцами, что упрощает разработку веб-страниц без использования поплавков и позиционирования.
Недостатки: Не работает ни в IE, ни в Edge 15 и ранее.
Узнайте больше о CSS-сетках в разделе CSS Grid. Вид сетки.