Практична робота № 2.7. Технологія створення, редагування та форматування фреймiв при створенні Web-сторінок

Мета роботи: набуття практичних навичок роботи із фреймами, як елементами оформлення Web-сторінок.

Основні теоретичні відомості

Мова HTML дозволяє в рамках однієї Web-сторінки відобразити декілька документів. Для цього сторінка повинна бути розбита на декілька областей – фреймів. Розбиття сторінки описується документом HTML особливого роду, структура якого відрізняється від звичайної. Тіло документа замінюється описом фреймів, що задаються парним тегом <FRAMESET>. Елемент BODY в такому документі повинен бути відсутнім, а при наявності – ігнорується браузером.

Відкриваючий тег <FRAMESET> повинен містити обов’язковий атрибут COLS= або ROWS=, що визначають спосіб розбиття вікна. В першому випадку вікно розбивається вертикальними лініями, в другому – горизонтальними. Якщо задані обидва атрибути, то створюється сітка фреймів. Значення любого з цих атрибутів – це перераховані через кому розміри окремих фреймів.

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

Між тегами <FRAMESET> і </FRAMESET> повинно розташовуватися рівно стільки елементів, скільки областей створено за допомогою атрибутів COLS і ROWS. При цьому можуть використовуватися додаткові елементи FRAMESET, що описують подальше розбиття на підобласті ще меншого розміру, або непарні теги <FRAME> , що визначають спосіб використання області.

Тег <FRAME> повинен містити обов’язковий атрибут SRC=, за допомогою якого вказується, який документ першочергово завантажується у відповідну область. Значення цього атрибуту – це абсолютна або відносна адреса URL потрібного документа.

Серед інших атрибутів слід виділити атрибут NAME=, що дозволяє задати "ім’я" створеної області у вигляді послідовності латинських букв і цифр, що використовується як значення цього атрибуту.

Це ім’я можна використовувати, щоб завантажити нові документи в раніше створену область. Для цього в тезі <A>, що визначає гіперпосилання, необхідно добавити атрибут TARGET, значення якого співпадає із значенням раніше визначеним ім’ям області. При переході по даному гіперпосиланню новий документ завантажиться в указаний фрейм.

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

Порядок виконання роботи

1. Створити на гнучкому диску головний файл (Index.html) Web-сторінки. Вид фреймів вибрати з таблиці згідно індивідуальному варіанту (див зразок 1)

2. В кожнiй з областей фрейму пiдключити вiдповiдно файли f2.html, tab.html,tab1.html та будь-який графічний (наприклад, f3.html), який вибрати самостiйно.

3. Задати імена областям фреймів, наприклад, left, center,right.

4. Впевнитися в тому, що після завантаження файлу Index.html, у вікні броузера в області фрейму center буде відображуватися файл f2.html.

5. Виконати перехід за допомогою гіперпосилання „Розповідь про себе” та зафіксувати, в якому із фреймів відобразилася ця інформація.

6. Змінити тег гіперпосилання „ Розповідь про себе ” таким чином, щоб списки відображувалися в фреймі з ім’ям left.

7. Створити на гнучкому диску файл f.html для відображення в лівому фреймі web-сторінки сайту університету http://www.dstu.dp.ua та файл f3.html для відображення графічної інформації в правому фреймі.

зразок 1

№1

№2

№3

№4

№5

№6

№7

№8

№9

№10

8. Добийтеся вдалого розташування інформації у фреймах, відформатуйте тексти, задайте необхідні параметри.

9. Задайте жовтий фон у лівому фреймі і зелений – у правому.

10. Задайте смуги прокручування лише для фрейму де здійснюється перегляд web-сторінки сайту університету.

У звіті по роботі повинні бути тема та мета роботи; порядок дій по кожному пункту завдання; висновок про роботу. Під час захисту роботи студентом повинні бути представленні відповідні файли (Index.html, tab.html, tab1.html, f1.html, f2.html, f3.html) на диску, який вкаже викладач.

Питання для самоконтролю

1. Що таке фрейм, як відображується інформація у фреймі?

2. Назвіть основні теги для роботи з фреймами.

3. Для чого призначений атрибути Name?

4. Для чого призначений атрибути Target?

5. В яких тегах 0використовуються атрибути Name та Target?