High Star

Фреймы



Сотворение мира

В давние-стародавние времена, когда на Земле был один сплошной Рай, или по современному фрейм, жили были два человека - Адам и Ева. И бродили они по этому Раю как брат с сестрой. Ходили, держась за ручки, любуясь восходами и закатами, птичками и цветочками, и ни о чем "недозволенном" даже не догадывались. Питались разными ягодками и жизнь их текла размерено и скучно. Вот так:

Адам и Ева
Жизнь в одном фрейме

Но вот появился Змей. А характер у этого Змея был самый что ни на есть гадский и подлючий. И замыслил он черное дело - разрушить эту райскую идиллию, поссорить Адама с Евой, накормить обоих Запретными плодами, чтоб жизнь им Раем не казалась…

Когда Адам бывал в отлучке, Змей подползал к Еве и начинал говорить всякие глупости. Будто бы Адам - мужик неполноценный, ни то ни се, ни рыба ни мясо, и толку от него как от козла молока. И будто бы даже самый завалящий козел может наделать кучу козлят, и будто бы он знает одно средство, почище всякой Виагры, после которой Адам станет, наконец, настоящим мужиком и сделает жизнь Евы веселой и интересной, не такой пресной как в этом, забытом богом, раю.

После таких речей Ева ходила своя не своя, пока, наконец, не решилась.

- Адам, я хочу детей! - заявила она однажды.

Адам не понял.

- Тебя что, тут плохо кормят что ли? - удивился он, - Скушай вот яблочко.

- Не хочу этого яблока, - заупрямилась Ева, - Хочу другого, с Запретного Дерева. И хочу много-много детей.

Как ни отговаривал Адам женщину, бесполезно. Короче, съели они то яблоко. Адам сразу почувствовал себя настоящим мужчиной, и Ева это тоже поняла. И тут они застыдились друг друга, оборвали все фиговые листочки, приоделись как могли, и такими чучелами предстали взору Всевышнего. Ну, тот посмотрел на них, и сказал, что пугала в Раю не к чему и выпер бедолаг из Рая, к неописуемой радости Змея.

Вертикальные фреймы

Очутившись на грешной Земле, Ева сразу потребовала себе отдельный фрейм. Со всеми удобствами. Пришлось Адаму отыскать нужный тег FRAMESET, без которых раздел имущества был бы невозможным. Тут же нашлись и подходящие атрибуты cols и rows. Повертел Адам их так и сяк, и решил разделить жилище на две комнаты, воспользовавшись атрибутом cols для вертикального разделения. И даже написал следующий код:

<FRAMESET cols="50%, 50%">
  <frame src="eva.html">
  <frame src="adam.html">
</FRAMESET>

А Еве объяснил так, что вот тебе, личный фрейм eva.html, обставляй его как хочешь, а на мою половину не лезь. Еве идея понравилось, только цифры ей не понравились. Не хочу, говорит, цифр, хочу, чтоб звезды были!

Что не сделаешь для любимой? Адам и переписал, как Ева просила. Ладно, говорит, главное, чтоб поровну было, по честному!

<FRAMESET cols="*,*">
  <frame src="eva.html">
  <frame src="adam.html">
</FRAMESET>

А Ева не унимается все.

- Нет, давай лучше цифрами,- говорит, - но без процентов!

Ну, Адаму нетрудно. Стер все и написал заново:

<FRAMESET cols="50, 50">
  <frame src="eva.html">
  <frame src="adam.html">
</FRAMESET>

А Ева опять засомневалась.

- Нет, - говорит, - ты меня обманываешь, давай мне цифрами, а тебе - звездой! И чтоб без процентов, тоже мне ростовщик нашелся!

Рассердился тут Адам.

- Ты сначала обставь свою страничку, потом уладим эти дела!

На том и порешили.

И вот какую страничку сделала себе Ева:

Листинг 15. Файл Eva.html

<HTML>
  <HEAD>
    <TITLE>Страничка Евы</TITLE>
  </HEAD>
  <BODY bgcolor=pink>
    <H1>Я - ЕВА!</H1>
    <IMG src="foto/eva.jpg" border=2 align=left>
    <P>
    <FONT size=5>
    Я - единственная и неповторимая!!!<br>
    Я - самая красивая!!! <br>
    Любите меня! <br>
    </FONT>
    <IMG src="foto/roza.gif">
  </BODY>
</HTML>

Вот что у нее получилось (Рис. 08_02):

Страничка Евы
Страничка Евы

А вот страничка Адама:

Листинг 16. Файл Adam.html

<HTML>
  <HEAD>
    <TITLE>Страничка Адама</TITLE>
  </HEAD>
  <BODY bgcolor=gray>
    <CENTER>
      <H1>Я - АДАМ!</H1>
      <IMG src="foto/adam.jpg">
      <H3>СТРАНИЧКА СТАРОГО ХОЛОСТЯКА</H3>
    </CENTER>
  </BODY>
</HTML>

А вот что у него получилось (Рис. 08_03):

Страничка Адама
Страничка Адама

Ну, а теперь, осталось только упаковать оба файла eva.html и adam.html в один общий файл, который назовем просто people.html:

Листинг 17 Файл people.html

<HTML>
  <HEAD>
  </HEAD>
    <FRAMESET cols="*, *">
      <frame src="eva.html">
      <frame src="adam.html">
  </FRAMESET>
</HTML>

И вот, наконец-то их совместный сайт:

Сайт из двух вертикальных фреймов
Сайт, состоящий из двух фреймов

Еве сайт понравился. Но ей показалось, что половина - слишком мало для нее, такой шикарной, да еще из-за полосы прокрутки не виден весь текст, а главное – розочка, которую она прихватила с собой из рая совсем выпала из вида, и которая дорога была ей как память. Взяла она тогда файл people.html и переписала соотношение фреймов, где решила своим фреймом занять 800 пикселов, а Адаму - что останется:

Листинг 18 Файл people.html улучшенный

<HTML>
  <HEAD>
  </HEAD>
    <FRAMESET cols="800, *">
      <frame src="eva.html">
      <frame src="adam.html">
  </FRAMESET>
</HTML>

Пришел Адам с неудачной охоты, злой, голодный, и чтобы успокоиться сразу сел за компьютер и открыл общий сайт people.html. И что он там увидел при разрешении 10024х768? А вот что:

Сайт из фреймов

Проделки Евы

Поменял он разрешение на 800х600 и вообще не увидел своего фрейма. Обидно ему это стало. Взял он тогда и урезал Еву в процентах:

Листинг 19 Файл people.html строгий, но справедливый

<HTML>
  <HEAD>
  </HEAD>
    <FRAMESET cols="20%, *">
      <frame src="eva.html">
      <frame src="adam.html">
  </FRAMESET>
</HTML>

И на пароль вообще поставил файлы все. И как бы Ева не упрашивала вернуть хотя бы половину, как не меняла разрешение экрана, people.html по ширине всегда имел такой вид:

Сайт Адама и Евы
20% фрейма Евы, и остальное - Адама

Горизонтальные фреймы

Ева терпела-терпела, сколько терпелки хватило, а потом говорит:

- Ладно, Адамчик, давай мириться. И разделим страничку по-новому. Тебе - 5 частей, а мне всего 4 части. Только чтоб фреймы были разделены по горизонтали, и чтобы я сверху была!

И посмотрела на Адама так чарующе, что Адам сразу растаял, снял все пароли и в файле people.html заменил cols на rows:

Листинг 20 Файл people.html дипломатичный

<HTML>
  <HEAD>
  </HEAD>
    <FRAMESET rows="4*, 5*">
      <frame src="eva.html">
      <frame src="adam.html">
  </FRAMESET>
</HTML>

И показал Еве что получилось (Рис. 08_07):

Горизонтальные фреймы
Горизонтальные фреймы:

Вложенные фреймы

Но такое разделение не понравилось никому - ни Еве, ни Адаму. Потому как все изображения получились с полосами прокрутки, и решили они тогда убавить верхний фрейм до 15%, назвать его header.html, и поместить там заголовок "Добро пожаловать в первый в мире сайт!"

Нижний же фрейм решено было разбить на две части, причем Еве отдать 30; а Адаму - остальное. И переписали многострадальный файл people.html по новому:

Листинг 21 Файл people.html уютный

<HTML>
  <HEAD>
  </HEAD>
    <FRAMESET rows="15%, *">
      <frame src="header.html">
        <FRAMESET cols="30%, *">
          <frame src="eva.html">
          <frame src="adam.html">
        </FRAMESET>
    </FRAMESET>
</HTML>

Тут добавился новый файл header.html, вот какой он:

Листинг 22 Файл header.html

<HTML>
  <HEAD>
    <TITLE>Страничка Адама и Евы</TITLE>
  </HEAD>
  <BODY>
    <H2>ДОБРО ПОЖАЛОВАТЬ НА ПЕРВЫЙ В МИРЕ САЙТ!</H2>
  </BODY>
</HTML>

И когда открыли файл people.html, то просто ахнули, так он им понравился. А вам понравилось?

Первый в мире сайт Адама и Евы
Они строили, строили и наконец построили!

Ева даже не расстроилась, что розочку не видно. Да и зачем этот гербарий засушеный. Память ветхого прошлого. Она и сама как розочка!

Ну, что ж, оставим в стороне наших героев, они потрудились на славу, и у них, надо признаться, неплохо получилось. Повторим же основные моменты!

  1. Страничка разбивается на фреймы с помощью атрибута <FRAMESET>, который имеет закрывающуюся пару </FRAMESET>.
  2. Чтобы разбить страничку на вертикальные фреймы, используют атрибут cols, для горизонтальной разбивки используют атрибут rows.
  3. Каждый фрейм может содержать вложенный набор фреймов, наподобие матрешки.
  4. Фреймы можно разделять между собой процентами (%), частями (*), либо в абсолютных числах (пикселах).
  5. Страничка, содержащая теги FRAMESET не имеет атрибута BODY. Да он там и не нужен!