ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |

Один на один с FreeBSD
З 24-го квітня 2006-го року купуйте нову книгу по операційній системі FreeBSD: "Один на один с FreeBSD".


 Зміст книги та уривки текстів -->>

 Buglist:11 Додати новий Переглянути існуючий список

Написана - російською мовою
Вміщує - 704 сторінки
Наклад - 2500 екземплярів
Рекомендована ціна - 75грн
Рік видання - 2006
Видавництво - MK-PRESS
Автор - Дідок О.О.
ISBN 966-8806-00-X
 • Оновлення [10]:
[18.11.2007] Протиріччя
[18.11.2007] Любові тепло
[28.10.2006] Пісня "Не..."+mp3
[23.10.2006] "Не думаючи жити/філософія сучасного життя"
[23.10.2006] Пісня "Ластівка"+mp3
[23.10.2006] Пісня "Безсилий"+mp3
[29.08.2006] Моя поезія
[29.08.2006] "Я - ти, і я - не ти"
[15.06.2006] "Кохання гра"
[07.06.2006] "Пам'ятаю..."
 • Новини сайту [3]:

[16.05.2006] 21-го травня вийшла моя книга по операційній системі FreeBSD. Пишу нову книгу по PHP. Дякую за підтримку ...


[24.02.2006] Добавив систему рейтингiв. Тепер ви можете оцiнити на свiй смак кожну статтю за п'ятибальною системою. Скоро напишу сторiнку рейтингових статей i систему коментарiв. Очiкуйте)


[19.01.2006] Життя радісне, коли на нього дивишся з добрими очима і гарним настроєм). Так от останні чудові фотографії від мене можна знайти тутечки, доречі, там можна знайти і мене, якщо когось зацікавить це)). Ммм. Дя - поповнив рахунок на хостинг ще на рік, збільшивши пакет)) Тепер у мну 3гіга місця, багато піддоменів, достатньо баз данних і навіть можливість повісити декілька доменів у себе - не погано, коротко кажучи. Ну добре, досить, ато вже не новина - а ціла стаття про моє життя-буття)) Заходьте ще)


Остання корекція: 01.01.2003
/0 
 Вперше опубліковано: 01.01.2003
Сторінку відкрито: 815Коментарiв: 0ДодатиЧитатиДопомога
ПОЧИТАТИІнформ. технологіїWeb ...Швидкі пальчики

Швидкі пальчики 04

Інше в підрозділі :

 Швидкі пальчики 01[2003-01-01]  Швидкі пальчики 02[2003-01-01]  Швидкі пальчики 03[2003-01-01]  Швидкі пальчики 05[2003-01-01]  Швидкі пальчики 06[2003-01-01]

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

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

Назва твору.
Глава 1. Назва глави 1.
Глава 2. Назва глави 2.
....………………………..
Глава 100. Назва глави 100.

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

<a name=”Назва_твору”> Назва твору</a>,
а потім глави по черзі:
<a name=”Глава_1”> Глава 1. Назва глави 1.</a>
<a name=”Глава_2 ”>Глава 2. Назва глави 2.</a>
……………………………………………………….
<a name=”Глава_100”> Глава 100. Назва глави 100.</a>

Так ми розкидали по сторінці мітки, до яких нам треба буде звертатися з різних місць. Насамперед, таким місцем є зміст. Розмітимо його тегами наступним чином (застосуємо ще один вид списку, про який я не встигла розповісти минулого разу – список <menu>):

<menu compact>
<li><a href=”# Глава_1”>Глава 1. Назва глави 1.</a>
<li><a href=”# Глава_2”>Глава 2. Назва глави 2.</a>
……………………………..
<li><a href=”# Глава_100”>Глава 100. Назва глави 100.</a>
</menu>
Фразу “На вершечок твору” також окантуємо тегом:
<a href=”#Назва_твору”> На вершечок твору</a>.

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

А якщо зміст в одному документі, а сама літературна праця в іншому, наприклад, в 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>
<head><title> Приклад використання фреймів </title> </head>
<frameset rows=”20%,*”>
<frame src=”title.html” scrolling=”no”>
<frameset cols=”20%,*”>
<frame src=”content.html”>
<frame src=”main.html” name=”display_area”>
</frameset></frameset>
<noframes>
<b> Ой, людоньки, де ж ви взяли такий старий браузер?… Ви направду
заслуговуєте на ліпший. </b>
</noframes></html>

Кадрики шикуються в порядку зверху вниз зліва направо. Параметр rows визначає співвідношення рядочків (як у відсотках, так і в пікселах), а параметр cols робить те саме із стовпчиками. Отже, тег <frameset> задає розміщення, а непарний тег <frame> - вміст кадрика. Ці теги непогано обходяться без тега <body>, але один без одного жити не можуть. Параметр rows=”20%,*” означає, що перший (верхній) кадр забирає 20 відсотків висоти вікна, а нижньому кадру залишається решта. Аналогічно для cols=”20%,*” – ліва колонка матиме 20% ширини вікна браузера, а праве вікно - 80% тої ж ширини.

В <noframes></noframes> пишемо повідомлення для бідолахи, який не може дозволити собі браузер останньої “вебної” моди (хоча тепер навряд чи такий знайдеться), або переадресовуємось на варіант нашої сторінки без фреймів (виписуємо лінк і просимо на нього тиснути).

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

<html>
<head> </head>
<body>
<menu compact>
<li><a href=”main.html# Глава_1” target=”display_area”>Глава 1. Назва глави 1.</a>
<li><a href=”main.html # Глава_2” target=”display_area”>Глава 2. Назва глави 2.</a>
……………………………..
<li><a href=”main.html # Глава_100” target=”display_area”>Глава 100. Назва глави 100.</a>
</menu>
</body></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 може приймати такі значення:
target=”_self” - нова сторінка буде вантажитись в тому ж вікні, де знаходилось посилання на неї
target=”_blank” - для завантаження сторінки створюється нове-новісіньке вікно браузера
target=”_parent” - сторінка буде завантажуватись у фреймі, що містить актуальний тег <frameset>, тобто вивільняється саме той <frameset>, всередині якого було посилання з target=”_parent”.

Останній параметр мусимо проілюструвати, інакше користь від цієї статті зведеться до її одноразового утилітарного використання (самі знаєте де). Отже, глянемо на наступний малюнок: знову маємо фрейм у фреймі. Вікно поділимо на 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-й витримує четвертий Нітскейп без особливого системного напруження?…Та кожен має право використовувати той браузер, який йому більше до смаку, так що зважайте на всі ці смаки, зважайте…)

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



Всього ресурсів на сайті: 84
Востаннє сайт змінювався: 25.02.2006
Змінено на: PHS-7.3-STABLE версію
Ви 73376 відвідувач сайту
Сторінку згенеровано за 0.014 секунд

 Пісня "Ластівка"+mp3

[2006-10-23] Полети, ластівкою полети До своєї мети Крилами розірви Неможливу любов Все зітри, з пам"яті все зітри Більше не говори. Ти не любиш мене Я не хочу страждань Я змерз, без тепла я змерз Тебе поруч немає: Я не вірю словам Про майбутню любов Приспів: ||||: Я чекав, я любові че ...


 Про "морозиво"

[2005-06-01] "Про морозиво" Я розумію, що мало хто погодиться з тим що зараз прочитає ... Я не гуманіст, я такий який я є, протиречива людина з протиречивими думками, але людина - яка поставила перед собою мету жити за принципами, і не зраджувати ...


 МАЛЮНОК: Троянда в лініях

[2003-10-07] ...


 Швидкі пальчики 03

[2003-01-01] На жаль, знову все наосліп, бо не маю ні ваших побажань, ані критики. Тому сьогодні розповім про те, що називається “додатковими можливостями форматування”. Веб-сто ...


 HTML Digest 09

[2003-01-01] Macromedia Flash в якості піддослідного кроліка. Почнемо з того, що заново проробимо Motion та Shape Tween.... Стоп-стоп-стоп!...Куди понеслися?... Тпру!... (А то ...


ХАТА МОЯ | ПОРТФОЛІО | ХРИСТИЯНИНУ | ПОЧИТАТИ | МОЄ ЖИТТЯ | ФОТОАЛЬБОМ | ЗВ'ЯЗОК |