Лабораторная работа 1. Реализация верстки сайта
Цель: научиться
- создавать структуру сайта;
- использовать блочную и семантическую верстку при создании Веб-страниц;
- использовать фреймворк Bootstrap при разработке структуры страниц.
Краткие теоретические сведения
Цветовые схемы
Для подбора цветов могут использоваться следующие сервисы:
- https://colorscheme.ru;
- https://color.adobe.com.
Структура Веб-страницы
<!doctype html>
<html>
<head>
<title>Заголовок страницы</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
Контент
</body>
</html>
Элементы семантической верстки
Семантической называют верстку, использующую для структурирования html-документов теги, которые разделяют код на логические блоки, определяющие их роль и содержание в структуре web-страницы.
Элемент <header>
Тег header в HTML5 определяет верхнюю часть страницы или элемента. Обычно тегами <header> </header> обрамляют шапку страницы сайта.
В шапке страницы сайта чаще всего располагают:
- заголовок (девиз, слоган компании);
- логотип сайта (компании);
- контактную информацию (телефоны, часы работы).
Теги <header> </header> можно использовать несколько раз на странице, например они могут быть использованы как заголовок основной статьи страницы, заголовок шапка повторяющихся элементов сайдбара (например виджеты) и т.д.
Теги header нельзя помещать внутрь тегов footer, address и сам header
Элемент <footer>
Тег <footer> используется для определения нижнего колонтитула страницы (подвал) или элемента.
В тегах <footer> </footer> обычно содержится информация, относящаяся к самому сайту, а не к основному контенту, например: правовая информация (копирайты), имя автора, название сайта и/или компании, телефон и/или адрес компании и т.п. Он не может содержать в себе <header>.
Элемент <section>
Тег <section> определяет раздел страницы, в котором размещается логически связанная информация, как правило, имеющая свой заголовок. Тег <section> может обрамлять повторяющиеся элементы (разделы) на странице сайта.
Каждый раздел может иметь свои собственные теги <header> и <footer>, включающие в себя свои собственные заголовки.
Элемент <nav>
Тег <nav> обозначает основное меню сайта (панель навигации). Обычно тегами <nav> </nav> обрамляют основное меню страницы сайта, которое расположено сразу под шапкой сайта.
Элемент <article>
Тег <article> используется для разделения раздела страницы на логические блоки, блок должен быть связан с общим разделом, но иметь свой собственный смысл и быть отдельной логической единицей страницы.
Элемент <aside>
Тег <aside> обрамляет боковую панель (сайдбар), на странице сайта.
Тегами <aside> </aside> обычно обрамляют блок виджетов на сайте. В качестве виджетов могут выступать: блок категорий, меток, последних записей, последних комментариев, популярных страниц, поисковая строка и т.п.
В старых браузерах новые HTML-теги, используемые для семантической разметки, не поддерживаются должным образом и могут быть отображены в качестве строчных элементов. Для устранения этой проблемы нужно будет явно указать, что они являются блочными элементами:
<style>
section, header, nav, article, aside, footer { display: block; }
</style>
Использование 12-колоночной верстки Bootstrap
Для подключения стилей Bootstrap, описанных в классах, используется атрибут
class= «имя_класса».
Фреймворк работает по принципу 12-ти колонок, которые подстраиваются по размеру в зависимости от разрешения экрана. Это позволяет создавать адаптивные сайты.
Для того, чтобы создать фиксированной ширины контейнер, используйте класс.container. Для того, чтобы контейнер стал «резиновым», используйте класс.container-fluid.
Ширина блока.container меняется в зависимости от разрешения.
Основной блок –.container, в нем должна быть строка –.row, внутри которой есть колонка.col-size-num, где:
1. size – размер монитора:
- xs – Extra Small Devices (<768px),
- sm – Small Devices (768px или более),
- md – Medium Devices (992px или более),
- lg – Large Devices (1200px или более);
2. num – ширина блока, выраженная в количестве колонок.
Для каждого из разрешений монитора, колонки принимают определенную ширину:
- для xs-экрана – ширина колонки автоматическая, т.е. ширина экрана делится на 12 частей;
- для sm-экрана – ширина колонки ~62px;
- для md-экрана – ширина колонки ~81px;
- для lg-экрана – ширина колонки ~97px;
Пример
Основной блок состоит из 2 частей. Одна часть шириной в 8 колонок, вторая – 4.
<div class=" container">
<div class="row">
<div class="content col-lg-8 col-md-8 col-sm-8 col-xs-8">
</div>
<div class="sidebar col-lg-4 col-md-4 col-sm-4 col-xs-4">
</div>
</div>
</div>