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


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

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

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

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

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

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

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

Навигация

Присутствует в трёх немного отличающихся видах в следующих трёх файлах:
  1. index.html - здесь навигатор обязательно содержит ссылки на разделы сайта, правильно оформленные как a href в обычном html.
  2. index.js - функция SqDrawNav() по событию Onload добавляет к уже имеющемуся телу страницы идентичный первому навигатор, предварительно проверяя, не загружена ли эта страница во фрейме фреймового дизайна.
  3. 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>

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


Комплексный маркетинг в социальных сетях от компании Rexus.