/WEB-строй/

Создание сайтов на основе IFRAME

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

Для решения этой задачи известно множество способов - серверные скрипты, FRAME, JavaScript, но каждый из них имеет существенные недостатки.

IFRAME - универсальное решение.

Развитие Web-технологий, в частности принятие стандартов HTML 4.0 и CSS 2, позволило создать универсальный способ "сборки" сайта в браузере посетителя.

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

Достоинства:

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

У этой схемы только один возможный недостаток - затруднение поискового индексирования, однако он легко преодолевается установкой под IFRAME ссылки на структурированную "карту сайта", или хотя бы на "окно" с разделами.

Фрагменты кода

Страницы с текстом:

<div class="content">
....
</div>
<iframe src="/inc/head.htm" frameborder="0" id="ihead">
  <h1>Заголовок сайта</h1>
</iframe>
<iframe src="/inc/nav.htm" frameborder="0" id="inav">
    <a href="../inc/nav.htm">карта сайта</a>
</iframe>
</body>
</html>

Таблица стилей:

.content {position: absolute; left:164px; top:81px; 
          padding-left:0.5em}
#ihead   {width: 100%; height: 70px;  margin:0; padding:0;
          position: absolute; left:5px; top:5px; }
#inav    {width: 161px; height: 100%; margin:0; padding:0; 
          position: absolute; left:5px; top:80px;}

При чисто текстовой навигации желательно использовать относительные единицы 'em' - размер букв, что сохраняет пропорции сайта при любом разрешении экрана. При графическом же оформлении - более разумно использовать 'px' - пикселы.

Дальнейшее развитие

Дальнейшее развитие этого метода - расположение всех общих элементов на одном IFRAME, который "подкладывается" под текст с помощью атрибута 'z-index', однако созданные таким образом страницы неверно отображаются в браузере Opera - подложка поверх текста. Если для Вас неважна утрата посетителей с этим браузером - можете еще более упростить обновление своего сайта.

( Написать автору )