АРХИВ СТАТЕЙ ЖУРНАЛА «МОЙ КОМПЬЮТЕР» ЗА 2003 ГОД

Каркас для сайта

Все журналы \ Номер 8/231 `2003 от 24.02.2003 \ Каркас для сайта

Ольга КАЛИТКА ok_best@inbox.ru

Ни один объект HTML не вызывает столь пристрастных споров и обсуждений. Их любят начинающие сайтмейкеры и презирают профессионалы веб-дизайна. Что это? Наверное, вы уже догадываетесь — речь пойдет о фреймах.

Frame в переводе с английского обозначает «каркас», «костяк», «остов», «кадр», что довольно точно отображает истинный смысл этого слова в веб-дизайне. При помощи фреймов можно разбить окно обозревателя на несколько независимых подокон так, что содержимое одних окон остается постоянным при прокрутке или изменении содержимого остальных.

Техническое воплощение

Теперь немного теории, которую знатоки HTML могут с чистой совестью пропустить :-). Фреймовый документ имеет особую декларацию типа документа, а именно: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">. В документе с фреймами тэг <BODY> либо отсутствует, либо помещается в разделе NOFRAMES. Вместо него используется элемент FRAMESET, при помощи которого задается разбиение окна браузера на столбцы или строки, а также их размеры.

Содержимое самих фреймов определяет элемент FRAME с атрибутом SRC, задающим адрес документа, который отобразится в текущем фрейме. Атрибут NAME присваивает фрейму имя, а FRAMEBORDER определяет наличие или отсутствие разделителей.

NOFRAMES задает альтернативное содержание документа для обозревателей, не поддерживающих фреймы. Он должен располагаться в конце тела документа перед конечным тэгом </FRAMESET> и может содержать любые элементы, которые допустимы внутри элемента BODY. Несмотря на то, что этот элемент не является обязательным, советую всегда включать его во фреймовый документ, причем его содержимым как минимум должна быть гиперссылка на главный фрейм (или фреймы).

Элемент IFRAME определяет встроенный или плавающий фрейм, который не занимает фиксированного положения в окне браузера, а прокручивается вместе с остальным содержимым веб-страницы. Атрибут NAME задает имя фрейма, атрибут SRC указывает адрес HTML-документа или иного ресурса, который должен отображаться в данном фрейме.

Быть или не быть?

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

Люди, которые недавно познакомились с фреймовой технологией, приятно удивляются ее простоте и кажущейся идеальности для верстки страниц. Разочарование и горькое недоумение приходит позже, когда горе-дизайнер обнаруживает, что страницу невозможно корректно напечатать или добавить в закладки (казалось бы, что может быть проще?). Да и посетители почему-то с сайта быстро убегают, не успев просмотреть хотя бы две-три странички… Ничего удивительного. Я знаю людей, которые принципиально не посещают сайты, построенные на фреймах, вне зависимости от ценности контента, который там находится. Видимо, не хотят оскорблять свое чувство прекрасного, или же просто страдают фреймовой аллергией :-).

Но мы-то с вами знаем, что фреймы просто чудесно подходят для верстки страниц, не так ли?

Бочка меда

Сторонники фреймов сейчас захлопают в ладоши, а противники заткнут уши и закроют глаза :-). Ведь я во всеуслышание заявлю, что фреймы предоставляют уникальную возможность — легкое размещение информации точно в нужном месте окна браузера. Скажем, можно поместить фрейм внизу браузера, и независимо от прокручивания содержимого эта область не изменит своего положения. Также фреймы позволяют довольно быстро и просто сверстать страницу с разделением на навигационное меню и основную часть. Грамотно использованная фреймовая структура позволяет увеличить скорость загрузки страницы, так как меню не нужно будет каждый раз подгружать с сервера, соответственно, объем страницы будет меньшим. Далее, с помощью фреймов удобно объединять текстовые HTML-документы с JAVA-аплетами. С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы. Даже размер фреймов легко меняется пользователем (если иное не предусмотрено «заботливым» дизайнером), чего не позволяет сделать традиционная верстка HTML.

Но и это еще не все. Без фреймов никак не обойдется такая важная деталь сайта как чат. Удобно их использовать и в картах изображений: например, сама карта отображается в одном фрейме, а в другом пользователь видит документы, полученные при активизации ее областей. Простор для дизайнерской фантазии практически не ограничен: можно использовать фреймы при создании частного портфолио, небольшого интернет-магазина, фотогаллереи, etc. Полная творческая идиллия.

Ложка дегтя… и не одна

Но не все так хорошо и красиво. Недостатков у фреймов едва ли меньше, чем достоинств. Возможно, если вы будете знать все минусы этой технологии, то будете более сдержанно относиться к тэгу <FRAMESET>, а тяга к рамкам и кадрам куда-то пропадет сама собой :-). Итак, начнем.

Первое, что оказывается под ударом, —навигация. Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу обычно помещается название сайта, заголовок страницы и навигация. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Можно представить раздражение пользователя, нашедшего подходящую ссылку в поисковой системе и нажавшего на нее, когда перед ним открывается документ без названия и навигации. Чтобы понять, куда это его занесло, или посмотреть хоть одним глазком на другие материалы, несчастному посетителю остается лишь один выход — редактировать путь в адресной строке. Хорошо, если у него есть время, желание и умение это делать, а если нет?

Допустим, вы смирились с тем, что ваше фреймовое детище плохо проиндексируется поисковыми системами (для справки: поисковый робот системы Lycos попросту игнорирует фреймовые документы, а робот системы AltaVista включает в результирующую базу данных все документы подряд). Действительно, чего зря голову ломать — пусть все любопытствующие заходят не с черного входа, а через главную страницу! Но и тут их поджидает неприятный сюрприз: кнопки браузера Back и Forward, похоже, совершенно испортились! А что еще можно предположить, если после долгого путешествия по страницам сайта и вполне естественного желания вернуться чуть-чуть назад посетителя выкидывает прямо в самое начало frameset'а. А ведь виноваты вовсе не кнопки, а фреймы.

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

Терпение пользователя начинает иссякать, но все же ценная информация, находящаяся на сайте, не позволяет кликнуть мышкой на крестике в верхнем правом углу окна. Людям свойственно упрямство в преодолении трудностей. Наш герой находит выход — нужно напечатать интересующую страничку и тогда уже спокойно изучать ее, попивая кофе в мягком кресле. Ан нет! Принтер тоже отказывается служить верой и правдой, печатая на бумаге не текст, а симпатичную, но совершенно ненужную менюшку. Вместо того чтобы ругать технику, лучше поставить себя на место браузера (интересно, как это у вас получится :-)). Что именно он должен выводить на печать, когда страница содержит несколько фреймов с прокруткой? Копировать текущее состояние своего окна или расширять (непонятно, правда, каким образом) размеры нужных фреймов, чтобы напечатать их содержимое полностью?

Но вернемся к нашему посетителю. Проклиная неисправную технику, он решает сохранить на память адрес этой странички, чтобы посмотреть ее позже на другом «безглючном» компьютере. Наивный! Раздел «Избранное» недостоин адреса этого ресурса. Фреймы заботливо скрывают адрес страницы, на которой находится посетитель, и всегда показывают только адрес сайта.

Вот и все. Пользователь утрачен навсегда. Теперь уже никакие обещания и призы не заставят его вернуться на сайт, где он потерял столько сил и ценного (в прямом смысле слова, ведь Интернет тоже не бесплатен :-)) времени.

Все равно, пусть это странно и смешно

Я не фанатка Алсу, но мне показалось, что именно эти строки характеризуют позицию веб-дизайнеров, которые, дочитав до этого пункта, все еще полны решимости использовать фреймы. Они готовы смириться с потерей посетителей ради задуманного дизайна, готовы хранить на сервере кучи лишних файлов (ведь для каждого изменения в любой части сайта нужен новый фрейм, соответственно, новый файл). Даже презрение более опытных коллег их не смущает. В конце концов, на какие жертвы не пойдешь ради красивого и навороченного дизайна?

Есть технологии и приемы, которые помогут организовать удобную и простую навигацию по сайту и при этом не расшатают здоровье ваших клиентов. Например, SSI позволит вставлять часть другого файла в вашу страничку безо всяких побочных эффектов. А табличная верстка подойдет для самого сложного дизайна; посмотрите на исходный код самых крупных и популярных проектов Сети, и вы увидите многочисленные <TABLE>. Но даже если вы решите построить свой сайт на фреймах, сделайте это максимально грамотно. А нижеследующие советы вам в этом помогут.

Наиболее безопасным является использование вложенных фреймов. В этом случае сохраняется подчиненность вложенных объектов главной странице, а поэтому не возникает проблем с адресацией страниц (хотя проблема печати содержимого вложенного фрейма все равно остается). Хоть, к сожалению, на сегодняшний день элемент IFRAME поддерживается только браузерами Internet Explorer и Netscape 6.

Теперь рассмотрим использование внешних фреймов. Назовем документ, содержащий элемент FRAMESET, главным, а все остальные документы, которые загружаются в его фреймы —подчиненными. Нам необходимо сделать так, чтобы при переходе по гиперссылке изменялся и адрес страницы в целом. Для этого нужно создать свою пару «главный документ-подчиненный документ» для каждого из тех документов, которые будут сменять друг друга в окне фрейма, и включить атрибут target="_top" во все гиперссылки подчиненных документов, например: <A href="mylink.htm" target="_top">. Добавление этого атрибута приводит к тому, что при загрузке нового документа обозреватель удаляет все фреймы и заполняет окно новым набором фреймов. Этот набор может совпадать со старым, но адрес страницы изменится на адрес цели, чего мы и добиваемся! Единственное исключение: атрибут target="_top" не следует включать в ссылки на закладки, размещенные в том же документе, т.к. в этом случае нам не нужно изменения адреса. Если же таких ссылок нет, то желаемого результата добиться еще проще: поместить в заголовок каждого подчиненного документа элемент <BASE target="_top">.

Проблема создания закладок для фреймов актуальна всегда. Она усугубляется еще и тем, что недостаточно грамотности разработчика сайта. Необходим еще и грамотный посетитель, который знает, что в Internet Explorer и Netscape контекстное меню, появляющееся после клика правой кнопкой мыши, позволяет создать закладку на документ, отображаемый в конкретном фрейме. Но здесь также есть два нюанса: во-первых, посетитель должен знать, что страница построена на фреймах, ведь дизайнеры часто маскируют разделители между кадрами. Во-вторых, при выборе закладки, сделанной таким способом, в браузере отображается не вся структура фреймов, а лишь один документ. Выход один: надо по возможности сообщать посетителям о применении фреймов и указывать в теле документа URL в текстовом виде. Желательно также создать версию веб-страницы без фреймов, содержащую ссылки на все требуемые документы.

Каждый фрейм представляет собой отдельный HTML-документ, поэтому браузеры часто не могут вывести на печать все фреймы так, как они отображаются на экране. Вместо этого они создают твердую копию документа из фрейма, которому принадлежит фокус. Клик на ссылке не является передачей фокуса выбранному фрейму. Пользователь должен четко знать, что перед тем, как задавать команду «Печатать», надо щелкнуть мышью в требуемом фрейме. Как и в предыдущем случае, перед разработчиком встает проблема компетентности посетителей. Каждый решает ее по-своему, учитывая, что пользователь обычно поступает привычным ему способом и не настроен осваивать методику, которую ему предлагает некто, именующий себя веб-дизайнером данного сайта.

Выводы

Извините, я повторюсь: конечное решение принимать вам. Если вас все же интересует мое субъективное мнение, то вот оно: начинающим веб-разработчикам фреймами лучше не пользоваться вообще. Что касается профессионалов, давать им советы трудно — на то они и профессионалы. Тем не менее, я считаю, что по мере возможности использования фреймов в своих веб-страницах следует избегать; если вы все-таки их используете, то соблюдайте перечисленные выше правила; прежде чем создавать фреймовую страницу, рассмотрите возможность использовать вместо фреймов альтернативные технологии. На этом считаю возможным закончить доклад :-), спасибо за внимание!

Рекомендуем ещё прочитать:

Рекламная вспышка. (№1/224 `2003) Вячеслав Белов
Меняемся флагами. (№1/224 `2003) Дмитрий Кошевой
Окно на окне, окном погоняет. (№5/228 `2003) A.m. Faust
Каркас для сайта. (№8/231 `2003) Ольга Калитка
Сервер племени апачей. (№9/232 `2003) Артем Cosmic Шманцырев
Оледеневший HTML. (№10/233 `2003) Иван Мороз
Резине тянуться долго. (№19/242 `2003) Сергей Болашов
Дайте жалобную книгу! (№21/244 `2003) Данил Клименко
VB в ипостаси Script. (№23/246 `2003) Константин Носов
Java Script спешит на помощь. (№23/246 `2003) Владислав Путяк

Предыдущая статья Назад К списку журналов Следующая статья