Урок 15

Проектування та верстка веб-сторінок. Кросбраузерна оптимізація сторінок сайту. Адаптивна верстка




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

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



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

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

Кросбраузерна оптимізація:

тестування кросбраузерної сумісності, важлива складова частина розробки сайту, це перевірка того, як виглядають всі веб-сторінки при перегляді в різних браузерах наприклад:
Chrome,
Firefox,
Internet Explorer,
Safari

Зрозуміло, що під абсолютно всі браузери адаптувати сайт неможливо, але треба тестувати ті, якими користуються більшість користувачів дізнатися це можна, наприклад, зі статистики 

Інструменти для тестування кросбраузерності 

Browserling;
Browsershots;













Параметри дозволів в Css3:

•320px (iPhone, ландшафтний режим),
•480px (iPhone, портретний режим),
•600px (планшети Android),
•768px (iPad і планшети Galaxy Tab)
•1024px (ландшафтний режим iPad і робочий стіл ПК)


Додаткові матеріали:

Немає коментарів:

Дописати коментар