Создание сайта визитки (Часть 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 блоков: "шапки" сайта и навигационного меню:

Сайт с навигационным меню

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

Сайт с навигационным меню



   Bootstrap 0    8852 0

Комментарии (7)

  1. Владислав # 0
    Всем привет! Кто знает почему может не работать Toggle переключатель??
    1. Александр Мальцев # 0
      Здравствуйте.
      Для работы переключателя необходим файл bootstrap.min.js. А для работы bootstrap.min.js необходима библиотека jQuery. Что-то из этих файлов у Вас не подключено или подключено неправильно.
      Наиболее простой способ проверить, это открыть консоль браузера. Чтобы её вызвать, необходимо нажать комбинацию клавиш Ctrl+Shift+I (или F12 -> Вкладка Консоль).
      После этого проверьте консоль на наличие ошибок.
      Консоль браузера
      1. Владислав # 0
        Блин… та вроде все правильно…


        Спасибо за ответ)
        1. Александр Мальцев # 0
          Да где же оно правильно. У Вас написано, что JavaScript Bootstrap требует jQuery.
          У Вас файл jquery-2.2.0.min.js подключен после bootstrap.min.js, а должен быть подключен до bootstrap.min.js.
          1. Владислав # 0
            Помогло) Спасибо большое))
    2. Akylbek # 0
      у меня вопрос: в документации Бутстрап рекомендуется указывать кол-во ячеек в строке, я попробовал так сделать и у меня слетела одна строка ( сумма составляла 12), я указал сколько ячеек в одной колонке и в другой для разных экранов. вроде все правильно. но работает не корректно. потом сделал как на Вашем сайте, без указания кол-ва ячеек — все заработало как надо. вопрос: что за фигня то? как правильно верстать на бутстрапе? если работает и без col-xs-12 col-sm-12 col-md-6 col-lg-4, тогда зачем вообще это писать то?
      1. Александр Мальцев # 0
        Нет, не должно перемещаться. Скорее всего Вы задали какие-то дополнительные внешние отступы (margin) одному или нескольким блокам. Так что проверяйте, всё должно работать.

      Вы должны авторизоваться, чтобы оставлять комментарии.