1 of 43

http://vsimppt.com.ua/

Адаптивна верстка

2 of 43

Повторимо правила поведінки та безпеки�за комп’ютером

http://vsimppt.com.ua/

3 of 43

11.12.2022

Пригадаємо

Сьогодні

  1. Що таке верстка та яка вона буває?
  2. З яким типом верстки ми познайомились на уроці?
  3. Під час роботи за ПК які плюси та мінуси ви виділили в табличній верстці?

4 of 43

11.12.2022

Орієнтація розробки сайтів періоду до 2000 років.

Сьогодні

Адаптивна верстка

1024х768

5 of 43

11.12.2022

Сьогодні

Адаптивна верстка

?

Для якого розширення писати сайт?

Наш час.

6 of 43

11.12.2022

Гумова (або блокова) верстка – спосіб опису блоків де розміри задаються не в статичному, а у відсотковому розмірі.

Сьогодні

Адаптивна верстка

7 of 43

11.12.2022

Сьогодні

Адаптивна верстка

<div id=“Block1”> </div>

<div class=“Block1”> </div>

<div> </div>

<Block1> </Block1>

Варіації створення блоків:

8 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

9 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

10 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

11 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

12 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

13 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

14 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

15 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

16 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

17 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Зовнішній відступ від всіх сторін на 10 пікселів.

Опис блоків

18 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

19 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Внутрішній відступ від всіх сторін на 5 пікселів.

Опис блоків

20 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

21 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

22 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

23 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

24 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

25 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

26 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

27 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

28 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

29 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

30 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

31 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

32 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

33 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

34 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

35 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

36 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

37 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

38 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

39 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

40 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

41 of 43

11.12.2022

Сьогодні

Адаптивна верстка

Опис блоків

42 of 43

11.12.2022

Повторюємо

  1. В чому полягає суть гнучкого налаштування блоків?
  2. Що означає код margin-left: 5%; ?
  3. Що означає код border-radius: 15px; ?

Сьогодні

43 of 43

Домашнє завдання

http://vsimppt.com.ua/

Відповідно до розробленої табличної структури сайту в дома, розробіть аналогічну блочну (гнучку) структуру.