3 правила та приклади адаптивної верстки веб-сторінок АйТі бубон
Інструменти користувача
Інструменти сайту
Зміст
Верстка веб-сторінок (page-proof)
3 правила адаптивної верстки
, таблиця можливих параметрів мета-тегу viewport:
Таблична верстка
Метод табличної верстки застарів. Основними причинами відходу від такого способу вважається величезна кількість коду, що виникає внаслідок опису кожного осередку окремими тегами. Також варто зауважити, що кожен осередок має стінки, які необхідно також описати. Код звичайної веб-сторінки, яка верставається табличним способом, більше 4-5 разів коду сторінки, яка створюється блоковим методом.
Блокова верстка
Блочна верстка або верстка за допомогою шарів.
На відміну від табличного способу розташування даних блочна верстка можлива без чіткої прив'язки кожного логічного блоку до певної комірки. Спосіб блокової верстки базується на зовсім інших принципах розташування та взаємодії. В даному випадку кожен логічний елемент (текст, картинка, таблиця) розглядаються у вигляді окремого блоку і таким же способом розміщуються на сторінці.
Характерним для блокової верстки є те, що блоки, як правило, повинні розташовуватися по черзі – один за одним і чітко розділятися між собою. Розташування в одному рядку можливе, але воно використовується тільки в деяких випадках, коли виникає потреба досягти особливого ефекту.
Під поняттямблок(шар) у випадку мають на увазі елементарну прямокутну область(тегdiv ), якого застосовується стильове оформлення. Для вказівки атрибутів цієї області існує низка якостей, серед яких виділяють рамку (border), поля (контури) (margin) та відступи (padding). Наповненням блоку можеслужити будь-яка інформація - зображення, текстовий фрагмент або щось інше.
Фіксований макет
Фіксований макет - ширина Веб- сторінки виставлена в незмінне значення, що не залежить від роздільної здатності екрана користувача. Розробнику сайту ширина вікна браузера користувача невідома, оскільки вона може змінюватись у найширших межах. Ширина залежить від роздільної здатності монітора, довжини його діагоналі, розміру вікна. Необхідно визначити, на яку мінімальну роздільну здатність екрана монітора розрахований сайт (Стат. використовуються дозволів монітора, liveinternet.ru - дозволу моніторів). Визначившись із відповіддю це питання, ми отримуємо кінцеве число пікселів – особливо важливим параметром є кількість пікселів, характеризуючих ширину. Від цього кінцевого числа потрібно відняти 20 пікселів (ширину вертикальної смуги прокручування, яка є у браузерах за замовчуванням) – і ми отримаємо ширину макета сайту в пікселях. Тобто якщо розрахунковий дозвіл по ширині дорівнює 1024 - то ширина макета повинна бути 1004 (рекомендується 1000, 980-960) пікселя (не більше), або якщо 1280 - то 1260, і так далі.
Для створення фіксованого макета, слід продумати деякі попередні моменти:
«Гумовий» макет
«Гумовий» макет. У цьому вигляді верстки одиницею виміру виступають відсотки. Загальна робоча ширина вікна браузера — 100%, і стовпчики макета в сумі не повинні її перевищувати.
Позиціонування елемента щодо вікна браузера та інших елементів
Існують два способи позиціонування елементів щодо один одного, це застосування стильової властивостіfloat або можна скористатися властивістю Основи роботи з CSSposition.
Величини задаються з top
За замовчуванням вміст контейнерів div на сторінці розташовуються по вертикалі, спочатку йде один шар, нижче знаходиться наступний і т.д. При створенні колонок потрібно розташовувати шари поруч по горизонталі, навіщо застосовується кілька методів. Одним із поширених є використання стильової властивості float. Хоча він призначений для створення обтікання навколо елемента, з тим самим успіхом float встановлює і колонки.
За замовчуванням ширина блоку обчислюється автоматично і займає весь доступний простір. Тут слід зазначити, що під цим мається на увазі. Наприклад, якщо тег
в коді документа є один, то він займає всю вільну ширину вікна браузера і ширина блоку дорівнюватиме 100%. Варто розмістити один тег
всередину іншого, як ширина внутрішнього тега починає обчислюватися щодо батька, тобто. зовнішній контейнер.
За умовчанням шари вишиковуються по вертикалі один під одним, але за допомогою CSS властивості float їх можна змусити розташовуватися поруч по горизонталі. При цьому потрібно встановити ширину шарів і встановити для них float. Оскільки для другого шару також застосовується обтікання, то доданий текст міститься праворуч від шару. Уникнути цього допоможе властивість clear, вона скасовує дію float.
Створення колонок за допомогою float має низку особливостей. Перша, як згадувалося, у тому, що після плаваючих елементів потрібно додавати елемент із властивістю clear, який вимикає обтікання. Це необхідно в тому випадку, якщо передбачається використовувати шари нижче. Друга особливість пов'язана з уявленням плаваючих шарів. Якщо вікно браузера зменшити до певної межі, шари переміщаються по вертикалі.
Float -Список можливих значень: left,right,none.
Clear - список можливих значень:
Якщо елемент переміщається вправо, він вирівнюється праворуч, а весь наступний контент буде вирівняний по лівій стороні (доки не досягне нижньої межі елемента).
У випадку, якщо ширина наступного контенту зафіксована, він не буде переноситися нижче за вирівняний float-ом div -а. Натомість він застосує свою ширину.
Властивістьposition без згадки координат (значень left, top, right або bottom) не змінює положення поточного шару, але впливає розташування близьких чи вкладених шарів.
overflow, overflow-x, overflow-y управляє відображенням вмісту блочного елемента, якщо воно цілком не поміщається і виходить за область заданих розмірів, то включається прокручування (scroll).
Ширина та висота шару
За замовчуванням ширина шару визначається як auto, це дозволяє вписувати шар у вікно браузера, не враховуючи значення встановлених полів. Якщо змінити ширину на 100%, то при додаванні значення відступів, полів або меж неминуче з'явиться горизонтальна смуга прокручування.
Спосіб встановлення ширини залежить від макета і вибору розробника, але в будь-якому випадку потрібно враховувати особливості блокових елементів і створювати універсальний код.
З висотою блокових елементів справа аналогічна ширині. Браузер за висоту шару приймає значення якості height і додає до нього значення margin, padding і border. Якщо висота шару не встановлено явно, вона обчислюється автоматично виходячи з обсягу вмісту.
Колір фону елемента найпростіше встановлювати через універсальну властивість background. Фоном при цьому заливається область, яка визначається значеннямиwidth, height та padding. Таким чином, margin не бере участі у формуванні кольорової області.
Блокові елементи виступають як основний будівельний матеріал при верстці веб-сторінок. Такі елементи характерні тим, що завжди починаються з нового рядка і займають усю доступну ширину області, де розташовуються.
Створення врізок
Врізання називається блок з малюнками і текстом, який вбудовується в основний текст. Врізання зазвичай розташовується по лівому або правому краю текстового блоку, а основний текст обтікає її з інших боків. Щоб врізка виділялася в тексті, зазвичай встановлюють фоновий колір і додають рамку. При створенні врізок слід обов'язково вказувати ширину за допомогою width. Інакше розмір шару виявиться набагато ширшим, ніж це потрібно.
Header(Шапка сайту)
Тег задає "шапку" сайту (заголовок сайту). Заголовок найчастіше складається з логотипу сайту та слогану.