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

На этом уроке мы рассмотрим процесс создания сайта, состоящего из одной страницы, на 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>


   Bootstrap 1    15191 +1

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

  1. darkless # 0
    Супер! Давай дальше, буду себе сайт делать!
    1. Anna # 0
      А как сделать вертикальную линию, разгараничивающую основной контент и сайдбар? Например, как у вас на сайте,. Не могу найти инфо на эту тему.
      1. Александр Мальцев # 0
        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. Anna # 0
        спасибо. получилось.
        1. Андрей # 0
          Добрый день.

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

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

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

            Если Вы сомневаетесь, как более правильно выполнить разметку, то остановитесь на варианте, представленном в статье «Адаптивно-фиксированный макет сайта».

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