Делаем свой сайт html

Технические моменты

Собрав семантику, зарегистрировав домен и выбрав хостинг можно приступать к техническим моментам. Для начала выберем движок сайта.

4.1. Движок

Движок сайта — это программа (скрипт), которая отвечает за функционирование сайта. Фактически является ядром сайта. От него зависит скорость работы сайта, функционал и удобство.

Движков очень много. Каких только не создали уже. Они делятся на платные и бесплатные. Какой лучше использовать — это большая тема для рассуждения. У каждого есть свои плюсы и минусы. Рекомендую прочитать как выбрать движок для сайта, чтобы ориентироваться в этой теме.

Движок сайта зависит от ранее рассмотренных целей. Для каждого вида сайта существуют специализированные движки.

1. Для сайта-визитки и корпоративных сайтов подойдут:
WordPress, Joomla, 1С-Битрикс, UMI.CMS, Wix, uKit, Jimdo

3. Новостной и информационные сайты:
WordPress, Joomla, Drupal

4. Блог
WordPress, DLE

5. Форум
phpBB

4.2. Конструкторы сайтов

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

Конструкторы сильно ограничивают функционал сайта и вносимые изменения со стороны создателя. По сути Вы можете сделать только то, что разрешено. А разрешено не так уж и много. Например, использовать конструкторы для создания сайтов под заработок на рекламе и прочее — бессмысленно.

Как я уже сказал, этот вариант хорошо подойдет только в случае, если от сайта не ждать каких-то результатов.

Бесплатные конструкторы сайта:

Подробный обзор каждого сервиса читайте в статье: обзор бесплатных конструкторов сайтов

4.3. Самостоятельная разработка сайта

Можно воспользоваться обычным блокнотом и уже в нем создать html-сайт. Правда он будет не динамичным и, скорее всего, очень примитивным. Для создания функциональных сайтов обязательно надо разделять исходный код сайта от базы данных.

Самостоятельная разработка движка под силу только профессионалам. Новички могут попробовать написать примитивные движки сайта на php. Однако это будет скорее интерес, чем качественный продукт. Чтобы исправить все «косяки» движка необходимы годы отладки (если мы говорим про функциональный сайт).

Для самостоятельной разработки сайта с нуля потребуются много знаний:

• PHP-уроки
• HTML-уроки и советы
• Уроки CSS
• Как сделать сайт на PHP

4.4. Разработка дизайна

Следующим этапом создания сайта является — разработка дизайна сайта. Есть несколько вариантов как поступить

• Создать самостоятельно. Этот вариант подойдет только для профессионалов. Надо владеть Фотошопом, знаниями HTML и CSS.
• Использовать шаблоны
• Заказать у фрилансеров (биржи и сайты фриланса)

Чем популярнее движок сайта, который Вы выбрали ранее, тем проще под него найти сделать дизайн. Например, под популярные CMS типо WordPress, Joomla, Drupal есть тысячи бесплатных шаблонов, которые можно использовать прямо сейчас. Вряд ли хватит сил пересмотреть их все.

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

4.5. Сайт на https (SSL-сертификат)

Все новые сайты есть смысл создавать только на протоколе https (защищенный), поскольку это стало важно для SEO-оптимизации. Для того, чтобы сайт был с таким протоколом необходимо приобрести SSL-сертификат

Виды сайтов

Теперь давайте разберемся с великим разнообразием сайтов. Их действительно много: от лендинга до портала. В этом разделе мы затронем каждый более-менее известный вид сайта.

Лендинг

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

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

Во-вторых, чтобы одностраничный сайт выдавал хорошую конверсию, нужно грамотно все продумать с разных сторон. Просто склепать сайт как попало и ждать чуда – не имеет смысла.

В-третьих, продвижение лендинга в поиске в нынешних реалиях практически невозможно. Органический поиск может и закинет ваш ресурс в топ, но только по низкочастотным запросам. А это много трафика не принесет, поэтому все одностраничные сайты требуют обязательного рекламного продвижения. Через AdWords и Яндекс Директ.

Вообще лендинг легко можно создать на конструкторе. Их много: Викс, Тильда, WordPress и т. д. Весь процесс создания сводится к перетаскиванию элементов и работе внутри удобного редактора. Создать лендинг можно буквально за пару часов. Все остальное время и силы нужно тратить на рекламу, настройку целей в метриках и продвижение.

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

Сайт-визитка

Визитка – это тот же лендинг. Только представляется не продукт или услуга от компании, а какой-то определенный человек, его портфолио. Почему я выделил это в отдельный вид? Все просто: нормальная визитка представляет собой не одностраничник с кратким пересказом истории деятельности.

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

По сути сайт-визитка – собирательный проект, который может состоять из нескольких модулей.

Блог

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

Блоги могут быть разной тематики и направленности. Сейчас актуальны самые разные варианты: от медицины до криптовалюты.

Более продвинутые версии блогов – информационные порталы, могут содержать в себе другие модули, тем самым расширяя общий функционал всего проекта. Например, помимо информационного модуля (блога) в портале может быть лендинг, визитка, форум или все это вместе.

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

Пример структуры документа сайта на html

В первой строчке документа прописана версия языка html.

Пропишем данный код в Блокноте и сохраним в формате .html.

Затем откроем в любом браузере и если все верно — откроется пустая страница. Затем надо будет определить дизайн сайта: место для шапки, положение меню, где будет располагаться текст.

Я выбрала такой макет: в верхней части сайта – шапка, под ней 4 кнопки, меню – слева и текст – справа.

На языке html таблица определяется тегами <table></table>, а строка в таблице — <tr></tr>, столбцы — <td></td>.

Таблица будет иметь следующий вид:

Где:

8 и 33 — сроки открывают и закрывают таблицу;

14 и 21 — строки открывают и закрывают строку в данной таблице;

15, 16, 17, 18 строки – открывают и закрывают столбец;

22 и 25 строки — открывают и закрывают столбец. При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;

27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.

Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

На каких сайтах можно освоить HTML и CSS?

Ниже представлены бесплатные сайты и справочники, которыми можно пользоваться при самостоятельном изучении HTML и CSS с нуля.

Адрес сайта	Описание сайта
	На курсе изучаются основные теги. Помогает получить представление о верстке и значительно упрощает обучение HTML на старте. Проходит онлайн, можно записываться из любого города.
	Позиционируется, как самый современный справочник по HTML и CSS. На сайте собрано описание всех тегов и атрибутов, свойств таблиц стилей, а также примеров кода и результатов их выполнения (что будет выводиться в браузере).
	На сайте собрана теория и практика по использованию CSS, трюки, хитрости и готовые решения. Сайт можно рекомендовать как новичкам, так и верстальщикам с опытом.
	На сайте находятся бесплатные уроки по HTML5 и CSS, а также справочник CSS. Уроки хорошо структурированы и сопровождаются множеством примеров.
	На сайте есть справочник тегов, а также бесплатные уроки по верстке страниц. Имеется демо-редактор, в котором можно добавлять различные команды и смотреть, как браузер их воспринимает и что поменяется на странице пользователя.
	Один из самых популярных справочников по HTML и CSS. На сайте есть Самоучитель, а также Практикум, которые помогают ускорить обучение и сделать его проще.
	Здесь собрана коллекция статей, уроков и примеров по верстке. Также есть уроки по Bootstrap.
	Простой и понятный самоучитель, который подойдет для самостоятельного изучения HTML 5 и CSS с нуля.
	Бесплатный онлайн-справочник. Будет полезен новичкам, которые хотят изучить основы верстки.
	Онлайн-учебник по HTML и CSS. Много примеров. Подходит новичкам.
	Помогают проверить свои знания по верстке и выявить пробелы. На сайте есть руководства и справочники по HTML и CSS для самостоятельного изучения.
	На сайте собрано множество материалов для сайтостроителей и верстальщиков. Можно найти интересные решения для создания разных эффектов, готовые скрипты и многое другое.
	Сайт консорциума W3C, на котором можно посмотреть актуальные стандарты языка разметки, а также проверить валидность своего кода в специальном Валидаторе.

Устанавливаем ПО

Оптимальный вариант — Notepad. Не знаю, как вам, но мне ещё не удалось найти не уступающий по функционалу аналог. Текстовый редактор поддерживает не один язык программирования и способен открыть более сотни форматов. На этом положительные стороны Ноутпад не заканчиваются:

• предоставляется на бесплатной основе;
• не зависает даже при загруженности плагинами;
• позволяет редактировать несколько файлов одновременно.

Вот так выглядит интерфейс Notepad:

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

Единственным преимуществом можно считать тот факт, что Блокнот установлен на ваш ПК по умолчанию. Вам не придётся искать источник для бесплатного скачивания программы.

Самый отчаянный шаг — воспользоваться Вордом. Мне кажется, он совсем не подходит для создания сайта, но вы всегда можете рискнуть. Впрочем, если не хотите тратить время на авантюры и воспользоваться другими программами, настоятельно советую ознакомиться с теми утилитами для вёрстки, о которых я писал ранее.

Основные термины CSS

В дополнение к терминам HTML есть и несколько основных терминов CSS, с которыми вам нужно будет ознакомиться. Эти термины включают селекторы, свойства и значения. Как и с терминологией HTML, чем больше вы работаете с CSS, тем больше эти термины становятся вашей второй натурой.

Селекторы

При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р>.

В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <p>.

Свойства

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background, color, font-size, height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size, применяемые ко всем элементам <p>.

Значения

Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p> и устанавливаем значение свойства color как orange, а значение свойства font-size как 16 пикселей.

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

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

Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

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

HTML Упражнения

Учебник HTML, также, содержит почти 100 HTML упражнений.

HTML Справочники

В SchoolsW3 вы найдете полные ссылки на HTML элементы,
атрибуты, события, имена цветов, сущности, наборы символов, кодировка URL-адресов,
языковые коды, HTTP-сообщения, поддержка браузера и многое другое:

HTML Элементы
Поддержка Браузера
Атрибуты
Глобальные Атрибуты
Атрибуты Событий
Название Цвета
Холст
Аудио/Видео DOM
Кодировка Символов
URL Кодировка
Коды Языка
Код Стран
HTTP Сообщения
PX в EM Конвертер
Клавишные Комбинации

SchoolsW3′ Онлайн Сертификация

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

Уже выдано более 25 000 сертификатов!

HTML Сертификат документирует ваши знания HTML.

CSS Сертификат документирует ваши знания продвинутого CSS.

JavaScript Сертификат документирует ваши знания JavaScript и HTML DOM.

Python Сертификат документирует ваши знания о Python.

jQuery Сертификат документирует ваши знания о jQuery.

SQL Сертификат документирует ваши знания SQL.

PHP Сертификат документирует ваши знания PHP и MySQL.

XML Сертификат документирует ваши знания XML, XML DOM и XSLT.

Bootstrap Сертификат документирует ваши знания о фреймворке Bootstrap.

Шаг 3. Придумываем название и доменное имя

Как только вы определитесь с именем компании — вам понадобится зарегистрировать  домен. Ключевое: 

• Используйте название компании в домене. Так меньше рисков, что возникнет путаница
• Можно рассматривать сокращения и аббревиатуры. Например, OK.RU.
• Избегайте дефисов и цифр в домене. Они снижают качество восприятия и запоминаемость домена. 
• Не используйте сложных транслитов (например слово «игровой» можно написать как “igrovoj”, “igrovoy” или “igrovoi”) и труднозапоминаемых сочетаний букв. Простота и однозначность лучше всего.
• Проверяйте обязательно не содержит ли доменное имя уже существующий товарный знак, чтобы в дальнейшем избежать доменных споров. Детали темы можно узнать в статье Как зарегистрировать домен и не попасть под суд.
• Избегайте слов с нарочно допущенным ошибками (SABAKOVOD.NET) или дополнительными буквами (WWWKONTAKTE.RU). Такие домены могут наводить на мысль, что ваш сайт мошеннический.

Ещё больше рекомендаций читайте в посте «Как правильно выбрать домен для сайта».

Создание HTML-сайта в блокноте

Чтобы понять, как сделать сайт
html, надо уяснить правила использования разметки гипертекста. Данный формат,
помимо текста содержит теги, позволяющие задавать команды для браузера, который
руководствуясь ими, отображает информацию в определённом виде, например, как заголовок
первого уровня: <h1>…</h1>.

Файл index.html можно делать в программе «Блокнот», но лучше воспользуйтесь бесплатной программой Notepad++, подсвечивающей синтаксис и ошибки языка HTML. Создайте новый файл и сохраните его в формате *.html  Впоследствии его нужно открыть в окне браузера, который и отобразит представленный на веб-странице контент. Надо вставить в этот документ стандартный код:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="main">
<h1>Мой заголовок страницы</h1>
<p>Мой текст.</p>
</div>
</body>
</html>

Теперь осталось подключить «style.css» – файл со стилями, а для этого придётся прописать перед тегом </head>:

<link rel="stylesheet" href="style.css">

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

Панель навигации

Панель навигации содержит список ссылок, помогающих посетителям перемещаться по веб-сайту:

<div class=»navbar»>  <a href=»#»>Link</a>  <a href=»#»>Link</a> 
<a href=»#»>Link</a>  <a href=»#» class=»right»>Link</a></div>

Use CSS to style the navigation bar:

/* Style the top navigation bar */.navbar {   
overflow: hidden; /* Hide overflow */    background-color: #333;
/* Dark background color */}/* Style the navigation bar links */.navbar
a {    float: left; /* Make sure that the links stay
side-by-side */    display: block; /* Change the display to
block, for responsive reasons (see below) */   
color: white; /* White text color */    text-align: center;
/* Center the text */   
padding: 14px 20px; /* Add some padding */    text-decoration: none;
/* Remove underline */}/*
Right-aligned link */.navbar a.right {    float: right;
/* Float a link to the right */
}/*
Change color on hover/mouse-over */.navbar a:hover {   
background-color: #ddd; /* Grey background color */    color: black;
/* Black text color */}

Шаг 6. Пишем текст для сайта

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

• Advego.com
• Text.ru
• Etext.ru
• Turbotext.ru

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

Если вы решили подготовить текст самостоятельно, например, для лендинга, то сначала нужно подумать о структуре вашего сайта — блоках. О чём конкретно вы хотите рассказать на своём сайте? Например: о компании, о методике работы, о тарифах, своих клиентах или ваших преимуществах? В качестве примера — посмотрите шаблоны REG.Site, в каждом из которых уже есть продуманная структура сайта. 

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

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

Если структура готова, переходите к написанию текста

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

• Яркие цепляющие заголовки.
• Лаконичные тексты — максимум конкретики, минимум «воды».
• Чёткие выгоды для клиентов.
• Понятный призыв к действию (кнопки «купить», «подписаться на рассылку», «получить промокод» и так далее).
• Старайтесь использовать меньше оценочных слов как «самый качественный» — предоставьте пользователю факты о вашем продукте или услуге, а он сам решит подходит это ему или нет.
• И обязательно соблюдайте структуру в самом тексте: используйте списки, подзаголовки модулей, выделения — так читателю будет проще ориентироваться в тексте.

В каких-то случаях будет достаточно коротких тезисных описаний, а где-то придётся добавить подробностей. Длина текста, опять же, зависит от ситуации — писать нужно столько, сколько нужно, чтобы читатель нашёл все ответы и сделал покупку осознанно.

Разделы и статьи

Глядя на «Проект макета», мы видим, что следующим шагом является создание статей.

Сначала мы создадим элемент <section> или <div> содержащий информацию о полосе частот:

<section class=»w3-container w3-center»
style=»max-width:600px»>  <h2 class=»w3-wide»>THE
BAND</h2>  <p class=»w3-opacity»><i>Мы любим музыку</i></p></section>

Класс w3-container заботится о стандартном отступе.

Класс w3-center центр содержания.

Класс w3-wide предоставляет более широкий заголовок.

Класс w3-opacity обеспечивает прозрачность текста.

Стиль max-width задает максимальную ширину раздела описания канала.

Затем мы добавим параграф, описывающий группу:

<section class=»w3-container w3-content w3-center»
style=»max-width:600px»>
<p class=»w3-justify»>
Мы создали вымышленный сайт группы. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

Класс w3-justify выравнивает правое и левое поля текста.

Затем создайте элемент <section> или <div> с <article> или <div> о каждом участнике группы:

<section class=»w3-row-padding w3-center w3-light-grey»>  <article class=»w3-third»>   
<p>John</p>    <img src=»img_bandmember.jpg» alt=»Случайное
Имя» style=»width:100%»>  </article>  <article class=»w3-third»>   
<p>Paul</p>    <img src=»img_bandmember.jpg» alt=»Случайное
Имя» style=»width:100%»>  </article>  <article class=»w3-third»>   
<p>Ringo</p>    <img src=»img_bandmember.jpg» alt=»Случайное
Имя» style=»width:100%»>  </article></section>

Почему стоит изучать

Интернет-проект созданный на php отличается от html более удобными настройками. А именно, возможностью автоматизировать процесс создание страницы. Например, достаточно в шапке блога изменить одно слово и все страницы поменяют свой фон. Попробуйте сделать это на html? Нужно будет открыть исходный код каждой страницы и отредактировать его. Это долго и неудобно. Если же вы создали шапку как подключаемый компонент на php, то вам достаточно произвести изменения только в одном файле.

Если вы читаете эту статью, значит решили серьезно заняться веб-программированием. В таком случае без хорошего учебника и обучающего курса не обойтись

Рекомендую обратить внимание на руководство, написанное Дмитрием Котеровым «PHP7». Используйте его как настольную книгу

Она поможет вам в изучении.

Меню

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена ​​боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок