Спецкурс “Основи веб-дизайну”
Розділ 2. Основи мови HTML
•Розділ 2
• Основи веб-дизайну
Вперед>>
<< Назад
• Інформатика. Профільне навчання
Робота вчителя-методиста СЗОШ № 8 м. Хмельницького Кравчук Г.Т.
•Розділ 2
• Основи веб-дизайну
Вперед>>
<< Назад
• Інформатика. Профільне навчання
Частина 4
• Розділ 2
Вперед >>
• Інформатика. Профільне навчання
HTML-документи, які містять фрейми
Ви, мабуть, помітили, що користуватися створеним сайтом не дуже зручно, оскільки для переходу на сторінку з головним меню необхідно клацати кнопку Назад. Тому в мові HTML є засіб, за допомогою якого можна створити меню, що постійно відображатиметься під час перегляду сайту. Інформація, що відкривається за допомогою його посилань, буде розташована в іншому наперед визначеному місці.
• Основи веб-дизайну
<< Назад
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
HTML-документи, які містять фрейми
Список усіх таких посилань, який фактично є змістом веб-сайту і постійно відображається на екрані, називають меню сайту або навігаційним меню. Типове меню складається з графічних зображень у вигляді кнопок або з текстових гіперпосилань, призначених для переходу в основні розділи сайту. Продумане навігаційне меню може легко провести відвідувача сайту всіма основними і додатковими розділами. Постійне відображення меню суттєво спрощує навігацію розділами, тому відвідувачі можуть більше часу присвячувати опрацюванню веб-сайту.
• Основи веб-дизайну
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Фрейми, їхні теги та атрибути
Веб-сторінка сайту може містити кілька блоків або вікон, які називають фреймами, або кадрами.
У кожному з них відображається свій HTML-документ. В одному фреймі може міститися навігаційне меню, а в іншому відкриватися веб-сторінки, на які вказують його пункти.
Для того щоб створити веб-сторінку з фреймами, потрібно кілька HTML-документів.
В одному з них задають розмітку екрана, тобто розташовують у вікні браузера фрейми, кожному з яких призначають свої документи.
Сторінка з розміткою, як і звичайна, починається з тегу <HTML> і закінчується тегом </HTML>. Для поділу екрана на кілька фреймів використовують теги <FRAMESET> і </FRAMESET>. Перший має бути розташований після тегу заголовка, але перед тегом <BODY>. Іноді в таких документах зовсім не використовують тег <BODY>.
• Основи веб-дизайну
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Фрейми , їхні теги та атрибути
Два фрейми можна розташовувати поруч по горизонталі або один над одним. У першому випадку використовують атрибут COLS, а в другому — атрибут ROWS тегу <FRAMESET>. Для поділу вікна на фрейми через кому записують два числа, які визначають розміри фреймів. Для трьох фреймів потрібно три числа. Розміри фреймів вимірюють у пікселах або відсотках від розміру екрана. Якщо потрібно зазначити, що фрейм займає те місце, яке залишилося, використовують символ *.
Наприклад, тег <FRAMESET ROWS="150, *"> задає поділ вікна на два горизонтальні фрейми, один з яких має висоту 150 пікселів, а другий займає те місце, що залишилося (приклад на наступному слайді).
• Основи веб-дизайну
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Поділ вікна на фрейми
Тег <FRAMESET COLS=“20%, 55%, *”> задає поділ вікна на три вертикальні фрейми, один з яких займає 20% від ширини екрана, другий 55%, а третій займає те місце, що залишилося.
Можна використовувати одночасно і горизонтальний, і вертикальний поділ вікна на фрейми - це роблять за допомогою вкладення тегів <FRAMESET> один в один.
Після поділу екрана на вікна для кожного фрейму слід задати HTML-документ, який відображатиметься в ньому. Для цього використовують тег <FRAME> з атрибутами, що керують властивостями фреймів
• Основи веб-дизайну
• Розділ 2
• Інформатика. Профільне навчання
Атрибути тега FRAME
• Основи веб-дизайну
SRC
NAME
SCROLLING
NORESIZE
BORDER
BORDERCOLOR
MARGINHEIGHT
MARGINWIDTH
<< Назад
Вперед >>
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Вправа 2.6.
Розмістимо на сторінці три документи про навчальні заклади так, як показано в таблиці
Таблиця 2.8. Схема розташування на сторінці фреймів, які містять інформацію про навчальні заклади
Як видно з таблиці, сторінку поділено спочатку на два рядки у співвідношенні приблизно 60 % та 40 %, перший рядок поділено навпіл на два стовпці, а в утворених комірках розташовано відповідні веб-сторінки про навчальні заклади. Документи 1.html, 2.html та 3.html було створено під час виконання вправи 2.5.
• Основи веб-дизайну
Документ про гімназію «Сихівська» (2.html) | Документ про ліцей «Оріяна» (3.html) |
Документ про школу «Дивосвіт» (l.html) | |
Перехід на виконання вправи 2.6
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Використання посилань у фреймах
У вправі 2.6 не використані гіперпосилання — між фреймами немає взаємозв'язку. Проте це не завжди зручно: навчальних закладів може бути багато, а поділ сторінки на велику кількість фреймів призводить до розпорошування уваги відвідувача сайту.
Розглянемо веб-сторінку з навігаційною панеллю, яка розміщена у лівій меншій частині екрана, при цьому необхідна інформація відображатиметься у більшій правій частині так, як це показано в табл. 2.9.
Таблиця 2.9. Схема розміщення фреймів, в якій використовується навігаційна панель
• Основи веб-дизайну
Навігаційна панель | Документ з інформацією про вибраний відвідувачем сайту навчальний заклад |
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Використання посилань у фреймах
Якщо заплановано використовувати певний фрейм для відображення інформації, яка змінюватиметься після вибору відвідувачами іншого посилання, то йому надають ім'я.
Наприклад, <FRAME NAME="framel".
Веб-сторінка з гіперпосиланнями, що виконуватиме роль навігаційної панелі, складається із сукупності тегів <А>...</А>. У них крім адреси файлу, пов'язаного з гіперпосиланням, слід зазначити ім'я фрейму, в якому цей файл відображатиметься. Для цього використовують атрибут TARGET, значенням якого є ім'я відповідного фрейму.
Наприклад: <А HREF=“2.html” TARGET="frame1”>Гімназія «Сихівська»
• Основи веб-дизайну
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Вправа 2.7
Сформуємо веб-сторінку з навігаційною панеллю та областю відображення документів. Використайте файли з описами навчальних закладів ізвправи 5.5, а сторінку np.html з навігаційною панеллю та поділену на фрейми сторінку index.html створіть самостійно.
• Основи веб-дизайну
Перехід на виконання вправи 2.7
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Звернути увагу
У документі index.html у п'ятому рядку, в тегу <FRAME>, задано лише один атрибут – NAME. Тому після першого завантаження веб-сторінки права частина буде порожньою. Щоб цього уникнути, використовують атрибут SRC для повідомлення адреси файлу, який повинен відкритися у цьому фреймі під час першого завантаження сторінки. Зазвичай цей файл веб-сторінки з графічними вставками та загальною інформацією про сайт.
Навігаційне меню завжди в полі зору відвідувача в той час, коли він мандрує сторінками сайту.
• Основи веб-дизайну
• Розділ 2
Вперед >>
<< Назад
• Інформатика. Профільне навчання
Недоліки використання фреймів
Фрейми на веб-сторінках - це зручний спосіб структурування веб-сайту. Однак слід пам'ятати про те, що веб-сторінки з фреймами потребують завантаження кількох документів, і тому для їх відтворення браузеру необхідно більше часу, ніж для відтворення веб-сторінки без фреймів.
Окрім цього, екран із кількома веб-сторінками розпорошує увагу користувача. Іноді веб-документи, розміщені на одному екрані, мають різний стиль оформлення, що негативно впливає на загальне враження від такої сторінки.
• Основи веб-дизайну
Перехід на виконання Практичної роботи 4