67285

Верхні й нижні колонтитули, стовпці та шаблони

Лекция

Информатика, кибернетика и программирование

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

Украинкский

2014-09-06

317 KB

0 чел.

Тема № 12: «Верхні й нижні колонтитули, стовпці та шаблони»

ЗМІСТ

Вступ

Критично важливі етапи роботи дизайнера 

Збір вимог

Класифікація контенту

Спільне створення ескізів і композиції

Створення внутрішньої і взаємної структури документів

Вимоги, класифікація, і вкладеність елементів більш докладно 

Визначення бізнес-цілей

Визначення та задоволення вимог відвідувачів

Класифікація контенту 

Контейнерні елементи, завдання class та id

Реалізація компонування з одним стовпцем 

Центрування компонування

Чи обов’язково потрібно контейнер по всій ширині документа?

Реалізація компонування з двома стовпцями 

Проблеми композиції в компонуваннях з одним та двома стовпцями 

Реалізація компонування з трьома стовпцями 

Найбільша складність дизайну з трьома стовпцями та її просте рішення

Розгляд верхнього та нижнього колонтитулів у загальних рисах 

Персональний сайт: Cindy Li 

Соціальна мережа: Facebook

Корпоративна служба маркетингу та підтримки клієнтів: BNSF Railway 

Дизайн верхнього та нижнього колонтитулів: низькорівневі деталі 

Сайти зі змінним числом стовпців: маніпуляції з класами і виведенням

Резюме

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

Бібліографія


Вступ

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

Основне припущення даного матеріалу полягає в тому, що ви вже знайомі з властивостями CSS float, display, і position.

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

  1.  Збір вимог на основі бізнес-цілей і відповідних цілях відвідувачів
  2.  Класифікація контенту
  3.  Спільне створення ескізів і композиції
  4.  Створення структури документів, які будуть використовуватися на сайті

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

Навіть після того як вибрані дизайн і структура, залишається питання про те, як буде оброблятися виробнича версія, якщо сайт має створюватися поверх Системи управління контентом (CMS – Content Management System), такий як WordPress або Drupal.

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

  1.  Критично важливі етапи роботи дизайнера

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

Мал.1. Десять звичайних кроків процесу створення сайту. Ті, які найбільшою мірою відповідають даній статті, виділені білим кольором (1. Збір вимог 2. Створення плану дій 3. Каркас 4. Ескіз, композиція, завдання простору імен 5. Написання керівництва по стилю оформлення 6. Виробничі шаблони 7. Написання коду і заповнення сайту 8. Тестування 9. Виправлення 10. Публікація)

Збір вимог

Хороший код CSS спирається на ланцюжок залежностей:

  •  CSS в роботі спирається на структуру;
  •  Структура визначається контентом;
  •  Контент вимагає область дії;
  •  Область дії контенту, в кінцевому рахунку, визначається цілями можливих відвідувачів;
  •  У свою чергу, цілі відвідувачів йдуть рука об руку з бізнес-цілями.

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

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

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

Класифікація контенту

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

Існує також питання про те, що робити з таким матеріалом, як реклама, списки посилань, галереї й коментарі.

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

Спільне створення ескізів і композиції

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

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

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

Створення внутрішньої і взаємної структури документів

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

  1.  Вимоги, класифікація і вкладеність елементів більш докладно

Якщо слідувати сучасним кращим підходам до розробки і використовувати парадигму орієнтованого на користувача дизайну (UCD – User Centered Design) для управління дизайном і рішеннями розробки, то цільові вимоги відвідувачів визначають кожен процес проектування.

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

Визначення бізнес-цілей

“Бізнес”-цілі сайту будуть підпадати під одне або декілька з наступних загальних визначень:

  •  Безпосереднє отримання прибутку (e-комерція)
  •  Надання служб публікації, обміну повідомленнями, та/або зберігання через Web-інтерфейс (наприклад, Blogger, Flickr, Scribd, YouSendIt, Basecamp)
  •  Продаж продукту або послуги
  •  Надання інформації
  •  Розвага відвідувача

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

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

Визначення та задоволення вимог відвідувачів

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

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

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

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

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

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

  •  Реалізуйте візуальний і письмовий стиль як можна суворіше, не дотримуючись незвичної узгодженості.

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

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

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

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

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

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

На практиці це вимагає зазвичай програвання ролей і аналізу вибору відвідувачів. Якщо і до тих пір поки ці завдання не будуть виконані, скороченим варіантом цієї рекомендації буде підпорядкування духу Принципу KISS (“Будь простіше”).

Що стосується розмітки і таблиць стилів, то існує декілька простих методів, які дозволяють легко дотримуватися цих правил:

  •  При створенні таблиці стилів привласнюйте якомога більше властивостей в правилах, селектори простих елементів.

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

  •  Привласнюйте id елементу body кожної сторінки.

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

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

Більш конкретний спосіб опису цієї рекомендації полягає в тому, щоб “уникати плаваючих меню, створюваних при використанні методів аналогічних Suckerfish”, відомих також як меню, що розкриваються. Існують чіткі ситуації використання такого дизайну, і всі вони включають великі сайти, які покладаються на одно- та двостовпцеві компонування, але їх часто можна уникнути. З іншого боку недосвідчені користувачі або які мають недоліки рухового контролю, часто знаходять меню, що розкриваються, важкими для використання:

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

Класифікація контенту

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

Зазвичай, контенту можна задати певний пріоритет, який буде визначати можливі компонування:

  1.  Основний контент є матеріалом, навколо якого створюється окремі кінцеві документи, такі як статті, фотоальбоми чи множини даних.
  2.  Вторинний контент включає доступні людині для читання метадані, приєднані до основного контенту, і контент додаткових вставок (наприклад, пояснювальний текст; витяги з огляду; посилання на пов’язані статті на сайті; списки діаграм, карт або таблиць).
  3.  Третинний контент охоплює витікаючі посилання на пов’язаний матеріал (такий як список посилань на інші блоги), незмінні знімки контенту з інших джерел, таких як сайти соціальних мереж або рядки коментарів і реклама.

Крім контенту компонування, майже напевно, буде включати два інших розділи:

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

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

Порядок вихідного коду: доступність та інші розгляди

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

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

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

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

Тому частіше за все зовнішні розділи організовують в наступному порядку:

  1.  Верхній колонтитул
    •  Заголовок [переважно вказує на верхню/домашню/цільову сторінку]
    •  Основні засоби навігації
  2.  Основний контент
    •  Заголовок документа
    •  Основний текст
  3.  Вторинний контент
  4.  Третинний контент
  5.  Нижній колонтитул
    •  Вторинні засоби навігації
    •  Інші елементи (наприклад, зауваження про авторські права)

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

Контейнерні елементи, завдання class та id

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

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

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

#main

канва контенту

h1 (unique)

заголовок сайту

ul#nav

навігаційний код сайту

#breadcrumb

навігаційний ланцюжок (якщо використовується)

#bodyCopy

основна стаття

#bodyCopy>h2 (unique)

заголовок основного документа

#sidebar

вторинний контент

#footer

код нижнього колонтитула

ul#secondaryNav

вторинні засоби навігації

Крім цього – і що більш важливо – в елемент body кожної сторінки додається id (як згадувалося вище), який дає деяку вказівку на область дії основного контенту, пов’язаного з усім документом. Деякі проекти генерують також вимогу для завдання class в елементах body.

  1.  Реалізація компонування з одним стовпцем

Мал.2. Елементи компонування з одним стовпцем; розмітка буде, швидше за все, вкладена, як показано тут

Малюнок 2 показує, що #main знаходиться безпосередньо всередині body, і в свою чергу містить всі #header, #bodyCopy і #footer.

Центрування компонування

Центрування канви контенту виконується додаванням (в даному випадку) в таблицю стилів #main {width: 960px; margin: auto;}. (Вибране значення width є довільним.)

Чи обов’язково потрібно контейнер по всій ширині документа?

На сайті, який повністю покладається на компонування з одним стовпцем, не існує абсолютної вимоги включати #main; можна також легко застосувати для компонування в деякому поєднанні ті ж самі пари властивість/значення, використані вище для #header, #bodyCopy, і #footer. Проте немає нічого семантично неправильного з включенням #main, і його використання пропонує дизайнерові велику гнучкість щодо таких речей як правила, інтервалів між колонками, фонових зображень і створення виділення певних елементів у структурі шаблону.

  1.  Реалізація компонування з двома стовпцями

Мал.3. Елементи компонування з двома стовпцями; розмітка буде, швидше за все, зроблена як показано тут, при цьому #sidebar буде насправді у вихідному коді слідувати за #bodyCopy

Різниця між одно- і двухстовпцевим компонуваннями полягає в додаванні другого контейнерного елемента для вторинного контенту (#sidebar, який фактично слідує за #bodyCopy у вихідному коді), і деякі зміни в таблиці стилів швидше за все будуть використовуватися для компонування з одним стовпцем.


Проблеми композиції в компонуваннях з одним та двома стовпцями

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

Розміщення #sidebar зліва замість його порядку у вихідному коді

Для цього існують дві процедури; одна буде працювати незалежно від довжини будь-якого стовпця, в той час як інша вимагає, щоб #bodyCopy був довшим за #sidebar.

Перший і більш поширений підхід полягає у використанні float:

  1.  Присвоїти значення width для #bodyCopy.
  2.  Додаємо в це правило значення float для коду справа.
  3.  Надаємо #sidebar відповідне значення width.
  4.  Надаємо потрібним чином значення margin і padding для #bodyCopy та/або #footer забезпечуючи існування необхідного проміжку між двома елементами.
  5.  Надаємо clear: both; для #footer.

Обидва стовпця мають задані значення width, так що обидва будуть мати узгоджені поля.

У тому випадку, коли #sidebar розташовується по правому краю компонування, вже описані дії все одно повинні виконатися, за винятком того, що значення float для #bodyCopy має задаватися як left. Значення width, присвоєне #sidebar, необхідно замінити відповідним значенням margin-left.

Можна також присвоїти замість width велике значення margin-left або margin-right (як потрібно) не плаваючому елементу.

Другий підхід, з меншою ймовірністю породжує помилки в Internet Explorer 6, складається у привласненні великого значення margin-left або margin-right для #bodyCopy, як буде потрібно, і позиціонувати абсолютно #sidebar. Однак цей підхід буде менш гнучким, тому що в тих випадках, коли #sidebar буде довшим за #bodyCopy, попередній елемент буде проникати в #footer.

Помилкові стовпці: використання фонового зображення для вирівнювання довжин стовпців, коли довжина їх контенту різна

Більш уважний розгляд реалізацій стовпців за допомогою властивості float показує, що коли потрібні різні фонові кольори або вертикальні лінійки між стовпцями, на них не можна розраховувати для поширення на всю довжину області основного контенту при застосуванні з властивостями background-color або border.

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

#main {

background-image: url(images/bg_2column.gif);

background-repeat: repeat-y;

}

Якщо bg_2column.gif складається з двох смуг висококонтрастного кольору, які відповідають більш-менш точно по ширині стовпцям контенту, в результаті буде два стовпці, які будуть представлятися такими, які мають однакову висоту … але насправді ні, і це виявиться, якщо вставити далі наступні правила:

#bodyCopy {

background-color: #ccc;

}

#sidebar {

background-color: #999;

}

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

Переміщення основних засобів навігації у другий стовпець, зберігаючи при цьому порядок вихідного коду

Коли в компонування буде додано другий стовпець, то, ймовірно, буде здаватися природним помістити основні засоби навігації вгорі цього стовпця … але як зробити це, коли засоби навігації залишаються в іншій частині структури шаблону?

Відповідь на це питання лежить в позиціонуванні:

  1.  Якщо для #header задано overflow: hidden; зробіть #nav прямим спадкоємцем #main. Майже у всіх випадках буде можливо зробити це не спотворюючи бажаний порядок вихідного коду.
  2.  Присвоїти position: relative; безпосередньому предкові #nav і position: absolute; самому #nav.
  3.  Так як абсолютна позиція #nav поміщає його за замовчуванням у верхньому лівому кутку його предка, задайте значення left і top для #nav необхідним по обставинам чином.
  4.  Задайте значення margin-top або padding-top для #sidebar (що більше підходить), щоб відобразити очікувану висоту #nav. У тих випадках, де висота #nav змінюється від сторінки до сторінки або від розділу до розділу, буде потрібно написати кілька правил, можливо з кількома селекторами в кожному – тому написана вище порада привласнювати, залежний від області контенту, контрольний id (і можливо також class) елементу body кожного документа на сайті.
  5.  Реалізація компонування з трьома стовпцями

Мал.4. Елементи компонування з трьома стовпцями; зверніть увагу на два нових контейнерних елемента й інше завдання id

Основними відмінностями розмітки, що пов’язана з додаванням третього стовпця, є:

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

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

Відзначимо, що, приймаючи до уваги малюнок 4, елементам здвоєного стовпця і третього контейнера краще привласнити id, які пропонують деякий ключ контексту, а не базові id, пропоновані в самій діаграмі.

Значення float чотирьох контейнерних елементів трьохстовпцевого компонування згідно з порядком появи зліва направо

Бажане подання

Контент контейнера

Контейнер

Перший

Другий

Третій

2–1–3

1+2

left

right

none

none

2–3–1

2+3

left

none

left

none

3–1–2

1+2

right

left

none

none

3–2–1

1+2

right

left

none

none

1–2–3

1+2

left

left

none

none

1–3–2

2+3

right

none

right

none

Найбільша складність дизайну з трьома стовпцями та її просте рішення

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

Введення цього “позбавленого сенсу” контейнера також може створювати проблеми, коли прийде час перепроектування сайту. Розглянемо наступний сценарій:

При початковому проектуванні сайту його стовпці розміщуються в порядку подання 2-3-1, але потім перепроектуються зі стовпцями в більш традиційний порядок 2-1-3. Елемент двохстовпцевого контейнера необхідно буде перемістити, щоб він охоплював контейнери різних стовпців. Що потім?

У такому випадку результат отримати легко; якщо сайт є дійсно керованим шаблоном, то потрібно (можливо) змінити декілька файлів. Якщо – з іншого боку – всі документи на сайті використовують просто одну й ту ж саму інфраструктуру розмітки, то потрібно використовувати метод пошуку і заміни. Однак це буде зробити нескладно.

Загальна організація розмітки контейнерів буде мати одну з двох наступних форм:

  •  <div id="#container"><div id="primary">…</div><div id="secondary">…</div></div><div id="tertiary">…</div>
  •  <div id="primary">…</div><div id="#container"><div id="secondary">…</div><div id="tertiary">…</div></div>

У двох цих прикладах фрагменти пов’язані з пошуком та заміною були виділені жирним шрифтом. Так як ці id будуть унікальними в документі, і так як розміщення подвійних закриваючих тегів може бути передбачено (поруч з третім закриваючим тегом або з #tertiary), то запис операції пошуку і заміни для їх зміни є досить легкою проблемою.

  1.  Розгляд верхнього та нижнього колонтитулів у загальних рисах

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

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

Персональний сайт: Cindy Li

Мал.5. Необхідно відзначити два моменти особливо цінні для обговорення тут: ідентичність і контраст

Ідентичність

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

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

Контраст

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

Тепер відносно нижнього колонтитула сайту:

Мал.6. Нижній колонтитул Cindy Li кілька мізерний: є заява про авторські права, посилання на сайт видавничої платформи, яку вона використовує (що, ймовірно, потрібно за умовами ліцензії використання), і посилання на стрічку розсилки статей, які вона публікує

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

Соціальна мережа: Facebook

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

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

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

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

Корпоративна служба маркетингу та підтримки клієнтів: BNSF Railway

Мал.9. Подібно до більшості “корпоративних” сайтів, самий високий контраст у верхньому колонтитулі має логотип видавця сайту … і єдиний присутній тон збігається з тим, який використовується в логотипі

Ще раз про ідентичність

Що стосується різних логотипів та інших аналогічних засобів проектування, які підкреслюють комерційну ідентичність, розглянемо такі приклади, які всі є всюдиприсутніми мітками підприємств, які працюють з Opera Software:

  •  Nokia

  •  Samsung Group and Samsung Electronics

  •  Google

  •  IBM

Крім цих чотирьох, добре відомі й інші аналогічні приклади графічного дизайну: Nike Swoosh (ім’я, яке було реально зареєстровано), логотип AT&T “Death Star”, логотип FedEx (і стріла в білому просторі, оточена двома останніми літерами), і “UPS Brown” всі є прикладами корпоративної ідентичності, яка майже всюди відома широкій публіці (принаймні в США).

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

Що стосується інших елементів у верхньому колонтитулі сайту BNSF, крім логотипу, найбільш помітним є використання двох режимів завдання маршруту (як і у випадку Facebook).

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

Дизайн верхнього та нижнього колонтитулів: низькорівневі деталі

При розгляді дизайну верхнього та нижнього колонтитулів у загальних рисах стають очевидні наступні загальні риси:

  •  Корпоративні та прикладні адреси зазвичай розміщують свою основну навігацію в рядку вздовж верхнього краю канви браузера. Цей факт відрізняє їх від новинних сайтів і сайтів e-комерції, які часто використовують стовпцевий підхід до розміщення засобів навігації.
  •  Як поширена горизонтально орієнтована навігація, так само поширена дискретна вторинна навігація в нижньому колонтитулі. Більш того, описаний раніше в цій темі поділ місця призначення і метаінформації сайту досить широко реалізується.
  •  Там, де є повнотекстовий пошук, його поля введення зазвичай розміщуються біля правого краю верхнього колонтитула. Це значною мірою пов’язано з тим фактом, що добре реалізований повнотекстовий пошук є таким же допустимим способом навігації по сайту, як і традиційні навігаційні посилання на основі класифікації – і, швидше за все, буде використовуватися не за призначенням деякої підмножини популяції відвідувачів сайту, які будуть найменш технічно підготовленими користувачами.

Додатково про реалізацію компонування засобів навігації

Перш ніж переходити до деталей реалізації, читач повинен спочатку проконсультуватися у List-O-Matic, додатка, розташованого на сайті Accessify.com, який створює елементи навігації, використовуючи просте стильове оформлення, готове для вставки в будь-яку компоновку сторінки.

Крім інструментів, які на вас працюють, існує два основних підходи для розміщення засобів навігації:

  •  Навігація робиться складовою частиною верхнього колонтитула сайту (візуально, якщо не буквально) і орієнтується горизонтально. У цьому випадку значення display окремих посилань буде швидше за все змінено на block, а їх об’єктам, що містять списки, буде присвоєно значення float рівне left.
  •  Навігація орієнтована вертикально і міститься ліворуч від основного контенту в своєму власному стовпці або відразу над неосновним контентом. У цьому випадку ви, швидше за все, побачите використання деякого різновиду нестатичного позиціонування.
  1.  Сайти зі змінним числом стовпців: маніпуляції з класами і виведенням

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

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

Однак, навіть при використанні додаткових вставок, дизайнери, як і раніше, зустрічаються з відмінностями у компонуванні; як найкраще це обробити?

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

.about #bodyCopy, .contact #bodyCopy, .privacy #bodyCopy {

float: none;

width: auto;

}

.about #sidebar, .contact #sidebar, .privacy #sidebar {

display: none;

}

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

  1.  Резюме

Хоча і спокусливо – особливо, якщо ви все ще є новачком – просто сісти і почати писати розмітку і код, такий процес не створить сам по собі особливо привабливих, корисних або зручних у супроводі сайтів.

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

Базові шаблони:

  •  Один стовпець
  •  Два стовпці
  •  Три стовпці
  1.  Контрольні запитання
  2.  Для даного списку можливих посилань, наданих інструктором, розділіть ці посилання на первинні посилання (верхній колонтитул) і вторинні (нижній колонтитул). Обґрунтуйте свій вибір, використовуючи приклади з цієї теми.
  3.  Візьміть композицію, створену однокласником і визначте:
  •  число стовпців, що буде використовуватися в дизайні
  •  значення ширини цих стовпців;
  •  float/width/margin
  •  схему float/width/margin, якщо можливо, яка повинна використовуватися для реалізації подання цих стовпців
  1.  Для даного логотипу, списку вимог, архітектури спроектуйте верхній колонтитул сайту. Якщо ви не зможете обґрунтувати використання Золотого перетину в композиції верхнього колонтитулу в попередній вправі, змініть його композицію відповідним чином і суб’єктивно оцініть привабливість результату.
  2.  Використовуючи тільки результати пошукових машин, обґрунтуйте, чому списки кращі за сукупності div (або інші елементи) для структуризації навігаційних елементів. Вкажіть характеристики програмного забезпечення зчитувача екрану в своїй відповіді.
  3.  По пам’яті виправте один з наданих файлів шаблонів, щоб він підтримував різне число шпальт. Також, змініть істотно композицію первинної навігації в порівнянні з тим, що знаходиться у файлі вихідного шаблону.
  4.  Бібліографія
  •  BNSF Railroad. 2006. http://www.bnsf.com/ (був доступний 13 січня 2009).
  •  Facebook. 2008. http://www.facebook.com/home.php (був доступний 13 січня 2009).
  •  Henick, Ben. 2006. Уникайте крайніх випадків при проектуванні заздалегідь. A List Apart. http://www.alistapart.com/articles/avoidedgecases (був доступний 13 січня 2009).
  •  Li, Cindy. 2008. Пригоди Cindy Li. http://www.cindyli.com/ (був доступний 13 січня 2009).
  •  Morville, Peter, and Rosenfeld, Louis. 2006. Information architecture for the world wide web, 3rd edition. Cambridge, Mass.: O’Reilly Media.


 

А также другие работы, которые могут Вас заинтересовать

37308. Усилитель звуковой частоты 723.5 KB
  Выбор обоснование и расчет структурной схемы усилителя. Расчет АЧХ усилителя. К тому же нужно обеспечить согласование источника сигнала со входом усилителя а также согласование нагрузки с выходом усилителя. В данном курсовом проекте рассматривается один из возможных вариантов синтеза усилителя звуковых частот с возможностью регулировки тембра и громкости.
37309. ЗАХИСТ КОНСТРУКЦІЙ З ДЕРЕВИНИ ВІД ПОЖЕЖНОЇ НЕБЕЗПЕКИ І БІОЛОГІЧНОГО УРАЖЕННЯ 41 KB
  Вогнестійкість конструкцій з деревини Горючість деревини. Горіння являє собою реакцію зєднання горючих компонентів деревини з киснем повітря яке супроводжується виділенням тепла або диму появою полумя і жевріння. Займання деревини може виникнути в результаті короткочасного нагріву її до температури 250С або тривалого впливу більш низьких температур.
37310. Сопротивление материалов 730 KB
  Лабораторная работа №1 Испытание образца на растяжение – 4 часа Цель работы: изучение процесса растяжения образца из малоуглеродистой стали вплоть до его разрушения разрыва изучение диаграммы растяжения определение механических характеристик. Краткие теоретические сведения Испытание при осевом статическом растяжении образца является наиболее распространенным способом механических испытаний материала что объясняется следующими преимуществами. Во всех точках поперечного сечения рабочей части образца напряжения одинаковы и...
37311. Обґрунтувати формули, за якими розраховуються параметри настроювання Ку та Ті промислових регуляторів для ПІ- або ПІД-законів керування 345.5 KB
  Обґрунтувати формули, за якими розраховуються параметри настроювання Ку та Ті промислових регуляторів для ПІ- або ПІД-законів керування (згідно з завданням), які мають забезпечити вказані у завданні оцінки якості керування (Lз, γз, h, m, M). Розрахувати і побудувати графіки АЧХ об’єкту керування Аоб(ω), ФЧХ φоб(ω) та графік взаємозалежності параметрів настроювання для відповідних регуляторів Ку і Ті та визначити їх оптимальні значення.
37312. Кинематический расчет привода 1.09 MB
  Мощность двигателя зависит от требуемой мощности рабочей машины а его частота вращения от частоты вращения приводного вала рабочей машины.2 Определение передаточного числа привода и его ступеней Передаточное число привода определяется отношением номинальной частоты вращения двигателя к частоте вращения приводного вала рабочей машины при номинальной нагрузке и равно произведению передаточных чисел закрытой и открытой передач.1 Определяем частоту вращения приводного вала рабочей машины по формуле 5 где: угловая скорость рад с 2.1...
37313. Проект межхозяйственного землеустройства сельскохозяйственного предприятия «Красное» 359.5 KB
  Межхозяйственное землеустройство – это комплекс мероприятий по образованию новых, упорядочению и изменению существующих землевладений и землепользований, специальных фондов земель, установлению границ и режима использования земель административно-территориальных и других особых формирований
37315. ЭЛЕКТРИЧЕСКИЕ МАШИНЫ 984 KB
  Основными задачами данной общепрофессиональной дисциплины являются изучение основных принципов электромеханического преобразования энергии в электрических машинах, физических законов, лежащих в основе их работы, конструкций, видов исполнения, параметров, режимов работы, характеристик, эксплуатационных требований к ним.