З чого складається сайт?

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

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

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

Шапка сайту

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

Як правило, в даному блоці розміщується:

• назва сайту;
• логотип;
• головне або другорядне меню.

Меню сайту, зазвичай, складається з таких пунктів:

1. Кнопка «Головна» (англ. «Home») – клікнувши по цій кнопці, можна повернутися на головну сторінку на будь-якому сайті.
2. «Карта сайту» – клацнувши по цій кнопці, можна переглянути зміст всього сайту, всіх рубрик та всіх статей у рубриках.
3. “Про себе” – тут зазвичай автор сайту пише трохи про себе. Або ж компанії розказують про себе.
4. «Послуги» — якщо є послуги, то тут наводиться їх список та пояснення.
5. «Контакти» — наводиться форма для надсилання повідомлення адміністратору сайту, або написаний e-mail для зв’язку, або номер телефону, при необхідності може бути картка проїзду до офісу.

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

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

Головна область сайту або де розміщується контент

Що таке контент сайту? Контент походить від англійської «content» – зміст. Найчастіше це найбільша за площею та найбільш важлива для відвідувачів сайту частина сторінки.

За назвою не важко здогадатися, що в даному блоці розміщується:

• весь текстовий контент;
• графічний контент;
• аудіо контент;
• відеоконтент.

Тобто, контент сайту – це його інформаційне наповнення, а саме статті та огляди, новини, картинки, галереї, аудіо та відеоролики тощо.

Також досить часто в цій галузі розміщують рекламу:

• контекстну;
• банерну;
• тизерну;
• просту посилальну.

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

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

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

У WordPress частина, де розміщується контент, зазвичай статична. Але на кожні сторінці ви можете розмістити різні віджети. Зараз в CMS їх доволі багато, а тому ви маєте можливість суттєво урізноманітнити вигляд вашого ресурсу. Єдине – налаштовувати потрібно кожну сторінку окремо. Хоча це майже на всіх сайтах так є. Маю на увазі – на сайтах, що створені різними методами. Хоча мабуть конструктори все-таки мають більше обмежень.

Сайдбар

Що таке сайдбар на сайті? Поняття “сайдбар” походить від англійського терміну “sidebar”, де “side” – сторона, “bar” – смуга. Зазвичай сайдбаром називають бічну колонку сайту, яка розміщується праворуч або ліворуч від області основного контенту. У деяких випадках на сайті можуть розташовуватися відразу два сайдбари (перший – ліворуч від основної області, а другий – праворуч).

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

• меню (головне та другорядне);
• різноманітні віджети (рубрики сайту, популярні та останні пости, останні коментарі, погода);
• рекламні посилання та банери;
• посилання на сайти друзів;
• лічильники відвідуваності;
• форми авторизації та реєстрації;

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

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

Футер сайту, він же підвал

Слово “Футер” (або підвал) походить від англ. “Footer”. Зазвичай футером називають область сайту, яка розташована в самому низу (під рештою всіх блоків). За аналогією з хедером (шапкою сайту), футер також має альбомну орієнтацію, тобто він подовжньо витягнутий. Ширина футера також може змінюватись залежно від дозволу монітора користувача (звичайно, якщо макет є гумовим).

У підвалі сайту можуть бути розміщені рекламні посилання, копірайти (свідоцтво авторства), посилання на розробників CMS або творців шаблону сайту. Крім того, досить часто у футері сайту дублюють головне або другорядне меню. Це робиться для покращення навігації (після прокручування вниз користувачеві не потрібно буде повертатися до верхньої частини сторінки для того, щоб скористатися меню).

Зараз багато шаблонів WordPress дозволяють розміщувати в підвалі максимум інформації та потрібних елементів. Проте раніше “запакувати” його було складно через певні шаблонні обмеження. Ще не так давно умовно безоплатних шаблонів, де можна змінювати кардинально футер, було не так багато. Зараз їх вже більше. Адже сам WordPress значно вдосконалився і тепер його можливості набагато ширші.

Фон сайту

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

Чим більшим буде дозвіл, тим більше місця займатиме тло для сайту. Фонова область може заповнюватися певним кольором (за допомогою CSS-атрибуту background-color), а також однією великою або декількома маленькими симетричними зображеннями (які будуть рівномірно заповнювати собою весь вільний простір).

В шаблонах WordPress фонова частина може бути як такою, що налаштовується, так і фіксованою.