Дизайн сайта с фреймами и без

Данная статья описывает устройство достающейся браузеру страницы, вне зависимости от реализации кода сайта на стороне сервера. Генерить страницы по этой схеме можно разными способами, в том числе создавая их в виде статических HTML сайтов на локальном компьютере.

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

Зачем это нужно

Описанная в данной статье схема дизайна преследует следующие цели:

Навигация и отображение сайта удобны в текстовых браусерах
Облегчено использование сайта "проговаривающими текст" программами для слепых
Минимизация отличий отображения в браузерах, поддерживающих разные стандарты
Пользователь легко может выбрать оптимальный способ навигации
Роботам поисковых систем и скриптам бирж ссылок достаётся правильно структурированный сайт с верными URI страниц
Как с точки зрения человека, так и с точки зрения роботов, нет дублирования элементов навигации
Минимизация нарушения стандартов ради совместимости

Как это делается

Для простоты здесь описывается:

статический html сайт на сервере
два фрейма
навигатор помещается слева от текста страниц и занимает 20% ширины

Основные файлы

index.html - главная страница с дизайном без фреймов
index.js - яваскрипт, рисующий навигацию на внутренних страницах
Фреймовый дизайн:
- index_frames.html - структура фреймов
- main.html - текст главной страницы для фреймовой версии
- menu.html - файл с навигацией для фреймовой версии

index.html - здесь навигатор обязательно содержит ссылки на разделы сайта, правильно оформленные как a href в обычном html.
index.js - функция SqDrawNav() по событию Onload добавляет к уже имеющемуся телу страницы идентичный первому навигатор, предварительно проверяя, не загружена ли эта страница во фрейме фреймового дизайна.
menu.html - фреймовая версия, помимо собственно ссылок и оформления красивостей содержит target="main" для a href ссылок.

Отрисовка на внутренних страницах

Содержимое внутренних страниц и main.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<Html>
 <Head>
  <Title>Сайт. Название страницы</Title>
  <SCRIPT SRC="/index.js"></SCRIPT>
  </HEAD>
<BODY Onload="SqDrawNav();">
<h1>Заголовок страницы</h1>
Текст страницы
</body>
</html>

Функция отрисовки

Содержимое index.js :

function SqDrawNav() {
if ((parent.window.location != 'http://dolphinarium.xvid.ru/index_frames.html') &&
    (parent.window.location != 'http://www.dolphinarium.xvid.ru/index_frames.html')) {
  document.body.innerHTML=
  '<TABLE WIDTH="100%">'
+ '<TR><TD WIDTH="20%" VALIGN="TOP">'
+ '<center><br><i>'
+ 'дизайн'
+ '<br><a href="/index_frames.html" target="_top" title="открыть версию с фреймами">с фреймами</a>'
+ '<br><a href="/" target="_top" title="открыть версию без фреймов">без</a>'
+ '</i></center><ul>'
+ '<li><a href="/sub1/">Раздел 1</a></li>'
+ '<li><a href="/sub2/">Раздел 2</a></li>'
+ '</ul>'
+ '</TD>'
+ '<TD WIDTH="80%">'
+ document.body.innerHTML
+ '  </td> </tr> </table>';
  }
}

Содержимое index_frames.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<Html>
<Head>
 <Title>Название сайта. Версия с фреймами</Title>
 <Link Rel="StyleSheet" Type="text/css" Href="/style.css">
</Head>
<FRAMESET COLS="20%, 80%"> 
<FRAME SRC="menu.html" NAME="Contence"> 
<FRAME SRC="main.html" NAME="First" SCROLLING="yes"> 
</FRAMESET>
<NOFRAMES>
<body LeftMargin="5" TopMargin="5" BgColor="#E8E8E8">
<H1>Ваш WEB-браузер не поддерживает фрэймы</H1>
<A HREF="/">Версия сайта без фреймов</a>
</Body>
</NOFRAMES>
</Html>

Содержимое menu.html

<Html>
<Head>
 <Link Rel="StyleSheet" Type="text/css" Href="/style.css">
 <BASE TARGET="First">
</Head>
<body>
дизайн
<br><a href="/index_frames.html" target="_top" title="открыть версию с фреймами">с фреймами</a>
<br><a href="/" target="_top" title="открыть версию без фреймов">без</a>
</i></center><ul>
<li><a href="/sub1/">Раздел 1</a></li>
<li><a href="/sub2/">Раздел 2</a></li>
</ul>
</body>
</html>

Примеры реализации

Дельфинарий
Игра Война Гнева
Остранна BBS - старый дизайн сайта Остранна