На цьому уроці ми розглянемо процес створення сайту, що складається з однієї сторінки, на HTML 5 із застосуванням класів і компонентів Bootstrap 3.
Створення сайту візитки
Сайт візитка - це простий сайт, який складається з невеликої кількості сторінок, і містить основну інформацію про фірму, компанії, підприємства або приватну особу. Вартість сайту візитки залежить від дизайну і кількості сторінок, і становить від 4000 рублів. А чи варті кілька сторінок таких грошей? Ні! За допомогою цього уроку ви навчитеся, як розробити свій сайт з використанням технології Twitter Bootstrap 3 і помістити його в інтернеті.
Створення файлу HTML і підключення до нього стилів і скриптів Bootstrap 3
Перед тим, як приступити до створення сайту давайте розглянемо що ж нам дає платформа Bootstrap 3. По-перше вона пропонує підтримку різних браузерів, що вже добре. По-друге адаптивний дизайн, тобто наш сайт буде відмінно виглядати на пристроях з різними діагоналями екранів. По-третє висока швидкість розробки, тобто немає необхідності витрачати багато годин на розробку різних елементів веб-сторінок. У підсумку виходить, що розробник лише застосовує готові компоненти, класи і скрипти Bootstrap, а інше робить вже сама платформа.
Як приклад розглянемо процес створення сайту фірми Business, яка буде містити інформацію про компанію, послуги, портфоліо, а також контактну інформацію.
Створення сайту почнемо зі скачування архіву. який складається з файлів платформи Bootstrap 3 і іконок Font Awesome.
Після завантаження та розпакування архіву, створюємо HTML файл з ім'ям index.html, до якого підключимо стилі і скрипти платформи Bootstrap 3 і стилі для використання іконок Font Awesome.
Вміст файлу index.html з поясненнями ()
створення макета
На зображенні показано, що веб-сторінка складається з 2 основних частин: основного контейнера (container) і підвалу (footer). Основний контейнер (container) вирівняний в горизонтальному напрямку по центру і містить наступні частини: шапку сторінки (header); горизонтальне навігаційне меню (nav); нижню частину шапки (header-bottom); блок про послуги компанії (main), що складається з 3 колонок; блок про основні методи (method) застосовуються в компанії; блок, що містить портфоліо (work) компанії.