Приклади верстки сайту

18

Від автора: сьогодні кількість готових шаблонів в мережі збільшилася. Способів верстки існує досить багато, тому давайте розберемося з ними, а також з типовими прикладами.

Готові шаблони в мережі

Найпростіше вивчати приклади верстки сайту за допомогою сервісів, на яких ви можете безкоштовно завантажити готові шаблони, виконані іншими веб-розробниками. Навіть адаптивних макетів сьогодні в мережі дуже багато, тому ви можете подивитися, як реалізована адаптивність в тому чи іншому вигляді, як вставлений слайдер і т. д. Це непоганий спосіб самому вчитися верстці, адже ви дивитеся на роботи інших і збираєте корисний досвід.

Фіксована верстка сайту

До недавніх пір більшість сайтів версталось саме так. У майбутньому очікується поступовий перехід на адаптивність, що набагато більш зручно для користувачів. При фіксованій верстці розміри основних блоків задаються і більше не змінюються. Таким чином, при маленькій ширині вікна з’являється горизонтальна смуга прокрутки. На великих екранах вміст може навпаки виглядати дуже дрібно.

Як правило, фіксовані сайти роблять ті, кому не потрібен мобільний трафік. Якщо ж він потрібен, компанія може окремо зробити мобільну версію сайту. Такого підходу дотримуються багато. Фіксований шаблон – найпростіший приклад блокової верстки сайту.

Наприклад, соціальна мережа Вконтакте. Чи Не помічали ви, що як не крути масштаб і не зраджуй ширину вікна, розміри сайту не змінюються? Все тому, що вони жорстко прописані. Але при цьому соціальна мережа обов’язково повинна пропонувати зручний інтерфейс і для мобільних користувачів, тому Вконтакте має версію для планшетів і мобільних телефонів.

Гумовий шаблон

Інший приклад блокової верстки сайту – гумовий шаблон. У такому випадку розміри основних контейнерів задаються у відсотках. Це дає можливість блокам розтягуватися в залежності від ширини вікна. Наприклад, задавши бічній колонці ширину до 30% від всього тіла сторінки, при вікні в 1000 пікселів вона буде займати 300px. Якщо ми зменшимо ширину вікна вдвічі, то так само зміниться і бічна колонка. З-за цього можуть виникнути проблеми з тим, що весь вміст зовсім перестане поміщатися в блок.

Гумова верстка немислима без властивостей max-width і min-width. Вони означають максимальну і мінімальну ширину контейнерів відповідно. Приклад:

#container{
max-width: 1440px;
min-width: 520px;
width: 100%
}

Що означає ця запис? Блок з ідентифікатором «container» буде зберігати свої гумові властивості тільки в межах заданих значень пікселів. Тобто, якщо вікно браузера стане більше 1440 пікселів, то блок перетворитися в фіксований. Те ж саме відбудеться при зменшенні ширини до менш ніж 520 пікселів. У цьому випадку з’явиться горизонтальна смуга прокручування, але краще вже вона, чим нечитаний текст. Якщо ці властивості не задавати, то гумовий шаблон буде тягнутися завжди. До яких наслідків це може призвести?

Уявіть, ви зайшли на сайт з мобільного телефону. Без min-width все буде настільки дрібно, що просто неможливо буде говорити про нормальний читанні. На великих екранах з роздільною здатністю більше 1600 пікселів у ширину, вміст може розбитися на дуже довгі рядки. Читати такий текст можна, але складно. Як варіант, можна для великих моніторів розбивати текст на дві колонки, але це вже основи адаптивності.

Адаптивний шаблон

Адаптивну верстку можна реалізувати на основі вже наявної фіксованого або гумовою. Вона реалізується за допомогою спеціальних media-команд, які прописуються в таблиці стилів. У них ви можете вказувати ширину вікна, при якій будуть застосовуватися нові стилі. Наприклад, для великого дозволу можна вказати свої стилі, а для мобільників – свої. І вони будуть застосовані тільки тоді, коли потрібно. Це дуже зручно. Приклад медіа-запитів:

@media only screen and (max-width: 980px){
Css-правила
}

Зазначені у фігурних дужках властивості будуть застосовані тільки тоді, коли ширина вікна браузера стане менше 980 пікселів.

Найпростіший макет можна адаптувати досить швидко. Якщо у вас серйозний шаблон зі слайдерами, сайдбарами, фотографіями і відеороликами, то доведеться витратити набагато більше часу, прописуючи стилі для різних дозволів і паралельно тестуючи все це.

Більш простий варіант – завантажити в інтернеті готовий адаптивний шаблон і на його основі спробувати щось змінити.

Варто самому вчитися такій техніці? Якщо ви верстальник, то обов’язково, тому що сьогодні таких шаблонів потрібно все більше. Навчитися цьому не так вже і складно, зате потім ви зможете гордо сказати: «У мене вийшла адаптивна верстка сайту». Приклади нам подають закордонні колеги, які масово переходять на адаптивні сайти. Також в основах адаптивності корисно розбиратися веб-майстрам, які ведуть свої проекти.

Приклад адаптивності – наш портал. Зауважте, як змінюється вміст при зменшенні ширини вікна. Інший приклад – ресурс організації W3C. При зміні ширини ви побачите, як змінюється дизайн.

Приклади верстки сайту

Рис. 1. При сильному зменшенні ширини вікна дизайн сайту автоматично змінився.

Верстка таблицями

Весь цей час ми говорили про приклади верстки сайту div-блоками. Як ми знаємо, цей тег створює блоковий контейнер, в який можна помістити будь-який зміст. За допомогою стилів блок можна перетворити як завгодно. Але варто згадати і про вже застарілому сьогодні способі верстки з допомогою таблиць.

Його суть полягає в тому, що вся структура сайту поміщена в одну велику таблицю. Вона має потрібну кількість рядків та клітинок. Таблиця дає змогу легко зробити хоч 100 різних осередків і помістити в них потрібний вміст, легко розмістити і форматувати. З допомогою блокової верстки зробити це було б не так просто.

Але верстка таблицями має один величезний мінус – неймовірну громіздкість коду. Судіть самі – кожна окрема комірка повинна формуватися своїм тегом, який, в свою, чергу, повинен знаходитися в тезі ряду таблиці. Сучасні веб-стандарти прагнуть до простоти і компактності. Саме тому сьогодні верстка таблицями застосовується тільки тоді, коли у нас на сайті дійсно є таблиці. Сама сітка (скелет шаблону) будується з допомогою блоків.

І все-таки ще не остаточно померла в мережі таблична верстка сайту. Приклад – сам Яндекс, який зверстаний саме так. Насправді на таблицях можна робити красиві і складні сайти, просто розмітка буде громіздкою.

Приклади верстки сайту

Рис. 2. Яндекс виглядає досить гарно. При цьому він зверстаний таблицею.

HTML5

В останні роки більше шаблонів почали робити на новій версії HTML. У чому їх відмінність? Для розмітки каркаса використовуються не порожні div (які за змістом нічого не означають), а спеціальні нові семантичні теги. Наприклад, тег
. З його появою більше не потрібно створювати div id «header», який, знову ж, не має семантичного сенсу.

Нові теги дозволяють краще індексувати сайт, робити його більш зрозумілим для браузерів і людей з обмеженими можливостями. Поки що ще не всі скористалися цими перевагами. Приклади верстки сайту на HTML5 також можна знайти в інтернеті. Якщо вам складно самому верстати з допомогою нових семантичних тегів, то доречно завантажити шаблон і розібратися, як в ньому все реалізовано.

Отже, ми розглянули основні способи верстки сайтів. Також було наведено кілька прикладів, щоб ви могли на власні очі побачити, які принципові відмінності є в різних технік. На цьому на сьогодні все, а ви не забувайте підписуватися на оновлення нашого блогу, щоб дізнаватися про сайтобудуванні більше.