4 Верстання сторінки



Скачати 34.66 Kb.
Дата конвертації31.03.2017
Розмір34.66 Kb.

4.3. Розробка сайту. Верстання сторінки

4.4. Верстання сторінки


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

Верстання сторінок – це процес написання HTML чи XHTML коду сторінки, при якому сторінка набуває вигляд, подібний до дизайну макету. Безумовно, існують і інші технології розмітки тексту, які підтримуються браузерами, проте, такі речі не є поки що популярними. Найпоширенішим варіантом є верстання за допомогою мови HTML та стилів CSS.

До HTML верстки можна застосувати два підходи щодо розподілення елементів сегментів у різних місцях.


Таблична верстка


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

Метод широко застосовувався до появи стандарту CSS, оскільки на той момент не було іншої можливості точно розташувати елементи на сторінці. Таблиці є спроможними автоматично змінювати свої розміри відповідно до вмісту, і навпаки, тримати точні розміри певних комірок, дозволяють швидко і зручно розставити по комірках різнорідну текстову чи графічну інформацію.

Таблиці в HTML можуть бути вкладеними, що дозволяє створювати цілі ієрархії таблиць при верстанні складних сторінок, окремі елементи яких мають зберігати своє розташування і розмір на екрані незалежно від розміру вікна браузера, тоді як інші елементи, навпаки, мають змінюватися в розмірах або змінювати своє розташування щодо решти об'єктів документа.

Таблична верстка залишається найбільш зручною та простою в засвоєнні, і багато розробників продовжують нею користуватися.


Переваги табличної верстки:


  • Табличні теги з'явилися в стандартах HTML значно раніше за блокові теги, і тому практично всі браузери відображають їх коректно і що є важливим — практично однаково. Цей метод верстки зарекомендував себе, як найбільш стабільний і надійний.

  • При розумному підході таблиці спроможні чітко структурувати інформацію.

  • У випадку, якщо елементи макету є яскраво вираженою таблицею, застосування блокової верстки буде недоцільним.

Недоліки табличної верстки:


  • У випадку, якщо макет містить багато дрібних деталей, HTML-код виходить занадто громіздким, оскільки він складається в основному з вкладених таблиць.

  • Таблична верстка погано поєднується з концепцією позиціонування.

  • Таблиці не можуть перекривати одна одну.

  • В табличні теги не можна прописати програмний код скрипта або певний сценарій інтерактивності елементу.

Блокова верстка


На відміну від табличного способу розташування даних блокова верстка не потребує чіткої прив'язки кожного логічного блоку до певної комірки. Спосіб блокової верстки базується на абсолютно інших принципах розташування і взаємодії за допомогою блокових елементів
і . Кожний логічний елемент (текст, картинка, таблиця) представляються як окремі блоки, які також можуть бути вкладеними. Таке розміщення є більш природним потоком.

Характерним моментом для блокової верстки є почергове розташування блоків - один за іншим і чітке розділення між собою. Розташування блоків в одному рядку можливим, але воно використовується лише у випадках, коли виникає потреба добитися особливого ефекту.



Суттю блокової верстки є використання всіх можливостей CSS замість таблиць і скеровуючих зображень.

Переваги блокової верстки:


  • Як правило, об’єм коду сторінки, що зверстана блоками є відчутно меншим, ніж об’єм коду сторінки, де застосовано табличну структуру.

  • Блокова верстка дуже «дружньо» відноситься до позиціонування

  • Блоки можуть перекривати один одного, причому розробник вказує, який з блоків буде зверху.

  • Блокова верстка дозволяє розмістити блок, що відображає будь-яку частину сторінки на початку html-коду. Це буде доречним при застосуванні певних технологій просування сайтів.

Недоліки блокової верстки:


  • Блокова верстка є досить складною і потребує професійних навичок верстання.

  • Блокову верстку неможливо застосовувати для певних структур сторінок.

  • За низької роздільної здатності монітору блоки можуть зсуватися, перекривати один одного, або закривати доступ до інтерфейсних елементів сайту.

  • Блокова верстка має проблеми з сумісністю в різних браузерах.

  • Не всі типи браузерів якісно обробляють блоки, особливо старі версії браузерів, що не підтримують стандарти CSS 2.0.

Кажучи про блокову і табличну верстки не можна не згадати про те, що деякі верстальники декларують свою повну байдужість до суперечки між прихильниками різних методів. На їх думку, різниці між таблицями і блоками практично немає, а всі проблеми з вибором певного типу верстки пов'язані виключно з вузькою кваліфікацією виконавців.

Оптимальною версткою буде та, яка:


  • Максимально ідентично відображає сторінку в різних браузерах.

  • Код сторінки має найменший розмір.

  • Зрозуміло відображає сторінку в різних роздільних здатностях екрану.








База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка