ділу сторінки на окремі блоки: фрейми, таблиці і шари. Відповідно, можна було б говорити про три типи верстки. Однак фрейми зазвичай не виділяють в окремий тип (їх можна вважати підвидом таблиць) і розмова ведуть про два типи - табличній верстці і блокової верстці (її ще називають версткою шарами).
Фрейми були одним з перших варіантів розбиття статті на блоки. Основна ідея фреймів полягає в тому, що вікно браузера ділиться на декілька відокремлених вікон, в кожне з яких виводиться вміст окремого html-файлу. При цьому кожне вікно може або мати фіксовані розміри, або змінювати свій розмір пропорційно розміру вікна браузера.
Таблиці довгий час залишалися основним інструментом і для розробки структури сторінок сайту, оскільки пропонували досить простий і зручний механізм розміщення різних елементів на веб-сторінці. Завдяки наявності великого числа параметрів, наприклад, можливості завдання кордонів будь-який, в тому числі нульової товщини, таблиці дозволяють реалізувати довільний варіант розбиття сторінок на блоки, області, частини.
До переваг табличної верстки можна віднести:
· Створення багатоколонних документів
· Таблиці вдало підходять для створення гумового макета, ширина якого прив'язана до ширини вікна браузера
· Таблиці дозволяють легко забезпечити склейку декількох малюнків в одне зображення. Кожна картинка поміщається в певну клітинку, параметри таблиці при цьому встановлюються такими, щоб не виникло стиків між окремими осередками
· Таблиці відображаються в різних браузерах практично однаково, тому створення веб-сторінок спрощується.
До недоліків табличної верстки можна віднести:
· Довге завантаження
· Громіздкий код
· Погана індексація пошукачами
· Утруднено розділення вмісту та оформлення
· Неможливість накладення шарів
Останнім часом найпопулярнішим напрямком у верстці є так звана блокова верстка, реалізована за допомогою тегів lt; div gt; ... lt;/div gt ;. Її ще називають версткою за допомогою шарів. Це викликано тією обставиною, що блоки lt; div gt; ... lt;/div gt; часто вкладені одна в одну і утворюють свого роду шари .
Переваги використання блокової верстки:
· Блокова верстка відмінно пов'язується зі стилями, код при цьому виходить компактним і пошукові системи його краще індексують
· Шари-блоки можна накладати один на одного, що полегшує розташування елементів на веб-сторінці
· Більш швидке завантаження сторінок з блочною версткою в порівнянні зі сторінками табличної верстки
Є у блокової верстки і свої негативні сторони. При її застосуванні важче забезпечити однаковий вигляд сторінок в різних браузерах, оскільки не всі браузери в рівній мірі дотримуються специфікацій і стандартів.
Основою структури сторінки є модульна сітка. Модульна сітка являє собою набір невидимих ??напрямних, уздовж яких розташовуються елементи веб-сторінки.
Модульні сітки дозволяють спростити верстку сайту, оскільки всі матеріали розбиваються на окремі блоки, які вирівнюються по невидимим напрямними лініями. Такі блоки хоча і взаємозалежні один з одним, але зазвичай дозволяють незалежне редагування даних, що спрощує оформлення елементів.
Веб-сторінка фактично розглядається як набір прямокутних блоків, які викладаються в певному порядку. При цьому, як правило, дані розташовуються по колонках.
Якщо проаналізувати малюнок 2, то можна визначити, що інтернет-додаток розроблювальне в рамках даної випускної кваліфікаційної роботи побудовано на основі трьох колоною модульної сітки. При такій модульної сітці використовується три колонки - одна відводиться під основний текст, друга меню сайту (навігація), третя використовується для іншої корисної інформації. Даний варіант розташування інформації один з найпопулярніших і володіє високим рівнем зручності для користувача.
Малюнок 2. Макет будови сторінки.
На малюнку 2 представлений макет сторінки сайту, на якому відображені структурні елементи сторінки:
. Шапка сайту - Містить в собі банер колективу
. Лівий контент, Меню сайту (Навігація) - Здійснює перехід між сторінками сайту
. Основний контент - В даному блоці відображається інформація необхідна для користувача
. Нижній колонтитул - Містить в собі інформацію про розробників сайту
3.4 Розробка сайту. Структур...
