"ВОКРУГ САЙТА" www.vokrug-saita.ru

как создать сайт самостоятельно

Главная Рассылка Секрет Автор сайта

Уроки по HTML. Дополнение к базовому курсу.


Слои на web-странице

Обычно дизайн сайта держится на таблицах. И это понятно: с помощью таблиц упорядочить на странице информацию проще всего.

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

Ограничения эти связаны с особенностью HTML располагать элементы на странице в том порядке, в каком они записаны в исходном коде.

Так, к примеру, таблицы на странице можно расположить только одна под другой, а рядом – никак (на первый взгляд). Можно спросить: а зачем таблицы располагать рядом? Ведь можно одну таблицу сделать шириной на весь монитор и внутри этой таблицы навставлять сколько угодно ячеек.

Согласен, можно. Однако давайте вспомним, как загружается страница с таблицей. А загружается она таким образом, что пока вся таблица не загрузится, её содержимое видно не будет (об этом уже говорилось в статье Ускоряем сайт). То есть, если информации на странице достаточно много, пользователь может просто не дождаться загрузки всей страницы.

Поэтому лучше разбить основную таблицу на несколько отдельных таблиц. Но все эти таблицы всё равно будут одна под другой – такова особенность HTML, о чём говорилось раньше.

Один из способов решить эту задачу – применить слои.

Прежде чем показать это на практике, нужно чуть-чуть теории.

Что такое слой?

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

Иными словами, если ячейки таблицы возможно расположить только в строго определённом порядке и больше никак, то слои – подвижный элемент, который можно расположить на странице самым невероятным образом, что позволяет решить самые безумные web-задачки.

Способы создания слоёв

Слои создаются двумя способами.

Первый способ: с помощью тегов DIV (версия от Microsoft).

Второй: при помощи тега LAYER (ILAYER) (версия от Netscape).

Оба тега парные и действуют одинаково - выделяют участок документа. Но DIV более гибкий и более функциональный, чем LAYER (ILAYER), поэтому я рассмотрю только тег DIV.

Итак, DIV размечает слой в документе. С помощью CSS (стилей) ему можно назначить вертикальные и горизонтальные координаты (начало, местоположение, ширина и высота), а также месторасположение на странице. Для этого используются следующие свойства:

- position – указывает на расположение слоя в окне браузера (подробней см. ниже);

- top – координата от верхнего края окна браузера;

- left – координата от левого края окна браузера;

- right – координата от правого края окна браузера;

- width – ширина слоя;

- height – высота слоя;

- margin – отступ элементов внутри слоя от границ слоя;

- z-index – показывает порядок расположения нескольких слоёв друг относительно друга.

Атрибут position имеет следующие значения:

- absolute - располагает элемент в окне браузера;

- relative – располагает элемент относительно его места в исходном коде;

- staticего лучше не использовать, так как это может привести к неожиданным и нежелательным результатам.

Если тегу DIV назначено в стилях

style="position: absolute"

- это указывает на то, что слой будет иметь собственное место в документе, и никакой другой элемент не изменит этого.

С помощью свойств top, rightи left устанавливают, соответственно, верхнюю, правую и левую границы слоя от края окна браузера (left и right одновременно применять НЕ нужно):

style="position: absolute; top:0; left:0"

Добавив width, height и margin, указывают ширину и высоту слоя и отступ внутри слоя до содержащейся с нём информации:

style="position:absolute; top:0; left:0; width:600; height:100; margin:10"

Количество слоев на странице может быть каким угодно. Они могут даже перекрывать друг друга. В окне браузера слои располагаются так же, как в исходном коде. Чтобы разместить перекрывающиеся слои в нужном порядке (независимо от их места в исходном коде), используется атрибут z-index. Он может иметь положительное или отрицательное значение:

style="position:absolute; top:0; left:0; width:600; height:100; margin:10; z-index:-1"

Слой с таким z-index'ом будет находиться ниже слоя, имеющего z-index, равный 1 («ниже», значит, второй слой будет наложен на первый).

Слои, как и ячейки таблицы, можно залить каким-нибудь цветом; можно также определить (если хотим) цвет текста, который разместим на слое; можно задать рамку для слоя. Для этого применяют свойства: background, color и border. Цвет задается и номером, и английским названием, например:

style="position: absolute; top:0; left:0; width:600; height:100; margin:10; background: #8B0000; color: Red; border-color: #FF0000; border-width: 1px; border-style: solid"

Итак, в html-коде запись, указывающая на создание слоя, будет выглядеть так:

<DIV style="position: absolute; top:0; left:0; width:600; height:100; margin:10; background:#8B0000; color: Red; border-color: #FF0000; border-width: 1px; border-style: solid; z-index:-1"></DIV>

Внутри парного тега DIV располагаются элементы, которые должны находиться в пределах этого слоя (это может быть что угодно: текст, таблицы, формы и пр.). Они будут иметь один и тот же z-index, аналогичный z-index'у слоя, и располагаться в окне браузера с левого края (left:0), в темно-бордовом прямоугольнике (background: #8B0000) размером 590Х90 пикселей (width: 600; height: 100; margin: 10), с одинарной красной рамкой толщиной в один пиксель (border-color: #FF0000; border-width: 1px; border-style: solid).

Цвет текста, находящегося в прямоугольнике, красный (color: Red), размер и начертание шрифта те же, что установленны по умолчанию для браузера (в теге body). Если, конечно, последние два параметра не заданы стилями в теге <P>.

Главное достоинство страницы со слоями - каждый элемент располагается на своем месте. Поэтому страница отображается одинаково во всех браузерах, какие бы настройки по умолчанию он не имел.

Ну а теперь применим теорию на практике и всё-таки выстроим пару-тройку таблиц в ряд.

Для упражнения создаём отдельный html-файл. Можно назвать его как угодно, например, «слои.html». Сервер нам здесь не понадобится, поэтому файл можно поместить где угодно, например, в «Мои документы»... (Читать дальше >>>)

Автор: Андрей Чернобай

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Читать также:

Защита Вашего сайта от копирования

Защищаемся от… поисковых систем

Все о тэге Title

Логические теги

Строим таблицы в ряд

Ваше мнение для нас ценно:



Введите цифровой код с картинки*:

Подпишитесь на рассылку
"Вокруг Сайта "
и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта


Узнать подробней о рассылке "Вокруг Сайта" >>






PHP-песочница
Подписаться письмом



Карта
rss
Карта