Шари в HTML

Ось такий ефект можна отримати, використовуючи шари. Власне, точно такого ж ефекту можна досягти і одним з безлічі фільтрів браузера, але друге рішення буде відображатися правильно тільки в самому браузера.

  Отже, що ж із себе представляє шар?

  Код шару:

  <Div id = "ім'я шару" style = "position: absolute; left: 204px; top: 143px; width: 171px; height: 62px; z-index: 2"> вміст шару </ div>

  id - це індивідуальне ім'я шару, збігатися і повторюватися воно не повинно!

  style - це вид шару, тобто спосіб його відображення. Без цього параметра сам по собі тег div може служити лише способом форматування вкладеного в нього тексту - без головних особливостей, властивих верствам - таких, як розташування поверх чого завгодно.

  left - відстань від лівого краю: може бути як у піхелях, так і у відсотках від загальної ширини екрана.

  top - відстань від верху.

  ну, ширина і висота вам вже відомі, їх не згадую.

  z-index - значення може бути тільки цифрою. Причому, чим менше ця цифра, тим вище знаходиться шар по відношенню до інших верствам.

   Здавалося б, дизайн, побудований на шарах, набагато зручніше і простіше, ніж дизайн на банальних таблицях, але є нюанси, як позитивні, так і негативні.

   У числі позитивних:

  зручність для дизайнера - велика свобода і більше ефектів.

  швидше завантаження і не чекати закриття замикаючого тега.

  зручніше маніпулювати їх вмістом

   негативні сторони:

  складно підлаштовуватися під мінливий дозвіл монітора. І ще складніше робити такий дизайн гнучким - щоб ширина шару змінювалася згідно ширині вікна. Це, звичайно, можна зробити за допомогою вельми громіздкого скрипта, але ... друга перевага зі списку позитивного ми втрачаємо.

  пошуковики ... багато послідовності тегів, як не волають власники пошукових машин - а знаходяться гірше! Висновок - будь простішим, і до тебе потягнуться.

   Такі от пиріжки-печенюшки ..

   Так і залишаться шари елементом чисто декоративним і ніяк не основним. Зате за допомогою шарів виходять приємні такі менюшки - в прикладах скриптів ви зможете знайти багато таких примочок, поки ж ми розглянемо лише основні параметри шарів, як таких.

   Додаткові можливі теги:

   background-color: колір фону

   layer-background-color: колір шару

   border: 1px none - якщо прибрати "ноне", то навколо шару з'явиться бордюрчик 1 піхель завтовшки.

    У верств є багато інших тегів, але, як правило, вони всі призначені для використання поряд з скриптами, тому в них ми поки зариватися не будемо, а вивчимо наступну тему: каскадні таблиці стилів, воно ж - CSS.