Як зробити верстку сайту?

32

Від автора: здравствуйте, шановні читачі. У попередніх статтях ми розглянули теорію, пов’язану з версткою сайту. По закінченні читання цієї статті у вас буде чітке розуміння того, як самому верстати сайт.

Як отримати верстку?

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

Другий спосіб – замовити верстку у фрілансера, який може її зробити. Припустимо, у вас є макет і вам потрібно з нього зверстати сайт. Ви самі це робити не вмієте або просто не хочете витрачати час. Як варіант, можна розмістити замовлення на будь-якій популярній біржі фрілансу. У відповідь відразу ж підуть заявки, тому що сьогодні багато людей надають подібні послуги.

Рис. 1. Багатьом людям потрібні послуги по верстці.

Вибираючи людину для роботи, перегляньте його рейтинг, відгуки та портфоліо. Вибирайте тільки розумних виконавців. У середньому, послуги по верстці обійдуться в 1000-3000 рублів. Якщо це адаптивна верстка і складний макет – може бути набагато більше. До речі, самої популярної російської біржею вважається фріланса fl.ru.

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

Для цього вам доведеться хоч трохи розбиратися в HTML і CSS. Деякі фрілансери надають послуги по переробці шаблонів. Ви можете цим скористатися. Також в мережі продають так звані преміум-шаблони. Це верстки високої якості. Як правило, адаптивні і з дотриманням всіх стандартів.

Отже, ми подивилися три способи зробити верстку сайту. Можна зупинитися на першому з них детальніше.

Верстаємо самостійно

Як створити верстку сайту самому? Для цього вам знадобиться макет, програма для написання коду, голова і руки. Так, мабуть це той мінімальний набір, який вам знадобиться. Давайте спробуємо розділити верстку сайту на кілька етапів, щоб найбільш добре уявити, як вона робиться.

Перший етап – підготовчий. Полягає в тому, що ми просто створюємо необхідні нам файли, папки, підключаємо бібліотеки і фреймворки, з якими плануємо працювати, створюємо таблицю стилів, файл для веб-сценаріїв і т. д. Ми просто готуємо все для початку роботи.

Другий етап – створення сітки. Це каркас нашого сайту. Найпростішим варіантом сітки традиційно вважається такою: шапка, основний вміст, якийсь блок праворуч або ліворуч і футер (низ) сторінки. У вашому ж макеті все може бути складніше. До того ж, окремі блоки містять в собі інші елементи, які вам теж потрібно буде розставити. Але це вже потім, а поки вам потрібно просто створити сітку. Найпопулярніші варіанти сіток можна подивитися на htmlbook.

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

Третій етап – робота з більш дрібними елементами. Щоб продовжити робити верстку сайту, вам потрібно зайнятися розташуванням інших елементів на сторінці. Сітка – це лише каркас, який досвідченим верстальником створюється за пару хвилин. Далі починається основна частина роботи – розставити всі елементи так, щоб вони стояли точнісінько як в макеті.

Наприклад, логотип повинен стояти у вас в правому верхньому куті шапки. Ви повинні знати, як можна його туди запхати. А в цьому вам знову-таки допоможуть наші відеоуроки з основ HTML і CSS. Якщо ви плануєте зробити гумову верстку сайту, то вам потрібно буде враховувати особливості позиціонування елементів для неї. Щоб розібратися з особливостями поведінки гумових блоків, рекомендую пройти цей практичний курс.

Четвертий етап можна виконувати спільно із створенням сітки і позиціонуванням всіх елементів веб-сторінки. Це робота зі стилями. Прекрасно, якщо всі елементи розставлені вами правильно, але без стилів вони будуть виглядати непрезентабельно. Завдання фону сторінки, ширини і кольору іконок, створення і розподіл стильових класів та ідентифікаторів, прописування базових властивостей і додаткових візуальних ефектів – це усього лише деякі завдання, які стоять перед верстальником в роботі зі стилями.

Рис. 2. Файл стилів, в якому верстальник надає зовнішній вигляд сайту. Чим складніше верстка, тим більш громіздким може вийти цей файл.

Може бути, новачкові це може здатися важким, але всьому цьому навчитися досить швидко. HTML і CSS – це не програмування, тут не потрібно надмірно ламати голову – просто вивчите один раз і назавжди основні правила, теги і властивості і все це залишиться у вашій голові надовго. Звичайно, за умови постійної практики.

П’ятий етап. Ми вже серйозно просунулися. Основна частина робіт завершено – зроблена наша, нехай ще недосконала, але вже верстка сайту. Зробити її ще краще – це подальша основне завдання. З цього етапу ми починаємо активно тестувати нашу верстку у всіх основних браузерах. Нам головне побачити, наскільки рівно і красиво все відображається. Якщо проблем немає, тоді вас можна привітати. Як правило, без помилок все-таки не обійтися, особливо якщо верстається складний макет.

Випадкові помилки в коді, відсутність кроссбраузерных префіксів для деяких властивостей, використання технологій, які мають невелику підтримку – ці та інші фактори можуть впливати на відображення сайту в різних браузерах. Як правило, найбільше проблем виникає із старими версіями Internet Explorer.

Тут вже доводиться вибирати: або взагалі плюнути на відображення сайту в IE 6-8, або якось викручуватися, застосовуючи спеціальні програми. Наприклад, спеціально для цього придуманий IE Tester. Програма тестує сайт в старих версіях браузера, показуючи, як то він там виглядав. Також існують спеціальні фікси, які додають підтримку деяких елементів через JavaScript.

Шостий етап – остаточна перевірка і доведення до ідеального стану. Для цього вам знадобляться відладчик і валідатор, які допоможуть виявити і усунути дрібні помилки.

Як скопіювати верстку сайту

Можливо, вищеописаний процес самостійної верстки викликає у вас жах, і немає ніякого бажання вчитися верстати. Тоді вам треба користуватися іншими варіантами. Зокрема, замовити верстку у фрілансера або скачати готовий шаблон. В інтернеті є як шаблони на чистому HTML і CSS, так і теми для різних CMS. Вам залишиться тільки розархівувати шаблон і використовувати його в своїх цілях.

У цій статті ми розглянули три варіанти, як отримати верстку. Сподіваємося, ці знання знадобляться у створенні своїх або чужих сайтів. Підписуйтесь на оновлення блогу, тому що тут ви зможете дізнатися ще масу всього цікавого про сайтобудуванні.