На этом уроке мы рассмотрим процесс создания сайта, состоящего из одной страницы, на HTML 5 с применением классов и компонентов Bootstrap 3.
Сайт визитка – это простой сайт, который состоит из небольшого количества страниц, и содержащий основную информацию о фирме, компании, предприятии или частном лице. Стоимость сайта визитки зависит от дизайна и количества страниц, и составляет от 4000 рублей. А стоят ли несколько страниц таких денег? Нет! С помощью этого урока вы научитесь, как разработать свой сайт с использованием технологии Twitter Bootstrap 3 и поместить его в интернете.
Перед тем, как приступить к созданию сайта давайте рассмотрим что же нам дает платформа Bootstrap 3. Во первых она предлагает поддержку различных браузеров, что уже хорошо. Во вторых адаптивный дизайн, т.е. наш сайт будет отлично выглядеть на устройствах с различными диагоналями экранов. В третьих высокая скорость разработки, т.е. нет необходимости тратить много часов на разработку различных элементов веб-страниц. В итоге получается, что разработчик лишь применяет готовые компоненты, классы и скрипты Bootstrap, а остальное делает уже сама платформа.
В качестве примера рассмотрим процесс создания сайта фирмы Business, которая будет содержать информацию о компании, услугах, портфолио, а также контактную информацию.
Создание сайта начнём со скачивания архива, который состоит из файлов платформы 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>
<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>
