Техника Web-дизайна для студента

Работа со слоями

Вид блока с рисунком 150 х 100 рх в окне браузера приведен на рис. 7.24.

Ля для) располагает возможностями по работе со слоями. В ча­стности, для прямоугольного блока, размеры которого задаются в этой же категории, можно указать номер слоя, в котором он должен находиться, и задать видимость слоя.

В программе Dreamweaver для этих целей есть более удобный инструмент. Чтобы отобразить этот инструмент, необходимо пе­рейти в стандартный режим: нажать кнопку Standard (Стандарт­ный режим) в группе инструментов Layout (Компоновка) панели Insert (вставка) (рис. 7.25), после чего становится активной кнопка Draw Layer (рисование слоя) [ц.

Щелкнем по кнопке Draw Layer (Рисование слоя). На странице указатель мыши примет вид небольшого крестика. Установив его на то место, где предполагается размещение левого верхнего угла слоя, нужно нажать кнопку мыши и, не отпуская ее, растя­нуть прямоугольник до нужного размера. Отпустив кнопку, под­вести указатель к границе слоя, чтобы он принял вид перекре­стья со стрелками, и щелкнуть мышью. Вокруг слоя появятся маркеры, а панель свойств Properties (Свойства) изменит свой вид (рис. 7.26).

Изменять размеры слоя и перемещать его можно как с помощью мыши, так и соответствующих полей на панели свойств Proper­ties (Свойства). Поля L (Left) и Т (Тор) определяют положение левого верхнего угла слоя относительно левого и верхнего краев страницы, а поля W (Width) и Н (Height) — ширину и высоту слоя.

Рассмотрим предназначение других элементов панели свойств Properties (Свойства) для работы со слоями.

□ Поле Z-Index содержит номер слоя. Для слоя, построенного первым, будет задано значение 1, для последующих слоев оно будет увеличиваться на единицу.

□ Список Vis (Visibility) позволяет выбрать один из четырех ва­риантов видимости слоя: default (по умолчанию), inherit (унаследованная видимость), visible (видимый), hidden (скры­тый).

О Поле Bg Image позволяет задать имя файла фонового изобра­жения слоя, а поле Bg Color — однородный цвет фона.

О Поле Layer ID содержит индивидуальное имя слоя, которое используется программой-сценарием при изменении его свойств.

О В списке Overflow (Переполнение) выбираются действия при переполнении слоя: visible (не поместившаяся часть содер­жимого слоя остается видимой по умолчанию); hidden (не поместившаяся часть содержимого слоя будет скрыта); scroll (слой снабжается полосами прокрутки); auto (полосы про­крутки устанавливаются только при переполнении слоя).

О Поля группы Clip задают прямоугольную область просмотра, за пределами которой содержимое слоя будет скрыто. В поля Т (Тор) и В (Bottom) вводятся расстояния от верхней грани­цы слоя до верхней и нижней границ области просмотра. В поля R (Right) и L (Left) — расстояния от левой границы слоя до правой и левой границ области просмотра.

Для удаления слоя его необходимо выделить и нажать клавишу < Delete >.

Создавая большое количество слоев, удобно пользоваться инст­рументальной панелью Layers (Слои) (рис. 7.27), которая откры­вается по команде меню Window | Layers (Окно | Слои).

С помощью инструментальной панели Layers (Слои) можно из­менять параметры отображения слоя в документе. Это позволяет выполнить значок с изображением глаза. Щелчок по полю левее имени слоя устанавливает изображение закрытого глаза, при этом слой становится невидим. Второй щелчок позволяет от­крыть глаз — слой делается видимым. Третьим щелчком глаз удаляется (слой видим). Установка изображения глаза означает, что в метку слоя <div> вводится параметр visibility со значе­нием hidden (скрытый) — глаз закрыт или visible (видимый) — глаз открыт. После удаления изображения глаза параметр visibility также удаляется.

Захватив имя слоя мышью, его можно переместить выше или ниже других слоев, при этом номер слоя (значение свойства z-index) будет автоматически изменено. Номер слоя можно из­менить вручную, щелкнув по нему мышью. После изменения номера нужно щелкнуть по имени слоя, и он переместится в соответствии с новым номером.

Имя слоя может быть изменено после двукратного щелчка по нему мышью. Выделение имени слоя на панели Layers (Слои) сопровождается выделением соответствующего слоя на стра­нице.

Установка флажка Prevent Overlaps (Предотвращать перекрытия) запрещает наложение слоев друг на друга.

Слои можно вкладывать друг в друга. Слой, выполняющий функции контейнера, будет являться родительским по отноше­нию к вложенным в него слоям, называемым дочерними слоями. Вложения слоев не следует понимать буквально. Вложенный слой может располагаться за пределами родительского слоя и иметь размеры, значительно превышающие размеры родитель­ского слоя. Зависимость дочернего слоя от родительского про­является в следующем:

□ координаты дочернего слоя отсчитываются от левого верхне­го угла родительского слоя, а не всей страницы. В связи

С этим перемещение родительского слоя приводит к переме­щению дочерних слоев;

□ дочерние слои наследуют некоторые свойства родительских слоев. Например, если свойство Visibility (Видимость) дочер­него слоя имеет значение inherit, то его видимость будет за­висеть от видимости родительского слоя;

О независимо от номера слоя дочерние слои располагаются по­верх родительского, а их расположение относительно других слоев определяется номером родительского слоя. Номер до­чернего слоя определяет лишь его положение относительно других дочерних слоев. Например, пусть имеется три слоя: SI, S2 и S3 с номерами 1, 2 и 3 соответственно. Слой S2 со­держит дочерние слои D1 и D2 с номерами слоев 1 и 2. Слои расположатся в следующей последовательности, начиная с нижнего слоя: SI, S2, Dl, D2, S3.

Вложение слоев можно осуществлять следующими способами:

□ расположить курсор внутри родительского слоя и дать ко­манду меню Insert | Layout Objects | Layer (Вставка | Объекты компоновки | Слой);

О используя инструментальную панель Layers (Слои), захватить мышью имя слоя и, удерживая клавишу <Ctrl>, наложить его на имя родительского слоя, отпустить кнопку мыши.

Результат вложения слоев Layer4 и Layer5 в слой Layer2 показан

На рис. 7.28.

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

Пример компоновки страницы с использованием слоев

Приведем пример компоновки страницы с использованием

Слоев.

□ Откроем пустой шаблон для создания HTML-документа.

О Используя кнопку Draw Layer (Рисование слоя), в левом верхнем углу рабочего поля изобразим слой, размеры которо­го можно сделать немного меньше размеров рисунка, поме­щаемого на этот слой. Аналогично разместим еще три слоя по диагонали рабочего поля (рис. 7.29).

О В центральной части изобразим еще один слой для размеще­ния в нем текста. Щелкнем мышью за пределами созданных слоев и напишем слово петродворец.

□ Осуществим форматирование текста, используя панель свойств Properties (Свойства): Font (Гарнитура) — Monotype Corsiva, Size (Размер) — 7, В (Начертание) — Bold (полужир­ное).

□ Вырежем текст, воспользовавшись кнопкой Cut (Вырезать) на панели инструментов Standard (Стандартная) и через буфер обмена вставим в предназначенный для него слой, используя кнопку Paste (Вставить) на этой же панели.

□ В остальные слои вставим предназначенные для них рисунки, используя команду меню Insert | Image (Вставка | Рисунок).

О Командой меню Window | Layers (Окно | Слои) откроем па­нель инструментов Layers (Слои). В списке слоев должно на­ходиться пять слоев от Layer 1 до Layer5. Захватив мышью имя слоя Layer2 и удерживая клавишу <Ctrl>, наложим его на имя слоя Layer 1. Теперь слой Layer2 стал дочерним по отноше­нию к слою Layer 1. Аналогично слой Layer3 сделаем дочер­ним по отношению к слою Layer4. Перемещая дочерние слои, добьемся того, чтобы они заняли нужное положение относительно родительских слоев. Перемещать выделенный слой можно не только мышью, но и клавишами управления курсором.

□ После этого можно приступить к изменению положения ро­дительских слоев Layer 1, Layer4 и слоя с текстом Layer5 отно­сительно друг друга, добиваясь требуемой компоновки. Бла­годаря вложенности слоев, дочерние слои Layer2 и Layer3 будут перемещаться вместе с родительскими, что упрощает процесс компоновки страницы.

О Результат проделанных действий изображен на рис. 7.29.