- •1.1. ХАРАКТЕРИСТИКА ГРАФИЧЕСКИХ СТАНДАРТОВ
- •1.2. ВСТАВКА ГРАФИКИ В HTML-ДОКУМЕНТ
- •1.3. КАРТЫ-ИЗОБРАЖЕНИЯ
- •1.3.2. Конфигурация карт-изображений
- •1.3.3. Серверный вариант
- •1.3.4. Клиентский вариант
- •2.1. ПОНЯТИЕ ФРЕЙМА
- •2.2. ОБЛАСТИ ПРИМЕНЕНИЯ ФРЕЙМОВ
- •2.3. ПРЕИМУЩЕСТВА И НЕДОСТАТКИ ФРЕЙМОВ
- •2.4. ПРАВИЛА ОПИСАНИЯ ФРЕЙМОВ
- •2.5. ВЗАИМОДЕЙСТВИЕ МЕЖДУ ФРЕЙМАМИ
2.5. ВЗАИМОДЕЙСТВИЕ МЕЖДУ ФРЕЙМАМИ
Взаимодействие между отдельными фреймами происходит посредством загрузки документа по соответствующей ссылке в установленное окно. Реализуется это действие с помощью параметра TARGET тега <А>.
По умолчанию вызванный по гиперссылке документ будет загружаться в текущий фрейм. Но чаще всего нужно сделать так, чтобы страница появлялась в соседнем окне. Существуют специальные зарезервированные имена действий, по которым происходит загрузка документов на сайтах с фреймовой структурой: "_blank", "_self", "_parent" и "_top".
Действие
<А HREF="filel.html" TARGET="_blank">
осуществляет загрузку документа в новое окно без имени, определяемого параметром NAME тега <FRAME>, поэтому этот вариант исключает изменение содержимого созданного окна.
Действие
<А HREF="fiIe2.html" TARGET="_self">
открывает документ в текущем окне. Действие
<А HREF="file3.html" TARGET="_parent">
производит загрузку документа в область, занимаемую родительским фреймом текущего фрейма.
Действие
<А HREF="fiie4.html" TARGET="_top">
вызывает загрузку документа в полном окне.
В данном случае не был задействован параметр NAME в теге описания текущего фрейма <FRAME>.
Рассмотрим несколько примеров по взаимодействию между фреймами и открытию отдельных окон браузера c помощью параметра TARGET.
Создадим файл со следующей фреймовой структурой: |
|
||
<FRAMESET ROWS="2*, *"> |
SRC="menu.html" |
NORESIZE |
|
<FRAME |
NAME="menu" |
||
FRAMEBORDER="1">
<FRAMESET COLS="50%, 50%">
<FRAME NAME="left" SRC="left.html"> <FRAME NAME="right" SRC="right.html"> </FRAMESET>
Верхний фрейм будет содержать перечень гиперссылок, а два нижних фрейма предназначены для открытия в них содержимого конкретной ссылки. Документ "menu.html" (листинг 2.2) содержит шесть гиперссылок на один и тот же файл – "text.html".
27
Листинг 2.2. Файл верхнего фрейма «menu.html»
<HTML>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#FF0000" ALINK="#00FF00" VLINK="blue">
<НЗ>Ссылки верхнего фрейма</НЗ><HR> <FONT FACE="Tahoma" SIZE="2">
<UL TYPE="square">
<LI><A HREF="text.html" TARGET="left">Фaйл с текстом в левом нижнем фрейме</А>
<LI><A HREF="text.html" ТАRGЕТ="right^">Файл с тек-
стом в правом нижнем фрейме</А>
<LI><A HREF="text.html" ТАRGЕТ="menu">Файл с текстом в верхнем фрейме</А>
<LI><A HREF="text.html" ТАRGЕТ="_top">Файл с текстом в полном окне</А>
<LI><A HREF="text.html" ТАRGЕТ="_blank">Файл с тек-
стом в новом окне</А>
<LI><A HREF="text.html" TARGET="_sеlf">Файл с текстом в текущем фрейме</А>
</UL>
</FONT></BODY></HTML>
Первая ссылка откроется в левом нижнем фрейме по причине указания конструкции TARGET="left" ("left" в данном случае – это внутреннее имя данного фрейма).
Вторая ссылка откроется в правом нижнем фрейме (указано внутреннее имя фрейма "right") .
Третья ссылка будет открыта в этом же окне, т. к. "menu" – это имя текущего фрейма, из которого открываются гиперссылки.
Четвертая ссылка откроется в полном окне браузера (конструкция
"_top").
Пятая ссылка будет открыта в отдельном новом окне поверх фреймовой структуры (действие "_blank").
Наконец, последняя ссылка откроется в текущем фрейме (аналогич-
но действию TARGET="menu").
В заключение следует упомянуть, что помимо обычных фреймов существуют плавающие фреймы, которые поддерживаются только некоторыми браузерами. Суть плавающих фреймов заключается в возможности встраивать обыкновенные фреймы (с указанием источника), являющиеся в сущности HTML-документами, в другие электронные документы.
Плавающие фреймы описываются тегом-контейнером <IFRAME> и могут иметь параметры, присущие обыкновенным фреймам.
28
3. ПРАКТИЧЕСКИЕ ЗАНЯТИЯ И ЗАДАНИЯ ДЛЯ ЛАБОРАТОРНЫХ РАБОТ
В данном разделе перечислены темы практических занятий, проводимых в рамках курса «Web-дизайн», относящиеся к темам, рассмотренным в данном учебном издании.
Занятие 8. Использование графики в HTML-документах:
•вставка графики в HTML-документ;
•масштабирование изображений;
•карты-изображения.
Задание. Создать фотоальбом или каталог продукции формы с использованием масштабирования изображений и карт-изображений.
Занятие 9. HTML-документы на основе фреймов:
•правила описания фреймов;
•взаимодействие между фреймами.
Задание. Разработать каталог продукции фирмы с использованием фреймов. Каталог должен включать в себя описание товара, изображение товара, меню на основе отдельного фрейма.
29
СПИСОК ЛИТЕРАТУРЫ
1.Миронов Д.А. Создание Web-страниц в MS Office 2000 / Д.А. Миронов. – СПб. : БХВ-Петербург, 2002. – 320 с.
2.Калиновский А.И. Юзабилити: как сделать сайт удобным / А.И. Калиновский. – Минск : Новое знание, 2005. – 220 с.
3.Круг С. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!» / С. Круг. – СПб. : Символ-Плюс, 2005. – 200 с.
4.Кэмпбел М. Строим web-сайты / М. Кэмпбел. – М. : ТРИУМФ, 2006. – 480 с.
5.Петюшкин А.В. HTML. Экспресс-курс / А.В. Петюшкин. – СПб. : БХВ-Петербург, 2003. – 256 с.
6.Шапошников И.С. Web-сайт своими руками / И.С. Шапошников. – СПб. : БХВ-Петербург, 2001. – 224 с.
7.Шапошников И.С. Самоучитель HTML 4 / И.С. Шапошников. – СПб. : БХВ-Петербург, 2000. – 288 с.
30
Учебное издание
Коструб Ирина Дмитриевна, Портнов Михаил Михайлович
WEB-ДИЗАЙН. ОСНОВЫ ЯЗЫКА HTML
Часть 3
Методические указания для вузов
Подписано в печать 7.09.2009. Формат 60×84/16. Усл. печ. л. 1,8. Тираж 25 экз. Заказ 1367.
Издательско-полиграфический центр Воронежского государственного университета.
394000, г. Воронеж, пл. им. Ленина, 10. Тел. 208-298, 598-026 (факс) http://www.ppc.vsu.ru; e-mail: pp_center@ppc.vsu.ru
Отпечатано в типографии Издательско-полиграфического центра Воронежского государственного университета.
394000, г. Воронеж, ул. Пушкинская, 3. Тел. 204-133
31