Проектування та верстка веб-сторінок

1.

Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

2.

Проектування та верстка
веб-сторінок
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

3.

Проектування та верстка вебсторінок
Пригадайте:
Опишіть відомі Вам етапи розробки вебсайту.
Що таке верстка?
В чому полягає особливість технічного
завдання під час проектування сайту?
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

4.

Проектування та верстка веб-сторінок
Ти дізнаєшся:
Що таке мова
гіпертекстової
розмітки
Які теги є
елементами
засобами
створення
стилів
Які основні
ідеї
проектування
та верстки вебсайту
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

5.

Проектування та
верстка веб-сторінок
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

6.

Проектування та верстка веб-сторінок
Верстка веб-сторінки (англ. page-proof) — це процес створення вебсторінки із попередньо створеного макету дизайну сайту, заздалегідь
намальованого за допомогою графічних редакторів.
Основні підходи до верстки сайту
Фіксована
верстка
Гумова
верстка
При зміні розміру
вікна браузера
блоки не
поміняють свою
ширину, з'явиться
смуга прокрутки
Залежно від
розміру вікна
браузера, блоки
змінять свою
ширину
Адаптивна
верстка
Втілюється в
життя завдяки
різним скриптам
Чуйна
верстка
Версія
сайту для
мобільних
пристроїв
Являє собою
злиття адаптивної
і гумовою верстки
Фактично є
створенням
іншого сайту з
іншим дизайном,
версткою і URL
адресою
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

7.

Проектування та верстка веб-сторінок
Процеси створення сайту
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

8.

Проектування та верстка веб-сторінок
Макети веб-сторінок
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

9.

Проектування та верстка веб-сторінок
Блокова верстка сайту
•структура сторінки
сайту представлена у
вигляді таблиці
•HTML-верстка сайту
на основі мови HTML
HTML-верстка
Таблична
сайту
верстка сайту
Блокова
CSS-верстка
верстка сайту
сайту
•верстка сайту на
основі
елементів <div>
•CSS-верстка сайту,
каскадні таблиці
стилів
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

10.

Проектування та верстка веб-сторінок
Макети веб-сторінок
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Чашук О.Ф., вчитель інформатики
ЗОШ№23,
Луцьк
Луцьк
Основи мови HTML

11.

Домашнє завдання
Вивчити тему
Продовжіть розробку веб-сторінки
«Моя маленька батьківщина»
Заповнити словничок
Проектування та верстка
веб-сторінок
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк

12.

Працюємо за комп’ютером
Чашук О.Ф., вчитель інформатики ЗОШ№23,
Луцьк