Photoshop 7 и webдизайн

       

Та же страница Левый нижний фрейм



Рисунок 20.3. Та же страница. Левый нижний фрейм прокручен к концу списка товаров, а в нижний правый загружена новая страница с информацией о конкретном товаре


С использованием ссылок, для которых указан параметр TARGET, можно загружать документы в любой из доступных фреймов или окон (для того чтобы фрейм был доступен, он должен иметь имя). Результат использования этого хорошо виден на Рисунок 20.3. Применяя дополнительные средства, такие, например, как JavaScript (язык программирования, при помощи которого программа встраивается прямо в исходный код web-страницы), можно загрузить новое содержимое сразу в несколько фреймов.

Хотя фреймы являются независимыми окнами браузера, они все же связаны между собой единой внешней границей. Поэтому изменение габаритов окна браузера или любого из фреймов сказывается на размерах всех открытых в данный момент документов. Для того чтобы эти изменения не нарушали общий вид страницы, необходимо принять специальные меры (об этом рассказывается ниже). Также обратите внимание на то, как отображаются эти границы. На Рисунок 20.1, 20.2 и 20.3 фреймы выводятся без видимых границ, но вы можете указать на то, что границы должны выводиться на экран, а также определить их ширину. Если фрейм имеет видимые границы, то при помощи мыши их можно перетаскивать, изменяя конфигурацию окна. Это дает пользователю возможность оптимальным образом использовать пространство экрана. Задавая набор фреймов, перетаскивание их границ можно запретить.

Таким образом, фреймы предоставляют дизайнерам заманчивые возможности создания сложных по своей структуре страниц. Используя их, вы можете разместить в переделах одного окна несколько web-страниц и организовать взаимодействие между ними. Страницы можно по мере надобности заменять, предоставляя пользователю необходимую информацию и, вместе с тем, сохраняя на экране те части страницы, которые изменять не требуется. Однако при использовании фреймов возникают некоторые проблемы, которые существенно ограничивают их использование. Во-первых, некоторые (в основном устаревшие) браузеры не поддерживают.отображение фреймов. Так как программное обеспечение обновляется достаточно часто, эта проблема сейчас практически потеряла свою актуальность. Во-вторых, фреймы существенно усложняют структуру страницы и затрудняют взаимодействие между ее элементами. Например, популярные сейчас «плавающие» элементы (элементы страницы, перемещающиеся над остальным ее содержимым), не могут пересекать границу документов. Кроме того, страницы, разбитые на несколько документов, могут плохо обрабатываться поисковыми машинами и некорректно сохраняться в списках закладок браузеров. Все это привело к тому, что фреймы постепенно уступают свое место простым страницам, создаваемым с применением технологий, которые позволяют легко обновлять текст и графику непосредственно в процессе работы с документом или после простого обновления страницы.

Примечание 4
Примечание 4

Широкое распространение получили программы, исполняемые на сервере (сервер-ные сценарии), которые в соответствии с запросом пользователя автоматически готовят и отправляют в браузер страницу с нужным содержанием.

Теперь посмотрим, каким образом можно разбить окно браузера на фреймы. Для этого следует создать отдельный HTML-документ, содержащий описание структуры окна — набора фреймов. В этом документе указывается заголовок (<HEAD>... </HEAD>), после чего вместо тела документа (<BODY>...</BODY>) указывается собственно набор фреймов — описание структуры разбиения окна и ссылок на документы, которые должны быть загружены в образовавшиеся «отсеки» окна браузера.

Структура окна с фреймами определяется при помощи тега <FRAMESET>. Его должен дополнять закрывающий тег.

Тег <FRAMESET> может иметь несколько параметров. Рассмотрим их.

  • COLS и ROWS — эти параметры позволяют определить, в каком направлении будет разделено окно браузера — по вертикали (COLS — columns — колонки) или по горизонтали (ROWS — ряды). Этот же параметр определяет количество фреймов и их ширину. Пример записи:

    <FRAMESET COLS="144.*,70%,*">
    <FRAMESET ROWS="*,80%,*">

    В качестве значения параметра COLS или ROWS задается ширина фреймов (число значений определяет число фреймов). Ширина фрейма может быть задана в пикселах (в этом случае просто указывается значение) или в процентах (в этом случае значение сопровождается символом «%»). Символ «*» обозначает все пространство, оставшееся свободным после выделения места для фреймов, размеры которых заданы явно. Таким образом, в первом из этих примеров будет создано четыре фрейма: один шириной 144 пиксела, третий шириной 70% от оставшегося пространства, а второй и четвертый фреймы разделят между собой место, оставшееся после образования первого и третьего. Во втором случае будет создано три фрейма, расположенные друг над другом по вертикали. Причем средний фрейм займет 80% высоты окна, а на долю оставшихся двух придется по 10% (оставшиеся после выделения места под средний фрейм 20% будет поделены поровну).

    ВНИМАНИЕ. Для того чтобы структура окна могла приспосабливаться к изменениям размеров окна браузера, задайте размер одного или нескольких фреймов как «*» или запишите их значения в процентах. Это позволит вашим фреймам автоматически масштабироваться при изменении размеров окна.



  • FRAMEBORDER — этот параметр задает ширину рамки, ограничивающей фреймы. В качестве значения этого параметра задается ширина рамки в пикселах. Для отключения отображения рамки задайте ее ширину равной 0.

    Примечание 5
    Примечание 5

    Перетаскивая рамку при помощи мыши, можно изменять размеры соседних фреймов.

  • FRAMESPACING определяет расстояния между соседними фреймами (в пикселах). Этот параметр аналогичен параметру CELLSPACING тега <TABLE>, определяющего таблицу.

    ВНИМАНИЕ. Не следует задавать набор фреймов, содержащий только один элемент. Это считает-ся ошибкой. Если вам надо отобразить в окне браузера только один файл, воспользуйтесь стандартной структурой документа.

    После того, как вы запишите описание набора фреймов, необходимо определить их самих. Для этого между тегами <FRAMESET> и </FRAMESET> надо разместить ссылки на файлы, которые займут места в заданной вами оконной структуре. Эти ссылки задаются при помощи тега <FRAME>, не требующего закрывающего тега. Тегов должно быть ровно столько, сколько мест было выделено при помощи параметров COLS или ROWS. Используя параметры, можно задать имя файла, который будет помещен в ту или иную ячейку окна, а также параметры отображения этого файла.

  • SRC — при помощи этого параметра задается имя файла, который будет загружен во фрейм. Этот параметр является обязательным.
  • NAME — этот параметр определяет имя фрейма. Зная имя, вы сможете организовать загрузку во фрейм документов при помощи ссылок, расположенных в других окнах (фреймах). Кроме того, к элементам фрейма (окна), имеющего имя, можно обращаться из различных программ, расположенных на страницах.
  • MARGINWIDTH задает ширину полей (правого и левого) в текущем фрейме (в пикселах).
  • MARGINHEIGHT позволяет определить высоту верхнего и нижнего полей в создаваемом фрейме (в пикселах).
  • SCROLLING — этот параметр позволяет управлять отображением полосы прокрутки во фрейме. Допустимые значения параметра:
  • yes — полосы прокрутки отображаются всегда;
  • nо — полосы прокрутки не отображаются, даже если все содержимое фрейма не помещается в окне;
  • auto — полосы прокрутки Отображаются, если содержимое фрейма не помещается в нем.
  • NORESIZE — если вы укажите этот параметр (достаточно указать сам параметр, присваивать значение не требуется), то размеры фрейма нельзя будет изменить при помощи мыши.
  • Вместо описания фрейма можно использовать описание еще одного набора, окна которого будут размещены в пространстве, отведенном под фрейм в основном наборе. Так можно задавать сложные структуры вложенных друг в друга фреймов. Размеры вложенных фреймов, заданные в процентах или с помощью символа «*», исчисляются относительно размера фрейма, в котором размещен текущий набор.

    Может статься, вам потребуется предусмотреть какое-либо сообщение или даже полностью работающую страницу для пользователей, браузеры которых не умеют работать с фреймами. Хотя такие браузеры уже стали своеобразным антиквариатом, их иногда можно встретить.

    Для определения альтернативного содержания страницы используйте пару тегов <NOFRAMES>...</NOFRAMES>. Они должны располагаться после описания структуры фреймов. Между этими тегами можно использовать все теги, допустимые в разделе <BODY> обычной страницы сайта.

    ВНИМАНИЕ. Если документ содержит тег <FRAMESET> или <NOFRAMES> (или оба этих тега вместе), тег <BODY> использовать нельзя.

    Ниже приведен пример использования набора фреймов для создания сложной страницы, содержащей три документа.

    <HTML>
    <НЕАD><TITLE>Пример 16</TITLE>
    </HEAD>
    <FRAMESET COL5="*,50%">
    <FRAME SRC="pagel.htm" NAME="Framel">
    <FRAMESET ROWS="60%,*">
    <FRAME SRC="page2.htm" SCROLLING=Yes NAME="Frame2">
    <FRAME SRC="page3.htm" SCROLLING=No NAME="Frame3">
    </FRAMESET> </FRAMESET>
    <NOFRAMES>
    Щелкните для <А HREF="noframes.htm"> здесь </А> перехода к
    странице без фреймов
    </NOFRAMES>
    </HTML>

    Примечание 6
    Примечание 6

    В разделе <NOFRAMES> размещено традиционное для таких случаев сообщение и предложение перейти по ссылке на страницу без фреймов.

    На Рисунок 20.4 показано, как документ, приведенный выше, отображается браузером.



    Содержание раздела