Как сказал когда-то Якоб Нильсен, большой специалист в области вебюзабилити, т.е. удобства пользования сайтами, - "скажите фреймам НЕТ!". Такое вот не слишком оптимистичное начало. Но действительно, при всей своей привлекательности, особенно для начинающего веб-дизайнера, механизм так называемых фреймов таит в себе массу проблем и противоречий. Значит ли это, что мы никогда не должны использовать этот механизм? Нет, но мы должны чётко понимать эти проблемы и учитывать их при разработке сайта на фреймах.
Итак, что же это за такие страшные звери - фреймы? Это несколько окон браузера, определенным образом скомпонованных в одном "родительском" окне. Каждый из фреймов - это, можно сказать, отдельный браузер в том смысле, что в каждый из них загружается отдельный HTML-документ. Но смысл фреймов состоит в том, что между ними имеется связь: из одного фрейма мы можем ссылаться на другой. Наиболее распространённый пример: в одном фрейме у нас расположено меню со ссылками, при клике на которые целевой документ загружается в соседний фрейм. Зачем это нужно? Во-первых, это даёт некоторую экономию пересылаемых данных. При переходе по ссылке мы перегружаем только фрейм с содержимым, а меню загружено один раз и уже не перегружается. Во-вторых, прокрутка осуществляется в каждом фрейме индивидуально. Это, пожалуй одно из наиболее ценных свойств фреймов. Независимо от прокрутки содержимого меню всегда остается у нас перед глазами.
Чем же тогда не угодили фреймы Якобу Нильсену и прочим сознательным веб-дизайнерам? Если вы помните, по задумке Тима Бернерса-Ли неким "атомом" веба является страница. Понятие страницы включает в себя и единицу просмотра (пользователь видит её в окне браузера), и единицу навигации (кликнув по ссылке, мы переходим на другую страницу), и единицу, образно говоря, географическую (URL-адрес ведёт на страницу), и, наконец, единицу физическую (страница лежит на сервере в виде файла). Последние 2 пункта, прада, уже несколько размыты из-за динамических страниц, которые нигде не лежат, а создаются налету программой. Фреймы же вступают в противоречие с этой концепцией. К чему это приводит на практике?
Во-первых, единица навигации не соответствует единице просмотра. Т.е. то, куда ведёт ссылка не соответствует тому, что мы видим в браузере. Пока мы ходим по сайту, это не заметно. Но представьте, что мы захотим эту ссылку сохранить или отправить другу по почте. Давайте попробуем её скопировать и представим, что друг пошёл по этой ссылке. Что же он увидит? Он увидит страницу с содержанием. Что слева у неё должно быть меню, об этом браузеру узнать неоткуда. То же самое касается поисковых систем. Найдя нужную страницу, поисковая система никак не сможет догадаться, что вместе с ней в браузере нужно показать ещё пару других страниц.
Во-вторых, основной механизм адресации - URL - перестаёт работать вообще. На какую бы страницу мы не перешли, в адресной строке браузера мы продолжаем видеть одно и то же. В-третьих, навигация становится непредсказуемой. Мы кликаем в одном месте окна, а страница загружается в другом. В-четвёртых, не понятно, как печатать фреймы. Поэтому браузеры вынуждены предлагать различные опции: печатать всё в том виде, как мы видим на экране, печатать только выбранный фрейм, печатать содержимое каждого фрейма отдельно.
Можно ли как-то обойти эти проблемы при использовании фреймов? Можно. Как - обсудим ниже. Нужно ли оно нам? Это решать вам в каждом конкретном случае. Разрабатывать сайт с фреймами сложнее. Если эта сложность оправдана, то почему бы и нет? Как же создать фреймосодержащий
документ? Очевидно, нам нужен набор обычных HTML-страниц, которые будут отображаться во фрейМАХ, а также нам нужна некая страница-каркас, описывающая расположение фреймов в окне браузера.
Эта страница имеет несколько иной синтаксис. Вместо элемента <BODY> у неё идёт элемент <FRAMESET> (по-русски - набор фреймов). Этот элемент имеет атрибуты cols или rows. Rows описывает горизонтальные фреймы, Cols - вертикальные. Если использовать rows и cols одновременно, получится сетка. Аналогов табличных colspan и rowspan здесь нет, для более сложных макетов нужно использовать вложенные фреймсеты, но об этом - ниже. Размер фреймов (ширина для cols или высота для rows) может задаваться в пикселах, в процентах от размера окна или в долях так называемого "оставшегося" места. С первыми двумя пунктами, очевидно, всё ясно, тут всё аналогично таблицам.
А вот третий требует пояснения. Допустим, нам нужна колонка слева фиксированной ширины, скажем, 100 пикселей, а остальное пространство нужно разбить на 2 колонки одинаковой ширины. Как это сделать? Задать им по 50% будет некорректно, т.к. проценты - от ширины окна, а в нашем распоряжении уже не всё окно, а оставшаяся от колонки часть. Как покажет браузер эти якобы 50-процентные колонки - большой вопрос. Поэтому правильнее двум оставшимся фреймам поставить звёздочки, что будет означать, что оставшееся пространство нужно разделить пополам. К звёздочкам можно добавлять коэффициенты. Например, если написать вот так, то оставшееся пространство будет разделено в пропорции 1:2.
Как уже говорилось, фреймсеты могут вкладываться друг в друга. Например, мы можем один из фреймов заполнить вложенным фреймсетом. Таким образом мы можем создавать сколь угодно сложные макеты. Как же теперь указать, какие HTML-файлы загружать в каждый из фреймов? Для этого в элемент FRAMESET вкладываются элементы <FRAME>, ответственные за каждый отдельный фрейм. Количество этих элементов, естественно, должно соответствовать количеству фреймов, созданных фреймсетом. Содержимое каждого фрейма задается с помощью атрибута src. Его значение, как вы можете догадаться, - это URL загружаемой в данный фрейм страницы.
Атрибут без значения noresize не позволяет пользователю изменить размер фрейма (в противном случае, по умолчанию, пользователь может спокойно перетаскивать мышью границу фрейма, изменяя таким образом весь макет). Атрибут frameborder определяет, будет ли эта самая граница фрейма видна или только "подразумеваться". Может принимать значения 1 - значение по умолчанию, когда граница видна, или 0, если границу нужно спрятать. Атрибут scrolling определяет, видна ли линейка прокрутки в данном фрейме. Может принимать значения aиto(по-умолчанию) - прокрутки нет, но она появляется, если содержимое страницы не помещается во фрейм. Может принимать значение yes - в этом случае линейка прокрутки будет показываться в любом случае. И, наконец, значение no, когда прокрутка не появляется ни при каких обстоятельствах (даже если информация не помещается во фрейм). Атрибуты marginwidth и marginheight аналогичны таковым у элемента BODY, то есть устанавливают горизонтальные и вертикальные отступы от края фрейма до его содержимого. Обычно значения этих атрибутов обнуляют, а с отступами разбираются уже на самой странице. И, наконец, один из самых главных атрибутов - name. Он задаёт имя фрейма, что, собственно, и позволяет нам ссылаться из одного фрейма на другой.
Итак, переходим к самому интересному. Возможно вы помните, когда мы изучали гиперссылки, был у элемента A такой атрибут target. Тогда мы рассмотрели только одно его значение - " blank", которое позволяло открывать ссылку в новом окне. Так вот, в этом атрибуте как раз и следует указывать имя фрейма, в котором должен открыться документ, на который ведёт ссылка, то есть имя, заданное в атрибуте name целевого фрейма. Если в ссылке атрибут target не задан, то документ откроется в текущем фрейме (в котором находится ссылка). Если уж мы вспомнили про " blank", то здесь же рассмотрим и другие "специальные" значения этого атрибута. Итак, кроме " blank" это может быть " self' - значение по умолчанию, когда ссылка открывается в текущем фрейме. Это может быть "_parent" - ссылка открывается в "родительском" окне. Что это значит? Фреймы - это как бы отдельные браузеры, вложенные в наш основной браузер. Если мы имеем дело с вложенными фреймсетами, то получается уже 2 и более уровня вложенности.
Так вот, мы можем обращаться к фрейму, в который вложен текущий, не по имени, а с помощью значения "_parent". Особенно это актуально для "главного" окна, которое не имеет имени. Таким образом мы можем выйти из фреймовой структуры и попасть на обычную страницу. Однако для обращения к окну самого верхнего уровня лучше использовать значение "_top". В отличие от _parent, оно не относительно текущего фрейма, а абсолютно и из любого уровня вложенности ведёт на самый верхний уровень - на главное окно браузера. И тут мы подходим к ответу на вопрос, как корректно разрабатывать сайт на фрейМАХ. Итак, если вы взвесили все "за" и "против" и решили, что без фреймов вам никак не обойтись, то нужно соблюдать, по крайней мере, одно правило: механизм URL должен работать. То есть при переходе по ссылке должен меняться адрес в адресной строке браузера.
Что для этого нужно? Для этого каждый документ, на который может вести ссылка, должен иметь свой отдельный фреймсет, а все ссылки должны вести не на документ, а на этот его фреймсет и загружать этот фреймсет в главное окно браузера, т.е. все ссылки должны иметь атрибут target="_top". Вот как это выглядит: каждая страница имеет "содержательный" .HTML-файл, а также имеет документ с фреймсетом. И именно этот документ показывается по умолчанию. Содержание остальных фреймов (например, фрейма с навигационным меню) одинаково для всех страниц, поэтому навигационный HTML лежит отдельно и загружается во все фреймсеты. "Свой фреймсет для каждого документа?!" - ужаснётесь вы. А кто сказал, что будет легко? Зато так каждая страница будет иметь полноценный адрес - ведущий не на отдельную страничку, а на полный комплект фреймов.
Но остаётся проблема поисковых систем - в поиск попадает только "содержательная страница". Но и эта проблема решаема, правда, её решение уже не так просто и требует некоторого программирования, на чём мы здесь не будем останавливатсья. Теоретически же если мы наберем адрес "содержательной" страницы, то будем автоматически перенаправлены на страницу с соответствующим фреймсетом. И напоследок рассмотрим ещё один вид фреймов, достаточно радикально отличающихся от "обычных" фреймов. Это так называемые IFRAMES или inline-frames.
Как следует из названия, такой фрейм встраивается прямо в содержание страницы, подобно текстовым элементам. Никаких фреймсетов для него не надо, он создаётся с помощью элемента <IFRAME>. Как и обычный фрейм, он имеет атрибут src, определяющий его содержимое, атрибут name, для использования в target'ах ссылок. Также от обычных фреймов он унаследовал атрибуты frameborder, scrolling, marginwidth и marginheight. Этот элемент чем-то похож на картинку: он так же имеет атрибуты width и height, задающие его размеры, а также атрибут align, управляющий выравниванием текста вокруг фрейма. Элемент должен иметь закрывающий тег, а то, что находится между открывающим и закрывающим тегами, будет показано в браузерах, не поддерживающих IFRAME.
⇐Формы | TeachPro WEB-дизайн | Изменение цветов фона. горизонтальная линия⇒