Поделиться
16. Организация Web-страницы на основе фреймов.doc
Тема: Организация Web-страницы на основе фреймов
Цель: закрепить знания по использованию фреймов для структурирования сайтов.
Задачи: рассмотреть тэги <table>, <tr>, <td> и их атрибуты.
Время выполнения: 2 часа
Теоретический материал:
Тег <frame> служит для описания одного фрейма (его вид и содержание). Закрывающий тег не требуется. Атрибуты:
name – назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках;
src - определяет исходный документ, содержащийся во фрейме;
noresize - если этот атрибут присутствует, он сообщает браузеру, что размеры фрейма изменять нельзя.
Для создания фрейма используется тег <frameset>, который заменяет тег <body> в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги <frame>, которые указывают на HTML-документ, предназначенный для загрузки в область (рисунок 16).
Рисунок 16 - Пример разделения окна браузера на два фрейма
При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов.
Граница между фреймами отображается по умолчанию и, как правило, в виде трехмерной линии. Чтобы ее скрыть используется атрибут frameborder тега <frameset> со значением 0. Однако в браузере Opera граница хоть и становится в этом случае бледной, все же остается. Для этого браузера требуется добавить framespacing="0". Таким образом, комбинируя разные атрибуты тега <frameset>, получим универсальный код, который работает во всех браузерах. Линия при этом показываться никак не будет.
Учтите, что атрибуты frameborder и framespacing не являются валидными и не соответствуют спецификации HTML.
Если граница между фреймами все же нужна, в браузере она рисуется по умолчанию, без задания каких-либо атрибутов. Можно, также, задать цвет рамки с помощью атрибута bordercolor, который может применяться в тегах <frameset> и <frame>. Цвет указывается по его названию или шестнадцатеричному значению, а толщина линии управляется атрибутом border. Браузер Opera игнорирует этот атрибут и обычно отображает линию черного цвета.
Атрибуты bordercolor и border тега <frameset> также не являются валидными и не признаются спецификацией HTML.
В данном примере линия между фреймами задается синего цвета толщиной пять пикселов. Линии различается по своему виду в разных браузерах, несмотря на одинаковые параметры (рисунок 17).
|
|
|
|
|
Internet Explorer |
Opera |
Firefox |
Рисунок 17 - Вид границы между фреймами в разных браузерах
Браузер Opera никак не изменяет цвет границы между фреймами, Internet Explorer устанавливает широкую границу практически сплошного цвета, а Firefox границу отображает в виде набора линий.
По умолчанию размеры фреймов можно изменять с помощью курсора мыши, наведя его на границу между фреймами. Для блокировки возможности изменения пользователем размера фреймов следует воспользоваться атрибутом noresize тега <frame>.
Атрибут noresize не требует никаких значений и используется сам по себе. Для случая двух фреймов этот атрибут можно указать лишь в одном месте. Естественно, если у одного фрейма нельзя изменять размеры, то у близлежащего к нему размеры тоже меняться не будут.
Если содержимое фрейма не помещается в отведенное окно, автоматически появляются полосы прокрутки для просмотра информации. В некоторых случаях полосы прокрутки нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления отображением полос прокрутки используется атрибут scrolling тега <frame>. Он может принимать два основных значения: yes - всегда вызывает появление полос прокрутки, независимо от объема информации и no - запрещает их появление.
При выключенных полосах прокрутки, если информация не помещается в окно фрейма, просмотреть ее будет сложно. Поэтому scrolling="no" следует использовать осторожно.
Если атрибут scrolling не указан, то полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название - встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рисунке 18 приведен пример такого фрейма.
Рисунок 18 - Плавающий фрейм на веб-странице
Во фрейм можно загружать HTML-документ и прокручивать его содержимое независимо от остального материала на веб-странице. Размеры фрейма устанавливаются самостоятельно согласно дизайну сайта или собственных предпочтений.
Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ.
Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target.
Тег <iframe> проходит валидацию только при использовании переходного <!DOCTYPE>.
1. В соответствие с ходом работы создайте сайт Корпорации монстров. Схема и пункты меню представлены на рисунке 19:
|
САЙТ КОРПОРАЦИИ МОНСТРОВ |
|
|
История |
Мы запугаем вас до полусмерти! |
|
Услуги |
|
|
Рейтинг лучших монстров |
|
Рисунок 19 – Образец для выполнения задания 1
Ход работы:
1. В первом задании сайт должен состоять из семи файлов: 1) описывает общую структуру сайта на основе трёх фреймов; 2) содержит заголовок (данный файл будет являться верхним фреймом); 3) представляет собой меню на основе гиперссылок (левый фрейм); 4) содержит лозунг и приветствие (правый фрейм); 5) файл с историей корпорации (необходимо написать пару абзацев); 6) описывает услуги компании с ориентировочными ценами; 7) представляет рейтинг монстров (можно с фотографиями).
2. Описание работы сайта: при активации ссылки из меню в правый фрейм должен загружаться соответствующий файл. Заголовок сайта должен быть ссылкой на исходную страницу.
3. Все страницы сайта должны быть оформлены в едином стиле.
Контрольные вопросы:
1. Каким образом происходит обращение к различным фреймам?
2. Как загрузить документ во фрейм?
3. Запишите тэги, создающие следующую структуру сайта: два вертикальных фрейма, причём последний разбит на два горизонтальных.
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
