Лекція №17

Лекція 17 Списки і рамки в HTML.

. Списки Іноді під час створення веб-сторінок буває корисно якось впорядкувати подану ними інформацію. Традиційно при цьому застосовують списки. У ролі першого прикладу давайте розглянемо веб-сторінку гіпотетичної фірми «Ледар». Припустимо, спочатку хочемо перерахувати надані послуги, та був вказати послідовність дій, необхідні їх замовлення. Маркіровані і нумеровані списки Перерахування послуг гарний як маркованого списку. На його організації застосовується ярличок (Unorerer List). Усі, що між них і його що закриває тегом (), вважається маркированным списком. Кожен елемент списку може бути у своїй вказано тегом. Цей ознака можна вживати без закриваючого (хоча можна з ним). Тобто, можна написати: Вкручивание електричних лампочек.

ИЛИ.

Вкручивание електричних лампочок І те й інше вважатиметься елементом списку, і всі броузеры інтерпретують ці записи коректно. Кожен елемент маркованого списку буде за перегляді відзначати закрашенным гуртком. Що ж до перерахування порядку дій для замовлення, його доцільно організувати як нумерованного списку. І тому служить етикетка ,(Orderer List) а елементи списку також позначаються тегом. І нумеровані, і маркіровані списки переважно броузерів виділяються невеликим відступом. Отже, погляньмо, як виглядатиме ця сторінка. (Елемент вирівнювання DIVX — парний, SMALL — зменшує шрифт).

Фірма «ЛЕДАР «.

Фірма «ЛЕДАР» Наша фірма надає такі послуги.

Вкручивание електричних лампочок Підмітання статі Винесення сміття із кооперативної квартири Миття посуду Дефрагментация жорстких дисков Чтобы скористатися нашими услугами, следует:

Зареєструватися (тут) Заповнити форму замовлення (тут) Отримавши лист із паролем, послати порожній відповідь Заповнити форму-подтверждение замовлення (Тут) Приготувати для оплати послуг Див. файл: spiski1.html. Як бачите, ми не вживали закриває ознака. Броузер зазвичай однаково розуміє, де закінчується елемент списку, оскільки після будь-якого елемента стоїть або поміткою наступного елемента, або ярличок завершення списку чи. Інше питання, що, якщо код написано некоректно: наприклад, вказані теги без тега списку чи, чи списку є елементи без тега? Власне кажучи, такого допускати годі було, бо окремі «суворі» броузеры у разі ні відображати нічого. Більшість популярних броузерів, щоправда, спробують догодити навіть автору сторінки, написавшему такий код. Наприклад, Internet Explorer 5, якщо зустріне теги без тега початку списку, інтерпретує їх як маркірований список, хоча й виділятиме його відступом, а чи не позначені тегом елементи списку залишить без маркера. Проте, повторюю, це з низки он виходять випадки. Завдяки з того що списки відбиваються з відступом, легко можна організовувати вкладені списків із допомогою тієї ж тегов. І тому треба просто розпочати новий список всередині вже розпочатого. Схема розташування тегов списку у своїй вийде приблизно такая:

Зрозуміло, відступи тут є такі лише наочності — ніж переплутати, який закриває ярлик якого відкриваючому тегу належить. Далі, при вкладанні кількох маркованих списків хочеться кожен із новачків позначити своїм типом маркера. Деякі броузеры і роблять по вмовчанням. Наприклад, Internet Explorer елементи першого списку із серії вкладених позначає закрашенным гуртком, елементи другого — незакрашенным гуртком, а елементи всіх наступних — квадратиком. Проте, по-перше, так надходять в усіх броузеры, а по-друге, нам може захотітися змінити порядок маркерів. Для явного визначення типу маркера в теге слід встановити атрибут TYPE=. В нього може бути три значення: «disc », «square «і «circle », що означає, відповідно, зафарбований гурток, квадратик і незакрашенный гурток. У теге нумерованного списку можна встановити атрибут TYPE= для визначення типу нумерації. Не зазначено нічого, або встановлено значення TYPE="1», то нумерація відбувається звичайними цифрами. Якщо встановити TYPE= «I «чи «і «, вийде нумерація римськими цифрами (відповідно, з допомогою прописних чи малих літер літер). І, нарешті, для буквених позначень елементів списку встановлюють атрибут TYPE= «A «чи «а ». З іншого боку, іноді може знадобитися розпочати нумерацію ні з одиниці, і з якогось іншого числа. На це є атрибут START=. Наприклад, запис викликає нумерацію елементів списку, починаючи з числа 43. Далі підуть елементи з номерами 44, 45 тощо. буд. Може виникнути природне запитання: бо як використовувати інші типи маркерів списків — різноманітні галочки, кольорові кухлі і інші, які так часто бачимо в WWW! Справді, така є, проте ми розглянемо його трохи пізніше, а поки наведемо приклад веб-сторіночки фірми «Ледар» з допомогою вкладених списков:

Фірма «ЛЕДАР «.

Фірма «ЛЕДАР» Haшa фірма надає такі услуги:

Побутові услуги.

Вкручивание електричних лампочек.

Послуги з наведенню чистоты.

Підмітання пола.

Bынeceниe сміття з власної квартири посуды.

Приготування пищи.

Koмпьютepныe услуги.

Дeфpaгмeнтaция жорстких дисков.

Перевстановлення Windows.

А, щоб скористатися нашими послугами, следует:

Зареєструватися (Тут) Заповнити форму замовлення (Тут) Підтвердити заказ:

Отримавши лист із паролем підтвердження, послати порожній відповідь, натиснувши «Reply «.

Заповнити форму-подтверждение заказа.

(здесь).

Приготувати для оплати услуг.

(Див. Файл spiski2. html).

Графічні маркеры.

Отже, вище ми згадали можливість створення графічних маркерів списків. Вона настільки залучила творців веб-сторінок, що їх зручності було створено спеціальні кошти. Справді, одна річ, коли маркерами списку є стандартні кружечки чи квадратики, і зовсім інше — коли кожний сам має створити маркер! Маркером може бути що завгодно — від просто кольорових і трохи опуклих гуртків і квадратів до витончених мініатюрних художніх робіт. Проте зверніть увагу, що став саме мініатюрних: маркери списків повинні за величиною якось відповідати висоті текстовій рядки, і турбота звідси лягає на його автора поки що не етапі створення зображення. Намагайтеся створювати подібні зображення відразу в «натуральний розмір». Якщо створювати спочатку великі малюнки, а просто зменшувати їх, то, при зменшенні можуть стати невпізнанними! Вся річ у тому, що «не знає», які деталі малюнка важливі до нашого сприйняття. Якщо за зменшенні зникнуть важливі деталі, результат буде жахливим. Якщо зникнуть другорядні деталі, якість сприйняття погіршиться, але загальне впе-; чатление залишиться. Щоб проілюструвати можливість вставки до списку графічних маркерів, скористаємося однією з прикладів — веб-страницей фірми «Ледар». Якщо пам’ятаєте, там ми створили два списку: [pic]маркированный (список послуг) і нумерований (порядок оформлення замовлення). Тепер, скажімо, хочемо замінити гуртки в маркированном списку на червоні трикутники. Спочатку треба створити такий трикутник у програмі, призначеної до роботи з зображеннями. У прикладі ми теж створили такий трикутник, навіть який відкидає невелику тінь, й назвали цей цей файл marker1.jpg. Тепер пригадаємо, як ми ставили тип маркера списка:

Щоб піти далі, замінимо атрибут TYPE= на атрибут STYLE= (як, до речі, повинно бути робити відповідно до спецификацией HTML 4.0):

Tenepь, щоб замінити гурток на графічний маркер, замінимо властивість liststyle-type на властивість list-style-image і визначимо місце розташування нашого файла-рисунка:

Вот і всі! Можна насолоджуватися списком з графічними маркерами. Зверніть увагу, що з вказуванні імені файла ми уклали їх у звичайні подвійні лапки, а одинарні. Це оскільки всі значення атрибута STYLE= укладено в подвійні лапки. Тому якщо б ми помилково написали то лапки перед словом Images була сприйнята як яка закриває, тобто атрибута STYLE= було б присвоєно значення «list-style-image: url («, a все, що можна для цього, став би ще однією, нерозпізнаним атрибутом тега .

Рамки.

Рамки (чи фрейми — Frame) — потужний механізм подання на Web-страницах. З допомогою рамок екран поділяється сталася на кілька областей, у кожному у тому числі відображається вміст окремої сторінки і навіть Webузла.

Створення рамок.

До сформування рамок (областей сторінки) иcпользуют прапор і парний йому прапор, а їх опису — прапори < FRAME >. Почати з простого примера.

Створіть в текстовому редакторі два маленьких Web-документа і збережіть їх як файли a. htm і b.htm. Ці сторінки різнитимуться лише назвами. Файл a. htm: Рамки. Сторінка A сторінка, А Файл b. htm: Рамки. Сторінка B сторінка В.

Створіть базову сторінку, де відбиватимуться рамки, і збережіть baza. htm: Paмки.

Відкрийте сторінку baza. htm у програмі перегляду, і… Ви побачите, що вона і двох областей:

Наведемо невеличкий коментар для використання прапора. У ньому вказується, що екран підрозділяється на дві колонки (параметр COLS), кожна з яких займає рівно половину екрана (COLS= «50°/o, 50% »).

Прапор < FRAME SET> є флаг-контейнер, тобто прапор, котрі можуть містити інші прапори. Прапор — контейнер закінчується парним йому прапором. Прапор перестав бути прапором — контейнером і вимагає парного закриваючого флага.

Як розділити сторінку за більший число областей?

Створіть чотири HTML-файла: a. htm, b. htm, c. htm, d.htm. З іншого боку, зміните колір фону кожної сторінки, навіщо використовуйте атрибут BGCOLOR прапора BODY: сторінка, А зазначте колір FFOOFF, сторінка У — OOFFOO, на сторінці З — FFFFOO і сторінці D —FFFFFF.

Файл a. htm:

Рамки. Сторінка A.

Фрейм, А рожевого цвета.

Файл b. htm:

Рамки. Сторінка B.

Фрейм У зеленкуватого кольору •.

Файл c. htm:

Рамки. Сторінка З фрейм З жовтого кольору.

Файл d. htm:

Рамки. Сторінка D фрейм D білого кольору.

|Базова сторінка demo. htm: (у разі - і є index. html).

Демонстрація фреймов.

FRAMESET COLS= «25%, 25%, 25%, 25% «>

Відкрийте файл demo. htm у програмі перегляду. На екрані комп’ютера Ви побачите, як виглядають створені Вами рамки.

Чи можна зробити рамки різного розміру? Так вайте попробуем!

Відредагуйте Ваш файл demo. htm і сохранитe його як demo2. htm:

•.

Демонстрація фреймів 2.

Зверніть увагу, що розмір четвертої ;cамой правої рамки зазначений не числовим значенням, символом «*». Це означає, що це рамка повинна займати все життя площа головною стра-ицы.; Перегляньте файл на экране:

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

Демонстрація фреймів 3.

< FRAME SRC= «b.htm «>

< FRAME SRC= «d.htin «>

На екрані Ви побачите стрілочки, що з’явилися внизу лівої рамки Ввівши атрибут SCROLLING в відповідний прапор < FRAME >, можна управляти появою на екрані смуг прокручування. Можливі значення атрибута SCROLLING.

SCROLLING = YES — у рамки завжди будуть смуги прокручування, незалежно від цього, чи потрібні вони чи нет.

SCROLLING=NO—у рамки нічого очікувати смуг прокручування, незалежно від цього, чи потрібні вони чи нет.

SCROLLING = AUTO — у рамки будуть смуги прокручування лише тоді необходимости.

Проведемо проведений експеримент із смугами прокрутки.

Створимо файл demo9. htm neMOHCTpauuH фреймів 9.

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

Погляньмо, як вирівняти графічне зображення по лівої кордоні рамки. Як очевидно з попереднього малюнка, графічне зображення небагато зміщений праворуч кордону рамки. Вирівняти може бути з допомогою атрибутів MARGINWIDTH і MARGINHEIGHT. Ці атрибути управляють відступом зображення всередині рамки Створіть файл demolO.htm. і встановіть мінімальні значення кожного атрибута: демонстрація фреймів 10.

На екрані Ви побачите, що графічне зображення выровнялось:

Зв’язок між рамками.

Повернімося до часто використовуваному нами прикладу з цими двома рамками (baza.htm). Змініть вміст файла a. htm, додавши посилання інший файл (c.htm):

Демонстрація фреймів (посилання).

A link to c.htm.

Якщо ви завантажте базовий приклад із двома рамками і активізуєте заслання, одержите вміст сторінки З, відображене всередині рамки А. Але як відобразити вміст сторінки З всередині рамки У? Уважно вивчите пример:

Демонстрація фреймів.

Додавання імені не віддзеркалюється в його зовнішній вигляд — це лише внутрішнє зміна. Але Можете використовувати цю ім'я як параметра атрибута target прапора: ;Демонстрація фреймів c.htm.

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