Що таке верстка шаблону для сайту

Що таке верстка шаблону для сайту

Верстка це кодування сторінок сайту, тобто написання коду на мові HTML відповідно до затвердженого дизайном. На сьогодні сторінка являє собою код з декількох мов. Зазвичай це HTML, CSS, і JavaScript.

Процес верстки сайту це складний багатоетапний процес і це невід'ємна частина процесу виготовлення сайту. Верстка не вкладається в поняття «роботи на кілька днів», як іноді люблять думати замовники, що це легко і просто.

Що таке верстка

Верстка шаблону - це процес формування веб-сторінки по готовому макету. Процес верстки укладає в собі створення коду сторінки за допомогою зрозумілого браузерам мови розмітки гіпертексту html, і оформлення її за допомогою каскадних таблиць стилів (CSS).

Хто виконує верстку шаблону

Верстку шаблону або кодування сторінок виконує спеціальна людина - верстальник.

Верстка і дизайн ширини сторінки

Щоб втілити продуманий дизайнером шаблон для сайту потрібно пам'ятати один з важливих моментів, що полягає в тому, що всі пристрої, через які користувачі Інтернет можуть потрапити на сайт, мають різні екрани з різним дозволом.

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

Дизайн сайту може бути з фіксованою шириною або із змінною шириною. Верстка із змінною шириною часто називається «гумовою» версткою.

Верстка з фіксованою шириною вибирається виходячи з середньої ширини звичайних настільних систем. Для моніторів це часто дозвіл 1024х768 пікселів. Тому для коректного відображення на екранах, без появи додаткових смуг прокрутки, потрібно вибирати ширину робочої площі сайту в межах 800-990 пікселів.

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

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

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

Змінну ширину при «гумовою» верстці вдається отримати завдяки тому, що замість певних одиниць виміру, значення ширини вказуються у відсотку від повної ширини екрана. При зміні ширини екрану буде змінюватися і ширина всіх блоків з процентною шириною.

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

Кросбраузерності верстка. Що таке верстка сайтів з урахуванням кросбраузерності

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

Сьогодні існує безліч популярних браузерів, що використовуються для роботи в мережі Інтернет. До них відносяться: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Netscape Navigator, Safari та інші.

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

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

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

Верстка сайтів з чистим кодом

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

Чистий і красивий код html розмітки сторінки повинен бути красиво відформатований, містити зрозумілі коментарі і виділені логічні блоки. Назва класів повинно бути також зрозумілим, не слід скорочувати назву класів, використовувати букви і поєднання букв. Краще описувати класи зрозумілими словами без скорочень.

Використання каскадних таблиць стилів (CSS), дозволяє очищати код від зайвих тегів, і робить вага сторінок сайту і сайту в цілому значно менше. Не слід змішувати мови CSS і HTML в тілі документа. Краще виносити все правила оформлення в окремий файл і не використовувати вставки безпосередньо в коді розмітки HTML. Код HTML повинен містити тільки теги з призначеними для них класами.

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

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

Таблична та блочна верстка сайтів

Верстати сайт можна різними способами, але часто будь-яку верстку умовно ділять на табличну верстку і блочну верстку. Як видно з назв, елементи в таких верстка розташовуються або в таблицях (<table>) або в блоках (<div>).

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

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

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

Як правило, таблицями верстали раніше, коли браузери не вміли коректно відображати блоки. Зрозуміло, що бажання отримати чистий і простий код призвело до появи блокової верстки.

Блокова верстка використовує блоки, і видається більш зручною і правильною, з точки зору переконань про поділ змісту і оформлення. Блокова верстка дозволяє верстати сайт за допомогою шарів (блоків).

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

Управляти розташуванням і оформленням блоків дуже зручно через стилі, які легко змінювати в файлі CSS. Змінювати властивості шарів і налаштовувати набагато зручніше в одному місці. Блокова верстка, або верстка шарами дозволяє набагато більш ефективно розробити сайт, який буде коректно відображатися в браузерах.

висновок

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

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