| Порівняння попередніх версій Попередня ревізія Наступна ревізія | Попередня ревізія |
| subjects:basic:informatika:web:verstka_veb-storinok [23.10.2022 00:58] – Адміністратор | subjects:basic:informatika:web:verstka_veb-storinok [11.10.2024 09:25] (поточний) – Адміністратор |
|---|
| Таблична верстка — це тип проектування вебсторінки, каркас якої створено за допомогою таблиць і певного розташування інформації в ній. Даний тип створення сторінок був розповсюджений до впровадження використання CSS, але після поступився більш ефективнії моделі проектування сторінок - блочній верстці. | Таблична верстка — це тип проектування вебсторінки, каркас якої створено за допомогою таблиць і певного розташування інформації в ній. Даний тип створення сторінок був розповсюджений до впровадження використання CSS, але після поступився більш ефективнії моделі проектування сторінок - блочній верстці. |
| |
| ===== Клокова верстка ===== | ===== Блокова верстка ===== |
| Блокова верстка — це тип дизайну сторінки, створений за допомогою блоків (тег ''<div>''), розташування яких суворо контролюється через CSS (каскадних таблиць стилів), і в якому таблиці використовуються тільки для представлення табличних даних. | Блокова верстка — це тип дизайну сторінки, створений за допомогою блоків (тег ''<div>''), розташування яких суворо контролюється через CSS (каскадних таблиць стилів), і в якому таблиці використовуються тільки для представлення табличних даних. |
| |
| **Хедер** і **футер** (header, footer) - інакше шапка та підвал сторінки. Шапка знаходиться вгорі веб-сторінки або мобільної програми. Як правило, туди поміщають логотип компанії або продукту, меню, кнопку, яка веде у профіль, особистий кабінет чи кошик. Футер, підвал знаходиться внизу сторінки або програми. Там часто дублюють меню, розширюючи його додатковою та технічною інформацією. Наприклад, там можна знайти посилання на докладний опис компанії, вакансії, контакти. Там знаходиться інформація про те, хто робив продукт і на чому він зроблений. | **Хедер** і **футер** (header, footer) - інакше шапка та підвал сторінки. Шапка знаходиться вгорі веб-сторінки або мобільної програми. Як правило, туди поміщають логотип компанії або продукту, меню, кнопку, яка веде у профіль, особистий кабінет чи кошик. Футер, підвал знаходиться внизу сторінки або програми. Там часто дублюють меню, розширюючи його додатковою та технічною інформацією. Наприклад, там можна знайти посилання на докладний опис компанії, вакансії, контакти. Там знаходиться інформація про те, хто робив продукт і на чому він зроблений. |
| |
| <callout type="info">**Фронтенд** та **бекенд** (frontend, backend) — зовнішня та внутрішня частини IT-продукту. **Фронтенд**, зовнішня частина – усе, що бачить користувач і із чим безпосередньо взаємодіє. Це картинки та тексти, кнопки та форми, відео та анімації. Це все, що відбувається в браузері або в програмі на очах користувача. **Бекенд**, внутрішня частина - все, що користувач не бачить або все, що знаходиться під інтерфейсом сайту або програми. Фактично роль бекенда в тому, щоб приймати запити та надсилати запити серверу. Але це складна обчислювальна робота — обробка інформації, що надходить та наявна, пошук і вилучення даних, динамічна (тобто змінюється) візуалізація сторінок (зміна фронтенду), перевірка безпеки.</callout> | <callout type="info">**Фронтенд** та **бекенд** (frontend, backend) — зовнішня та внутрішня частини IT-продукту. |
| | |
| | **Фронтенд**, зовнішня частина – усе, що бачить користувач і з чим безпосередньо взаємодіє. Це картинки та тексти, кнопки та форми, відео та анімації. Це все, що відбувається в браузері або в програмі на очах користувача. |
| | |
| | **Бекенд**, внутрішня частина - все, що користувач не бачить або все, що знаходиться під інтерфейсом сайту або програми. Фактично роль бекенда в тому, щоб приймати запити та надсилати запити серверу. Але це складна обчислювальна робота — обробка інформації, що надходить та наявна, пошук і вилучення даних, динамічна (тобто змінюється) візуалізація сторінок (зміна фронтенду), перевірка безпеки.</callout> |
| |
| **Сайдбар** (sidebar) — боковая панель-меню справа или слева. Сайдбар разграничивается контентом, который выводится там вертикально. Это может быть, например, расширенный каталог товаров или рубрик. | **Сайдбар** (sidebar) — боковая панель-меню справа или слева. Сайдбар разграничивается контентом, который выводится там вертикально. Это может быть, например, расширенный каталог товаров или рубрик. |
| |
| ==== Bootstrap ==== | ==== Bootstrap ==== |
| Bootstrap — це безкоштовний набір інструментів з відкритим кодом, призначений для створення вебсайтів та вебдодатків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Він спрощує розробку динамічних вебсайтів і вебдодатків. | {{https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Bootstrap_logo.svg/101px-Bootstrap_logo.svg.png?nolink&75 }} Bootstrap — це безкоштовний набір інструментів з відкритим кодом, призначений для створення вебсайтів та вебдодатків, який містить шаблони CSS та HTML для типографіки, форм, кнопок, навігації та інших компонентів інтерфейсу, а також додаткові розширення JavaScript. Він спрощує розробку динамічних вебсайтів і вебдодатків. |
| |
| Bootstrap — це клієнтський фреймворк, тобто інтерфейс для користувача, на відміну від коду серверної сторони, який знаходиться на сервері. | Bootstrap — це клієнтський фреймворк, тобто інтерфейс для користувача, на відміну від коду серверної сторони, який знаходиться на сервері. |
| * [[wp>Блочна верстка]] | * [[wp>Блочна верстка]] |
| * [[wp>Таблична_верстка]] | * [[wp>Таблична_верстка]] |
| | * [[https://codebreakers.tech/blog/tpost/fnkvjhpga1-ptichii-yazik-razrabotki-sleng-i-neponya|codebreakers.tech]] |
Адміністратор