Dreamweaver MX. Работа со слоями

Dreamweaver MX. Работа со слоями

В данной статье мы пока закончим отбивать хлеб насущный у разработчиков web-приложений и вернемся к работе, которую Dreamweaver без натяжек способен выполнять самым наилучшим образом — визуальной разработке дизайна web-страниц.

В предыдущих материалах цикла различные приемы разметки страницы рассматривались неоднократно. Мы уже умеем пользоваться таблицами, фреймами и специальным режимом визуальной разметки, присутствующим в пакете Dreamweaver MX — Layout View. Однако не все так просто, как кажется на первый взгляд. Простой текст не всегда обладает необходимыми выразительными средствами. Таблицы — это, конечно, хорошо, но все-таки они не были изначально предназначены для целей дизайна. О фреймы некоторые пишущие web-дизайнеры разве что ноги не вытирали, что нашло отражение на страницах многочисленных публикаций. В цикле статей о пакете Dreamweaver MX мы старались избегать радикальных точек зрения, исходя из мысли, что всякая к месту применяемая технология имеет право на жизнь. Тем не менее, поднятая проблема действительно имеет место быть. Выходом из названной ситуации может стать использование для разметки страницы таких специальных элементов, предназначенных для дизайна web-страниц, как слои (layers). Их предназначение состоит в том, что они позволяют позиционировать элементы на странице напрямую, без помощи вспомогательных структур вроде таблиц. Зачастую они применяются совместно с языками типа JavaScript, что позволяет реализовать довольно интересные эффекты.

Если вы работали с графическими пакетами, концепция слоев должна быть вам хорошо знакома. Слои в web-дизайне выполняют похожие функции — на них располагаются различные элементы содержимого страницы. Слои могут накладываться друг на друга, обладать различными параметрами прозрачности. Сам слой имеет форму прямоугольника, причем его местоположение на странице задается в абсолютных значениях — то есть вы можете точно указать его координаты в пикселях. Это дает возможность весьма гибкой работы над дизайном страницы, имея определенные преимущества по сравнению с использованием в этих целях таблиц.
Многие пакеты разработки web-страниц позволяют автоматизировать процесс написания кода слоев. Это немаловажно, поскольку здесь требуется повышенное по сравнению с теми же таблицами внимание к применяемым элементам. Соответствующие инструменты можно найти во многих редакторах — от интегрированного Mozilla Composer до, само собой, Macromedia Dreamweaver. Давайте попробуем поработать со слоями, используя возможности именно этого пакета.

Давайте для общего развития рассмотрим пример кода слоя, создаваемого пакетом Dreamweaver при установках по умолчанию.
<div id="Layer1" style="position: abso-lute; left:44px; top:115px; width:261px; height:65px; z-index:1; visibility: inherit;"> Полезное содержимое слоя
</div>

Как видите, здесь слой создается универсальными тегами <div></div> и содержит ряд описывающих его свойства опций, перечисленных в блоке style. Это не единственный вариант: для разметки слоев применяются и такие теги, как <span>, а также <layer> и <ilayer>. Названные варианты имеют свою историю и специфику. Разработчики Dreamweaver настоятельно рекомендуют пользоваться тегами <div> или <span> — не вижу серьезных оснований не прислушаться к их мнению, тем более, что некоторые инструменты пакета работают только с ними.
По умолчанию Dreamweaver MX пользуется для разметки тегом <div>. Он также может использовать вместо него во всех создаваемых слоях тег <span>, если его соответствующим образом настроить. Для этого потребуется открыть окно настроек программы (меню Edit — Preferences или комбинация Ctrl+U), где надо перейти на вкладку Layers. Здесь первое же поле — Tag — дает возможность выбора между <div> и <span>. Заметим, что потенциально несколько более проблематичные теги <layer> и <ilayer> Dreamweaver MX хоть и распознает правильно, но не приветствует их использование.
Вернемся к разбору кода. В разделе стиля слоя обратим внимание на некоторые основные параметры. Left и Top указывают координаты точки, в которой находится верхний левый угол слоя. Эти данные приводятся в абсолютном значении, а именно в пикселях. Приведенный выше код создает слой, левый верхний угол которого отстоит от левой границы страницы на 44 пикселя, и на 115 — от ее верхней границы. Опции Wight и Height содержат соответственно параметры ширины и высоты элемента. В результате у нас получается прямоугольник, четко позиционированный на странице.
Z-Index показывает, если можно так выразиться, глубину залегания слоя. Это значит, что по умолчанию самый первый, нижний, слой на странице будет иметь номер 1, расположенный выше него — 2 — и т.д. Это может иметь большое значение в случае пересечения нескольких слоев с определенными параметрами "прозрачности". В принципе, слоям можно присваивать любые номера, даже выраженные отрицательными числами, ведь главное тут — выстроить их по порядку.

Параметр visibility отвечает за визуальный вывод слоя на страницу — он может быть видимым и, например, скрытым. Во время работы над слоем в код могут добавляться и другие опции, которые мы рассмотрим по ходу дела.
Некоторые полезные инструменты для работы со слоями сосредоточены на панели инструментов Layers группы Advanced Layout. Вызвать ее можно кнопкой F2 или через меню Window — Others — Layers. Здесь вы увидите полный список слоев страницы, отсортированных по значению z-index — первый созданный слой будет самым нижним, все последующие будут находиться выше. Рядом с каждым слоем, кроме этого, может быть расположен значок в форме глаза. Щелкая по нему, вы можете на лету менять параметр visibility этого слоя.
Создать слой на своей web-странице можно двумя способами. Первый — кнопка Draw Layer панели Common группы Insert. После ее нажатия курсор примет форму крестика, после чего с его помощью можно нарисовать прямоугольник-слой. Если вам нужно разметить сразу несколько слоев, то удерживайте при рисовании нажатой кнопку Ctrl. Обратите внимание, что Dreamweaver помещает в раздел HEAD вашей страницы некоторый вспомогательный код JavaScript, а в начале раздела BODY появляется рассмотренный нами выше код, описывающий свойства собственно нового слоя.
Когда вы пользуетесь кнопкой Draw Layer, соответствующий код всегда будет добавляться в начале раздела BODY. Именно здесь и лежит отличие второго способа — добавление слоя через меню Insert — Layer. В этом случае код слоя можно поместить в любом месте кода страницы — он расположится там, где в этот момент находился курсор. Это не повлияет на видимое расположение слоя, ведь соответствующие опции прописываются в его коде, но следует иметь в виду данную особенность.

Как и таблицы, слои могут быть вложенными. В данном случае это означает, что код одного слоя располагается внутри кода другого слоя, чем обеспечивается их группировка. Создать вложенные слои можно так: нарисовать новый слой внутри существующего при нажатой кнопке Alt, поместить курсор внутрь слоя и выбрать пункт меню Insert — Layer. Если у вас уже есть несколько слоев, и вы хотите поместить какой-нибудь внутрь другого, откройте панель Layers, выделите тот слой, который вы желаете сделать вложенным, а потом перетащите его значок в списке на значок того, в который вы хотите его поместить, удерживая при этом клавишу Ctrl. По окончании операции вы увидите, что список слоев приобрел вид иерархической системы, отражающей структуру вложенных слоев на вашей странице.
С вложенными слоями, как и с другими сложными элементами дизайна, стоит работать вдумчиво и проверять результаты разными браузерами. На странице в визуальном режиме слой отображается как прямоугольник с тонкими черными границами и небольшим квадратиком в верхнем левом углу. Вы можете выделить для дальнейшей работы любой слой, щелкнув по его границе в Document Window, выбрав относящийся к нему тег на панели Tag Inspector или щелкнув по его имени в списке слоев на панели Layers группы Advanced Layout. Для выделения нескольких слоев сразу используйте клавишу Shift, когда будете щелкать по требуемым элементам.

После того, как вы выделили нужный слой (или слои), вы сможете произвести над ним ряд манипуляций. Появившиеся на границах элемента узловые точки подсказывают, что с их помощью можно изменять размеры слоя. При наведении курсора на границу слоя он приобретает вид крестика со стрелками на концах. Если теперь удерживать левую кнопку мышки, то элемент можно совершенно свободно перемещать по странице. Не следует забывать и про клавиатуру: переместить слой можно клавишами курсора, а если при этом еще нажать Ctrl, то вы сможете изменять размер элемента с шагом в один пиксель.
Более того, у вас есть возможность изменить размеры сразу нескольких слоев. Для такой мелкооптовой обработки выделите подопытные объекты и обратитесь к меню Modify — Align — Make Same Width для установки одинаковой высоты или Modify — Align — Make Same Height для получения одинаковых размеров по горизонтали, причем размеры будут приведены к соответствующим параметрам слоя, выбранного последним. Как вариант на панели Properties при выделении нескольких слоев появляется раздел Multiple Layers, где для них можно выставить точные значения. Поиграйте некоторое время с этими приемами — и вы быстро разберетесь, что тут к чему.
Слои можно выравнивать по координатной сетке, для чего вначале нужно включить ее отображение (View — Grid — Show Grid или Ctrl+Alt+G). Теперь при манипуляциях с нажатыми клавишами Ctrl+Shift слой будет перемещаться или менять размер в соответствии с шагом сетки. Техника перемещения нескольких слоев одновременно не сильно отличается от таковой для изменения размеров — выделяем требуемые слои, после чего тащим их на новое место или пользуемся курсорными клавишами на клавиатуре.

Установить основные настройки слоя можно с помощью всегда находящейся у нас под рукой замечательной панели Properties. Здесь, как и в случае других элементов, с которыми мы работали раньше, при выделении слоя отображаются некоторые доступные для него опции. Первым делом стоит задать слою имя в поле Layer Id. Следующая остановка — группа значений, отвечающих за позиционирование элемента на странице. Здесь можно задать точные параметры отступа в пикселях от верхней, нижней и боковых границ страницы или родительского слоя (об этом немного ниже). Список Vis содержит доступные опции видимости слоя. Его значение по умолчанию — Default — не прописывает никакого конкретного значения параметру visibility. Большинство браузеров отобразят слой так же, как и в случае со следующим вариантом — Inherit, который означает, что слой непрозрачный и находясь над другим слоем перекроет его содержимое.
Установка параметра Visible — "видимый" — даст вам слой, содержимое которого будет отображено в любом случае. Если это вложенный слой, то данная опция перекроет значение, выставленное для родительского слоя. Если вы теперь посмотрите на значок слоя на панели Layers, то увидите, что там появилось изображение широко открытого глаза. Наконец скрытый слой — Hidden. Он не отображается на странице, тем не менее, занимая на ней отведенное место. При этом значок на панели Layers изменится на изображение закрытого глаза.
Значение опций Bg Image и Bg Color вам уже знакомо по примеру других элементов. Это фоновый рисунок и цвет — на этот раз слоя. Если у вас открыта расширенная панель свойств, то с помощью поля Tag можно на месте изменить применяемый тег (выбор возможен между div и span), а также выставить значения Overflow и Clip.

Многие браузеры позволяют увеличивать при просмотре страницы размеры отображаемого текста. Если не принять дополнительных мер, то в результате неконтролируемого расползания элементов страница со слоями может приобрести совершенно непрезентабельный вид. Опция Overflow позволяет взять этот процесс под надзор. Установка значения Visible означает, что все содержимое слоя будет показано в полном объеме, даже если оно при этом выйдет за его границы. Hidden — будет показано ровно столько, сколько помещается в пределах, отведенных слою. Scroll создает на слое полоски скроллинга, которые отображаются постоянно, а не только в случае увеличения элементов. Значение Auto представляется более гибким — в этом случае элементы прокрутки создаются только при необходимости, когда содержимое откровенно не помещается в отведенном слою пространстве. Опция Clip позволяет создать в пределах слоя рамку, при этом содержимое слоя, не попавшее в ее пределы, станет невидимым. Управлять размерами рамки можно изменяя значения L (Left), R (Right), T (Top) и B (Bottom). При этом помните, что это не отступы от соответствующих границ слоя, а значения размеров рамки. Здесь тоже лучше всего попробовать поработать с ними на практике — это быстрейший способ разобраться в действии названной опции. Добавление к слою полезного содержимого производится простым и очевидным способом — щелкните внутри границ слоя и вносите текст, добавляйте изображения и другой контент стандартными способами, которые были неоднократно рассмотрены нами в предыдущих статьях серии, например, посвященных таблицам.
На этом мы не прощаемся со слоями. Как было упомянуто ранее, слои могут накладываться друг на друга и дополняться кодом JavaScript, что иногда может быть полезно. Эти случаи, а также некоторые другие, более сложные приемы работы со слоями в пакете Dreamweaver MX станут предметом следующей статьи.

Алексей Кутовенко, alteridem@tut.by

компьютерная газета


Компьютерная газета. Статья была опубликована в номере 36 за 2004 год в рубрике soft :: интернет

©1997-2024 Компьютерная газета