Назад в раздел
Слои против таблиц
div.main {margin-left: 20pt; margin-right: 20pt}
Слои против таблиц
Что происходит, когда браузер начинает качать таблицу? Он видит тэг <table> и ничего не покажет, пока не увидит тэг </table>. Почему так? Например, потому, что пока вся таблица не закачена, браузер не узнает, сколько ему надо сделать столбцов, или какой ширины надо сделать таблицу (если ширина не задана явно), или же как разбить таблицу на столбцы, если их ширина не задана. Нарисовать таблицу до ее полного скачивания пытается, по-моему, только Мозилла, но и у нее это не очень хорошо получается.
И вот браузер начинает качать верхнюю ячейку таблицы - шапку. Встречает там логотип и баннер 468x60 и начинает паралельно качать и их... Потом горизонтальную менюху, если есть, и только потом - контент. И все это время он качает еще и всю графику, которая ему встречается. Скорость из-за этого сильно снижается. Но даже когда контент закачен, пользователь его не увидит. Потому что надо докачать таблицу, тоесть все ее закрывающиеся тэги, правую менюху, если есть и тд... И только потом перед глазами уставшего ждать пользователя появляется вся страница сразу.
Конечно, не лучший вариант. Даже если все страницы очень сильно оптимизированы, весят не больше 15-20 Кб, все равно пользователь с медленным модемом будет ждать появления страницы 10-15 секунд, а если работают и другие окна браузера - еще больше. Не говоря уже о неоптимизированных страницах весом 60-80 Кб...
А вот как выглядит загрузка страницы с использованием слоев вместо таблиц: На белом экране браузера сразу появляется контент в нужном месте. Причем в этот момент ничего больше не грузится... А контент отображается по мере загрузки. Все это время пользователь может уже читать. Ждать первого абзаца контента ему пришлось всего около 2-3 секунд, учитывая время поиска и подключения к серверу. Тем временем контент подгружается до конца, и начинают грузится поочереди другие части страницы - шапка, менюхи и тд. Все это время пользователь может читать! (пример здесь). Согласитесь, такой расклад создает весьма хорошее впечатление о сайте.
Возможны и другие варианты: Контент появляется на всей странице, а потом занимает свое место и освобождает пространство для остальных частей страницы, Контент появляется на своем месте в неотформатированном варианте, а только потом подгружается таблица стилей, и так далее. В любом случае, Вы получаете возможность УПРАВЛЯТЬ процессом загрузки. Мало того, можно выводить информацию, а на мете, например, шаки, временно писать "Дождитесь загрузки", а потом убрать эту надпись, и заменить ее логотипом или баннером. (См. дальше)
Как этого добиться?
Да не так уж и сложно. Просто надо навсегда расстаться со сложившимися стереотипами и отказаться от использования таблиц. При этом надо будет полностью забыть старые привычки и переучиваться почти заново. Например, «width="100%"» необходимо заменять на «style="width:100;"», поскольку такие определения ширины сильно конфликтуют друг с другом, и если внутри <div style="width:200px;"> поместить <table width=100%>, ширина таблицы будет отнюдь не 200 пикселов, а она растянется на всю ширину страницы - кошмарное зрелище...
Итак, Вы, допустим, привыкли верстать свои страницы примерно таким образом:
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan=2>Шапка</td>
</tr>
<tr>
<td width=150>Менюха</td>
<td>Контент</td>
</tr>
</table>
- Примерно так и выглядят большинство небольших контентных сайтов. Таким образом, контент грузится в последнюю очередь. Теперь попробуем добиться тогоже вида спомощью слоев.
<style>
.content {
margin-top:70px;
margin-left:150px;
border:solid 1px;
}
</style>
<div class="content">
Контент
</div>
<style>
.head {
position:absolute;
top:0px;
left:0px;
width:100%;
height:70px;
border:solid 1px;
}
</style>
<div class="head">
Шапка
</div>
<style>
.menu {
position:absolute;
top:70px;
left:0px;
width:150px;
height:200px;
border:solid 1px;
}
</style>
<div class="menu">
Менюха
</div>
Таким образом, порядок загрузки будет такой: сначала таблица стилей для контента, потом сам контент (уже отформатированный), потом css шапки и шапка, потом css менюхи и менюха. Такой расклад наиболее удобен, поскольку и контент появится сразу на месте и баннер в шапке появится до менюхи, а значит пользователь скорее всего не нажмет STOP раньше времени. Возможны и другие варианты. Например, таблицу стилей для контента можно грузить в конце, и задать для него «z-index:2;» и какой-нибудь фон в начале. Тогда пользователь будет видеть только контент, развернутый на все окно, пока полностью не загрузится все остальное. Потом контент займет свое место и появятся остальные части дизайна.
Ну а можно и вовсе предупредить пользователя о том, что страница еще не загружена и следует подождать. Для этого необходимо вверху страницы создать слой
<div class="waitmsg">
Дождитесь загрузки страницы
</div>
А внизу, когда все будет уже загружено:
<style>
.waitmsg {
display:none;
}
</style>
Тогда это сообщение пропадет как только документ будет полностью загружен.
Таким образом, слои дают Вам возможность самим регулировать порядок загрузки частей страницы, независимо от их взаимного расположения на экране. Но у такого способа верстки есть свои недостатки:
1) Не все браузеры это понимают.
Только IE 4+, Mozilla 1.0, и более или менее свежие версии Opera (Не могу сказать точно версии, поскольку все они пытаются понять слои, но со своими багами. Например, не понимается свойство «background-*;», что может сильно все испортить) и в той или иной мере другие, менее популярные браузеры. Но в любом случае, порядка 95% пользователей это поймут и увидят в должном виде. Ну а если Вы бережете каждого пользователя и не хотите терять остальных 5%, Вам следует сделать и другие версии дизайна и подсовывать каждому свою. Для пользователей Netscape можно заменить все «<div>» на «<layer>» и «<ilayer>», остальным же подсовывать таблицы.
2) Чуть-чуть увеличенный объем страниц всвязи с включением таблиц стилей в код.
И от этого никуда не денешься. Всем известно как иногда глючит IE при включении отдельной таблицы стилей. Иногда он просто забывает ее подгрузить (точно не обнаружил, какие версии это допускают), и в таком случае Ваша страница будет выглядеть просто кошмарно! В нашем примере шапка окажется под контентом, а менюха расположится в самом низу :)
Но некритические части таблицы можно подгружать отдельно.
3) Возможные ошибки.
Если Ваш контент генерится скриптом, и там вдруг окажется, например «</div>», - пиши пропало! Страница превратится в мусор!
4) Неверное отображение при маленьких размерах страниц.
Вам необходимо протестировать свои страницы изменяя размеры окна. Если вдруг что-то не поместится по горизонтали, возможны баги. Хотя не существенные, заисключением тех случаев, когда Вы используете менюху не только слева, но и справа.
Но если Вы все-таки поборите все сложности, Вы оставите ОЧЕНЬ хорошее впечатление у каждого посетителя. Ведь они, родимые, любят когда о них заботятся :)
© Бондарев Александр, 2002
|
|
 |
|
