Отправляет email-рассылки с помощью сервиса Sendsay

Заметки Дизайнера

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2001   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

56.649 подписчиков
-141 за неделю
←   Все выпуски   →

Заметки Дизайнера


Служба Рассылок Subscribe.Ru проекта Citycat.Ru

заметки дизайнера
Выпуск 18 - 13 января 2001 
http://come.to/zametki

Блочный дизайн: варианты реализации

часть 2: используем на месте
 

Решившись использовать результат на месте, нужно действовать только 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 - они увидят только основную колонку). В этом случае дополнительные колонки выложены в отдельных файлах и подгружаются по необходимости:

(3). Вставляем лишние колонки (Javascript, NN4, IE4) 
<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 января

Присылайте ваши новости! news@zametki.org

 

Учите английский язык!
 
Рассылка "АНГЛИЙСКИЙ ЯЗЫК от
ПОРТАЛА COMPLEX SYSTEMS"


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
http://subscribe.ru/
E-mail: ask@subscribe.ru
Поиск
В избранное