Личный кабинет
2008-11-04 11:51
Издавна многие web-мастера используют таблицы для компоновки своего веб-сайта. Но у таблиц есть много недостатков. Самый главный недостаток это то, что большинство браузеров пока не прогрузят всё содержимое таблицы, ничего не покажут :-( !!! Ещё один недостаток заключается в том, что таблицы в исходном коде html трудны для восприятия! Вот обычная компоновка страницы:
Допустим, слой “banner” должен быть в самом верху. В тег <style> добавим:
#banner
{
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
height: 60px;
width: 800px ;
}
Слой “links” будет шириной 135px и иметь отступ 60px сверху. Тогда в <style> надо добавить:
#links
{
z-index: 2;
position: absolute;
top: 60px;
left: 0px;
width: 135px ;
}
И наконец слой “text” имеет ширину 665px и отступы сверху 60px и слева 135px:
#text
{
z-index: 3;
position: absolute;
top: 60px;
left: 135px;
width: 665px ;
}
Ладно слои мы создали, теперь надо бы их наполнить! Вот полный код html:
<html>
<head>
<style>
<!--Описано выше-->
</style>
</head>
<body>
<div id="text">
Ваш текст... Текст страницы...
</div>
<div id="links">
Ссылки... Ссылки...
</div>
<div id="banner">
Надоедливая реклама...
</div>
</body>
</html>
Поскольку самое главное для посетителей – это содержание страницы, а не баннер и ссылки, то в теле страницы слой “text” идет самым первым. Этот слой загрузится вначале, а затем ссылки, и после них уже реклама.
Таким образом, посетитель увидит нужный материал раньше, и начнет его читать, а пока он читает, загрузится все остальное.
А ведь посетители – самое главное.
Допустим, слой “banner” должен быть в самом верху. В тег <style> добавим:
#banner
{
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
height: 60px;
width: 800px ;
}
Слой “links” будет шириной 135px и иметь отступ 60px сверху. Тогда в <style> надо добавить:
#links
{
z-index: 2;
position: absolute;
top: 60px;
left: 0px;
width: 135px ;
}
И наконец слой “text” имеет ширину 665px и отступы сверху 60px и слева 135px:
#text
{
z-index: 3;
position: absolute;
top: 60px;
left: 135px;
width: 665px ;
}
Ладно слои мы создали, теперь надо бы их наполнить! Вот полный код html:
<html>
<head>
<style>
<!--Описано выше-->
</style>
</head>
<body>
<div id="text">
Ваш текст... Текст страницы...
</div>
<div id="links">
Ссылки... Ссылки...
</div>
<div id="banner">
Надоедливая реклама...
</div>
</body>
</html>
Поскольку самое главное для посетителей – это содержание страницы, а не баннер и ссылки, то в теле страницы слой “text” идет самым первым. Этот слой загрузится вначале, а затем ссылки, и после них уже реклама.
Таким образом, посетитель увидит нужный материал раньше, и начнет его читать, а пока он читает, загрузится все остальное.
А ведь посетители – самое главное.
- CSS - Для чего нужны таблицы стилей?
- Скругленные углы таблицы при помощи CSS
- Каскадные таблицы стилей (преимущества и недостатки)
- Фреймы в HTML документах (2008-11-04)
- 10 признаков дурного тона в web-дизайне (2008-11-04)
- 800 и 1024. Пиксели или проценты? (2008-11-04)
- Как работает формат JPEG? (2008-11-04)
- О композиции в дизайне (2008-11-04)
- Психология в дизайне (2008-11-04)
- Шрифты (2008-11-04)
- Как сделать качественный веб-сайт (2008-11-04)
- Какой вид дизайна выбрать? (2008-11-04)
- Выпадающие меню с помощью CSS (2008-11-04)
- Создание веб-страниц для различных разрешений м... (2008-11-04)
- Веб-дизайн и анимация (2008-11-04)
- Немного об index.html (2008-11-04)
- Психология дизайна (2008-11-04)
- Что такое стильный web-сайт? (2008-11-04)
- Web дизайн :: Что такое хорошо и что такое плохо (2008-11-04)
- Лево, Право или Центр? (2008-11-04)
- Оптимизация изображений в формате JPG (2008-11-04)
- Альтернативные редакторы Flash (2008-11-04)
- Что же такое web-дизайн? (2008-11-04)
- Сайты для тинейджеров: правила дизайна (2008-11-04)
- Маленькие проблемы больших таблиц - HTML (2008-11-04)
- Особенности web-дизайна (2008-11-04)
- Подсказки и советы для веб-мастеров - Топ 100+ (2008-11-04)
- Единицы измерения CSS (2008-11-04)
- Состав изображений (2008-11-04)
- FLASH - ЧТО МОЖЕТ БЫТЬ ХУЖЕ? (2008-11-04)
- FAQ по графическим форматам файлов (2008-11-04)
- ПО необходимое для web-дизайнера (2008-11-04)
- Должностная инструкция веб-мастера (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Orange color: теория и практика (2008-11-04)
- Расположение баннера (2008-11-04)
- Советы "чайникам" (2008-11-04)
- С чего начать (2008-11-04)
- С чего начать (2008-11-04)
- Организация - вот ключ к успеху (2008-11-04)
- Подбор шрифта и верстка текста (2008-11-04)
- Обзор Gif-аниматоров (2008-11-04)
- Каскадные таблицы стилей (преимущества и недост... (2008-11-04)
- Фирменный шрифт (2008-11-04)
- Главные ошибки в web-дизайне (2008-11-04)
- CSS - Для чего нужны таблицы стилей? (2008-11-04)
- О скриптах (2008-11-04)
- Изучаем HTML (2008-11-04)
- Применение нескольких классов к элементу в CSS (2008-11-04)
- Создание сайта с помошью фреймов (2008-11-04)
- Основы работы со слоями в CSS (2008-11-04)
- 10 полезных советов (2008-11-04)
Быстрый переход