Презентация на тему Спецкурс “Основивеб-дизайну”

й атрибути фреймів.
Використання посилань у фреймах.
Практична робота

№5. Розробка веб-сайтів на базі фреймів.

Частина 4

користуватися створеним сайтом не дуже зручно, оскільки для переходу

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

 Основи веб-дизайну

<< Назад

посилань, який фактично є змістом веб-сайту і постійно відображається

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

 Основи веб-дизайну

може містити кілька блоків або вікон, які називають фреймами,

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

 Основи веб-дизайну

фрейми можна розташовувати поруч по горизонталі або один над

одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу . Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.
Наприклад, тег задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів, а другий займає те місце, що залишилося (приклад на наступному слайді).

 Основи веб-дизайну

55%, *”> задає поділ вікна на три вертикальні фрейми,

один з яких займає 20% від ширини екрана, другий 55%, а третій займає те місце, що залишилося.
Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми - це роблять за допомогою вкладення тегів один в один.
Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег з атрибутами, що керують властивостями фреймів

 Основи веб-дизайну

про навчальні заклади так, як показано в таблиці
Таблиця 2.8.

Схема розташування на сторінці фреймів, які містять інформацію про навчальні заклади





Як видно з таблиці, сторінку поділено спочатку на два рядки у співвідношенні приблизно 60 % та 40 %, перший рядок поділено навпіл на два стовпці, а в утворених комірках розташовано відповідні веб-сторінки про навчальні заклади. Документи 1.html, 2.html та 3.html було створено під час виконання вправи 2.5.

 Основи веб-дизайну

Перехід на виконання вправи 2.6

не використані гіперпосилання — між фреймами немає взаємозв'язку. Проте

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

Таблиця 2.9. Схема розміщення фреймів, в якій використовується навігаційна панель

 Основи веб-дизайну

певний фрейм для відображення інформації, яка змінюватиметься після вибору

відвідувачами іншого посилання, то йому надають ім'я.
Наприклад, Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>.... У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET, значенням якого є ім'я відповідного фрейму.
Наприклад: <А HREF=“2.html” TARGET="frame1”>Гімназія «Сихівська»

 Основи веб-дизайну

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

закладів ізвправи 5.5, а сторінку np.html з навігаційною панеллю та поділену на фрейми сторінку index.html створіть самостійно.

 Основи веб-дизайну

Перехід на виконання вправи 2.7

рядку, в тегу , задано лише один атрибут –

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

 Основи веб-дизайну