Поиск по базе сайта:
Методичні вказівки до лабораторної роботи №4 з дисципліни «Веб проектування» для студентів спеціальності 05010103 «Системне проектування» icon

Методичні вказівки до лабораторної роботи №4 з дисципліни «Веб проектування» для студентів спеціальності 05010103 «Системне проектування»




Скачати 212.48 Kb.
НазваМетодичні вказівки до лабораторної роботи №4 з дисципліни «Веб проектування» для студентів спеціальності 05010103 «Системне проектування»
Дата конвертації06.01.2013
Розмір212.48 Kb.
ТипМетодичні вказівки


МІНІСТЕРСТВО ОСВІТИ І НАУКИ, МОЛОДІ ТА СПОРТУ УКРАЇНИ

НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА»

іНСТИТУТ КОМП’ютерних НАУК та ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ


Кафедра систем автоматизованого проектування





Основні прийоми верстання сторінок


Методичні вказівки до лабораторної роботи № 4

з дисципліни «Веб проектування»

для студентів спеціальності 7.05010103 «Системне проектування»


Львів-2011

Мета роботи. Набути навичок зі створення макету сторінок, модульної сітки, основних елементів навігації. Ознайомитися з основними прийомами верстання сторінок.

Основні прийоми верстання сторінок

Макет сторінки


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

Навіщо потрібний макет сторінок сайту? Макет дозволяє створити цілісну картину елементів сторінки, єдність та відчуття неподільного образного ряду. Макет впорядковує структуру сторінки, робить її зручною та зрозумілою сприйняття. Іноді, макетом сайту називають готовий зверстаний шаблон сторінки сайту.

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

Якщо перша сторінка сайту зовні дещо відрізняється від решти сторінок, тоді створення макету для сайту зводитися до планування однієї сторінки і єдиного шаблону, за яким будуть створено всі внутрішні сторінки. Всі сторінки майбутнього сайту повинні бути виконані в єдиному стилі, хіба що компоновка текстової області на головній сторінці може бути дещо складнішою, ніж у внутрішніх. Для такого сайту створюють один-два макети.

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

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

За сталими традиціями інформація розподіляється наступним чином:


  1. В верхній частині сторінки (шапка, хедер, header) містяться:

  • Логотип.

  • Заголовок.

  • Слоган.

  • Телефон.

  • Вибір мовної версії.

  • Меню навігації (по сайту).

  1. В середній (основній) частині сторінки:

  • Меню навігації по тематичних розділах сайту.

  • Основна інформація.

  • Зображення, банери.

  1. В нижній частині сторінки (підвал, футер, footer):

  • Копірайти.

  • Адреси, телефони.

  • Лічильники і банери.

  • Додаткове меню навігації (по сайту, по розділах сайту).

Модульна сітка


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

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

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

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



Позначення тексту в макетах



Позначення зображень в макетах

Одноколонна структура


Структура в одну колонку найчастіше зустрічається в академічному дизайні, при фіксований ширині сторінки і публікації великого тексту. Академічний дизайн характеризується мінімалізмом оформлення і навіть аскетизмом. Основна увага приділяється на змістовну частину, а не на дизайн. Переважно академічний дизайн зустрічається в науковому середовищі.



Типова схема одноколонної модульної сітки.

Як правило, спостерігається чотири основні блоки:

  1. Заголовок сторінки.

  2. Набір посилань на інші сторінки сайту (навігація).

  3. Власне сам текст.

  4. Контактна інформація в нижній частині сторінки.

Якщо висота сторінки є достатньо великою, то блок навігації дублюють внизу або роблять посилання «Догори», що пересуває сторінку на початок.

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

Двохколонна структура




Це один з найпоширеніших варіантів при використанні на сайтах.

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

  1. Основного тексту.

  2. Навігації чи іншої корисної інформації.

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

У якомусь сенсі двохколонна структура стала стандартом де-факто для інформаційних сайтів завдяки своєї зручності. Дійсно, все «під рукою»  і текст і посилання, до того ж дана сітка не заперечує застосуванню горизонтальної навігації, як це прийнято в одноколонній структурі.

Двохколонні сітки є зручними при створенні різних сайтів і не вимагають особливих знань з верстки веб-сторінок. Єдиним недоліком можна вважати хиба, що подібні сайти виглядають достатньо одноманітно. Але з іншого боку відвідувачам зручніше працювати з сайтом звичного вигляду, без зайвих «наворотів».

Трьохколонна структура




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

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

Одна з колонок віддається під навігацію, друга, найширша  під основний текст, а в третю колонку додають рекламу, посилання, поради тощо.

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

Для прикладу розглянемо головну сторінку певного сайту.






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

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

Якщо представити основні блоки сторінки у вигляді однотонних прямокутників, то отримаємо наочну модульну сітку, з якої відразу видно як складено сторінку.

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

Модульна сітка не є єдиним варіантом при створенні структури сторінки. Можна скористатися перспективою, хаотичністю або іншою структурою, головне, щоб вона була естетичною і привабливою.

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

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

Позиціювання сторінки у вікні браузера


Веб-сайт є електронним аналогом друкованого видання. Звісно, що інформація в любому складному документі має бути впорядкованою, і тут випливає основна відмінність між веб-сторінкою і сторінкою в журналі. Будь-яка поліграфія на зразок буклету, листівки або брошури друкується на листах встановленого розміру і в межах одного тиражу має лише незначні або навіть непомітні оку відмінності. Веб-сторінка відображається в браузерах на комп’ютерах численних користувачів. Зрозуміло, що це надвелика кількість різноманітних моніторів, операційних системи з різними налаштуваннями і, зрештою, браузерів. Отже, слід враховувати, що одна і та ж сторінка сайту буде по-різному відображатися в кожного користувача.

Чи можна зробити так, щоб сторінка відображалася однаково? Враховуючи, скільки доведеться взяти до уваги різних неоднозначних чинників, слід сказати, що це доволі складно. Тому, завдання створення веб-сторінок формулюється так: сформувати документ, який би з невеликими відмінностями коректно відображався на основних платформах і в популярних браузерах.

Існують певні особливості, які варто враховувати при верстанні сторінки.

Ширина документа


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

Фіксований дизайн


«Фіксованим» називають дизайн, коли ширина інформативної частини сторінки є визначеної величини в пікселах і не залежить від роздільної здатності монітора. Найчастіше при розробці фіксованого дизайну орієнтуються на найменшу роздільну здатність сучасних моніторів. Самі перші сайти орієнтувалися на роздільну здатність 640х480, згодом 800х600, але тепер переважна частина моніторів мають екрани з мінімальною роздільною здатністю 1024х768 пікселів, хоча, зазвичай, користувачі можуть обирати за своїми потребами значно більші показники.

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







  • Переваги. Простота алгоритму верстання документа. Після оптимізації сторінки для відображення з роздільною здатністю 1024x768 точок, можна бути впевненим, що при зміні екранних налаштувань елементи дизайну не будуть зсунутими. Даний варіант компоновки сайту в більшості випадків дозволяє ідентично відображати сторінки в різних браузерах.

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

Еластичний дизайн


«Еластичним» називають дизайн, коли сторінка розгортається на весь екран по ширині незалежно від встановленої роздільної здатності монітора. Наприклад, і при роздільній здатності 1024*748 і при 1600*1200 сторінка займатиме всю ширину екрану.

Цей вид макету використовує в якості одиниць вимірювання відсотки. Загальна робоча ширина вікна браузера  100%, і колонки макету в сумі не повинні її перевищувати, тому, для зручності, як правило, скрізь застосовують запис у відсоткох. При зміні розмірів вікна відбувається перерозподіл вмісту сторінки відповідно до нової ширини.

  • Переваги. Ефективно використовується вся площа екрану. Сторінка розтягується по всій ширині екрану, не лишається невикористаних порожніх полів. Дуже вдалий вибір для сайту, що містить багато інформації.

  • Недоліки.

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

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

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

Комбінований дизайн


Існує так званий «псевдо-еластичний» дизайн: ширина сторінки є фіксованою, але візуально сторінка як би заповнює весь екран. Такий ефект досягається за допомогою спеціальних дизайнерських прийомів - продовження верхніх і нижніх частин сторінки в обидві боки, використання фонового зображення, та багато чого, що робіть перехід від інформаційної частини сторінки до незаповненої менш різким і помітним. Але, ці прийоми не міняють суті фіксованого дизайну.

Який дизайн застосувати


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

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

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

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

Висота документа


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

А ось переміщення по горизонталі відбувається не так зручно, тому, горизонтальної смуги прокрутки бути не повинно.

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

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

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

Навігація по сайту


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

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

Значна зміна елементів навігації при переході від однієї сторінки сайту до наступної дезорієнтує користувача і відволікає його увагу.

Посилання на головну сторінку


Бажано мати посилання до головної сторінки на всіх сторінках сайту. Загальноприйнятим правилом є додавання до логотипу сайту посилання до головної сторінки.

Меню (навігаційні панелі)


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

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

Головне меню сайту


Містить посилання на основні розділи сайту. Пункти головного меню повинні бути максимально короткими, як правило – однослівними. Число пунктів в головному меню, їх назва і порядок не повинні мінятися при перегортанні сторінок. Добре було б певним чином виділити пункт, що відповідає відкритій сторінці. Це полегшує орієнтацію користувача у сайті, оскільки він бачить однотипне меню на всіх сторінках і одночасно розуміє, де він в даний момент знаходиться.

Якщо сторінка є достатньо об'ємною і для її перегляду потрібне перегортання, тоді головне меню бажано продублювати наприкінці сторінки. Додатково, там можна розташувати навігаційне посилання «догори» на початок сторінки.

Додаткове меню сайту


Як правило, має ієрархічну структуру і буває 3-х видів:

  1. Випадне меню. Автоматично випадає при наведенні вказівника мишки на пункт меню.

  2. Меню, що розкривається. При натисненні на меню розкривається перелік пунктів.

  3. Розкрите меню. Статичне меню, де відразу відображено всі пункти, часто має деревовидну структуру

Меню ієрархії документів


Досить зручним для відвідувачів сайту є зазначення місця сторінки в структурі сайту. Це можна реалізувати рядком у верхній частині сторінки приблизно такого вигляду:
^ Головна -> Розділ -> Підрозділ -> Назва поточної сторінки

При цьому всі старші пункти ланцюжка оформлюються як посилання. Особливо корисною така підказка буде у випадку, якщо сайт має більше трьох рівнів вкладеності.

Меню послідовної навігації


Якщо сторінка містить великий об’єм тексту (наприклад, книгу), краще роздрібнити цей об’єм на менші логічні частини. Тоді, після, а іноді і перед текстом виводиться меню послідовної навігації приблизно такого вигляду:
попередня сторінка * зміст * наступна сторінка

Іноді замість послідовної навігації застосовують пряму навігацію:
Частина 1 | Частина 2 | Частина 3 | Частина 4 | Частина 5 | Частина 6

Гіперпосилання


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

За об’єктом, на якій посилаються, розрізняють:


  • Зовнішнє гіперпосилання. Гіперпосилання, яке вказує на об’єкт, що розташований поза даним сайтом.

  • Внутрішнє гіперпосилання. Гіперпосилання, яке вказує на об’єкт, що розташований в даному сайту.

  • Непрацююче (зіпсоване) гіперпосилання. Гіперпосилання, яке вказує на недоступний або неіснуючий об’єкт.

За виконанням гіперпосилання бувають:


  • Текстовими.

  • Графічними.

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

^ Графічні гіперпосилання (кнопки) – це картинка, якій призначено адресу іншого об’єкта.

При наведенні вказівника мишки на текстове чи графічне гіперпосилання, він змінює свій вигляд. За замовченням - це іконка руки , яка є стандартною і звичною для всіх користувачів Інтернету. Іноді, заради новизни чи в плані експерименту дизайнери можуть змінити стандартне зображення на інше і збентежити відвідувачів сайту. Чи варто наголошувати, що подібних «експериментів» слід уникати.

Інтерактивність гіперпосилань


Часто до гіперпосилань застосовують елементи інтерактивності. Вони відображають реакцію гіперпосилання на  різні події, найчастіше  на  наведення користувачем вказівника мишки та на  натиснення (вибором).

Для  текстових гіперпосилань – це зміна кольору, підкреслення, розміру. Дизайнери мають можливість вибрати чотири кольори, для відображення різних станів гіперпосилань.

    1. Гіперпосилання, що досі не використовувалося.

    2. Гіперпосилання, на яке наведено вказівник мишки.

    3. Активне гіперпосилання — гіперпосилання в момент натискання на ньому.

    4. Переглянуте гіперпосилання — гіперпосилання, за яким вже було здійснено перехід. Такий колір браузер може зберігати відповідно до терміну зберігання журналу переглянутих сторінок, за замовченням цей термін складає 20 днів.

Для  графічних гіперпосилань – це заміна зображення елементу іншим зображенням, з  певним ефектом (зсув, підсвічування, тінь).



Вигляд кнопки після завантаження сторінки.



Вигляд кнопки при наведенні вказівника мишки.



Вигляд кнопки при натисненні вказівником мишки.

Відповідно, для такої інтерактивної кнопки дизайнер має підготувати відповідно 3 різні картинки.

Поради з розробки ефективного дизайну:


  • ^ Відвідувачі спочатку дивляться на ліву верхню частину сторінки, а згодом тоді переводять погляд нижче і правіше. Інтерфейс більшості програм дотримується цього правила. Цей момент слід враховувати і при створенні дизайну сайту. Схемний погляд відвідувачів проходить по веб-сторінці за формою літери «F». Постарайтеся розташовувати важливі елементи сторінки в цих ділянках: заголовки, підзаголовки, виділений текст, щоб спонукати відвідувачів мандрувати сайтом далі.

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

  • ^ Відвідувачі приділяють достатньо багато уваги кнопкам і пунктам меню. Це одні з найважливіших елементів оформлення сайту, тому, слід ретельно виконати ці деталі.

  • ^ Заголовки привертають увагу в першу чергу. Відвідувачі помічають заголовки на сторінках в першу чергу. Заголовки не повинні закриватися елементами дизайну і бути добре помітними при першому погляді на сторінку.

  • ^ Відвідувачі не люблять великі блоки тексту. Дослідження підтверджують, що більшість відвідувачів в Інтернеті уникають великих блоків текстової інформації, незважаючи на її оригінальність і корисність. Тому важливо розбивати текст на невеликі параграфи, використовувати нумерацію і символи.

  • ^ Використовуйте вільні ділянки на сайті. Залишайте деякі ділянки сторінок візуально порожніми. Сайти з перенасиченою інформацією часто ігноруються користувачами. Прагніть використовувати просте оформлення і більше відкритого простору для того, щоб очі відвідувачів не перевтомлювалися.

  • ^ Читачі часто переглядають нижні частини сторінок. Тому можна вигідно використати це і розмістити там щось цікаве, наприклад, хмару тегів.

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

  • ^ Реклама у верхній і лівій ділянках сайту є найбільш ефективною. Прагніть зробити її ненастирливою і не порушувати дизайн.

Модні тенденції


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

Формуються нові стандарти оформлення сайтів і розміщення на них інформації. З\'являються цілі науково-практичні напрями - наприклад, «Інформаційна архітектура сайту». Тому те, що сьогодні здається правильним і сучасним, назавтра буде вже неактуальним і застарілим. І такий стан справ є неминучим, бо ми маємо справу з технологіями Інтернету, які розвиваються дуже стрімко.

Аудиторія Інтернет користувачів також зростає. Люди все частіше працюють в Інтернеті і це середовище повинно ставати для них більш комфортним, зручним та інформаційно насиченим.

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


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

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

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

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


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

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

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

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

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


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

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

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

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


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

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

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

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

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


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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

Завдання до лабораторної роботи


  1. Вибрати тему майбутнього сайту, його цільове призначення та стиль.

  2. Проаналізувати вміст та оформлення сайтів подібної тематики. Отримані відомості врахувати для визначення розділів та сервісів у власному ресурсі.

  3. Створити узагальнену схему сайту (на папері чи в комп’ютерному вигляді) із зазначенням основних розділів, розташування логотипу, тематичного банеру, основних текстових ділянок тощо.

  4. Оцінити майбутню аудиторію сайту і врахувати її інтереси.

  5. Зібрати текстову та графічну інформацію для майбутнього ресурсу. Перевірити тексти стосовно повноти, логіки викладення, грамотності, актуальності.

Зміст звіту


  1. Мета роботи.

  2. Короткі теоретичні відомості.

  3. Результати виконання завдання: зазначення вибраної теми, цільової аудиторії, необхідного інструментарію для розробки сайту, ескіз майбутнього сайту.

  4. Висновки.

Контрольні запитання


  1. Традиційне розташування основних блоків сторінки?

  2. Для чого потрібна модульна сітка?

  3. Особливості сайтів з різною шириною. Переваги і недоліки.

  4. Які прийоми верстання існують? Їх переваги і недоліки.

Рекомендована література


  1. Бердышев С.Н. Искусство оформления сайта. - Дашков и Ко, 2010. – 148 с.

  2. Вотролл Этан, Сьярто Джефф. Изучаем веб-дизайн. Head First Web-Design-Эксмо,2010-496с.

  3. Искусство дизайна. Against the Clock. - Кудиц-Образ, 2004. – 208с.

  4. Нильсен Якоб, Перниче Кара. Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз. Eyetracking Web Usability. - Вильямс, 2010. - 496 с.

  5. Стив Круг. Веб-дизайн: книга Стива Круга, или «не заставляйте меня думать!». - Симбо, 2008. – 224с.

  6. Cool webmaster. Онлайн журнал для дизайнеров и веб-разработчиков. – http://www.coolwebmasters.com/

  7. Учебник CSS. - http://ru.html.net/tutorials/css/

  8. CSS справочник. - http://css.manual.ru/

  9. Учебник HTML. - http://ru.html.net/tutorials/html/

  10. Мержевич Влад. Приемы верстки веб-страниц.
    http://www.log-in.ru/books/20742/




Схожі:




База даних захищена авторським правом ©lib.exdat.com
При копіюванні матеріалу обов'язкове зазначення активного посилання відкритою для індексації.
звернутися до адміністрації