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

Опрацювати теоретичний матеріал:

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

Верстка веб-сторінки — це структура вже створеної сторінки.

Етапи створення сайту

•Постановка мети
•Технічне завдання
•Проектування
•Верстка
•Наповнення
•Вебмастерінг
•Розміщення
•Тестування
•Просування
•Підтримка

Основні підходи до верстки сайту:

Фіксована верстка. При зміні розміру вікна браузера блоки не поміняють свою ширину, з’явиться смуга прокрутки.

Гумова верстка. Залежно від розміру вікна браузера, блоки змінять свою ширину.

Адаптивна верстка. Втілюється в життя завдяки різним скриптам.

Чуйна верстка. Являє собою злиття адаптивної і гумовою верстки.

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

Способи верстки сайту:

•HTML-верстка сайту – це верстка сайту на основі мови гіпертекстової розмітки HTML. Залежно від основних елементів html, що використовуються при верстці сайту, виділяють табличну html-верстку й блокову html-верстку.
•Таблична верстка сайту – це верстка, при якій структура сторінки сайту представлена у вигляді таблиці. Кожний елемент сторінки – це одна або кілька комірок таблиці. Таблична верстка сайту зручна й широко застосовується верстальниками, однак вона не завжди може задовольнити потреби сайту зі швидкості завантаження.
•CSS-верстка сайту іноді виділяють в окремий вид верстки сайту, хоча в сучасному веб-дизайні каскадні таблиці стилів (css) використовуються практично при будь-якій верстці. Каскадні таблиці стилів описують зовнішній вигляд сторінок сайту, написаних мовою розмітки: HTML, XHTML, XML.
•Блокова верстка сайту, або як її ще називають верстка div’ами, – це верстка сайту на основі елементів <div>. Така верстка сайту має ряд переваг: стислість коду, висока швидкість завантаження коду та інше.

Умовно можна тут визначити такі блоки веб-сторінки:

• LogoBlock – місце логотипу;

• MenyBlock –меню сайту;

• Left1Block –лівий перший блок з додатковою інформацією;

• Left2Block –лівий другий блок з додатковою інформацією;

• Header –заголовок;

• Info Block –основний блок з даними;

• Right1Block – правий перший блок з додатковою інформацією;

• Right2Block – правий другий блок з додатковою інформацією

• Footer – підвал.

  

Кросбраузерність сайту — це властивість сайту однаково відображатися та функціонувати у відповідності до поставленого завдання в усіх браузерах. Простіше кажучи, таку характеристику дають сайтам, дизайн яких однаковий як в Internet Explorer, так і в Google Chrome

Виконайте інтерактивні вправи.

Скріни виконаних вправ прикріпіть до цього завдання.