Текстовий веб-дизайн.
Текстовий дизайн найстаріший з усіх перерахованих і він являє собою просто шматок тексту, відформатованого за допомогою тегів абзацу, з розміщеними на ньому таблицями та іншими текстовими елементами.
Перевагою такого виду дизайну можна назвати тільки те, що такі сторінки дуже просто створювати і вони швидко завантажуються в браузерах. А ось недоліків дуже багато і серед яких це дуже бідний вигляд станиці з таким дизайном, на якому розміщена інформація. На такій сторінці нету можливості довільного розміщення елементів на сторінці а всі вони повинні йти один за іншим по черзі. Також істотним недоліком є те, що нам потрібно для кожної сторінки створювати окремий дизайн, немає можливості динамічно довантажувати форматування і за рахунок чого немає можливості скоротити навантаження на сервер.
Фреймовий веб-дизайн.
Дизайн на фреймах це був наступний крок в дизайні і представляв собою сторінку, на яку з певною сторінки буде довантажувати різного роду оформлення і тим самим можна було знизити навантаження на сервер.
Після того як був використаний цей метод то позитивний ефект не змусив себе чекати і швидкість завантаження моментально збільшилася в кілька разів. Також завдяки фреймам можна було дуже зручно користуватися оформленням сайту.
Фрейми зняли деякі проблеми при створенні сторінок але тут з'явилася дуже серйозна проблема: фрейми не сертифіковані за міжнародними стандартами і тому в кожному браузері сторінка буде відображатися по різному. Відмінності були кардинальні, але це часто заводить дизайнерів в глухий кут і з почався пошук рішень для виходу з ситуації, що склалася.
Табличний дизайн.
Після того як стало ясно що фреймовий дизайн не є спроможним то було прийнято рішення створювати сайти на таблицях. Такий метод мав дві важливі властивості: таблиці це стандартна команда в мові HTML і був стандартизований на світовому рівні а також те що всі елементи таблиці можна об'єднувати і редагувати за допомогою атрибутів або таблиць стилів.
Були також і недоліки у табличного дизайну. Перше це монолітність дизайну, тобто в одному файлі містився повністю весь код починаючи від заголовка і закінчуючи копірайтом. Також якщо потрібно було створити складний дизайн то код був дуже заплутаний і це створювало певні проблеми при редагуванні і наповненні сайту.
Контейнерний дизайн.
Контейнерний дизайн це ідеальний варіант в наш час і зараз ми подивимося чому така ситуація. Контейнерний дизайн містить в собі не тільки стандартні теги мови HTML а й може містити в собі підкачуємі елементи з таблиць стилів і що помітно знижує розмір файлу і тим самим дуже сильно збільшилася швидкість завантаження сторінок.
Також всі теги і стилі для дизайну стандартизовані і тому сайт буде відображатися правильно у всіх браузерах і питання кросбраузерності не хвилює фахівців.
Але і не обійшлося без зауважень до такого виду дизайну. Для того щоб створити дуже складний дизайн потрібно застосовувати більшу вкладеність тегів і тим самим можна запитати як себе так і інших фахівців, які будуть коригувати дизайн після вас і це єдиний недолік по якому контейнерний дизайн поступається табличному.
Для контейнерного дизайну існують тільки два основних тега за допомогою яких ви зможете створити блоки сайту а також прикрасити все це після того як буде все готово. Спочатку давайте розглянемо що таке за тег DIV і для чого він нам потрібен.
Тег DIV є блоковий елемент який без додаткових параметрів у файлі стилів непомітний і за рахунок чого він отримав таку популярність. Потрібно просто створити каркас з тегів і вже після цього можна прикрасити і розташувати блоки так, як вам потрібно. Тег DIV парний тег і для того щоб створити потрібний вам блок просто потрібно поставити конструкцію:
Після того як створена така конструкція на сторінці буде виділено місце для блоку, яке ми можемо побачити тільки після того як заповнимо його. Розміри блоку матимуть в ширину повністю все вікно а висота в залежності від того як і чим ми його заповнимо.
Атрибути для тега DIV.
Для того щоб можна було до конкретного тегу прописати команди у файлі стилів вам потрібно застосувати атрибути серед яких найпоширеніші це id і class давайте спочатку я покажу як треба застосовувати такі атрибути для блоків.
Атрибут id:
Атрибут class:
Тепер давайте розберемося яка різниця між цими двома атрибутами. Функцію вони виконують однакові але тільки атрибут class з однаковим ідентифікатором можна застосовувати скільки завгодно раз в той час як id тільки один і тому я завжди використовую атрибут class.
Тег SPAN майже повна копія DIV за властивостями, так само саме можна застосовувати атрибути, фарбувати за допомогою таблиць стилів але є дуже істотне і важлива відмінність-тег не створює блоку і тим самим його можна застосовувати як всередині тега DIV так і всередині навіть цілого тексту, не буде ніяких зрушень оформлення або розривів рядка.
Тепер давайте на дизайні свого сайту я покажу де і який тег я застосовував при верстці.
Як бачите для того щоб створити каркас сайту потрібно просто все області сайту розбити на блоки і після цього можна сміливо верстати сайт.