Решившись использовать результат на месте, нужно
действовать только JavaScript-ом. Самый "совместимый"
вариант предполагает расстановку комментариев так, чтобы убирать
ненужные колонки из документа:
(2). Убираем лишние
колонки (Javascript)
<html>
<body> <script language="JavaScript">
<!-- // определяем разрешение
if (self.screen) width = screen.width
else if (self.java) {
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
} else width = 'x';
col800=0; col1024=0; // 0 - прятать соотв. колонку
if (width > 700) col800=1;
if (width > 1000) col1024=1;
if (width == 'x') col800=1;
//-->
</script>
<table border=2 cellpadding=3 cellspacing=3>
<tr> <script language="JavaScript">
<!-- // левая колонка - стирается, если разрешение < 1024
if (col1024 == 0) document.write("<!--");
//-->
</script>
<td width=150 bgcolor=#FFCCCC>Левая колонка - видна
только при 1024х768 и выше.</td> <script language="JavaScript">
<!--
if (col1024 == 0) document.write("--",">");
//-->
</script>
<td width=520 bgcolor=#CCCCFF>Центральная колонка
- видна всегда. Ширина колонки - 520.<br>
<script language="JavaScript">
<!--
document.write("Col800=",col800,"; Col1024=",col1024,";
текущая ширина ",width);
//-->
</script>
</td> <script language="JavaScript">
<!-- // правая колонка - стирается, если разрешение <
700
if (col800 == 0) document.write("<!--");
//-->
</script>
<td width=150 bgcolor=#CCFFCC>Правая колонка - видна
на 800х600 и выше, а также когда не получается
определить разрешение экрана.</td> <script language="JavaScript">
<!--
if (col800 == 0) document.write("--",">");
//-->
</script>
</tr></table>
</body>
</html>
Единственное преимущество такой реализации - совместимость
с NN3. Но при этом у нее есть один очень серьезный недостаток:
загружаются все колонки, даже ненужные. Это значит, что 40% пользователей
перекачивают себе килобайты ненужной информации, что, разумеется,
недопустимо.
Поэтому более совершенная реализация предусматривает
использование IFRAME или ILAYER (и не работает с
версиями 3 - они увидят только основную колонку). В этом случае
дополнительные колонки выложены в отдельных файлах и подгружаются
по необходимости:
<html>
<body> <script language="JavaScript">
<!--
if (self.screen) width = screen.width
else if (self.java) {
var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
} else width = 'x'; col800=0; col1024=0;
if (width > 700) col800=1;
if (width > 1000) col1024=1; if (width == 'x') col800=1; // ... плюс определение
броузера
if (document.layers) ns = 1
else ns = 0;
//-->
</script>
<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td> <script language="JavaScript">
<!-- // вставка левой колонки
if (col1024 == 1)
if (ns) document.write("<ILAYER bgcolor=ffcccc src='leftcolumn.html'
width=150></ILAYER>")
else document.write("<IFRAME src='leftcolumn.html'
width=150 frameborder=0></IFRAME>");
//-->
</script> </td>
<td width=520 bgcolor=#CCCCFF>Центральная колонка
- видна всегда. Ширина колонки - 520.<br>
<script language="JavaScript">
<!--
document.write("Col800=",col800,"; Col1024=",col1024,";
текущая ширина ",width);
//-->
</script>
</td>
<td> <script language="JavaScript">
<!-- // вставка правой колонки
if (col800 == 1)
if (ns) document.write("<ILAYER src='rightcolumn.html'
width=150></ILAYER>")
else document.write("<IFRAME src='rightcolumn.html'
width=150 frameborder=0></IFRAME>");
//-->
</script></td></tr></table>
</body>
</html>
Недостаток я вижу тот, что на каждую колонку делается свой запрос,
и это удлиняет общее время загрузки. Но, с другой стороны, нет
особенной нагрузки на сервер - он только выдает файлы. Этого преимущества
нет у других вариантов.
Следующий выпуск: разбираем по косточкам вариант второй: передача
результатов CGI-скрипту на примере страницы, генерируемой с помощью
PHP.
Анонс
В следующий раз я сделаю перерыв в изучении блочного
дизайна и напишу что-нибудь не про верстку. Хотите предложить
тему для заметки? Зайдите на форум
Заметок (http://pub16.ezboard.com/bzametki)
и оставьте свою идею.
Дизайнерские новости
В web-клубе
опубликована статья "10
главных ошибок в web-дизайне". Почитать будет полезно
даже акулам веб-строительства :-)
http://www.webclub.ru/content/design_usability/article-278.html
- прислала Neta 11 января
http://www.complexsystems.net - ПОРТАЛ АНГЛИЙСКОГО ЯЗЫКА
Портал предлагает подборку материалов (> 500 Mб) для изучающих
английский язык:
Игры и Программы;
Аудио-курсы (MP3);
более 1500 словарей, тезаурусов и глоссариев;
Кроссворды;
Учебные пособия; Справочники по грамматике и лексике; On-line
Тесты;
Литература для чтения;
Подборки ссылок на образовательные ресурсы Internet;
Информация по всем международным экзаменам (TOEFL, GMAT,
IELTS, FCE, KET, PET, CPE, BEC и другие);
Специальный раздел для родителей учеников - школьные программы,
советы по обучению, лучшие московские курсы и школы. Необходимые
справочные материалы: школы, репетиторы, СМИ, книжные магазины.
На Портале Английский язык от Complex Systems работает один из
самых
популярных образовательных форумов "Английский язык от Complex
Systems" - более 10000 посетителей ежемесячно.
Дистанционное бесплатное обучение Английскому языку через Internet
с
последующей сдачей экзамена и получением диплома. Занятия ведут
Преподаватели Школы Английского языка Complex Systems in Education
на основе разработок Школы Английского языка.
Засим прощаюсь до следующего раза, MaxVT
пишите письма: maxvt@zametki.org