← На головну

Лабораторна робота №3

Тема: ВЕРСТКА HTML-ДОКУМЕНТУ. БЛОКОВА ВЕРСТКА. ВЕРСТКА ЗАСОБАМИ CSS та FLEXBOX. АДАПТИВНА ВЕРСТКА. МЕДІА-ЗАПИТИ. МЕТАТЕГ VIEWPORT

Тема, мета, місце розташування

Тема

ВЕРСТКА HTML-ДОКУМЕНТУ. БЛОКОВА ВЕРСТКА. ВЕРСТКА ЗАСОБАМИ CSS та FLEXBOX. АДАПТИВНА ВЕРСТКА. МЕДІА-ЗАПИТИ. МЕТАТЕГ VIEWPORT

Мета

  • Придбати практичні навички роботи верстки сторінок засобами CSS, верстки на основі плаваючих елементів, з'ясувати переваги та недоліки типів макетів веб-сторінок
  • Придбати практичні навички роботи верстки сторінок засобами CSS та FLEXBOX

Місце розташування

Репозиторій WEB-застосунку BookShelf project Жива сторінка WEB-застосунку GitHub Pages Репозиторій звітного документу Report website Жива сторінка звітного документу GitHub Pages

Завдання 1: Відповідність веб-сайту вимогам

Змінений CSS веб-застосунку

1. Метатег viewport (з index.html):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Медіа-запити для адаптивної верстки:

@media (max-width: 768px) { #nav-list { flex-direction: column; align-items: center; } .nav-item { width: 100%; } .nav-item button, .nav-link { width: 100%; text-align: center; } .form-actions { flex-direction: column; } #footer-links { flex-direction: column; gap: 10px; } .page-section { padding: 20px; } }

3. Flexbox для навігації:

#nav-list { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; padding: 0; }

4. Блокова верстка та адаптивність:

/* Бургер-меню для мобільних пристроїв */ @media (max-width: 768px) { #burger-menu { display: block; } #main-nav { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background: #2c3e50; z-index: 999; transition: right 0.3s ease-in-out; padding-top: 80px; box-shadow: -5px 0 15px rgba(0,0,0,0.2); } #main-nav.active { right: 0; } }

Реалізовано мною:

  • Адаптивну верстку з використанням медіа-запитів для різних розмірів екранів
  • Коректне використання метатегу viewport
  • Блокову верстку з плаваючими елементами
  • Сучасну верстку за допомогою Flexbox для створення гнучких макетів
  • Адаптивне бургер-меню для мобільних пристроїв
Скріншот веб-застосунку BookShelf на десктопі Скріншот веб-застосунку BookShelf на мобільному пристрої

Завдання 2: Розмітка HTML-документа

Засобами HTML та CSS виконати Завдання №2 у звітному HTML-документі

  • Розмітку за допомогою таблиці (варіант 1)
    • Варіант 1
  • Розмітку за допомогою блоків (плаваючих елементів) (варіант 2)
    • Варіант 2

Завдання 2.1: Таблична верстка

Розмітка за допомогою таблиці

Варіант: 1

Варіант 1

Фіксована таблична верстка (ширина 960px):

Хедер сайту

Фіксована таблична верстка (960px)

Ліва колонка

Контент лівої колонки

Центральна колонка

Основний контент сайту

Права колонка

Додатковий контент

Футер сайту © 2025

HTML-код фіксованої табличної верстки:

<table class="table-layout" style="width: 960px; margin: 0 auto;"> <tr> <td colspan="3" class="header-cell"> <h3>Хедер сайту</h3> <p>Фіксована таблична верстка (960px)</p> </td> </tr> <tr> <td style="width: 200px; background-color: #e8f4fc; padding: 20px;"> <h4>Ліва колонка</h4> <p>Контент лівої колонки</p> </td> <td style="background-color: #f0f0f0; padding: 20px;"> <h4>Центральна колонка</h4> <p>Основний контент сайту</p> </td> <td style="background-color: #f0f0f0; padding: 20px;"> <h4>Права колонка</h4> <p>Додатковий контент</p> </td> </tr> <tr> <td colspan="3" class="footer-cell"> <p>Футер сайту © 2025</p> </td> </tr> </table>

Гумова таблична верстка (ширина 90%):

Хедер сайту

Гумова таблична верстка (90%)

Ліва колонка

Контент лівої колонки

Центральна колонка

Основний контент сайту

Права колонка

Додатковий контент

Футер сайту © 2025

HTML-код гумової табличної верстки:

<table class="table-layout" style="width: 90%; margin: 0 auto;"> <tr> <td colspan="3" class="header-cell"> <h3>Хедер сайту</h3> <p>Гумова таблична верстка (90%)</p> </td> </tr> <tr> <td style="width: 20%; background-color: #e8f4fc; padding: 20px;"> <h4>Ліва колонка</h4> <p>Контент лівої колонки</p> </td> <td style="background-color: #f0f0f0; padding: 20px;"> <h4>Центральна колонка</h4> <p>Основний контент сайту</p> </td> <td style="background-color: #f0f0f0; padding: 20px;"> <h4>Права колонка</h4> <p>Додатковий контент</p> </td> </tr> <tr> <td colspan="3" class="footer-cell"> <p>Футер сайту © 2025</p> </td> </tr> </table>

Завдання 2.2: Блокова верстка

Розмітка за допомогою блоків (плаваючих елементів)

Варіант: 2

Варіант 1

Фіксована блокова верстка (ширина 960px):

Хедер сайту

Фіксована блокова верстка (960px)

Лівий блок

Бокова панель

Верхній правий блок

Горизонтальний блок ближче до верху

Права колонка 1

Перша колонка знизу

Права колонка 2

Друга колонка знизу

Футер сайту © 2025

HTML-код фіксованої блокової верстки:

<div class="block-layout" style="width: 960px; margin: 0 auto;"> <div class="block-header"> <h3>Хедер сайту</h3> <p>Фіксована блокова верстка (960px)</p> </div> <div class="block-container"> <div class="block-left"> <h4>Малий лівий блок</h4> <p>Бокова панель</p> </div> <div class="block-right"> <div class="block-top"> <h4>Верхній правий блок</h4> <p>Горизонтальний блок ближче до верху</p> </div> <div class="block-columns"> <div class="block-col"> <h4>Права колонка 1</h4> <p>Перша колонка знизу</p> </div> <div class="block-col"> <h4>Права колонка 2</h4> <p>Друга колонка знизу</p> </div> </div> </div> </div> <div class="block-footer"> <p>Футер сайту © 2025</p> </div> </div>

Гумова блокова верстка (ширина 90%):

Хедер сайту

Гумова блокова верстка (90%)

Лівий блок

Бокова панель

Верхній правий блок

Горизонтальний блок ближче до верху

Права колонка 1

Перша колонка знизу

Права колонка 2

Друга колонка знизу

Футер сайту © 2025

HTML-код гумової блокової верстки:

<div class="block-layout" style="width: 90%; margin: 0 auto;"> <div class="block-header"> <h3>Хедер сайту</h3> <p>Гумова блокова верстка (90%)</p> </div> <div class="block-container"> <div class="block-left"> <h4>Малий лівий блок</h4> <p>Бокова панель</p> </div> <div class="block-right"> <div class="block-top"> <h4>Верхній правий блок</h4> <p>Горизонтальний блок ближче до верху</p> </div> <div class="block-columns"> <div class="block-col"> <h4>Права колонка 1</h4> <p>Перша колонка знизу</p> </div> <div class="block-col"> <h4>Права колонка 2</h4> <p>Друга колонка знизу</p> </div> </div> </div> </div> <div class="block-footer"> <p>Футер сайту © 2025</p> </div> </div>

CSS-код для блокової верстки:

.block-layout { background: white; border: 1px solid #ddd; margin: 15px 0; padding: 10px; } .block-header { background-color: #2c3e50; color: white; padding: 20px; margin-bottom: 15px; text-align: center; } .block-container { overflow: hidden; margin-bottom: 15px; } .block-left { float: left; width: 200px; background-color: #e8f4fc; padding: 15px; margin-right: 15px; min-height: 150px; } .block-right { overflow: hidden; } .block-top { background-color: #f0f0f0; padding: 15px; margin-bottom: 15px; } .block-columns { overflow: hidden; } .block-col { float: left; width: 48%; background-color: #f0f0f0; padding: 15px; min-height: 120px; } .block-col:first-child { margin-right: 4%; } .block-footer { clear: both; background-color: #2c3e50; color: white; padding: 15px; text-align: center; } /* Адаптивність для блокової верстки */ @media (max-width: 768px) { .block-left { float: none; width: 100%; margin-bottom: 15px; } .block-col { float: none; width: 100%; margin-bottom: 15px; } .block-col:first-child { margin-right: 0; } }

Завдання 3: Flexbox верстка

Реалізація варіанту за допомогою Flexbox

Варіант (остання цифра 2):

Професія Java-розробник

Портфоліо для старту кар'єри

Навчання на реальних кейсах

Заробіток після 4 місяців навчання

Можна працювати віддалено

Як проходить навчання

1
Дивіться відеолекції

Лічильні відео з аргументами ілюстративними емоцій.

2
Робите завдання і відправляєте на перевірку

Послідовити не менше, вибирайте аргументний режим навчання.

3
Чи отримуєте розбір вашої роботи

Опис курсового розроблення та теорії навчання 1 разу в тиждень.

4
Чи працюєте над помилками

Проводити інтерпретацію ще раз, щоб переконливості, що в цей раз все справляється.

Рівні навчання

Перший рівень: чітка і зрозуміла теорія

За 4 місяці вам необхідно буде пройти 16 тем. Ви самостійно вивчіть базові навички, з якими зможете створювати справжні проекти. Ви створите дипломний проект - діапазон блогу в веб-інтерфейсі. Захист проекту проходить у відкритому режимі - на нашому майданчику або по відеозв'язку.

Другий рівень: інтенсивна практика

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

CSS-код для Flexbox верстки:

.course-features { display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0; } .feature { flex: 1; min-width: 200px; background: #f8f9fa; padding: 15px; border-radius: 5px; border-left: 4px solid #4a6491; } .step { display: flex; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .step-number { width: 40px; height: 40px; background-color: #4a6491; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: bold; margin-right: 15px; flex-shrink: 0; }

Висновки до лабораторної роботи №3

Висновки

Під час виконання лабораторної роботи №3 було успішно освоєно роботу з різними типами верстки веб-сторінок: табличною, блоковою (з використанням плаваючих елементів) та сучасною версткою за допомогою Flexbox.

Ключові навички, отримані в ході роботи:

  1. Таблична верстка: Навчилась створювати макети веб-сторінок за допомогою HTML-таблиць, реалізувала як фіксовану (з заданою шириною), так і гумову (респонсивну) табличну верстку.
  2. Блокова верстка: Опанувала техніки верстки з використанням плаваючих елементів (float), що дозволяє створювати складні багатоколонкові макети. Реалізувала адаптивність блокової верстки за допомогою медіа-запитів.
  3. Flexbox верстка: Застосувала сучасну технологію CSS Flexbox для створення гнучких та адаптивних макетів. Flexbox дозволяє легко керувати розташуванням, розмірами та порядком елементів на сторінці.
  4. Адаптивна верстка: Реалізувала адаптивність для всіх типів верстки за допомогою медіа-запитів та метатегу viewport, що забезпечує коректне відображення на різних пристроях.
  5. Порівняльний аналіз: З'ясувала переваги та недоліки різних типів верстки. Таблична верстка проста, але негнучка та малопридатна для адаптивності. Блокова верстка з float більш гнучка, але вимагає додаткових зусиль для очищення потоків. Flexbox верстка є найсучаснішим та найгнучкішим підходом.

Загальний висновок: Виконання лабораторної роботи №3 дозволило отримати практичні навички роботи з основними типами верстки веб-сторінок. Отриманий досвід дозволяє обґрунтовано вибирати підхід до верстки залежно від конкретних вимог проекту. Сучасні технології, такі як Flexbox, надають розробникам потужні інструменти для створення складних, адаптивних та підтримуваних макетів.