Урок 6. Конструктор документів

Урок 1. Перше знайомствоУрок 2. Красиві документиУрок 3. Красиві програмиУрок 4. ГіпертекстУрок 5. Графіка…Урок 7. Як ми жили без таблиць?

Пора від технічних деталей програмування перейти до більш важливих питань:

  • Як скласти сценарій гіпертекстового документа?
  • Як спроектувати зовнішній вигляд документа на екрані?

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

Вкладемо картинку в фоновий паркет

Користуючись атрибутом bgcolor команди BODY, можна пофарбувати фон документа в один 16 основних кольорів (дивіться урок 2), або навіть використовувати більш складні кольори, задаючи їх у вигляді шістнадцяткових чисел (таблиці кольорів).

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

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

Фонова картинка задається в команді BODY атрибутом background:

<BODY background = “ім’я файлу з картинкою“>

Приклади

  1. Цей фон задається командою:

    <BODY background = “/wp-content/pic/fon1.jpg”>

    Подивитися на повному екрані
    		 Картинка, яка використовується як фонова плиточка:
  2. Цей фон задається командою:

    <BODY background = “/wp-content/pic/fon2.jpg”>

    Подивитися на повному екрані
    		 Картинка, яка використовується як фонова плиточка:
  3. Цей фон задається командою:

    <BODY background = “/wp-content/pic/fon3.jpg”>

    Подивитися на повному екрані
    		 Картинка, яка використовується як фонова плиточка:
  4. Цей фон задається командою:

    <BODY background = “/wp-content/pic/fon4.jpg”>

    Подивитися на повному екрані
    		 Картинка, яка використовується як фонова плиточка:

Антиприклади

  1. Цей фон задається командою:

    <BODY background = “/wp-content/pic/bfon1.jpg”>

    Подивитися на повному екрані

    Погана стиковка плиточок.

    		 Картинка, яка використовується як фонова плиточка:
  2. Цей фон задається командою:

    <BODY background = “/wp-content/pic/bfon2.jpg”>

    Подивитися на повному екрані

    Дуже погана стиковка плиточок.

    		 Картинка, яка використовується як фонова плиточка:
  3. Цей фон задається командою:

    <BODY background = “/wp-content/pic/bfon3.jpg”>

    Подивитися на повному екрані
    Бережіть очі!

    Дуже погана стиковка плиточок.

    		 Картинка, яка використовується як фонова плиточка:
  4. Цей фон задається командою:

    <BODY background = “/wp-content/pic/bfon4.jpg”>

    Подивитися на повному екрані
    Бережіть очі!

    Дуже погана стиковка плиточок.

    		 Картинка, яка використовується як фонова плиточка:

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

Додаток. Структура додатка

Коли гіпертекст складається з декількох файлів, термін “документ” до нього вже не дуже підходить. Надалі будемо називати документом однофайловий гіпертекст. А для випадку, коли файлів багато, введемо термін “додаток“.

Отже, є ідея створити красивий, корисний і зручний для користувача гіпертекстовий додаток. З чого почати роботу?

Можна, звичайно, відразу писати теги, а там – як вийде. Сумнівно, що вийде добре.

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

Ланцюжок

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

Ланцюжок можна зобразити такою схемою:

Приклад ланцюжка

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

Посилання-зв’язку можна оформити у вигляді піктограм.

Приклад красивого ланцюжка

Коментарі до останнього прикладу.

  • Працюючи з документом, дуже легко побачити програму, яка цей документ будує. У браузері для цієї мети є спеціальна позиція “У вигляді HTML” головного меню “Вид”. Увійдіть ще раз в додаток “Приклад красивого ланцюжка” і подивіться програми документів.
  • В додатку “Приклад красивого ланцюжка” використана незвичайна фонова ілюстрація. Подивіться її тут. Це дуже вузька і довга GIF картинка розміром 1×1200 пікселів, тобто ширина картинки всього один піксель, а висота – 1200 пікселів. Паркет з таких плиточок виглядає як гамма колірних горизонтальних смужок з наростаючою вниз щільністю кольору.Якби документи були довгими, то через деякий час, прокручуючи екран по вертикалі, ми дійшли б до другого ряду плиточок і побачили б, як темна горизонтальна смужка раптово обривається і розпочинається світла (новий горизонтальний паркетний ряд). Це не відбувається, тому що в прикладі документи короткі, а паркетна плиточка довга. Довжина 1200 пікселів обрана відповідно з найрозповсюдженішою роздільною здатністю екрану сучасних комп’ютерів.

    Картинки, подібні vert.gif, рідко використовують для фону сторінки, адже в довгих документах, перехід від одного горизонтального ряду такого паркету до іншого виглядає непривабливо і сприймається як похибка. Однак, вузькі картинки з колірною “розтяжкою” HTML-програмісти охоче використовують для створення фону в таблицях (про це розмова піде пізніше).

    Набагато частіше на практиці використовують паркет, що складається з дуже широких (по горизонталі) і коротких (по вертикалі) плиточок.
    Приклад такого паркету можна подивитися тут.
    Розмір паркетної плиточки (картинка hor.gif): 1024×1.

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

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

Схема ланцюжка з довідковим розділом виглядає так:

Можливі різні варіації на тему організації довідкового розділу:

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

Застосування ланцюжків

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

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

Іерархія

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

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

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

Ієрархічну структуру книги добре відображає зміст. В правильно оформлених книгах зміст поміщають на перших сторінках.

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

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

Зміст:

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

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

Схему ієрархічного додатку можна зобразити таким чином:

Документ 00.htm (корінь ієрархії) містить посилання на розділи 01.htm, 02.htm, 03.htm, …, nn.htm (гілки ієрархії). Ці розділи, в свою чергу, містять посилання на підлеглі документи і так далі, аж до таких документів як 030101.htm і 030102.htm:
вони вже не мають посилань (листя ієрархії).

Приклад гіпертекстової ієрархії

Схема цього прикладу виглядає наступним чином:

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

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

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

Модифікований ієрархічний довідник

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

Натисніть кнопку “Скидання”, потім дайте відповідь на запитання.

  1. Запишіть ім’я тега, в якому задається фонова картинка.

  2. Запишіть ім’я атрибута, що задає фонову картинку.

  3. Подивіться документ-картинку.
    Впишіть відповіді на запитання (рух по полям вводу зручно виконувати клавішею TAB):

    Заголовок документа?
    Напис малюнка?
    Ширина малюнка?
    Висота малюнка?
    Ім’я файлу з малюнком?
    Ім’я каталогу з малюнком?
    Ім’я програми з малюнком?
    Автор програми?
  4. Діма Мочалкин не зміг закінчити програму, так як забув імена деяких ключових слів. Допоможіть людині!

    <HTML>
  <HEAD>
    <META content="charset=windows-1251">
    <TITLE>Чеширский Котик</TITLE>
  </HEAD>
  <BODY ="./pic/fon4.jpg" text=black>
    <BLOCKQUOTE>
      <P>
        < ="./pic/cheshr.jpg" border=1
            ="Чеширский Котик" =left>
        - Чеширский Котик, скажите, пожалуйста,
          как мне выйти из этого леса?<BR>
        - Это зависит, - ответил Кот, - от того,
          куда ты хочешь попасть.<BR>
        - А мне все равно куда, - объяснила Алиса.<BR>
        - Значит, - твердо сказал Кот, - все равно как.
    </BLOCKQUOTE>
    <P =right>
      "<>Приключения Алисы в стране Чудес</>"<BR>
      Л.Кэролл
    <HR>
  </BODY>
</HTML>

  5. Нижче показаний вид двох документів. Програми, які їх будують, відрізняються тільки значенням атрибута команди .
    У програмі першого документа цей атрибут має значення , у другій – . У програмах немає жодної команди IMG.
    Як же так? Адже на екрані картинки?

    Вид документа 1 Вид документа 2

     

     

     

     

    		  

Щоб побачити результат роботи, натисніть кнопку "Оцінка".

  1. Створіть гіпертекстовий довідник. Сплануйте роботу за такою схемою:
    1. Виберіть тему довідника і підберіть матеріал. Можна отримати цікаві та корисні довідники з окремих розділів географії, інформатики, іншим шкільним дисциплінам. Не намагайтеся охопити довідником великий матеріал – це завдання навчальне, обмежене за часом і не всі тонкощі HTML відомі до цього уроку.
    2. Намалюйте ієрархічну схему довідника на аркуші паперу. Усередині кожного блоку, який зображує документ на схемі, запишіть назву розділу довідника та ім’я HTML-файлу. В системі імен файлів з програмами настійно рекомендується використовувати ієрархічний порядок. Основний файл може мати ім’я 0.htm. Файли наступного рівня імена 01.htm, 02.htm, 03.htm, … 09.htm (або 001.htm, 002.htm, 003.htm, …, 099.htm). Файли, безпосередньо підлеглі файлу 03.htm, імена – 031.htm, 032.htm, 033.htm, …, 039.htm. І так далі. Програмісту легко заплутатися в численних файлах довідника, якщо не користуватися такою системою.
    3. Розробіть єдиний стиль оформлення документів. Підберіть один до одного:
      • колірну заливку або фонову ілюстрацію;
      • основний колір тексту;
      • додатковий колір для виділення окремих елементів;
      • ілюстративний графічний матеріал.

      Зафіксуйте друкарські прийоми оформлення окремих частин тексту і використовуйте їх одноманітно у всіх документах додатку.

    4. Ретельно продумайте навігаційні елементи довідника і їх розташування на екрані користувача.
    5. Напишіть програми і проведіть авторське тестування.
    6. Передайте продукт в дослідну експлуатацію та виправте недоліки, помічені користувачами-тестерами.

ЗмістЗмістНа урок 5Урок 5На урок 7Урок 7

➤