Лабораторная работа №5 Тема: Создание фреймов
Цель работы: Изучить принципы создания фреймов, тег FRAMESET, необходимый для его использования.
Фреймы - это окна независимого просмотра HTML-документов. Иногда бывает очень удобно использовать навигацию по странице в виде меню, оформленного в отдельном фрейме, и основного окна, где будет представлена вся основная информация, определяемая действиями пользователя в области меню.
Для создания фрейма используется тег FRAMESET, который заменяет тег BODY в документе и используется для разделения экрана на области. Внутри данного тега находятся теги FRAME, которые указывают на HTML-документ, предназначенный для загрузки в область.
Пример 1. Создание простого фрейма
<HTML>
<FRAMESET cols="30%, 70%" border=0>
<FRAME src="menu.html" name="Menu"> <FRAME src="main.html" name="Main">
</FRAMESET>
</HTML>
1. В приведенном примере присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Вертикальное расположение устанавливается параметром cols="...", а для горизонтальных полос используют параметр rows="...". Параметр border="..." определяет границу между фреймами. Определение документа, изначально загружаемого при открытии этого файла (этот документ является HTML-страницей.), задается атрибутом тега <FRAME> src="...", при этом необходимо указать параметр name="...", позволяющий задать "имя" созданной области в виде последовательности латинских букв и цифр, использованной как значение этого атрибута. Это имя можно использовать, чтобы загружать новые документы в ранее созданную область. Для этого в тег <A>, определяющий гиперссылку, необходимо добавить атрибут target="." , значение которого совпадает с ранее определенным именем области. При переходе по данной гиперссылке новый документ загрузится в указанный фрейм. Например, предположим, что начальная страница Web-узла состоит из двух фреймов: слева располагается навигационная панель, а справа -текущая страница. Если правой области присвоено имя, используемое во всех ссылках, имеющихся в левой области, то щелчок на любой ссылке навигационной панели приведет к обновлению информации в соседней области, оставляя навигационную панель без изменений. В данном документе находятся только ссылки на другие (существующие) HTML-документы, которые будут загружены броузером при открытии страницы с фреймами. Файл menu.html имеет следующую структуру:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<H1>Первый фрейм</H1>
</BODY>
</HTML>
Файл main.html также имеет указанную выше структуру. Следует сказать, что оба этих файла должны располагаться в том же каталоге, где расположен файл с фреймами.
Задание:
Расположить эти фреймы по вертикали, используя атрибут rows="...'\ В результате у вас должно получиться следующее:
Рисунок 6.1 – Пример окна с двумя фреймами
2. Распространенное явление – комбинация вертикальных и горизонтальных фреймов.
<FRAMESET cols="*, 55%"> символ * означает все оставшееся место <FRAME src="homepage.htm" name="Frame1">
<FRAMESET rows="15%, 15%, 70%">
<FRAME src="menu.htm" name=" Frame2"> <FRAME src="menu2.htm" name=" Frame3"> <FRAME src="menu3.htm" name=" Frame4">
</FRAMESET>
</FRAMESET>
Используя вложенные теги FRAMESET, разбейте страницу следующим образом:
Рисунок 6.2 – Пример окна с четырмя фреймами
3. Используя атрибут target="...", сделать в фреймах гиперссылки, по нажатию на которые в эти же или в другие фреймы произойдет загрузка других страниц.
Контрольные вопросы:
Что такое фрейм?
Для чего необходим фрейм?
Тег для построения фреймов?
Вертикальные и горизонтальные фреймы.
- Лабораторная работа №1 Тема: Текстовое оформление страниц
- Лабораторная работа №2 Тема: Создание гипертекстовых ссылок
- 5. Ссылка на новое окно
- Лабораторная работа №3 Тема: Создание списков. Нумерованные списки
- Лабораторная работа № 4 Тема: Создание таблиц
- Лабораторная работа №5 Тема: Создание фреймов
- Лабораторная работа № 6 Тема: Создание Web-сайтов средствами ms Office.
- Разработка Web-сайта средствами ms Word.
- Разработка Web-сайта средствами ms Excel
- Создание Web-страниц средствами PowerPoint
- Лабораторная работа № 7 Тема: Создание web-страницы
- Лабораторная работа №8 Тема: Использование Microsoft FrontPage для редактирования web-узла
- Лабораторная работа № 9 Тема: Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах