Марат-блог
Услуги по продвижению и разработке сайта
Отправить заявку
Заказать обратный звонок

Спасибо, Ваша заявка принята.

В ближайшее время менеджер свяжется с Вами.

Главная » Инструкции » Bootstrap » Создание сайта визитки (Часть 2)

Создание сайта визитки (Часть 2)

Продолжение урока, на котором рассмотрим процесс создания шапки и навигационного меню для сайта

Создание шапки сайта

"Шапку" сайта создадим с помощью специального элемента <header>...</header>, внутри которого расположим блок с логотипом сайта (<div id="logo">...</div>) и блок с контактной информацией (<div id="contacts">...</div>). Выравнивание блоков "logo" и "contacts" зададим с помощью CSS свойства float. Блок "logo" выравняем по левому краю с помощью задания ему CSS свойства - float:left, а блок "contacts" по правому краю - float:right. В рамках обучения стили будем задавать внутри файла HTML с помощью атрибута style.

 

HTML код блока, в котором размещен логотип сайта

<!-- Блок с уникальным именем logo и стилем, который задаёт выравнивание элемента 
по левому краю -->
<div id="logo" style="float:left"> <!-- Элемент img для вывода изображения, которое имеет имя logo.png и расположено
в папке images -->
<img src="images/logo.png"> </div>

 

HTML код блока с контактной информацией:

<!-- Блок с уникальным именем contacts и стилем, который задаёт выравнивание элемента
по правому краю -->
<div id="contacts" style="float:right;"> <!--Элемент i служит для вывода иконки Awesome с именем fa-mobile --> <i class="fa fa-mobile fa-lg"></i> +7-944-650-1720 | <i class="fa fa-envelope fa-lg"></i> info@business.ru <!--CSS свойство margin-left задает отступ 10px слева от предыдущего элемента--> <!--CSS свойство color задает цвет элементу i--> <i class="fa fa-facebook-square fa-2x" style="margin-left:10px; color: blue;"></i> </div>

 

Также, необходимо задать небольшой отступ сверху для элементов внутри блока <header>...</header>, чтобы они не прилипали к верхней границы окна веб-браузера.

В результате наших действий HTML код "шапки" сайта будет выглядеть следующим образом:

 

<header style="padding-top:5px;">
  <div id="logo" style="float:left">
    <img src="images/logo.png">
  </div>
  <div id="contacts" style="float:right;">
    <i class="fa fa-mobile fa-lg"></i> +7-944-650-1720 |  
    <i class="fa fa-envelope fa-lg"></i> info@business.ru  
    <i class="fa fa-facebook-square fa-2x" style="margin-left:10px; color: blue;"></i>
  </div>
  <div class="clearfix"></div>
</header>

Примечание: Так как блоки "logo" и "contacts" имеют разную высоту, то необходимо создать ещё один блок с классом .clearfix. Данный блок будет расположен внизу под двумя этими блоками, и тем самым является необходимым элементом, для правильного отображения остальных блоков.

Создание навигационного меню

Горизонтальное меню сайта состоит из 4 пунктов ("Главная", "О компании", Наши методы", "Наши проекты") и 1 кнопки с текстом "Бесплатная консультация", расположенной справа. Создание такого навигационного меню можно выполнить с помощью адаптивного компонента bootstrap 3 "navbar". Процесс разработки меню заключается в создании маркированных списков в определенном месте компонента "navbar".

Структура меню сайта:

 

Кнопку создадим с помощью элемента span к которому подключим классы Bootstrap .btn и .btn-danger. А также создадим отступы для её центрирования по вертикали относительно навигационного меню с помощью CSS классов padding-top и padding-bottom.

 

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-menu"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-menu"> <ul class="nav navbar-nav"> <!-- Активный пункт меню "Главная" --> <li class="active"><a href="#">Главная</a></li> <!-- Пункт меню "О компании" --> <li><a href="#main">О компании</a></li> <!-- Пункт меню "Наш метод" --> <li><a href="#method">Наш методы</a></li> <!-- Пункт меню "Наши проекты" --> <li><a href="#work">Наши проекты</a></li> </ul> <!-- Список, выровненный по правому краю --> <ul class="nav navbar-nav navbar-right"> <!-- Пункт меню "Бесплатная консультация" --> <li><a href="#" style="padding-top:8px; padding-bottom:8px;"> <span class="btn btn-danger"><strong>Бесплатная консультация</strong></span></a> </li> </ul> </div> </nav>

 

В результате у нас получился сайт, состоящий пока из 2 блоков: "шапки" сайта и навигационного меню:

 

Изображение сайта, при уменьшении размеров окна браузера с открытым навигационным меню: