Міжнародний Європейський Університет

ЗВІТИ З ЛАБОРАТОРНИХ РОБІТ

Дисципліна: "Програмування інтернет-застосувань"

Студентка: Добрякова Діана Олександрівна
Група: ІПЗ-23-301

Фото студента

Тема та мета роботи

Тема: Створення веб-сторінок за допомогою таблиць, блоків та Flexbox.

Мета: Навчитися створювати фіксовані та гумові макети сторінок, освоїти Flexbox та адаптивне розташування елементів.

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

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

<table style="width:600px; height:400px; border-collapse:collapse;">
<tr><td colspan="3" style="background:#007BFF; color:white">1</td></tr>
<tr><td style="background:#FFC107">5</td><td style="background:white">4</td><td style="background:#FFC107">2</td></tr>
<tr><td colspan="3" style="background:#007BFF; color:white">3</td></tr>
</table>

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

<table style="width:80%; height:80vh; border-collapse:collapse;">
<tr><td colspan="3" style="background:#007BFF; color:white">1</td></tr>
<tr><td style="background:#FFC107">5</td><td style="background:white">4</td><td style="background:#FFC107">2</td></tr>
<tr><td colspan="3" style="background:#007BFF; color:white">3</td></tr>
</table>

Фіксована блокова верстка

<div style="width:600px; margin:0 auto;">
<div style="background:#FFC107; height:80px;">1</div>
<div style="background:#007BFF; width:120px; height:300px; float:left;">2</div>
<div style="background:red; width:360px; height:50px; float:left;">Top</div>
<div style="background:white; width:240px; height:200px; float:left;">3</div>
<div style="background:#007BFF; width:120px; height:200px; float:left;">4</div>
<div style="background:#FFC107; height:50px; clear:both;">5</div>
</div>

Гумова блокова верстка

<div style="width:90%; margin:0 auto;">
<div style="background:#FFC107; height:10vh;">1</div>
<div style="background:#007BFF; width:20%; height:60vh; float:left;">2</div>
<div style="background:red; width:60%; height:10vh; float:left;">Top</div>
<div style="background:white; width:40%; height:40vh; float:left;">3</div>
<div style="background:#007BFF; width:20%; height:40vh; float:left;">4</div>
<div style="background:#FFC107; height:10vh; clear:both;">5</div>
</div>

Flexbox

Кожному студенту виконати свій номер варіанта Завдання №3, за технологією FLEXBOX та засобами CSS. Номер варіанта відповідає останній цифрі студента у списку групи.

Висновки

У результаті виконання роботи я навчилась створювати макети веб-сторінок різних типів: табличні, блокові та на основі Flexbox. Flexbox забезпечує просту адаптивність і контроль над вирівнюванням елементів.