Лабораторная работа №4 Создание фреймовой структуры html-страниц
На предыдущих занятиях Вы разработали вариант оформления домашней страницы сайта с помощью табличной разметки. Традиционно Web-дизайнеры опираются на этот способ для распределения текста на страницах.
Но существуют и другие способы для представления информации в определенным образом организованном виде.
В этой лабораторной работе для оформления домашней страницы сайта используем фреймовую структуру.
Примечание: чтобы Вам не запутаться при защите Ваших работ, рекомендуется все Web-страницы сайта, который будет разработан в этой лабораторной работе, сохранить в отдельном каталоге (например, “Frame”).
Что такое фрейм?
Фреймы используются для разбивки окна броузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм или кадр) (рис. 12).
Истинное назначение фреймов – это навигация (а не средство для разметки страницы). Идея фрейма заключается в том, чтобы разделить экран на несколько областей или окон. Это позволяет пользователю, просматривающему сайт, одновременно видеть больше одного документа. В действительности, даже при использовании простого дизайна с двумя фреймами (рис. 12) задействовано три документа: документ, содержащий фреймы, документ для левого фрейма и документ для правого фрейма.
Выгода от применения фреймов может быть значительна. Прежде всего, это дает возможность на все время закрепить навигацию на экране. Когда навигационные поля размещены в отдельном фрейме, расположенном вверху, слева, внизу или справа, они могут быть зафиксированы на месте и всегда будут в поле зрения посетителя сайта (в нашем случае это навигационная панель с гиперссылками на разделы сайта).
Организация фреймов
Фреймы содержатся в структуре <FRAMESET> и </FRAMESET>, замещающей в странице с фреймами структуру <BODY> и </BODY>. Допускается вложение фреймовых областей.
Атрибуты тега <FRAMESET> определяют:
Количество и ширину столбцов (строк) фрейма. Ширину столбцов (строк) можно задать в пикселях или в процентах;
Отображение рамок фреймовой структуры;
Цвет рамки фреймовой структуры. Этому атрибуту присваивается значение имени цвета или шестнадцатеричное RGB-значение.
Примечание: при указании размеров строк и столбцов в пикселях не учитывается, что броузер может работать в разных операционных системах, а экраны могут быть различного размера. Поэтому лучше определять строки и столбцы, используя относительные значения (%).
Задание 1
Откройте раздел «Фреймы» в файле справочника Sprav_html.doc на компакт-диске. Ознакомьтесь с атрибутами тега <FRAMESET>. Сделайте конспект всех атрибутов. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
Рассмотрим пример кода простой фреймовой структуры:
<html>
<head>
<title>Страница с кадрами</title>
</head>
<frameset cols="25%,75%”>
<frame src="panel.htm">
<frame src="home1.htm" name="main">
</frameset>
</html>
Примечание: страница с описанием фреймовой структуры не содержит тега <BODY>.
На рис. 12 представлен вид этой HTML-страницы в броузере. Экран по вертикали разбивается на 2 фрейма. Левый фрейм занимает 25% экрана и содержит страницу с названием “panel.htm”. Правый фрейм займет 75% экрана и вначале покажет файл “home1.htm”. Правый фрейм имеет имя “main”, которое задается с помощью атрибута NAME, то есть фрейм под именем "main" будет содержать страницу "home1.htm".
Рис.12. Страница с двумя фреймами
Примечание: в значениях COLS (столбец), ROWS (строка) перечень должен быть заключен в кавычки. Если кавычки не используются, то между значениями не должно быть пробелов.
Задание 2
Создайте Web-страницу, представленную на рис. 12. Для этого Вам нужно подготовить три HTML-файла: файл, содержащий описание фреймовой структуры, файл, который будет загружен в левый фрейм (“panel.htm”) и файл, который будет загружен в правый фрейм (“home1.htm”). Файл, содержащий описание фреймовой структуры сохраните под именем “frame1.htm”. Все созданные файлы сохраните в папке “Frame”.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
Тег <FRAME>
Тег <FRAME> определяет отдельный фрейм. Это непарный тег. Тегов <FRAME> должно быть ровно столько, сколько областей определено в структуре FRAMESET. Атрибуты тега <FRAME> определяют URL содержимого фрейма, имя фрейма, размеры внутренних полей фрейма, наличие (отсутствие) полос прокрутки фрейма (когда это важно для определения внешнего вида страницы), отображение и цвет рамки фрейма.
Задание 3
Откройте раздел «Фреймы» в файле справочника “Sprav_html.doc” на компакт-диске. Ознакомьтесь с атрибутами тега <FRAME>. Законспектируйте сведения обо всех атрибутах этого тега. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
Откройте файл c описанием фреймовой структуры “frame1.htm”. Задайте для фрейма с именем “main” следующие характеристики:
ширина верхнего и нижнего полей ‑ 50 пикселей;
ширина правого и левого полей ‑ 40 пикселей;
запрет на изменение пользователем размеров фрейма;
отображение полос прокрутки;
отображение рамки синего цвета.
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
Задание 4
У вас уже имеется один вариант домашней страницы (лабораторная работа №3), в котором для организации информации используется табличная структура. Сейчас Вы должны подготовить второй вариант домашней страницы, используя для ее создания фреймовую структуру. Все Web-страницы сайта, который будет разработан в этом задании, нужно сохранить в отдельном каталоге (например “Frame”).
Оформите домашнюю страницу Вашего сайта, используя фреймовую структуру (рис. 13).
Для нижнего фрейма при описании фреймовой структуры обязательно указать имя (например, “main”). Его мы будем использовать в качестве целевого фрейма при описании гиперссылок. (Для этого заданное фрейму имя нужно указать в качестве значения атрибута TARGET тега <A>).
Вся необходимая для этой лабораторной работы информация подготовлена Вами на предыдущих занятиях.
Итак, для выполнения этой работы у Вас предварительно должны быть подготовлены следующие файлы:
Файл с описанием предложенной фреймовой структуры;
Файлы, которые загружаются в заданные фреймы сразу при загрузке домашней страницы (логотип, название фирмы, навигационный, бегущая строка и файл в нижнем фрейме с рекламной информацией);
Пять файлов, которые представляют разделы “Услуги“, “Об агентстве“, “Новости“, “Сведения о породах“, “Фотогалерея“.
|
АГЕНТСТВО-ГОСТИНИЦА Собачье счастье |
|||
Услуги |
Об агентстве |
Новости |
Сведения о породах |
Фотогалерея |
В праздничные дни у нас предусмотрены скидки на все виды услуг |
||||
Добро пожаловать на сайт гостиницы для животных.
В нашей гостинице проживают животные, оставшиеся по разным причинам без хозяина. Если Вы потеряли своего любимца, то, возможно, мы поможем Вам его найти. Вы потеряли? Если у Вас возникло желание обзавестись кошкой или собакой, то Вы можете взять его у нас. В этом разделе сайта Вы найдете полную информацию о живущих в нашей гостинице питомцах, которых можно «усыновить». Вы хотите взять лохматого друга? Если Вы случайно нашли бездомное животное и не можете его приютить, приводите (приносите) его к нам. Мы окажем ему необходимую помощь и поселим в нашей гостинице. Приводите, приносите!
У нас приветливые и компетентные диспетчеры. Они ответят на все Ваши вопросы. Мы работаем круглосуточно. Все услуги агентства ‑ платные |
||||
Рис. 13. Домашняя страница с фреймовой структурой
Пригласите преподавателя и продемонстрируйте работающую Web-страницу.
Контрольные вопросы
Почему при указании размеров строк и столбцов фрейма лучше использовать относительные значения?
В каком случае необходимо задавать имя фрейма?
Как организовать загрузку нового документа при щелчке на гиперссылке во фрейме в окно, не поделенное на фреймы?
Каждой Web-странице можно поставить в соответствие один URL. Если Web-страница имеет фреймовую структуру, то ее URL – это URL какого из файлов?
Как будет интерпретировать броузер следующий фрагмент:
………..
<frameset cols=25%,50%, 25%>
<frame>
<frame>
<frame>
</frameset>
……….
Как будет выглядеть фреймовая разметка и почему?
Ниже на рисунке приведен вид Web-страницы в броузере и HTML-код создания фреймовой структуры страницы. Найдите несоответствие рисунка страницы и кода программы.
<html>
<frameset cols="*,*,*">
<frameset rows="*,*,*">
<frame>
<frame>
</frameset>
<frame>
<frameset cols="10%,*">
<frame>
<frame>
<frame>
</frameset>
</frameset>
</html>
Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<html>
<frameset cols="20%,80%">
<frame>
<frameset rows="20%,80%">
<frame>
<frame>
</frameset>
</frameset>
</html>
Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<html>
<frameset rows="*,*,*">
<frameset cols="*,*">
<frame>
<frame>
</frameset>
<frameset cols="50%,50%">
<frame>
<frame>
</frameset>
<frame>
</frameset>
</html>
Изобразите на бумаге вид Web-страницы, фреймовая структура которой задана следующим программным кодом:
<html>
<frameset cols="*,*,*">
<frame>
<frameset rows="20%,40%,40%">
<frame>
<frame>
<frame>
</frameset>
<frameset rows="*,*">
<frame>
<frame>
</frameset>
</frameset>
</html>
Напишите HTML-код создания приведенной ниже Web-страницы.
Напишите HTML-код создания приведенной ниже Web-страницы.
