Лекция: Ступенька 36-ая.
Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант — logo.html, menu.html, content.html — о котором я упоминала в предыдущей главе.
Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных:
При помощи фреймов мы делим броузер на несколько окон, заданного размера, в которых помещаем независимые друг от друга документы. Это нам позволит оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с нашим логотипом, а в третьем окне у нас будут при нажатии на ссылки в документе меню загружаться разные документы с текстом, картинками и прочим).
Т.к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Почему я особо оговариваю этот момент: некоторые неразумные читатели почему-то воображают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО!
Итак, сначала создадим такой вариант (предварительно не забудьте создать обычные *.html документы с логотипом, меню и основным содержанием):
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset rows=«100,*,150»> <frame src=«logo.html»> <frame src=«content.html»> <frame src=«menu.html»> </frameset> </html> (посмотреть) |
Давайте разберемся, что и для чего. При помощи атрибута rows тэга <frameset> мы указали, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописали высоту каждого фрейма (rows=«100,*,150»). Высота первого фрейма — 100 пикселов, третьего — 150, а второй занимает все оставшееся пространство по высоте (это мы указали значком *), — полагаю, здесь должно быть все ясно.
Тэг frame сообщает броузеру какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен — logo.html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content.html), а третий — меню. Если вы хотите, чтобы меню было во втором ряду (фрейме), то вам следует поменять его местами с content.html
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset rows=«100,*,150»> <frame src=«logo.html»> <frame src=«menu.html»> <frame src=«content.html»> </frameset> </html> (посмотреть) |
Посмотрите что у нас получилось. Опаньки… Поменять-то мы их местами — поменяли, а вот теперь надо задать новые значения атрибуту rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание — все остальное:
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset rows=«100,150,*»> <frame src=«logo.html»> <frame src=«menu.html»> <frame src=«content.html»> </frameset> </html> (посмотреть) |
Ступенька 37-ая.
Эту главу мы начнем с небольшого фокуса: замените атрибут rows, на cols:
| <html> <head> <title>Хождение по фреймам</title> </head> <frameset cols=«100,150,*»> <frame src=«logo.html»> <frame src=«menu.html»> <frame src=«content.html»> </frameset> </html> (посмотреть) |
Ну-ка, посмотрите наш пример. Ловкость рук и никакого мошенства :)
Итак, атрибут cols говорит нашему броузеру, что наши фреймы будут расположены вертикально (столбцами). Т.е. значения атрибута cols (cols=«100,150,*») задают уже не высоту, а ширину каждого фрейма. Ширина первого фрейма – 100 пикселов, ширина второго – 150, а третий фрейм занимает по ширине все оставшееся пространство.
Кстати, мы получили еще один из четырех вариантов, которые собирались сделать:
Итак, подведем итоги. Мы можем расположить наши фреймы горизонтально (рядами) или вертикально (колонками) относительно друг друга, делаем мы это с помощью параметров тэга <frameset> Cols и Rows. Другого способа деления не существует. Одновременно эти параметры использовать нельзя.
При помощи rows мы разбиваем располагаем фреймы горизонтально (рядами) и задаем какую высоту будет иметь каждый фрейм, при помощи cols располагаем фреймы вертикально (столбцами) и задаем какую ширину будет иметь каждый фрейм.
Кстати, ширина и высота могут задаваться не только в пикселях, но и в процентах от общей ширины (высоты) окна:
<frameset cols="10%,15%,75%">
Помните, что в сумме это все должно равняться 100%. А то бывают же умники...