Лекция: Ступенька 38-ая.
В этой главе мы разберемся, как расположить документы в окне следующим образом
или
В предыдущей главе я говорила, что не можем использовать атрибуты rows и cols одновременно применительно к одному тэгу <frameset>. Тогда как же расположить наши документы в окне так, как указано на рисунках? Просто, ввести в наш фрейм документ еще одного господина <frameset>, но обо всем по порядку.
Начнем с первого рисунка:
Каким образом мы будем делить окно? — На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на два столбца, в которых будут располагаться документы menu.html и content.html.
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset rows=«100,*»> <frame src=«logo.html»> <???> </frameset> </html> |
Принцип построения ясен, только вот как обозначить ряд, разбитый на два столбца? Как я уже говорила, тут нам поможет господин Frameset.
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset rows=«100,*»> <frame src=«logo.html»> <frameset cols=«150,*»> <frame src=«menu.html»> <frame src=«content.html»> </frameset> </frameset> </html> (посмотреть) |
Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг <frameset></frameset>.
С помощью атрибута cols тэга <frameset></frameset> мы делим второй ряд на два столбца (первый шириной 150 пикселов, второй по ширине занимает все оставшееся пространство). А тэги <frame>, которые содержит <frameset></frameset>, определяют, какие документы будут показаны загружены в вертикальных фреймах во втором ряду (menu.html и content.html).
Теперь разберем вариант, изображенный на втором рисунке:
Здесь мы будем делить окно на столбцы. Второй столбец будет содержать в себе документ content.html (содержание), а первый столбец мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=«100,*»> <frameset rows=«100,*»> <frame src=«logo.html»> <frame src=«menu.html»> </frameset> <frame src=«content.html»> </frameset> </html> (посмотреть) |
Вот так. Ничего сложного здесь нет:)
Однако, если у вас возникли трудности с освоением фреймов, и вы считаете, что вам нужны более подробные уроки и более простое повествование, то я советую вам обратиться к учебнику по фреймам Джо Барта, который мы перевели для вас, и который вы можете найти на нашем сайте.
А мы же с теми, у кого не возникает проблем с предметом, перешагнем на следующую ступеньку, чтобы узнать, что еще можно сделать с фреймами. Ступенька 39-ая.
Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=«100,*»> <frameset rows=«100,*»> <frame src=«logo.html» scrolling=«no»> <frame src=«menu.html»> </frameset> <frame src=«content.html»> </frameset> </html> (посмотреть) |
Scrolling — атрибут тэга <frame>. Он может принимать несколько значений: no — это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes — это значит полоса прокрутки будет всегда; auto — полоса прокрутки появится только тогда, когда она нужна.
Собственно, scrolling=«auto», можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет — ее не будет.
Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга <frame>:
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=«100,*»> <frameset rows=«100,*»> <frame src=«logo.html» scrolling=«no» noresize> <frame src=«menu.html» noresize> </frameset> <frame src=«content.html» noresize> </frameset> </html> (посмотреть) |
Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border=«0».
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=«100,*» border=«0»> <frameset rows=«100,*»> <frame src=«logo.html» scrolling=«no»> <frame src=«menu.html»> </frameset> <frame src=«content.html»> </frameset> </html> (посмотреть) |
Так уже лучше :). Но все же, что-то еще хочется исправить… А! Картинку с чёртом так и хочется прижать в левый верхний угол:
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=«100,*» border=«0»> <frameset rows=«100,*»> <frame src=«logo.html» scrolling=«no» marginwidth=«0» marginheight=«0»> <frame src=«menu.html»> </frameset> <frame src=«content.html»> </frameset> </html> (посмотреть) |
Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).
Стоп, стоп, скажет мой читатель, вы же говорили об этих атрибутах, как о нестандартных. Да, конечно, но не стандартны они лишь при употреблении с тэгом <body>, т.к. этого спецификация не предусматривает, однако для тэга <frame>, они могут использоваться без опасений, т.к. для него они в спецификации как раз и предусмотрены.
Вот такие пироги:) Остальное будет на других ступеньках. Ступенька 40-ая.
В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы.
Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать?
Для начала, господа, познакомьтесь с новым атрибутом тэга <frame> — name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=«100,*» border=«0»> <frameset rows=«100,*»> <frame src=«logo.html» scrolling=«no» marginwidth=«0» marginheight=«0»> <frame src=«menu.html»> </frameset> <frame src=«content.html» name=«window-1»> </frameset> </html> |
Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html).
Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга <a> target (target=«имя_фрейма»), с которым мы, кстати, тоже уже знакомы.
Введем атрибут target в документе со ссылками — menu.html.
| <html> <head> <title>Документ с Меню</title> </head> <body background=«cherti3.gif» text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff"> <center> <a href=«content.html»>Главная</a> <a href=«tumki.html»>Тумки</a> <a href=«bumki.html»>Бумки</a> <a href=«tururumki.html»>Турурумки</a> <a href=«tra-la-la.html»>Траляля</a> </center> </body> </html> |
Вот такой он (menu.html), в нашем случае. Теперь для каждой ссылки укажем параметр target=«window-1», где window-1 — это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html).
| <html> <head> <title>Документ с Меню</title> </head> <body background=«cherti3.gif» text="#ffffff" link="#ffffff" alink="#ffffff" vlink="#ffffff"> <center> <a href=«content.html» target=«window-1»>Главная</a> <a href=«tumki.html» target=«window-1»>Тумки</a> <a href=«bumki.html» target=«window-1»>Бумки</a> <a href=«tururumki.html» target=«window-1»>Турурумки</a> <a href=«tra-la-la.html» target=«window-1»>Траляля</a> </center> </body> </html> (посмотреть) |
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает, при этом мы не приложили никаких особых усилий, а только изменили немного два документа :) – наш фрейм-документ (index) и документ, содержащий ссылки (меню).
Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top:
<a href=«project.html» target="_top">Мой проект о рыбках</a>
Страница с проектом о рыбках откроется в полное окно, закрыв (уничтожив) остальные кадры (фреймы). Ступенька 41-ая.
Вот мы добрались и до последней главы о фреймах. Собственно, о фреймах мы закончили говорить в предыдущей главе, а на этой ступеньке мы поговорим об IFrame — «плавающем» фрейме.
Итак, что такое Iframe, и чем он отличается от просто фреймов. IFrame — «плавающий» или встроенный фрейм. Вы, наверняка встречали его уже много раз на разных сайтах. Для Iframe нам не нужно создавать фрейм-документ, и прописывать в нем фреймовую структуру нашей страницы. Iframe позволяет нам вставить один html-документ в другой html-документ.
Как это выглядит:
Как вы видите, появляется форма заданного размера, в которой отображается нужный нам документ. Это очень удобно, вы уже наверняка встречались с «плавающим» фреймом, когда регистрировались на каких-либо сайтах, как правило соглашения с пользователем заключены для удобства в «плавающий фрейм», чтобы вы могли ознакомиться с соглашением, не переходя на другую страницу сайта, сразу.
«Плавающий» фрейм вводится в наш обычный html-документ при помощи тэга <iframe></iframe>:
<IFRAME src=«ancorpri.html» width=«300» height=«250» scrolling=«auto» frameborder=«1»></IFRAME>
В атрибуте src мы указываем путь к документу, который отобразиться во встроенном фрейме.
Атрибуты height и width отвечают за ширину и высоту встроенного фрейма.
Атрибут scrolling (полоса прокрутки) и его значения мы тоже уже знаем из уроков по фреймам: он может принимать несколько значений: no — это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes — это значит полоса прокрутки будет всегда; auto — полоса прокрутки появится только тогда, когда она нужна.
Атрибут frameborder указывает отображать или нет границы встроенного фрейма, возможные значения 1 (да, отображать) и 0 (нет, не отображать).
Границы встроенного фрейма растягивать при помощи мыши ваш посетитель не может, поэтому атрибута noresize встроенные фреймы не имеют.
Iframe может выравниваться относительно содержимого страницы: текста и картинок, и может, соответственно, быть заключен в тэги выравнивания и таблицы.
Какие подводные камни нас могут ожидать при использовании Iframe – он не поддерживается многими броузерами, в основном старыми версиями броузеров, поэтому стоит подумать прежде, чем включать этот элемент на страницы вашего сайта, так ли это уж необходимо.
На этом наш разговор о фреймах завершен, напоминаю о полезных ссылках в правой колонке, советую изучить, а после переходить к следующей ступеньке, на которой мы начнем новую тему поговорим об объектах и дополнительных средствах, которые облегчают нашу жизнь, делают html-документы динамичными, расширяют наши возможности при создании страниц.