|
ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК | |
Один на один с FreeBSD |
|
|
Швидкі пальчики 04
Для початку влаштуємо навігацію по ній за допомогою якорів, потім розфреймуємо вздовж і впоперек, а наступного разу елегантними штрихами розподілимо по картинці лінки. Як зв’язати сторінки між собою – про це вже говорилося, а от як стрибати вперед-назад в межах самої сторіночки – якось пропустилося… Надолужимо: нехай ми маємо довжелезний літературний (або ж не зовсім літературний) твір. Зверху матимемо його заголовок та зміст в стилі: Назва твору. Після цього розташуються самі глави на чолі з тими ж назвами. Після кожної глави, перед черговим наступним заголовком для зручності помістимо посилання “На вершечок твору”. Для початку помітимо цей вершечок ось так: <a name=”Назва_твору”> Назва твору</a>, Так ми розкидали по сторінці мітки, до яких нам треба буде звертатися з різних місць. Насамперед, таким місцем є зміст. Розмітимо його тегами наступним чином (застосуємо ще один вид списку, про який я не встигла розповісти минулого разу – список <menu>): <menu compact> Отже, несита ручка, що вказує на наявність під її долонькою якогось посилання, вже з’явилась у різних місцях сторіночки. Поклікаємо, потренуємося. В процесі виявимо, що десь не поставили #, а десь переплутали порядкові номери главок. Коректуємо – бачимо, що працює. А якщо зміст в одному документі, а сама літературна праця в іншому, наприклад, в document.html, то тоді посилання (лінки) в змісті будуть виглядати на зразок: <a href=”document.html# Глава_1”>Глава 1. Назва глави 1.</a> і так далі. Взагалі кажучи, <a name> i <a href> - це один і той самий тег, який називається якорем (а - скорочено від anchor). Ви вже побачили, гадаю, де використовуємо name (щоб відзначити місце, куди ми б хотіли потрапити), а де href (місце, звідки ми хочемо потрапити на місце, що помітили тегом name). Хоча можна їх використати разом всередині одного тегу, але при цьому пам’ятати, що якщо після href можна вліпити картинку, то після name - швидше всього ні (а у старих браузерах точно ні). Так-так, якорі - нудна тема. Багато рутинної роботи, а результатом нікого вже не здивуєш. А з іншого боку, гріх не зорганізувати навігацію по сторінці як слід… Сумно. Та є у якоря один наразі незрозумілий параметр, що має назву target, і саме цей параметр дозволить нам плавно перейти до наступної більш цікавої теми, - такої, як фрейми (або їх ще називають кадрами). Я знаю - ви всі дуже добре знайомі з ними. Ну, звісно ж, який веб-чат без фреймів?… Дехто вважає, що на цьому їх застосування починається і закінчується. Ніби не в моді вони вже. Гадаю, використовувати фрейми чи ні, кожен вирішує сам. Якщо так зручніше впорядкувати матеріали - чому би й ні? Але й вигадливо кроїти сторінки, якщо воно непотрібно, також не варто. Ясно на 100% тільки одне - з ними треба познайомитись, хочете ви чи не хочете. А то потім побачите якось <head> без <body> і зомлієте… Отже, фрейм – це така штука, яка дозволяє в одному вікні браузера спостерігати декілька гіпертекстових документів. Давайте розіб’ємо вікно браузера таким чином (дивіться малюнок): спочатку розділимо на дві смужки - вузеньку для назви, зверху, а нижню (широчезну), в свою чергу розділимо знову, але вже вертикально на дві колонки: ліву, вузеньку, використаємо для змісту твору, а широке праве вікно - для відображення самого літературного твору. Попередньо створимо відповідні HTML-файли: title.html (для гарнюсенької назви твору – два ангелики по боках і так далі), content.html (для змісту) та main.html (для самого літературного витвору). Конструкція-розкадровка (фактично план нашого віртуального помешкання, де, як в комунальній квартирі, поселяться усі ці три документи), буде знаходитись у файлі з “клясичною” назвою index.html. В файлі без тега <body>. Отже, наш план: <html> Кадрики шикуються в порядку зверху вниз зліва направо. Параметр rows визначає співвідношення рядочків (як у відсотках, так і в пікселах), а параметр cols робить те саме із стовпчиками. Отже, тег <frameset> задає розміщення, а непарний тег <frame> - вміст кадрика. Ці теги непогано обходяться без тега <body>, але один без одного жити не можуть. Параметр rows=”20%,*” означає, що перший (верхній) кадр забирає 20 відсотків висоти вікна, а нижньому кадру залишається решта. Аналогічно для cols=”20%,*” – ліва колонка матиме 20% ширини вікна браузера, а праве вікно - 80% тої ж ширини. В <noframes></noframes> пишемо повідомлення для бідолахи, який не може дозволити собі браузер останньої “вебної” моди (хоча тепер навряд чи такий знайдеться), або переадресовуємось на варіант нашої сторінки без фреймів (виписуємо лінк і просимо на нього тиснути). Наш фрейм працюватиме таким чином – в лівому вузькому віконечку тиснемо на назву глави , і ця глава з’являється в display_area (тому саме це вікно отримало свою назву в атрибуті name). Тут і виходить на сцену параметр target. Його арія в тексті content.html звучатиме так: <html> В main.html пишемо довжелезний файл, - текст, що ми хочемо побачити в правому широкому фреймі. Звісно ж, біля кожного заголовка глави повинен бути закинутий якір (так, як вже було описано вище). В title.html вимальовуємо назву нашої сторіночки або просто симпатичну картинку. Оскільки цю титулку нема чого розгортати - нічого там всередині не ховається (якщо ви зумисно там щось секретне не приховали), то доцільно виставити scrolling=”no”, що означає, що цей кадр не матиме полосок прокрутки. До речі, існує думка, що конструкцію фрейму та й сторінку взагалі, слід викладати так, щоб не утворювалися горизонтальні полоси прокрутки. Це незручно і вважається свідченням неакуратного форматування сторінки (у веб-дизайні також є правила хорошого тону, але, здається, тих, хто їх дотримується, є набагато менше, ніж кількість користувачів Інтернету, хто про ці самі правила чув і здатен оцінити вишукані манери веб-майстра…) . Щоправда, дехто радить навпаки - виносити малюночки трошки за межі сторіночки для створення ілюзії її безрозмірності. А як краще, на вашу думку?…. Тепер офіційне повідомлення про теги <frameset> та <frame> і їх параметри. Атрибути <frameset>, що ми не використали в прикладі: border - задає товщину рамки. По замовчуванню дорівнює 5. Щоб рамочки фреймів не було видно, встановити border=”0”. bordercolor - задає колір рамки, frameborder - виводить об’ємну рамку, якщо дорівнює 1 (в Інтернет Експлорері) або “Yes” (в Нітскейпі). Коли параметри рівні 0 або “No”, то виводиться плоска рамка. framespacing=”число” - формує навколо усіх фреймів невидиму рамку вказаної товщини. Атрибути <frame>, що ми не використали в прикладі: align=left, right, center, top, bottom – задає вирівнювання тексту, що оточує фрейм, відносно цього ж фрейма (як на мене, досить загадковий параметр, і мені ніяк не розібратися з ним без сторонньої допомоги), bordercolor=”колір” - задає колір рамки фрейма, по замовчуванню – світло-сірий, marginheight, marginwidth задають величину вертикального та горизонтального відступів в пікселах між об’єктами у кадрі і верхнім (нижнім) та лівим (правим) краями фрейма (дорівнюють від 1 до 6) Вказівка noresize в тезі <frame> забороняє допитливому користувачеві міняти (масштабувати) розміри кадра. А вже згаданий атрибут scrolling також може приймати значення yes (полоски прокрутки створюються в будь-якому випадку) та auto (полоски прокрутки встановлюються в залежності від потреби - чи досить розгорнуте вікно браузера, чи ні, - тобто якщо вміст вікна влазить у нього повністю, то полоски прокрутки будуть відсутні, бо їх там і непотрібно). Приклад готової сторінки, виконаної у стилі “зміст-вміст-титулка”, наведено на малюнку. Затримаємо нашу увагу на такому часто вживаному понятті, як базовий таргетинг, бо ця річ часто рятуватиме вас від постійного рутинного прописування атрибута target в кожному href. Для практичного ознайомлення з цим корисним тегом знову повернемося до нашого фрейму “зміст-вміст-титулка”. Нехай у файлі main.html будуть міститися ще деякі посилання на інші сайти, які слід переглядати у вікні, вільному від фреймів (бо гріх приймати гостей на кухні – гуляти так гуляти: на всі кімнати і балкони). В кожному такому лінку треба для цього прописати атрибут target=”_top”. Але застосувавши базовий таргетинг шляхом написання фрази <base target=”_top”> одразу ж після <body>, як не дивно, ми досягнемо бажаного результату дуже швидко. Таким чином, для завантаження нової сторінки вікно буде повністю звільнене від фреймів. Окрім того, атрибут target може приймати такі значення: Останній параметр мусимо проілюструвати, інакше користь від цієї статті зведеться до її одноразового утилітарного використання (самі знаєте де). Отже, глянемо на наступний малюнок: знову маємо фрейм у фреймі. Вікно поділимо на content.html та main.html, а main.html, в свою чергу, розріжемо горизонтально на header.html та footer.html. Якщо в header.html та footer.html вказати: <base target=”_parent”>, то при натисканні на будь-який лінк у цих документах вікно буде очищене від поділу на header та footer, і новий документ розгорнеться на всю ширину документа main.html, а точніше батьківського вікна, в якому цей документ проживав до поділу його надвоє. Ну, а content.html залишиться на місці. Звичайно, часто використовується варіант target=”назва_вікна” для того, щоб спрямувати результат клікання в якесь конкретне вікно. Наприклад, повертаючись до лістінгу файлика content.html, стає зрозумілим, як його можна оптимізувати. Досить один раз написати <base target=”display_area”> замість того, щоб відсилатись до тої ж ”display_area” сто разів (бо, якщо дійсно маємо сто глав, то малювання багатозначущого рядочка крапочок ситуацію не врятує, як ото в цій статті…). Фрейми – це нескладно і деколи навіть красиво, як тільки ви почнете відчувати на перший погляд невловиму відмінність між назвою фрейму та файлом, який повинен у нього вселитися. Різниця між ними та сама, що між квартирантом і квартирою, і, може, комусь таке порівняння допоможе унюхати ці делікатні нюансики розкадровки вікон. “Фрейм” – деколи здається, що це поняття має аромат французьких парфумів, оскільки дозволяє з однакових , на перший погляд, інгредієнтів створити щось вишукане і нетривіальне. А як сподобається цей тег тим, хто любить шити-кроїти! Без сумніву. Тим більше, що все, що тут так ненапружено обговорювалося, загалом стосується версії HTML 3.2 (хоча офіційно фреймів у ній ще немає), а десь на підході до версії HTML 4.0 починають виникати такі екзотичні речі, як плаваючі фрейми-зображення (це тег <iframe> для Інтернет Експлорера only - він має майже ті самі параметри, що і тег <frame>), що дозволяють не просто поділити сторінку, а вставити одну сторінку в іншу, та вбудовані шари (це тег <ilayer>, що наразі не знайшов широкого поширення). Є де розгорнути бурхливу діяльність - HTML на місці не стоїть, та усе ж більшості користувачів ще важко добігати за його новими версіями, тому не орієнтуйтеся на авангард, а швидше на “золоту серединку” - тобто теги, що підтримуються 4-ми версіями “з копійками” Інтернет Експлорера та Нітскейпа. Хоча і в третіх версіях вже є фрейми, та деякі параметри щодо рамочок не будуть працювати так гарно, як хотілося б. (Недавно читаю одну досить солідну розсилку і бачу, що автор, розповідаючи про HTML, говорить, що користується 3-ю версією Інтернет Експлорера. Ой, як добре я знаю той третій! Навіть “рідна” Майкрософтівська поштова служба Хотмейл не хоче з ним працювати і делікатно відсилає на завантаження п’ятої версії, а скільки сайтів гасять прямо на весь екран: “Change your browser, stupid!”. І звідки в людей така схильність до мазохізму, бо навіть мій 486-й витримує четвертий Нітскейп без особливого системного напруження?…Та кожен має право використовувати той браузер, який йому більше до смаку, так що зважайте на всі ці смаки, зважайте…) Ну все, нарадилась я вже досить. Тепер чекатиму ваших порад і побажань, а тим часом наготую симпатичну картинку, щоб розписати по ній лінки на інші сторінки. Пишіть
|
Пісня "Ластівка"+mp3 "Ко Мне скорее, друг, прийди!"+mp3 Творіння чи Еволюція? Резюме ПОЧИТАТИ |
|||||||||||||
| |||||||||||||||
Ідея проекту, програмування, HTML, CSS, дизайн,
редагування та переклад текстів - Дідок Олександр. |