Верстка веб-сторінок

За навчальною програмою 2018 року

Урок 9

10

(11)

Актуалізація опорних знань і життєвого досвіду

Розділ 2 § 9

Розкажіть, що Вам відомо про верстку веб-сторінок.

Попередні роки на уроках інформатики верстку ми розглядали як...

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

Верстка — це процес створення веб-сторінок із попередньо створеного макету дизайну сайта, заздалегідь намальованого за допомогою графічних редакторів

Верстка — це кінцевий етап розробки сайта, створення структури сайта, що буде визначати відображення тексту й графіки на сайті

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

Розрізняють такі верстки веб-сторінок:

«Жорстка» верстка

«Гумова» верстка

Усі елементи веб-сторінки мають завжди фіксовані розміри, незалежно від розміру монітора користувача й установленого дозволу екрана

Дає змогу змінювати розміри елементів сторінки, підлаштовуючись під різні розміри й дозволи моніторів

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

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

HTML-верстка сайта

CSS-верстка сайта

Залежно від основних елементів html, що використовуються у верстці сайта, виділяють:

табличну

блокову

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

HTML-верстка сайта — це верстка сайта на основі мови гіпертекстової розмітки HTML.

Таблична верстка сайта — це верстка, за якої структура сторінки сайта представлена у вигляді таблиці. Кожний елемент сторінки — це одна або кілька комірок таблиці.

Даний тип створення сторінок був розповсюджений до впровадження використання CSS, але після поступився більш ефективнії моделі проектування сторінок - блочній верстці.

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

Блокова верстка сайта, або, як її ще називають верстка div’ами, — це верстка сайта на основі елементів <div>. Така верстка має ряд переваг: стислість коду, висока швидкість завантаження коду і т. д.

<div id="blok1"> вміст блоку 1</div>

<div id="blok2"> вміст блоку 2</div>

<div id="blok3"> вміст блоку 3</div>

...

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

Тег <div> - це так званий контейнер (блок), який може містити форматований текст, зображення та ін. Важливою особливістю блоків є їх здатність накладатися один на одного при верстці.

Верстка div активно використовує CSS для гнучкого й зручного форматування елементів веб-сторінок. За допомогою CSS можна з точністю до пікселя задати на сторінці:

розташування блоків

необхідні відступи

колір

розмір шрифтів і багато іншого

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

CSS-верстку сайта іноді виділяють в окремий вид верстки сайта, хоча в сучасному веб-дизайні каскадні таблиці стилів (css) використовуються практично у будь-якій верстці.

HTML

XHTML

XML

Каскадні таблиці стилів описують зовнішній вигляд сторінок сайта, написаних мовою розмітки:

10�(11)

Верстка веб-сторінок

Розділ 2 § 9

В сучасному веб-дизайні все частіше використовується комбінована верстка сайта — це дає змогу набагато збільшити можливості верстки, створити більш складний і привабливий сайт.

10�(11)

Запитання для рефлексії

Розділ 2 § 9

1. Чи можна сказати, що я розумію поняття «верстка веб-сторінок»?

2. Наскільки добре у мене виходить здійснювати верстку веб-сторінок?

3. Які питання потребують мого самостійного дослідження?

4. Чи маю я задоволення від роботи на уроці?

10�(11)

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

Розділ 2 § 9

Продовжити виконання верстки веб-сторінок

10�(11)

Працюємо за комп’ютером

Розділ 2 § 9

10�(11)

Дякую за увагу!

За навчальною програмою 2018 року

Урок 9

10

(11)