Главная / Html / Учебник по Html. Ступенька 36-ая.

Учебник по Html для чайников. Фреймы.

Ступенька 36-ая. 

Прежде, чем что-нибудь предпринимать дальше, надо решить по какому принципу мы будем размещать наши документы, и вообще, какие документы мы будем показывать посетителю одновременно. Предлагаю классический вариант - logo.html, menu.html, content.html - о котором я упоминала в предыдущей главе. 

Расположить мы можем это по-разному, вот для примера четыре варианта из множества возможных: 

При помощи фреймов мы делим броузер на несколько окон, заданного размера, в которых помещаем независимые друг от друга документы. Это нам позволит оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с нашим логотипом, а в третьем окне у нас будут при нажатии на ссылки в документе меню загружаться разные документы с текстом, картинками и прочим). 

Т.к. документы, которые мы размещаем во фреймах независимые, то соответственно каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы). Почему я особо оговариваю этот момент: некоторые неразумные читатели почему-то воображают, что фреймы – это альтернатива таблицам. ЭТО НЕ ВЕРНО! 

Итак, сначала создадим такой вариант (предварительно не забудьте создать обычные *.html документы с логотипом, меню и основным содержанием): 

rows="100,*,150"> (посмотреть)

Давайте разберемся, что и для чего. При помощи атрибута rows тэга мы указали, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописали высоту каждого фрейма (rows="100,*,150"). Высота первого фрейма - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство по высоте (это мы указали значком *), - полагаю, здесь должно быть все ясно. 

Тэг frame сообщает броузеру какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен - logo.html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content.html), а третий - меню. Если вы хотите, чтобы меню было во втором ряду (фрейме), то вам следует поменять его местами с content.html

(посмотреть)

Посмотрите что у нас получилось. Опаньки... Поменять-то мы их местами - поменяли, а вот теперь надо задать новые значения атрибуту rows, чтобы меню у нас снова занимало только 150 пикселов по высоте, а содержание - все остальное:

(посмотреть)

Вот теперь другое дело:) Все-таки от перемены мест слагаемых кое-что меняется...
Ступенька 38-ая. 

В этой главе мы разберемся, как расположить документы в окне следующим образом 

или   

В предыдущей главе я говорила, что не можем использовать атрибуты rows и cols одновременно применительно к одному тэгу . Тогда как же расположить наши документы в окне так, как указано на рисунках? Просто, ввести в наш фрейм документ еще одного господина , но обо всем по порядку. 

Начнем с первого рисунка: 

 

Каким образом мы будем делить окно? - На ряды. В первом ряду у нас будет располагаться logo.html, а второй ряд мы поделим на два столбца, в которых будут располагаться документы menu.html и content.html.

<???>

Принцип построения ясен, только вот как обозначить ряд, разбитый на два столбца? Как я уже говорила, тут нам поможет господин Frameset.

(посмотреть)

Для тех, кто не уследил за движениями моих рук, поясняю. Первый ряд мы оформили как положено, при помощи тэга frame. Во втором ряду на сцену выгодит тэг . 

С помощью атрибута cols тэга мы делим второй ряд на два столбца (первый шириной 150 пикселов, второй по ширине занимает все оставшееся пространство). А тэги , которые содержит , определяют, какие документы будут показаны загружены в вертикальных фреймах во втором ряду (menu.html и content.html). 

Теперь разберем вариант, изображенный на втором рисунке: 

 

Здесь мы будем делить окно на столбцы. Второй столбец будет содержать в себе документ content.html (содержание), а первый столбец мы разобьем на два ряда, и поместим в них документы logo.html и menu.html.

(посмотреть)

Вот так. Ничего сложного здесь нет:) 

Однако, если у вас возникли трудности с освоением фреймов, и вы считаете, что вам нужны более подробные уроки и более простое повествование, то я советую вам обратиться к учебнику по фреймам Джо Барта, который мы перевели для вас, и который вы можете найти на нашем сайте.

А мы же с теми, у кого не возникает проблем с предметом, перешагнем на следующую ступеньку, чтобы узнать, что еще можно сделать с фреймами.
Ступенька 39-ая. 

Допустим, мы решили остановиться на последнем варианте фреймовой структуры для нашей страницы, значит будем приводить его в более-менее нормальный вид. Для начала избавимся от полосы прокрутки (скрулинга) во фрейме, содержащим документ logo.html.

scrolling="no"> (посмотреть)

Scrolling - атрибут тэга . Он может принимать несколько значений: no - это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes - это значит полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна. 

Собственно, scrolling="auto", можно не прописывать, т.к. если атрибут scrolling не задан, то полоса прокрутки появится, если она нужна, а если нет - ее не будет. 

Если вы подведете мышку к границе какого-либо фрейма, то увидите, что потянув за нее, вы можете изменить размеры фрейма. Как же запретить вашему посетителю это делать? При помощи атрибута noresize для тэга :

noresize> noresize> noresize> (посмотреть)

Теперь давайте избавимся от рамок между фреймами. Для этого мы используем параметр border, с которым мы раньше уже встречались. Итак, border="0".

border="0"> (посмотреть)

Так уже лучше :). Но все же, что-то еще хочется исправить... А! Картинку с чёртом так и хочется прижать в левый верхний угол:

marginwidth="0" marginheight="0"> (посмотреть)

Атрибуты marginwidth и marginheight вам уже знакомы, они определяют ширину полей фрейма. В нашем документе мы убрали поля, задав значения этим атрибутам равные нулю для фрейма, содержащего документ с нашим чертом (logo.html).

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

Вот такие пироги:) Остальное будет на других ступеньках.
Ступенька 40-ая. 

В этой главе мы поговорим о том, что становиться проблемой для каждого человека, начинающего осваивать фреймы. 

Итак, обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который введет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Как это сделать? 

Для начала, господа, познакомьтесь с новым атрибутом тэга - name (кстати, name, мне кажется, что мы с вами уже знакомы:). Пустим name в дело:

name="window-1">

Параметр name задает уникальное имя для фрейма (в нашем случае для того, который содержит документ content.html). 

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута тэга target (target="имя_фрейма"), с которым мы, кстати, тоже уже знакомы. 

Введем атрибут target в документе со ссылками - menu.html.

Главная Тумки Бумки Турурумки Траляля