У цьому розділі ми маємо бесіда про застосовувані в сучасному web-дізай- НЕ технологічних і художніх рішеннях. Отже, почнемо ми, мабуть, з ключових понять, які на сухому дизайнерському мовою звуться
Логічна і фізична структура сайту
Мал. 1. Порівняння логічної і фізичної структури сайту
Очевидно, що логічна і фізична структури можуть не збігатися, оскільки в загальному випадку фізична структура ресурсу розробляється, виходячи зі зручності розміщення файлів. Однак більш-менш точне збереження порядку проходження логічних розділів у фізичній структурі сайту дозволить вам уникнути плутанини при подальшому доповненні і оновленні матеріалів.
РАДА Рекомендується розміщувати всі графічні зображення, які є елементами проекту, в окремій папці з назвою «Images», розташованої в кореневій директорії сайту. Такий підхід дозволить оновлювати зберігаються в інших тематичних розділах документи HTML без перенесення графіки, використовувати одні і ті ж графічні файли у всіх розділах сайту і при необхідності видаляти цілі директорії.
Для того щоб все гіперпосилання на вашій домашній сторінці або web-сайтеработалі коректно, всі документи відкривалися правильно і броузер не видавав помилок при зверненні до будь-яких розділах ресурсу, при створенні його фізичної структури слід дотримуватися кількох простих правил.
РАДА Призначайте імена директорій, імена і розширення документів HTML і графічних файлів з використанням символів тільки латинського алфавіту і тільки в рядковому регістрі. Намагайтеся, щоб імена створених вами файлів і директорій не перевищували по довжині восьми символів.
РАДА При присвоєння імен файлів документів HTML намагайтеся стежити за тим, щоб ці імена були «смисловими»: згодом ви легко можете забути вміст і призначення будь-якої web-сторінки, якщо імена файлів будуть виглядати, наприклад, як l.htm, 2. htm, 3.htm і т. д.
Для того щоб полегшити процес оновлення web-сторінок, додатки розділів або створення нових рубрик, заведіть засіб документування проекту - будь-яку електронну таблицю, створену, наприклад, в Microsoft Excel, або просто розграфлену зошит, в яку записуйте відповідність елементів фізичної структури вашого проекту його логічної структурі. До тих пір поки кількість складових ваш сайт файлів відносно мало, це може бути зайвим, коли ж воно перевалить за перші два десятка, в достатку html-документів і графічних елементів буде легко заплутатися, особливо якщо ви створюєте кілька проектів одночасно. Приклад оформлення такого засобу документування показаний в табл. 2.
Таблиця 2. Приклад оформлення засоби документування проекту
З усього сказаного стає очевидним, що фізична структура сайту прихована від відвідувачів вашого ресурсу: вони можуть спостерігати тільки логічну структуру, причому саме так, як вона представлена за допомогою елементів навігації. Звідси випливає цілком логічний висновок: будова системи навігації має якщо не повністю повторювати, то хоча б максимально відповідати розробленої вами логічну структуру сайту.
Головна сторінка являє собою html-документ, який не включає всебе якусь змістовну інформацію і елементи навігації. Файлу головної сторінки присвоюється ім'я index.html, при цьому стартова сторінка називається інакше і викликається за допомогою організації гіперпосилання к.с. головної сторінки, завантажується при зверненні до сайту першої. Головна сторінка містить, як правило, логотип компанії-власника даного ресурсу, лічильник відвідувань і пропозиція вибору кодування кирилиці, або вибору між англійською та російською версіями сайту. Приклад web-ресурсу, оснащеного такою сторінкою, показаний на рис. 2.
Мал. 2. Приклад сайту, оснащеного великої сторінкою
При зверненні до сайтів, що не оснащеним великої сторінкою, першої відображається стартовий документ, що включає будь-яке інформаційне наповнення, елементи навігації і іноді анонси складових даний ресурс тематичних рубрик. На рис. 3 показаний приклад сайту, не оснащеного великої сторінкою.
Мал. 3. Приклад сайту, не оснащеного великої сторінкою
Використовувати або не використовувати головну сторінку при створенні власного проекту в мережі Інтернет - справа смаку кожного web-майстри. Дати будь-які комплексні рекомендації з цього приводу важко, оскільки остаточне рішення залежить насамперед від ваших художніх переваг і іноді - від бажання замовника, що оплачує вашу роботу.
Динамічна та статична компоновка сайту
Інший підхід - коли ширину невидимою таблиці, яка містить фрагменти web-сторінки, задають у відсотках від поточної ширини екрану. При збільшенні екранного дозволу таблиця «розтягується» по горизонталі, і всі розміщені в її осередках елементи, позиційований або по центру, або по краях стовпців, зміщуються відповідно до встановленого алгоритму. В силу того, що параметри таблиці змінюються в залежності від налаштувань екрану, такий принцип компонування html-документа можна назвати динамічним. І той і інший підхід має як достоїнствами, так і недоліками, які перераховані нижче.
Статична компонування сторінки
Переваги. Простота алгоритму верстки документа. Оптимізувавши сторінку для відображення з екранним роздільною здатністю 640x480 пікселів, ви можете бути впевнені, що при зміні користувача екранних налаштувань елементи дизайну не «попливуть». Крім того, даний варіант компонування сайту в більшості випадків (при дотриманні ряду додаткових умов) дозволяє домогтися ідентичності відображення html-документа в браузерах MicrosoftInternet Explorer і Netscape Navigator.
Недоліки. При відображенні документа на комп'ютері з високим екранним дозволом по краях екрану або з правого його боку залишається помітне порожнє поле.
Динамічна компонування сторінки
Переваги. Документ розтягується по всій ширині екрану, не залишається не- використаних порожніх полів.
Недоліки. Складність верстки та налагодження сторінки, досить часто виявляється неадекватність відображення таких документів в браузерах Microsoft Internet Explorer і Netscape Navigator.
ПРИМІТКА Використовувані в командах HTML значення пікселів (умовних точок) мають на увазі фізичні розміри точки екрану користувача і залежать від типу його монітора.
Приклади реалізації сайтів зі статичної і компонуванням сторінок наведені на рис. 4 і 5. Дані зображення зроблені з фіксованим екранним роздільною здатністю 800x600 пікселів.
Мал. 4. Приклад сайту зі статичної компонуванням сторінок
Наступною обов'язковою складовою частиною web-сторінки є елементи навігації - гіперпосилання, що зв'язують даний документ з іншими розділами сайту. Елементи навігації можуть бути виконані у вигляді текстових рядків, графічних об'єктів, тобто кнопок, або активних компонентів, на- приклад Java-аплетів. Останні являють собою ті ж кнопки, які, на відміну від своїх «традиційних» сестер, вміють реагувати на рухи миші, виконуючи при наведенні на них курсору будь-які нескладні дії (включення підсвічування, створення ефекту «натискання», зміна форми і т. д.). Як я вже згадував в розділі «Основні" постулати "web-дизайну», розташовувати елементи навігації слід таким чином, щоб вони завжди були «на увазі», «під рукою», тобто так, щоб користувачеві не доводилося «відмотувати» сторінку назад , якщо текстове поле займає по висоті кілька фізичних екранів, після чого довго шукати посилання на інші розділи. Найбільш усталеним підходом є розміщення елементів навігації у лівої межі сторінки.
Отже, ми розібрали всі основні компоненти web-сторінки і їх можливе розташування відносно один одного. Приклад компонування сайту, що містить повний набір описаних вище складових, показаний на рис. 5. У ньому вибрано позиціонування елементів навігації по лівій межі документа.
Мал. 5. Приклад компонування web-сторінки з лівим позиціонуванням елементів навігації
На практиці часто зустрічаються web-сайти, в дизайні яких елементи навігації позиціоновані по правій межі екрану. В цьому випадку текстове поле зміщується ліворуч, інші компоненти документа розташовуються, виходячи з принципу максимальної естетичності їх поєднання. Приклад такого виконання сайту показаний на рис. 6.
Мал. 6. Приклад компонування web-сторінки з правим позиціонуванням елементів навігації
Елементи навігації можна розмістити не тільки поблизу правої і лівої меж сторінки, а й у верхній частині документа. Такий варіант компонування найбільш підходить, на мій погляд, при створенні домашніх сторінок: в цьому випадку всі об'єкти сторінки гармонійно «вписуються» в задану ширину невидимою таблиці, при цьому підготовка самої таблиці значно спрощується. Єдиним недоліком такого підходу є необхідність продублювати елементи навігації в нижній частині документа, оскільки при вертикальній прокрутці сторінки вони зникають за верхньою межею екрану, і, щоб дістатися до них, користувачеві доведеться «відмотувати» екран назад, що, погодьтеся, дуже незручно. Приклад оформлення сторінки з верхнім розташуванням елементів навігації показаний на рис. 7.
Мал. 7. Приклад компонування web-сторінки з верхнім позиціонуванням елементів навігації
Мал. 8. Приклад «змішаної» компонування web-сторінки