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

Рецепты HTML

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

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

←   Февраль 2003   →
 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
Автор
Влад Мержевич

Статистика

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

Рецепты HTML


Информационный Канал Subscribe.Ru
   Новости сайта www.htmlbook.ru

Добрый день.
Все больше людей пишут об использовании слоев при верстке сайта, сравнивая их возможности с таблицами. Не удержался и я от сравнения таблиц и слоев друг с другом и написал статью, где приводится описание их свойств.

Слои и таблицы

Существует три распространенных способа верстки веб-страниц, отличающихся различным подходом - с помощью фреймов, таблиц и слоев. Такое разделение не означает, что используется только один прием верстки, скорее речь идет об их сочетании друг с другом.

В данной статье мы не будем затрагивать верстку с помощью фреймов, об этой теме написано уже множество материалов, где на разные лады поминают достоинства и недостатки фреймов. Обратимся к верстке таблицами и слоями. В последнее время все больше тем посвящено выбору между этими подходами к созданию веб-страниц и обсуждению, что лучше. На самом деле проблема по большей части надумана, нет особой разницы, как будет верстаться страница - слоями или таблицами. Каждый подход применяется для своих собственных целей. Чтобы было понятно, где и для чего используются таблицы и слои, приведено сравнения их свойств.

Слои

Достоинства
  • Слои по сравнению с таблицами загружаются быстрее.
  • Возможность управления слоями динамически с помощью скриптов. Это позволяет создавать различные эффекты, используя достаточно простые инструкции - спрятать, показать, переместить слой и другое.
  • Слои можно накладывать друг на друга, что упрощает размещение материала на веб-странице и дает больше возможностей.
  • Информацию можно прятать и показывать без перезагрузки всей страницы.
  • Слои можно разместить в окне браузера с точностью до пиксела.

    Недостатки

  • Основной недостаток один - браузеры по разному работают со слоями, из-за чего приходится код в скриптах писать под конкретный браузер. Сложность еще заключается в разной интерпретации браузерами стилевых таблиц.
  • Трудоемко выравнивать слой по правому краю или середине. Для этого придется писать скрипты и вычислять ширину окна браузера и слоя.

    Таблицы

    Достоинства
  • Использование таблиц понятно, просто и удобно.
  • Применение невидимой рамки у таблиц - мощный и удобный способ размещения содержимого на веб-странице.
  • Можно просто задавать ширину таблицы в процентах, пикселах и выравнивать ее по левому, правому краю или по центру веб-страницы.

    Недостатки

  • Пока таблица не загрузится полностью, содержимое ее не будет показываться. Если на веб-странице размещена большая таблица, загрузка страницы существенно замедляется.
  • Код HTML для создания таблиц может быть громоздок, особенно если требуется сделать несколько вложенных таблиц.

    Для лучшего понимания различий между подходами, приведены примеры решения типичных задач с использованием таблиц и слоев.

    Фоновая область

    Любая таблица с параметром bgcolor создает прямоугольную область определенного цвета. Такое выделение материала отделяет его от других элементов и привлекает внимание читателя. Отступ от края таблицы до содержимого регулируется параметром cellpadding или cellspacing.

    Пример 1. Создание фоновой области с помощью таблицы

    <table bgcolor=#c0c0c0 width=400 cellpadding=10>
    <tr><td>Перед началом работы проверьте наличие оборудования входящего в комплект ЭВМ. При отсутствии одного или нескольких периферийных устройств следует сразу же обратиться к техническому персоналу ВЦ. После осмотра визуальными методами своего рабочего места можно осторожно включить питание ЭВМ.</td></tr>
    </table>

    Параметры слоя регулируются с помощью стилей. Чтобы задать фон области используется параметр background-color. Браузеры по разному обрабатывают этот параметр. Internet Explorer и Opera заливают цветом прямоугольную область, что весьма логично (рис. 1), а вот Netscape изменяет цвет фона только под текстом, вдобавок убирая отступы вокруг него (рис. 2).

    Рис. 1. Internet Explorer Рис. 2. Netscape

    Чтобы избавиться от этого недостатка, можно сделать рамку вокруг области, совпадающую с цветом фона.

    Пример 2. Фоновая область с помощью слоя

    <div style=""background-color:#c0c0c0;" padding: 10px; width: 400; border: solid #ffffff 1px">
    После осмотра визуальными методами своего рабочего места можно осторожно включить питание ЭВМ.
    </div>

    Параметр padding задает отступы от содержимого до края области, а вот border нужен, чтобы браузер Netscape показывал все корректно.

    Создание рамок

    Метод создания рамки вокруг области с использованием стилей совпадает как у таблиц, так и у слоев. Единственное отличие - Netscape 4.x рамку вокруг таблицы показывать не будет.

    Пример 3. Создание рамки

    <style>
    table { border: solid #336699 1px; padding: 10px }
    div { border: solid #336699 1px; padding: 10px; width: 400px }
    </style>

    Рамка с использованием таблицы
    <table width=400>
    <tr><td>Во избежании медицинских осложнений стул рекомендуется выбирать с мягким сидением.</td></tr>
    </table>

    Рамка с использованием слоя
    <div>
    Во избежании медицинских осложнений стул рекомендуется выбирать с мягким сидением.
    </div>


    •   Разделы сайта
     
    Создание сайта
      HTML
      CSS
      Графика
      Дизайн
      Инструментарий
      Справочная информация
      Шаблоны
      Форум

      Подписка на новости
      Введите ваш e-mail:
      Помощь
      Не знаете с чего начать или что можно найти на сайте www.htmlbook.ru - воспользуйтесь Помощником по сайту
    Copyright 2002 Влад Мержевич, e-mail: vlad@htmlbook.ru
    Материалы сайта охраняются законом об авторском праве.
    Вы можете свободно использовать и распространять любые статьи с указанием автора и ссылки на сайт www.htmlbook.ru.
    http://subscribe.ru/
    E-mail: ask@subscribe.ru     		Отписаться
    Убрать рекламу
    В избранное