Чотири різні способи створення HTML
У цій статті я хочу розповісти про чотири різні способи створення макетів з кількома стовпцями. Кожен спосіб має свої плюси та мінуси. Щоб продемонструвати, як ці макети працюють і виглядають, я створив простий сайт, на якому використовуються HTML-таблиці, властивість CSS float, CSS-фреймворк та флексбокс.
Перший день нового життя
У цій статті ми використовуємо чотири різні способи верстки сайту:
Тепер настав час спробувати кожен з них.
Способи створення
Це дизайн мого сайту:
Для створення шапки сайту я використав властивість position: relative. Спробуємо зробити це з нуля, використовуючи табличну верстку.
Ось мій HTML-код:
І ось, що я отримав:
Як бачите, це не та сама шапка. Вона виглядає знайомо, але її розташування трохи змінилося. І ось чому. Ви знаєте, що таблиці добре підходять для симетричного позиціонування. Але для інших цілей вони підходять негаразд. Також зверніть увагу на громіздкість коду. Але таблиці мають одну корисну особливість. Ось яку хитрість ми можемо зробити:
І ви побачите, що макет став виглядати так:
Таким чином, можна легко визначити, де знаходиться, якщо заплуталися.
Тепер погана новина. Ще раз подивіться на HTML-код. Це проста таблиця, але уявіть, як вона виглядатиме з десятками осередків. Ось який вихідний код у мене:
У цьому випадку вам потрібно використовувати блокову верстку сайту за допомогою CSS. Застосувавши щось на кшталт цього:
Ви вказуєте перемістити
Властивість float широко застосовується при блоковій верстці сайту. Ми будемо використовувати цю властивість для виведення основної області розміщення контенту. Невеликий приклад допоможе вам краще зрозуміти, якце працює:
У ньому є три різнокольорові елементи
І ось, що в нас вийшло:
При верстці шарами ви вказуєте через властивість float , що хочете, щоб ваш елемент
Наступний плаваючий елемент буде зміщуватися, доки не зустріне перший, і так далі. Наступний за плаваючим елемент буде обтікати його як вода! Але якщо ви не хочете спускати всі свої об'єкти на воду, можна використовувати властивість clear. Воно визначає, які сторони елемента повинні обтікати плаваючі елементи.
Ось як виглядає частина мого макету для основного контенту:
Тепер давайте зробимо її плаваючою:
Ми додали кілька стилів і отримали щось на кшталт цього:
У нас є великий блок для статей і менший блок для новин. Ми використовували властивість float: left та для зображень. Зверніть увагу, як вони обтікаються тегом
. Цей макет виглядає як ваш улюблений журнал.
CSS-фреймворки
Якщо ви трохи ліниві
Якщо у вас немає часу возитися з кодом при верстці CSS, можна використовувати один з CSS-фреймворків. У нашому прикладі ми використовуємо Bootstrap. Для цього потрібно завантажити його та підключити в HTML-файлі.
Bootstrap містить сітку, яка складається із 12 рівних за розміром стовпців. HTML-елементи упорядковуються так, щоб охоплювати різну кількість стовпців. Таким чином, створюються макети користувача. Кожна частина контенту вирівнюється щодо цієї сітки через вказану кількість стовпців, на які вони розтягуються.
У цьому прикладі ми створили рядок. Після цього помістили до неї два рівні за розміром стовпця. Кожен із них охоплює шість із дванадцяти доступних стовпців.
Далі ми створюємо розділ "Незабаром у прокаті". Він міститимечотири постери фільмів. Шляхом нескладних математичних обчислень визначаємо, кожен з них охоплюватиме по три стовпці.
Я також додав клас thumbnail , щоб зробити плакати красивішими. Він також міститься в Bootstrap.
І ось, що я отримав:
Виглядає непогано. І при верстці сайту з PSD вам навіть не потрібно редагувати файл CSS. Але ви не бачите, що відбувається усередині.
Класика завтрашнього дня
Ми будемо використовувати флексбокс, щоб створити розділ сайту "Бокс-офіс". Ось HTML-код:
Ось CSS-код для контейнера “boxoffice”:
Тепер настав час створити гнучкий контейнер. Для цього потрібно встановити елемент display: flex . Згідно з правилами верстки, всі елементи флексбоксу розташовуються вздовж головної та поперечної осей:
Для флексбокс задаються два типи властивостей. Перший використовується для керування гнучким контейнером, другий - для заповнення гнучких елементів. Розглянемо детально перший тип.
За замовчуванням головна вісь горизонтальна, тому елементи будуть розтягуватися в ряд. Для зміни основної осі ми можемо використовувати властивість flex-direction. Воно може приймати такі значення: row, row-reverse, column та column-reverse. Ми будемо використовувати значення column. Давайте також додамо властивість height. Для чого це потрібно, ви зрозумієте трохи пізніше:
Ось як виглядає наш невеликий бокс-офіс:
Ми використовували властивості height, тому що не хочемо, щоб контейнер флексбоксу перекривав зображення стрілки в нижній частині фону.
Флексбокс також дає можливість вносити зміни до вмісту без зміни HTML-файлу. Наприклад, якщо ви хочете змінити розташування елементів на протилежне, ви можете змінити значення flex-direction наcolumns-reverse . Це змінить напрямок флексбоксу на протилежний. Але вам потрібно буде також змінити порядок розташування елементів усередині контейнера.
Для цього ми використовуємо властивість justify-content. Доступні для нього значення: flex-start, flex-end, center, space-between та space-around. Для нього потрібно встановити значення justify-content, яке еквівалентно flex-end.
І ось як позначилися ці зміни:
Можна також переміщати елементи вздовж поперечної осі. Для цього використовується властивість align-items. Ви можете задати для нього такі значення: flex-start, flex-end, center, baseline або stretch.
Щоб використовувати його, додайте властивість у селектор флексбоксу:
Усі елементи змістяться до правого краю:
Є ще одна корисна властивість - flex-wrap. Уявіть, що бокс-офіс швидко зростає. Що станеться, якщо він побільшає, ніж контейнер? Нічого поганого, якщо ви використовуєте властивість flex-wrap.
Спробуйте додати наступний код:
І ось, що в результаті вийде:
Як бачите, елементи тепер укладаються у кілька стовпців. Значення за умовчанням цієї властивості – nowrap . При його застосуванні елементи розташовуватимуться в один стовпець (або рядок — це залежить від значення flex-direction). Можна використовувати значення wrap-reverse. Тоді елементи розташовуватимуться у зворотному порядку.
Є багато корисних властивостей. З їх допомогою можна змінювати параметри кожного окремого елемента контейнера. Наприклад, властивість order дозволяє змінювати порядок розміщення елементів без необхідності вносити зміни до HTML-коду.
Який із способів вибрати?
Таблиці. У валідній верстці сторінок таблиці незастосовуються. Вони роблять код брудним. Таблиці не такі зручні у використанні, як може здаватися. Якщо ви все ще не вирішили для себе, чи потрібно використовувати таблиці для макета сторінки, подивіться на цей сайт.
Але вони можуть бути корисними, якщо йдеться про верстку електронних листів. Налічується не так вже й багато браузерів, які люди використовують у наш час, зате поштових агентів просто величезна кількість. Стаціонарні, онлайн та мобільні програми використовують різні движки відображення. HTML-таблиці виглядають однаково у всіх них. Ось чому це чудовий варіант для верстки електронних листів.
Float. Властивість float є найкращим вибором, якщо у вас не надто високі вимоги. Це простий спосіб зробити ваш сайт привабливішим. Його застосування для зображень є, як на мене, ознакою гарного тону. Тільки потрібно пам'ятати, як працюють властивості float та clear. Цього достатньо для початку.
Говорячи про його недоліки, ми маємо визнати, що плаваючі елементи прив'язані до потоку документа, а це може суттєво зменшити його гнучкість.
CSS-фреймворки. Якщо потрібно створити макет швидко, використовуйте фреймворки. На сьогоднішній день їх багато. Серед них оберіть той, який вам більше підходить.
Флексбокс. Прийде витратити деякий час, щоб дізнатися, як він працює. Думаю, ви вже зрозуміли, наскільки зручні флексбокси для керування окремими елементами.
Але, як я вже сказав, це відносно нова функція CSS. Тому потрібно враховувати її підтримку браузерами. Ось добірка помилок, які мені вдалося знайти, та можливі шляхи їх вирішення.
Сподіваюся тепер ви знаєте, що таке верстка сайту. До нових зустрічей!
Переклад статті « 4 Different HTML-CSS Layout Techniques to Create a Site » бувпідготовлено дружною командою проекту Сайтобудування від А до Я.