Недоліки використання фреймів
Фрейми на веб-сторінках — це зручний спосіб структурування веб-сайту. Однак слід пам'ятати про те, що веб-сторінки з фреймами потребують завантаження кількох документів, і тому для їх відтворення браузеру необхідно більше часу, ніж для відтворення веб-сторінки без фреймів. Окрім цього, екран із кількома веб-сторінками розпорошує увагу користувача. Іноді веб-документи, розміщені на одному екрані, мають різний стиль оформлення, що негативно впливає на загальне враження від такої сторінки.
Хід роботи
1. Користуючись теоретичними відомостями та прикладами, виконайте завдання з вправ. Файли сторінок розмістіть на локальному сервері.
2. Розробіть HTML-документ, який матиме таблицю, що створена за такою схемою:
коричневий
золотистий синьо-фіолетовий
жовтий пурпуровий
рожевий
Зі схеми видно, що перший рядок складається з двох комірок: комірки коричневого кольору завширшки 60 % від ширини всієї таблиці, яка містить два стовпці, та аметистової комірки, що об'єднує два рядки. Другий рядок складається лише з однієї комірки золотистого кольору. Третій рядок складається з комірки жовтого кольору шириною 30 % від ширини всієї таблиці та пурпурової комірки, що об'єднує два рядки два стовпці. Четвертий рядок складається з однієї комірки рожевого кольору.
3. Збережіть створений документ у файлі з розширенням .html. Відобразіть документ у вікні браузера (рис.11).
Рис.11. Веб-сторінка, на якій міститься таблиця
4. Відредагуйте HTML-документ: скасуйте призначення меж таблиці та кольорів комірок, змініть розмір шрифту.
Результат покажіть викладачу, а лістинг HTML-документа наведіть у звіті.
5. Створіть структуру папок для веб-сайту «Моя фірма» з п'яти сторінок з організацією навігації за допомогою фреймів за заданою схемою. Розгляньте схему розміщення інформації (табл.9). Як бачите, екран поділено на три частини. У верхній лівій міститься назва фірми — цей фрейм не буде оновлюватися. Права верхня частина призначена для виведення інформації про основні напрями роботи фірми. Це найбільший фрейм, він постійно оновлюватиметься залежно від вибору користувачем гіперпосилання. Список посилань розташований у нижній частині екрана, яка буде навігаційною панеллю. Інформація в ній не оновлюватиметься, відвідувач сайту використовуватиме її гіперпосилання для того, щоб довідатися про роботу фірми.
Таблиця 9.Схема поділу екрана на фрейми
Назва фірми Основна інформація
Навігаційна панель-список текстових гіперпосилань із напрямками роботи певної фірми
У папці веб-сайту будуть розміщені:
• HTML-документ, в якому записана назва фірми; назвіть його logo.html;
• HTML-документи, в яких описується, чим займається фірма; це будуть файли 1.html, 2.html, 3.html;
• HTML-документ — навігаційна панель, що реалізує список гіперпосилань у вигляді тексту, які посилаються на документи 1.html, 2.html, 3.html; назвіть його g.html;
• головний файл веб-сайту —index.html, за допомогою якого екран буде поділено на фрейми, при цьому той із них, в якому відображатимуться документи 1.html, 2.html, 3.html, має отримати ім'я за допомогою атрибута NAME.
5.1. Створіть HTML-код документа logo.html.
<HTML>
<TITLE>Фірма «Калина»</TITLE>
<BODY BGCOLOR=orange>
<H4><F0NT COLOR=olive>Фірма «Калина»</FONT></Н4>
</BODY>
</HTML>
5.2. Створіть HTML-код документа l.html.
<HTML>
<TITLE>Замовники фірми «Калина»</TITLE>
<BODY BGCOLOR=cyan>
<Н1>Наші замовники</Н1>
<Н2>Фірма «Карпати»</Н2>
<Н2>Фірма «Золотий жук»</Н2>
<Н2>Фірма «Пролісок»</Н2>
</BODY>
</HTML>
5.3. Створіть HTML-код документа 2.html.
<HTML>
<TITLE>Вироби фірми «Калина»</TITLE>
<BODY BGCOLOR=cyan>
<Н1>Наша продукція</Н1>
<Н2>Шафи для вітальні</Н2>
<Н2>Кухонні стільці</Н2>
<Н2>Офісні столи</Н2>
</BODY>
</HTML>
5.4. Створіть HTML- код документа 3.html.
<HTML>
<TITLE>Перспективи фірми «Калина»</TITLE>
<BODY BGCOLOR=cyan>
<Н1>Наша майбутня продукція</Н1>
<Н2>Комп'ютерні столи</Н2>
<Н2>Стилізовані акваріуми</Н2>
<Н2>Набір меблів для лоджії</Н2>
</BODY>
</HTML>
5.5.Створіть HTML-код головної сторінки g.html.
<HTML>
<TITLE>Напрями роботи фірми «Калина»</TITLE>
<BODY BGCOLOR=pink>
<Н1> Напрямки роботи фірми «Калина»</Н1>
<H3><a href="l.html" target="frame1">Наші замовники</а>
</НЗ>
<H3> <a href="2.html" target="frame1">Наша продукція</а>
</НЗ>
<H3><a href="3.html" target="frame1">Наша майбутня продукція</а></НЗ>
</BODY>
</HTML>
5.6. Створіть HTML-код головної сторінки index.html. Зауважте, що значенням атрибута NAME в документі index.html буде frame1; те саме значення має бути в атрибута TARGET у документі g.html.
На рис.11 показано головну сторінку сайту фірми «Калина», що відображається, коли користувач вибрав гіперпосилання на сторінку з інформацією про майбутню продукцію компанії.
Рис. 11. Головна сторінка сайту фірми «Калина»
6. Створіть HTML-код:
• файлів, які міститимуть інформацію про напрями роботи певної уявної фірми (варіант якої пропонується), використовуючи теги та атрибути для задання тла сторінок, виділення заголовків, визначення вигляду, розміру, написання та кольору символів;
• файлу, який відтворюватиме навігаційну панель;
• головної сторінки сайту згідно з вибраним варіантом схеми розташування фреймів на екрані.
Результат покажіть викладачу, збережіть веб-сторінку на локальному сервері, а лістінги html-документів та скріншоти – в електронний файл-звіт.
Варіанти розробки веб-сторінок та схеми поділу сторінки на фрейми.
Варіант 1 (Сучасні комп'ютери)
Основна інформація Назва фірми
Навігаційна панель —- список текстових гіперпосилань
Варіант 2 (Меблі)
Навігаційна панель — список текстових Назва фірми
гіперпосилань
Основна інформація
Варіант З (Побутова техніка)
Навігаційна панель —- список текстових гіперпосилань
Основна інформація Назва фірми
Варіант 4 (Канцелярські товари)
Основна інформація Назва фірми
Навігаційна панель — список текстових гіперпосилань
Варіант 5 (Книжки)
Назва фірми
Навігаційна панель —• список текстових гіперпосилань
Основна інформація
Варіант 6 (Туризм)
Назва фірми Основна інформація
Навігаційна панель — список текстових гіперпосилань
Варіант 7 (Страви)
Навігаційна панель -- список текстових гіперпосилань Основна
Назва фірми інформація
Варіант 8 (Годинники)
Навігаційна панель — список Основна інформація Назва
текстових гіперпосилань фірми
Варіант 9 (Моделі одягу)
Основна інформація Назва
Навігаційна панель — список текстових фірми
гіперпосилань
Варіант 10 (Фотоапарати)
Назва фірми Основна інформація
Навігаційна панель - список текстових гіперпосилань
Варіант 11 (Телефони)
Навігаційна панель - список текстових гіперпосилань
Назва фірми Основна інформація
Варіант 12 (Автомобілі)
Назва фірми Навігаційна панель — список
Основна інформація текстових гіперпосилань