5.1. Создание фреймов
5.2. Границы фрейма
5.3. Полосы прокрутки
5.4. Ссылки внутри фреймов
5.5. Рзменение размеров фреймов
5.6. Плавающие фреймы
5.7. Управление пространством внутри фрейма
5.8. Достоинства и недостатки фреймов
Фреймы (frames) – это HTML-элементы, позволяющие разделить страницу на несколько независимых окон. В каждое окно можно поместить собственную независимую HTML-страницу, в которой может находиться ссылка из одного окна в другое. Фреймы поддерживаются в браузерах версий 3.0 и более. Они применяются в основном для организации постоянно находящихся на экране меню, в то время как в другом окне располагается непосредственно сама информация.
Фреймы чаще всего используют для создания следующих элементов.
• Оглавление – обычно создают в виде вертикального столбца. Пользователи могут обращаться к нему в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт оглавления.
• Неподвижные элементы интерфейса – использование фреймов позволит вам «закрепить» на экране графику, логотипы и другие неподвижные по замыслу элементы, в то время как остальная часть страницы будет прокручиваться во фрейме.
• Формы и результаты – можно в одном фрейме создать форму, а в другом отобразить результаты запроса.
5.1. Создание фреймов
Чтобы HTML-страница содержала фреймы, а экран был разделен на области, необходимо заменить пару тегов
.. РІВ РєРѕРґРµ HTML-страницы парой тегов . Необходимо также указать хотя Р±С‹ РѕРґРёРЅ РёР· атрибутов cols или rows. РЎ помощью этих атрибутов задают размеры фреймов Рё количество строк Рё столбцов РІ разбиении страницы. Атрибут cols определяет количество строк, Р° атрибут rows – количество столбцов. Области, полученные РІ результате разбиения, Рё Р±СѓРґСѓС‚ являться фреймами. Отсутствие этих атрибутов определяет РѕРґРёРЅ фрейм величиной РІРѕ РІСЃРµ РѕРєРЅРѕ браузера. Р’ значении атрибутов необходимо указывать РЅРµ количество строк или столбцов, Р° значение ширины каждого фрейма через запятую, если рассматривать атрибут cols (например, cols = В«13,31,34В»). Атрибут rows определяет высоту каждого фрейма соответственно. Размеры фреймов РјРѕРіСѓС‚ задаваться как РІ абсолютных, так Рё РІ относительных величинах.• Простое числовое значение определяет фиксированную высоту или ширину фрейма РІ пикселах (например, cols = "20, 100, 20" rows = "30, 100"). Рто далеко РЅРµ самый лучший СЃРїРѕСЃРѕР± описания размеров фрейма, поскольку различные браузеры имеют различный размер рабочего поля, РЅРµ РіРѕРІРѕСЂСЏ уже Рѕ различных экранных разрешениях Сѓ пользователя. Если РІС‹ РІСЃРµ же используете данный СЃРїРѕСЃРѕР± описания размера, то настоятельно рекомендуется сочетать его СЃ каким-либо РґСЂСѓРіРёРј, чтобы РІ результате РІС‹ точно получили стопроцентное заполнение РѕРєРЅР° браузера пользователя.
• Значение величины фрейма, заданное в процентах от 1 до 100 (например, cols = "20 %, 50 %, 3 0 %" rows = "30 %, 70 %"). Если общая сумма процентов, описывающих фрейм, превышает 100, то размеры всех фреймов пропорционально уменьшаются до суммы 100 %. Если, соответственно, сумма меньше 100, то размеры пропорционально увеличиваются.
• В значении указывается число со звездочкой (например, 5*). Однако числовое значение в данном описании является необязательным. Символ * указывает на то, что все оставшееся место будет принадлежать данному фрейму. Если указывается два или более фрейма с описанием * (например, cols = "*, *, *"), то оставшееся пространство делится поровну между этими фреймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрейма (во сколько раз он будет больше аналогично описанного просто звездочкой). Например, описание rows = "2*,*,*" говорит, что будет создано три фрейма с размерами 2/3 свободного пространства для первого фрейма и по 1/3 для двух других.
Чтобы в каждой из областей отображалась информация, необходимо использовать элемент FRAME, обязательный атрибут src которого укажет адрес документа, отображаемого внутри фрейма. Если адрес отсутствует, то будет отображен пустой фрейм. Рассмотрим создание фреймов на примере, описанном в листинге 5.1.
Листинг 5.1. Пример создания фреймов
На рис. 5.1 изображено, как будет отображаться HTML-документ, описанный в листинге 5.1. Страница содержит четыре области соответствующих пропорций, в каждую из которых первоначально загружаются HTML-документы Frame 1. html, Frame2.html, Frame3.html и Frame4.html.
Рис. 5.1. Пример страницы, содержащей четыре фрейма
Помимо HTML-документов, фрейм может содержать и изображение. Для этого необходимо указать адрес соответствующей картинки в атрибуте src, например src="pic. gif". Обратите внимание, что элемент FRAME используется без закрывающего тега.
5.2. Границы фрейма
Обращаю ваше внимание на то, что в описанном выше примере каждый фрейм имеет границу (см. рис. 5.1). Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента FRAMESET, позволяющих настраивать границы фреймов. Ширина границы определяется атрибутом border. По умолчанию значение ширины границы равно пяти. Чтобы граница фрейма отсутствовала, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение no или 0 атрибуту frameborder. Данный атрибут может принимать только два противоположных значения. Если значение атрибута frameborder равно yes или 1, то граница фреймов будет отображаться, если 0 или no, то нет. Возможны конфликтные ситуации, так как значения атрибута frameborder различаются для разных браузеров. Однако эту проблему можно решить. Просто используйте дважды атрибут frameborder (
5.3. Полосы прокрутки
В некоторых случаях полосы прокрутки нарушают дизайн HTML-страницы. Если содержимое фрейма не помещается в отведенную область, то автоматически появляются полосы прокрутки для просмотра информации. Для управления отображением полос прокрутки используется атрибут scrolling, принимающий три основных значения:
• yes – всегда вызывает появление полос прокрутки, независимо от объема информации;
• no – запрещает появление полос прокрутки;
• auto – полосы прокрутки отображаются при необходимости (по умолчанию).
Рассмотрим пример страницы, в которой использована конструкция, описанная выше (рис. 5.4).
Рис. 5.4. Пример управления полосами прокрутки
Р’ данном примере второй Рё третий фреймы содержат изображение. Рассмотрим каждый фрейм РїРѕ отдельности. Полосы прокрутки первого фрейма всегда, независимо РѕС‚ содержимого, Р±СѓРґСѓС‚ отображаться, РІ данном случае РѕРЅРё неактивны, так как содержимое фрейма меньше отведенного для него места. РЈ второго фрейма полосы прокрутки появились автоматически, так как изображение РЅРµ поместилось РІ отведенную область. Рспользуя полосы прокрутки, РІС‹ РІСЃРµ же можете просмотреть изображение. Рзображение, которое содержит третий фрейм, просмотреть сложно, так как Сѓ него отключены полосы прокрутки. Таким образом, атрибут scrolling="no" следует использовать осторожно. Рнформация, содержащаяся РІ четвертом фрейме, поместилась РІ отведенное для фрейма место, поэтому полосы прокрутки РЅРµ отображаются.
5.4. Ссылки внутри фреймов
В большинстве случаев при переходе по ссылке в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Главное отличие – возможность загружать документ в выбранный фрейм из другого. Для этого применяется атрибут target элемента А. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name.
В листинге 5.3 приведен пример HTML-документа, где некоторым фреймам присвоены имена.
Листинг 5.3. Код главной страницы
На рис. 5.5 изображен HTML-документ (листинг 5.3), в четвертый фрейм которого загружается страница, содержащая ссылку на другой документ: Другая страницаа>.
Рис. 5.5. Четвертый фрейм содержит ссылку на другой документ
Если пользователь щелкнет кнопкой мыши на данной ссылке, то новый документ загрузится во втором фрейме, на что указывает атрибут target = «frame2» (рис. 5.6).
Рис. 5.6. Во второй фрейм загрузился новый документ
Стоит также отметить, что имя фрейма должно начинаться с цифры или латинской буквы. Следующие имена используются в качестве зарезервированных:
• target="_blank" – документ загрузится в новом окне;
• target="_self" – документ загрузится в текущий фрейм;
• target="_parent" – если документ с гиперссылкой находится во вложенном наборе фреймов, то документ загружается в родительское окно или набор фреймов;
• target="_top" – отменяет все фреймы и загружает документ в полное окно браузера.
Рспользуя фреймы, РЅРµ стоит забывать Рё РѕР± особенностях гиперссылок. Если атрибут target РЅРµ указан, то целевой документ загружается РїРѕ умолчанию РІ тот же фрейм. Если указано несуществующее РёРјСЏ фрейма, то открывается РЅРѕРІРѕРµ РѕРєРЅРѕ браузера, получая РїСЂРё этом заданное РёРјСЏ. Для внешних ссылок следует задавать значения атрибута target либо _top, либо _blank, чтобы чужие сайты РЅРµ отображались РІ ваших фреймах, Р° занимали полное РѕРєРЅРѕ.
Совет
Не стоит злоупотреблять именем «_blank», потому что часто пользователи не замечают, что открылось новое окно. Незакрытые окна копятся, и пользователь может запутаться в них.
5.5. Рзменение размеров фреймов
По умолчанию размеры фреймов можно изменять с помощью указателя мыши. Необходимо просто навести указатель на границу между фреймами и, зажав левую кнопку мыши, переместить границу влево или вправо, вверх или вниз (рис. 5.7).
Р РёСЃ.В 5.7. Рзменение размеров фрейма указателем мыши
Для того чтобы заблокировать возможность изменения пользователем размеров фреймов, следует воспользоваться атрибутом noresize элемента FRAME.
Атрибут noresize не требует никаких значений. Для страницы с двумя фреймами этот параметр можно указать лишь в одном месте. Естественно, если у одного фрейма нельзя изменять размеры, то у близлежащего к нему размеры также не будут меняться.
5.6. Плавающие фреймы
Браузеры последних версий позволяют использовать плавающие фреймы, добавляемые с помощью элемента IFRAME. Плавающий фрейм находится внутри обычного
документа, не содержащего тегов
Ваш браузер не поддерживает плавающие фреймы!
На рис. 5.8 изображено окно браузера, содержащее плавающий фрейм.
Рис. 5.8. Пример плавающего фрейма
Если браузер не поддерживает плавающие фреймы, то элемент IFRAME будет проигнорирован. Для таких браузеров можно указать альтернативный текст, расположенный между парой тегов .
5.7. Управление пространством внутри фрейма
По умолчанию браузер отображает фреймы с полосой чистого пространства (полями) между содержимым и границей фрейма, равной 10 пикселов. Управлять этим пространством фрейма можно с помощью атрибутов marginheight и marginwidth. Атрибут marginwidth определяет высоту свободного пространства слева и справа от содержимого фрейма, а marginheight – сверху и снизу соответственно. Задавая величины полей, надо использовать оба атрибута, так как браузер может автоматически сократить размеры тех полей, которые вы не указали, до наименьшего значения. Значения этих атрибутов всегда должны указываться в абсолютных значениях (пикселах), а минимальное значение равняется одному пикселу.
Рассмотрим пример HTML-документа, который содержит всего РґРІР° фрейма (листинг 5.4). Рзменим поля первого фрейма, Р° поля второго оставим РїРѕ умолчанию. Чтобы разница была заметна невооруженным взглядом, РІ каждый фрейм загрузим изображения.
Листинг 5.4. Рзменение полей фрейма
HTML-страница, описанная выше, изображена на рис. 5.9. В соответствии с кодом страницы поля первого фрейма значительно отличаются от полей второго, которые мы оставили по умолчанию.
Рис. 5.9. Пример управления полями фрейма
Стоит также отметить, что значения полей необходимо указывать для каждого фрейма в отдельности. Если использовать запись frameset marginheight=45 marginwidth =1>, то браузер просто проигнорирует значения атрибутов, а не определит их для всех фреймов.
5.8. Достоинства и недостатки фреймов
Поскольку вокруг фреймов существует много разговоров об их необходимости, рассмотрим их достоинства и недостатки, чтобы можно было самостоятельно решить, стоит ли использовать их на своем сайте.
Достоинства фреймов следующие.
• Простота – с помощью фреймов HTML-страница разграничивается на две области, которые содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме по ссылке, нажатой в совершенно другом фрейме. Такое разделение HTML-страницы на составляющие интуитивно понятно и логически обусловлено.
• Быстрота – для верстки без фреймов характерно размещение РЅР° РѕРґРЅРѕР№ странице Рё навигации, Рё содержания. Рто увеличивает объем каждой страницы Рё РІ СЃСѓРјРјРµ может существенно повлиять РЅР° объем загружаемой СЃ сайта информации. Поскольку фреймы используют разделение информации РЅР° части, страницы СЃ РЅРёРјРё Р±СѓРґСѓС‚ загружаться быстрее.
• Размещение – фреймы предоставляют уникальную возможность – размещение информации точно в нужном месте окна браузера. Так, можно поместить фрейм внизу браузера, и, независимо от прокручивания содержимого, эта область не изменит своего положения.
• Рзменение размеров областей – можно изменять размеры фреймов «на лету», чего РЅРµ позволяет сделать традиционная верстка HTML.
• Загрузка – загрузка HTML-страницы происходит только в указанное окно, остальные остаются неизменными. С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы.
Недостатки фреймов такие.
• Навигация – пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь щелкнул кнопкой мыши на ссылке, полученной в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, щелкаете на ней кнопкой мыши, а в итоге открывается документ без названия и навигации. Чтобы понять, где вы находитесь, или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
• Плохая индексация поисковыми системами – поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах.
• Внутренние страницы нельзя добавить РІ Рзбранное – фреймы скрывают адрес страницы, РЅР° которой находится посетитель, Рё всегда показывают только адрес сайта. РџРѕ этой причине понравившуюся страницу невозможно поместить РІ раздел Рзбранное браузера.
• Несовместимость с разными браузерами – параметры фреймов обладают свойством совершенно по-разному отображаться в различных браузерах. Причем противоречие между ними настолько явное, что одни и те же параметры интерпретируются браузерами совершенно по-своему.
• Непрестижность – весьма странный недостаток, который РЅРµ имеет никакого отношения Рє техническим особенностям создания сайта, Р° РЅРѕСЃРёС‚ скорее идеологический характер. Сайты СЃ фреймами считаются несолидными, Р° РёС… авторы сразу выпадают РёР· разряда профессионалов, которые РЅРёРєРѕРіРґР° РЅРµ используют фреймы РІ СЃРІРѕРёС… работах. Рсключение составляют чаты, РіРґРµ без фреймов обойтись просто невозможно.
Резюме
В этой главе вы познакомились с фреймами, которые являются одними из основных объектов HTML. Вы научились создавать их и управлять отдельными их элементами. Кроме того, вы узнали, в каких целях эффективно использовать фреймы и какие они имеют достоинства и недостатки в своем использовании.
Однако РІ среде веб-мастеров использование фреймов традиционно считается дурным тоном. РќР° то есть РјРЅРѕРіРѕ серьезных оснований, Рѕ которых говорилось выше. Хотя РІ некоторых случаях использование фреймов дает такие преимущества, что отказываться РѕС‚ РЅРёС… просто неразумно. РЈ фреймов наряду СЃ недостатками есть Рё достоинства, которые РЅРµ позволяют отбросить эту технологию как бесперспективную. Рспользовать или РЅРµ использовать фреймы РЅР° сайте – решать именно вам.