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

Александр Мальцев
41K
3

На этом уроке мы рассмотрим процесс создания сайта, состоящего из одной страницы, на HTML 5 с применением классов и компонентов Bootstrap 3.

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

Сайт визитка – это простой сайт, который состоит из небольшого количества страниц, и содержащий основную информацию о фирме, компании, предприятии или частном лице. Стоимость сайта визитки зависит от дизайна и количества страниц, и составляет от 4000 рублей. А стоят ли несколько страниц таких денег? Нет! С помощью этого урока вы научитесь, как разработать свой сайт с использованием технологии Twitter Bootstrap 3 и поместить его в интернете.

Создание файла HTML и подключение к нему стилей и скриптов Bootstrap 3

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

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

Сайт на Bootstrap 3

Создание сайта начнём со скачивания архива, который состоит из файлов платформы Bootstrap 3 и иконок Font Awesome.

После скачивания и распаковки архива, создаём HTML файл с именем index.html, к которому подключим стили и скрипты платформы Bootstrap 3 и стили для использования иконок Font Awesome.

Файловая структура сайта


Содержимое файла index.html с пояснениями (<!--...--!>)


<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Кодировка документа -->
  <meta charset="utf-8">
  <!-- Заголовок страницы -->
  <title>Маркетинг в социальных сетях для бизнеса | Bussines.ru</title>
  <!-- Подключения таблицы стилей Bootstrap 3 -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <!-- Подключение темы со стилями Bootstrap 3 -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
  <!-- Подключение таблицы стилей иконок Awesome -->
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <!-- Подключение таблицы стилей, в которой будем прописывать свои стили -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- Подключение библиотеки jQuery для работы скриптов Bootstrap 3 -->
  <script src="js/jquery-1.11.1.min.js"></script>
  <!-- Подключение скриптов Bootstrap 3 -->
  <script src="js/bootstrap.min.js"></script>
</head>
<body>

<!-- Основное содержимое страницы -->

</body>
</html>

Создание макета

На изображении показано, что веб-страница состоит из 2 основных частей: основного контейнера (container) и подвала (footer). Основной контейнер (container) выровнен в горизонтальном направлении по центру и содержит следующие части: шапку страницы (header); горизонтальное навигационное меню (nav); нижнюю часть шапки (header-bottom); блок об услугах компании (main), состоящий из 3 колонок; блок об основных методах (method) применяемых в компании; блок, содержащий портфолио (work) компании.

Структура сайта


<body>
  <!-- Основной контейнер -->
  <div class="container">
    <!-- "Шапка" сайта -->
    <header></header>
    <!-- Навигационное меню -->
    <nav></nav>
    <!-- Нижняя часть "шапки" сайта --> 
    <div id="header-bottom"></div>
    <!-- Блок об услугах компании --> 
    <div id="main">
      <!-- Ряд, состоящий из 3 блоков --> 
      <div class="row">
        <!-- 1 блок, состоящий из 4 колонок Bootstrap --> 
        <div class="col-md-4"></div>
        <!-- 2 блок, состоящий из 4 колонок Bootstrap --> 
        <div class="col-md-4"></div>
        <!-- 3 блок, состоящий из 4 колонок Bootstrap --> 
        <div class="col-md-4"></div>
      </div>
    </div>
    <!-- Блок, содержащий информацию об основных методах компании --> 
    <div id="method">
      <div class="row"></div>
    </div>
    <!-- Блок, содержащий портфолио компании --> 
    <div id="work">
      <div class="row"></div>
    </div>
  </div>
  <!-- Подвал сайта -->
  <footer></footer> 
</body>

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

  1. Ахмет Шабакаев
    13 апреля 2020, 21:47
    Доброго времени суток.
    Александр, с Вашей помощью сделал свой первый сайт, разместил на хосте. Спасибо Вам огромное!

    Есть правда небольшой нюанс, я так и не понял почему у меня на мобильном телефоне отображается сайт как обычная ПК версия (без меню «гамбургер»), хотя разрешение по ширине меньше 500px, а на ПК, при уменьшении ширины до 700 и ниже включается мобильная версия? Хотелось бы адаптивность сайта довести до ума.
    1. Александр Мальцев
      15 апреля 2020, 13:22
      Здравствуйте! Для этого нужно добавить в раздел head эту строчку:
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      
      Более подробно про viewport и как он работает можно почитать здесь.
      1. Ахмет Шабакаев
        15 апреля 2020, 16:56
        Да, ниже в комментариях Вы уже отвечали на этот вопрос, мне ответили более подробно. Попробовал, интересно получается, но все равно есть ощущение, что центровка что ли сбилась, немного уводит вправо, особенно видно по форме обратной связи, нажимаешь вызов окна оно смещено вправо, тапнешь на него оно по центру становится. С чем это может быть связано?
        И еще момент заметил — поставил кнопку «Возврат вверх» если прокрутка свыше 1000px, она по умолчанию красного цвета, по нажатию становится серой, при повторной прокрутке и появлении кнопки цвет она обратно на красный не меняет.
        1. Александр Мальцев
          18 апреля 2020, 04:13
          Это пример на Bootstrap 3. Может из-за этого. Вы случайно не Bootstrap 4 используете.
          1. Ахмет Шабакаев
            18 апреля 2020, 14:48
            Пример взял отсюда — itchief.ru/lessons/javascript/button-scrollup, вроде нет обозначения какой версии бутстрап.
            1. Александр Мальцев
              18 апреля 2020, 16:04
              Да, не то ответил. Здесь Bootstrap не причём.
              Модальное окно при открытии добавляет к CSS-свойство overflow со значением hidden. Это действие убирает прокрутку у и размер области становится больше на ширину этой прокрутки. А поскольку кнопка привязана к правой границе, то она смещается на эту величину. Здесь самый простой вариант – это убирать эту кнопку вверх при открытии модального окна, а при закрытии – возвращать всё обратно.
              Если цвет не меняется у кнопки вверх, то значит, что курсор находится над ней.
    2. Hudojnick
      03 октября 2017, 16:43
      Здравствуйте, сделал все по вашему мануалу, появилось все кроме меню, точнее меню есть, но меню скрыто внутри кнопки. Проверил через F12, ошибок нет.
      1. Александр Мальцев
        18 октября 2017, 15:36
        Здравствуйте! Так и должно быть. Всё зависит от ширины viewport устройства. Если экран маленький, то меню сворачивается. Если экран большой, то меню имеет полный вид.
      2. Андрей
        09 августа 2015, 11:06
        Добрый день.

        Очень классный и полезный ресурс.

        Подскажите, в этом уроке itchief.ru/lessons/bootstrap-3/23-lesson-no-4-fixed-layout-with-twitter-bootstrap вы использовали:
        header, main и footer, а уже в каждом из них был container.
        Почему в этом уроке уже в container содержаться header, main и остальные div, и footer отдельно?
        1. Александр Мальцев
          09 августа 2015, 12:23
          Добрый день. Спасибо за отзыв.

          Отвечу на Ваш вопрос очень просто. Всё связано с тем, что статьи писались в разное время. Но Вы всё равно можете выбрать любой способ, т.к. разметка в том и в этом случае является правильной.
          Способ создания макета, описанной в статье «Адаптивно-фиксированный макет сайта» является просто более гибкой и семантически правильной для поисковых роботов.
          Т.е. вы можете без труда, например, сделать шапку на всю ширину, просто изменив класс container на container-fluid. С разметкой, представленной на этом уроке так просто сделать это не получиться. Кроме этого такую разметку ещё и проще поддерживать, т.к. она разбита на секции (шапка, основное содержимое, футер).

          Если Вы сомневаетесь, как более правильно выполнить разметку, то остановитесь на варианте, представленном в статье «Адаптивно-фиксированный макет сайта».
        2. Anna
          14 января 2015, 15:49
          спасибо. получилось.
          1. Anna
            13 января 2015, 19:22
            А как сделать вертикальную линию, разгараничивающую основной контент и сайдбар? Например, как у вас на сайте,. Не могу найти инфо на эту тему.
            1. Александр Мальцев
              14 января 2015, 14:38
              Anna, вертикальная линия сделана с помощью CSS свойства border-left. С помощью его Вы можете одновременно задать толщину, стиль и цвет левой границы элемента (например: сайдбара).

              Сейчас объясню, как это сделать очень подробно:

              Макет на сайте состоит из 2 блоков div.
              Первый блок (основной) имеет ширину, равную 8 колонкам Twitter Bootstrap 3 на устройствах md и lg.
              Второй блок (сайдбар) имеет ширину, равную 4 колонкам Twitter Boottsrap 3 на устройствах md и lg.
              К сайдбару добавим дополнительный класс sidebar. Данный класс мы будем использовать для добавления стилей CSS к блоку div.

              Разметка страницы:
              <div class="row">
                <!-- Основной контент -->
                <div class="col-md-8">
                ...
                </div>
                <!-- Сайдбар -->
                <div class="sidebar col-md-4">
                ...
                </div>
              </div>
              
              Стили лучше всего писать во внешнем CSS файле, если у Вас его нет, то создайте и подключите его к сайту.
              Содержание файла CSS:
              .sidebar {
              border-left: 1px solid #efefef;
              }
            2. darkless
              08 сентября 2014, 02:59
              Супер! Давай дальше, буду себе сайт делать!
              Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.