1  2  3  4  5  6  7

Сложные наборы фреймов
А теперь нужно рассказать об одной особенности фреймов, которую вам обязательно надо знать.
Как вы уже знаете, фреймы являются составными частями набора фреймов. Тег, задающий набор фреймов, определяет размеры и форму фреймов (будут ли они располагаться горизонтально или вертикально), а тег, задающий фрейм, определяет параметры самого фрейма (в частности, интернет-адрес загружаемой в него Web -страницы). При этом теги, задающие фреймы, вкладываются в тег, задающий набор фреймов.
Но проблема в том, что фреймы, входящие в один набор, могут располагаться либо только по горизонтали, либо только по вертикали. Но, скажете вы, как же сделать наборы фреймов. Ведь их же кто-то делает, а если не делает, так зачем их было здесь приводить?
Да, вы правы. Но для этого используется одна особенность наборов фреймов HTML — они могут вкладываться друг в друга, порождая вложенные наборы фреймов. Такая совокупность наборов фреймов обычно считается одним целым, одним сложным набором, состоящим из нескольких простых.
Давайте подумаем, как приведенный на нем набор фреймов можно реализовать на практике. Здесь мы имеем три фрейма, рас­положенных горизонтально и занимающих всю ширину набора, и один фрейм, занимающий часть среднего фрейма. Очевидно, что нам понадобятся два набора фреймов: один, внешний, делящий окно Web -обозревателя на три части по горизонтали, и второй, внутренний, делящий средний фрейм надвое по вертикали.
Пользуясь вложенностью, вы можете создавать сколь угодно сложные наборы фреймов. Это очень просто, если понять принцип. Хотя, чтобы создать совсем уж замысловатый набор фреймов, вам придется поломать голову.
Работа с фреймами
Но хватит пустых разговоров! Давайте займемся делом и на конкретном примере рассмотрим принципы фреймового дизайна. Мы создадим новую версию нашего сайта, посвященного гипотетическому Web -дизайнеру Ивану Ивановичу Иванову, версию, основанную на фреймах.
Проверьте, создали ли вы новую папку Sample 2. Также проверьте, не удалили ли вы старую версию сайта, находящуюся в папке Sample 1. Ведь одна из важнейших заповедей Web -дизайнера: не разбрасываться старыми материа­лами — они могут пригодиться для нового сайта. Проверили? Все на месте? Тогда вперед!
Прежде всего, введем в Dreamweaver информацию о новом сайте. Вы можете просто взять сайт Sample site 1 и заменить его имя, корневую папку и имя главной страницы, а можете и создать новый сайт "с нуля". Как это делается, было рассказано в главе 6. На вкладке Remote Info диалогового окна Site Definition в раскрывающемся списке Access выберите пункт None — мы с вами нигде не будем публиковать этот сайт. И имя нашего сайта будет Sample site 2.
После этого создайте новую Web -страницу. Сейчас мы рассмотрим процесс создания фреймов...
Создание фреймов
Да, мы рассмотрим, как создаются фреймы в Dreamweaver .
Но сначала сделайте следующее. Включите в подменю Visual Aids меню View пункт - выключатель Frame Borders. Это нужно, чтобы Dreamweaver показал нам границы наших будущих фреймов. Дело в том, что границы между фреймами могут быть невидимыми, что может создать нам немало проблем при написании текста страниц, отображаемых в этих фреймах. Если же вы выберете названный пункт, Dreamweaver будет показывать схематичные линии в тех местах, где проходят границы фреймов.
Внимание!
При открытии страницы , определяющей набор фреймов , вам придется каждый раз включать пункт - выключатель Frame Borders подменю Visual Aids меню View . К сожалению , Dreamweaver не запоминает этой установки .
Проще всего набор фреймов можно создать, воспользовавшись вкладкой Frames панели объектов. Также можно воспользоваться пунктами подменю Frames меню Insert . В табл. 7.1 приведены описания всех кнопок вкладки Frames панели объектов и соответствующих им пунктов подменю Frames.
Итак, давайте приступим к созданию нашего набора фреймов.
Прежде всего, создадим верхний фрейм, в котором у нас будет помещаться заголовок сайта. Нажмем кнопку Top Frame . В результате получатся два фрейма, расположенные горизонтально, друг над другом.
Теперь убедимся, что текстовый курсор стоит в нижнем фрейме, и нажмем кнопку Bottom Frame . В результате получим еще один фрейм, но расположенный на этот раз ниже текущего.
Теперь поместите курсор мыши на границу между верхним и средним фреймами (заголовок и основное содержимое, соответственно). Вы увидите, что курсор примет вид двунаправленной стрелки, что во всех Windows -программах означает только одно: вы можете перемещать что-либо вверх-вниз. В данном случае вы можете перемещать границу между фреймами, изменяя их размеры. То же самое вы можете делать с границей между средним и нижним фреймами (основное содержимое и сведения об авторских правах).
Измените размеры фреймов так, чтобы средний фрейм занимал максимум места на экране. (Помните, что мы говорили об основном содержимом сайта?) Верхний и нижний фреймы сделайте совсем узкими. А если впоследст­вии содержимое не будет в них помещаться, мы их увеличим.
Осталось создать еще один фрейм — левый, где будет помещаться набор гиперссылок. Его мы создадим немного по-другому, для чего воспользуемся подменю Frameset меню Modify .
Там находятся следующие пункты:
Split Frame Left — создание фрейма слева от текущего;
Split Frame Right — создание фрейма справа от текущего;
Split Frame Up — создание фрейма сверху от текущего;
Split Frame Down — создание фрейма снизу от текущего.
Итак, сделайте текущим средний фрейм и выберите в подменю Frameset меню Modify пункт ... правильно , Split Frame Left. Вы получите последний фрейм, который как раз и был нам нужен. Уменьшите его ширину — это делается так же, как и в случае с горизонтальными фреймами.
Теперь дайте готовой странице с набором фреймов название "Иван И. Иванов" и сохраните ее, выбрав пункт Save All меню File — это позволит сохранить также содержимое всех фреймов. На экране появится стандартное диа­логовое окно сохранения файла Windows , предлагающее вам сохранить сам набор фреймов под именем UntitledFrameset-1.htm . Сохраните его в корневой папке нового сайта под именем default.htm .
Теперь Dreamweaver будет поочередно предлагать вам сохранить содержимое каждого фрейма набора (не забывайте, что содержимое фрейма задает отдельная Web -страница). При этом фрейм, содержимое которого сохраняется в данный момент, выделяется толстой штриховой линией благодаря чему вы будете знать, что сохраняет Dreamweaver , и какое имя дать той или иной странице.Все остальные страницы сайта сохраните в папке HTMLs . Странице со сведениями об авторских правах дайте имя Copyright.htm . Страницу, по умолчанию отображаемую во фрейме с основным содержимым, назовите Main.htm , страницу со списком гиперссылок — Nav.htm , а страницу с заго­ловком сайта — Header.htm .
Внимание!
Если вы преобразуете уже готовую Web - страницу в набор фреймов , Dreamweaver поместит содержимое этой страницы в текущий фрейм . Если это главная страница вашего сайта
(default.htm ), то вам придется перед созданием набора фреймов переименовать ее , иначе не удастся сохранить страницу с набором фреймов под именем default.htm .
Существует еще один способ создания фреймов. Сейчас мы с вами его рассмотрим.
Обратите внимание на толстую серую рамку, окружающую весь наш набор фреймов. Вы можете создавать новые фреймы набора, не пользуясь ни панелью объектов, ни меню, а просто захватив эту рамку мышью и перетащив на то место, где должна находиться граница вновь создаваемых фреймов. В частности, вы можете таким образом разбивать один фрейм на два.
Теперь можно сделать небольшой перерыв, после чего мы узнаем еще коечто о фреймах и особенностях их поддержки Dreamweaver .
Примечание
Наборы фреймов описываются с помощью парного тега < frameset >, который должен содержать один из атрибутов : rows или cols . Названные атрибуты за­дают список значений высоты ( для тега < rows >) или ширины ( для < cols >) всех фреймов данного набора . Сами фреймы задаются одинарным тегом < frame >. И < frameset >, и < frame > поддерживают множество атрибутов , задающих раз­личные свойства набора фреймов и самих фреймов ; эти атрибуты мы рассмот­рим позднее .
В частности , код , определяющий набор из двух горизонтально расположенных фреймов , верхний из которых занимает 20% пространства окна , а другой — 80%, выглядит так :
<FRAMESET ROWS="20%,80%"...>
<FRAME...>
<FRAME...>
</FRAMESET>
Соответственно , два вложенных набора фреймов будут выглядеть так :
<FRAMESET ROWS ="20%,80%"...>
<FRAME...>
<FRAMESET COLS ="100,*"...>
<FRAME...>
<FRAME...>
</FRAMESET>
</FRAMESET>
Внимание!
Web - страница , описывающая набор фреймов , не должна включать в себя тег < body > и его содержимое . Она должна содержать только описание набора фреймов

1  2  3  4  5  6  7

Вверх