Macromedia Dreamweaver MX

Работа со свободно позиционируемыми элементами

Теперь рассмотрим, как в Dreamweaver создаются свободно позиционируе­мые элементы.

Создание свободно позиционируемых элементов

Создайте в Dreamweaver новую Web-страницу. С ней мы и будем экспери­ментировать.

Однако прежде, чем начинать свои эксперименты, давайте выполним неко­торые предварительные операции. Сначала включим измерительные линей­ки, для чего включим пункт-выключатель Show в подменю Rulers меню Modify или нажмем комбинацию клавиш <Ctrl>+<Alt>+<R>. После этого включим координатную сетку, включив пункт-выключатель Show Grid под­меню Grid меню View или нажав комбинацию клавиш <Ctrl>+<Alt>+<G>. И напоследок включим "прилипание", включив пункт-выключатель Snap То Grid подменю Grid меню View или нажав комбинацию клавиш <Ctrl>+ +<Alt>+<Shift>+<G>. Подробнее обо всех этих манипуляциях см. главу 8.

( Примечание )

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

Чтобы создать свободно позиционируемый элемент, проще всего нажать кнопку Draw Layer (рис. 11.3), расположенную на вкладке Common панели объектов.

Рис. 11.3. Кнопка Draw Layer панели объектов

Однако после нажатия этой кнопки новый свободный элемент на странице не появится. Его нужно будет нарисовать примерно так же, как мы рисова­ли ячейки и таблицы разметки в главе 8. Поместите курсор мыши в окно документа — вы видите, что он принял вид крестика. Это значит, что те­перь вы можете нарисовать свободный элемент. Щелкните мышью туда, где должен быть его верхний левый угол, и проведите мышью, не отпуская ее левой кнопки. Вы увидите, что между курсором мыши и точкой, где вы щелкнули, тянется прямоугольник, обозначающий границы вновь создавае­мого элемента. После того как он примет желаемые размеры, отпустите ле­вую кнопку мыши. Все, свободно позиционируемый элемент готов (рис. 11.4).

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

Посмотрите на рис. 11.4. Изображенный на нем свободный элемент в на­стоящий момент выбран. Текстовый курсор находится внутри него, поэтому вы сразу же можете создать какое-либо содержимое. Чтобы выйти из сво­бодного элемента, щелкните мышью где-либо вне его. А чтобы вернуться в свободный элемент, щелкните мышью по нему (но не по его границе).

Заметьте, что граница невыбранного свободного элемента отображается тускло-серым цветом, чтобы не отвлекать вас. Если же она вам все-таки мешает, вы можете отключить показ границ невыбранных свободных эле­ментов. Для этого отключите пункт-выключатель Layer Borders подменю Visual Aids меню Views. После этого границы невыбранных свободных эле­ментов пропадут, однако граница выбранного элемента все еще будет видна.

Теперь щелкните где-нибудь на границе свободного элемента. Вы также можете щелкнуть внутри свободного элемента, удерживая нажатой клавишу <Shift>. Результат показан на рис. 11.5.

Как видите, в данном случае свободно позиционируемый элемент предлагает вам набор маркеров изменения размера. Кроме того, в верхнем левом углу вы видите небольшой прямоугольник, называемый "захватом” (рис. 11.6). "Ухватившись" за него мышью, вы можете двигать свободный элемент. Точ­но такого же результата можно достичь, "ухватившись" мышью за саму гра­ницу элемента, но специальный "захват", согласитесь, удобнее. Щелкнув по нему, вы также сможете выделить границу свободного элемента.

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

Рис. 11.7. Значок свободно позиционируемого элемента

Чтобы удалить свободный элемент, выделите его границу и нажмите кла­вишу <Эе1>.

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

Вы уже знаете, что свободно позиционируемые элементы могут перекрывать друг друга. Обычно элементы, созданные позже, перекрывают элементы, созданные раньше, но вы можете изменить порядок перекрытия. Для этого выберите нужный свободный элемент и в подменю Arrange меню Modify выберите пункт Bring То Front, чтобы увеличить z-индекс элемента, или пункт Send То Back, чтобы его уменьшить. Однако эти пункты работают очень странно, и для задания z-индекса вам лучше воспользоваться другими средствами, описанными ниже.

В том же самом подменю Arrange меню Modify находится пункт-выклю­чатель Prevent Layer Overlaps. Если он включен, Dreamweaver не позволит вам "наложить" один свободно позиционируемый элемент на другой, т. е. вы не сможете ни переместить его, ни изменить его размеры так, чтобы он перекрыл другие свободные элементы. Однако те элементы, которые уже "лежат" на других, останутся на своих местах.

Сохраните готовую Web-страницу под именем lL3.htm.

Параметры свободно позиционируемых элементов

Набор параметров свободных элементов, которые мы можем задать в Dreamweaver, весьма обширен. Все они будут представлены в редакторе свойств, когда вы выделите границу свободного элемента (рис. 11.9).

В поле ввода Layer ID вводится уникальное имя свободного элемента. Dreamweaver по умолчанию подставляет туда автоматически сгенерирован­ное ИМЯ вида Laуег<Порядковый номер'-. Если хотите, можете ввести более вразумительное имя. Вы можете также выбрать пункт ID контекстного меню свободного элемента и ввести новое имя в диалоговом окне Change Attribute.

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

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

В поле ввода Z-Index задается уже известный вам z-индекс, иначе говоря, порядковый номер данного свободного элемента в "стопке" других. Эта ве­личина может быть как положительной, так и отрицательной. Свободный элемент перекрывает все элементы с меньшим значением z-индекса и пере­крывается элементами с большим его значением. Кроме того, свободный элемент перекрывает обычное содержимое страницы, лежащее в "потоке" текста.

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

□ inherit — заставляет элемент "наследовать" видимость от родителя, т. е. если родитель видим, видим и сам элемент, и наоборот;

□ visible — делает элемент видимым;

□ hidden — делает элемент невидимым (скрытым);

□ default — как правило, аналогично inherit.

Похожую функцию выполняет подменю Visibility контекстного меню сво­бодного элемента. Оно содержит те же четыре пункта, что и раскрываю­щийся список Vis.

В поле ввода Bg Image вводится имя файла графического изображения, ко­торое будет использовано в качестве фона. Вы также можете щелкнуть зна­чок папки, расположенный справа от поля ввода, и выбрать нужный файл

В появившемся на экране диалоговом окне Select File.

С помощью селектора цветов Bg Color задается цвет фона свободного эле­мента.

В раскрывающемся списке Tag выбирается тег, с помощью которого созда­ется свободно позиционируемый элемент. Этот список содержит только два пункта: SPAN и DIV. Их назначение должно быть вам понятно. По умолча­нию свободный элемент создается с использованием тега <div>.

Аналогичную функцию выполняет подменю Tag контекстного меню сво­бодного элемента. Оно содержит те же четыре пункта, что и раскрываю­щийся список Tag.

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

□ visible — заставляет свободный элемент растянуться по вертикали, чтобы вместить в себя все содержимое;

□ hidden — просто скрывает ("обрезает") ту часть содержимого свободного элемента, которая превышает его размеры;

□ scroll — заставляет свободный элемент отобразить полосы прокрутки не­зависимо от того, помещается ли в нем все содержимое или нет;

□ auto — заставляет свободный элемент отобразить полосы прокрутки только тогда, когда его содержимое в нем не помещается;

□ пункт <пустая строка> — аналогичен visible (значение по умолчанию).

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

Группа полей ввода Clip позволяет задать координаты видимой области сво­бодного элемента. Каждый свободный элемент может иметь такую видимую область, иначе говоря, фрагмент содержимого, который виден в окне Web- обозревателя. Содержимое, не входящее в эту область, скрывается. Задание видимой области может понадобиться для создания каких-либо спецэффек­тов на Web-странице.

В группу полей ввода Clip входят четыре поля:

□ L — горизонтальная координата верхнего левого угла;

□ Т — вертикальная координата верхнего левого угла;

□ R — горизонтальная координата нижнего правого угла;

□ В — вертикальная координата нижнего правого угла.

Работа с группой свободно позиционируемых элементов

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

Чтобы выделить сразу несколько свободных элементов, поступите следую­щим образом. Сначала выделите один из них, щелкнув на нем мышью (вы­делен сам элемент или его граница — значения не имеет). После этого щелкните на границах всех остальных элементов, удерживая нажатой кла­вишу <Shift>. Все элементы, по границам которых вы щелкнули, будут вы­делены. Заметьте, что маркеры изменения размеров всех этих элементов, кроме того, на котором вы щелкнули в последнюю очередь, будут иметь ВИД белых, а не черных квадратов (рис. 11.10).

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

Также вы можете изменить размеры выделенных элементов. Точнее, урав­нять их ширину или высоту. Для этого выберите в подменю Align меню Modify, соответственно, пункт Make Same Width (или нажмите комбинацию клавиш <Ctrl>+<Shift>+<7>) или Make Same Height (комбинация клавиш <Ctrl>+<Shift>+<9>).

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

Для задания выравнивания используется четыре других пункта подменю Align меню Modify:

□ Left (комбинация клавиш <Ctrl>+<Shift>+<l>) — выравнивание по ле­вому краю;

□ Right (комбинация клавиш <Ctrl>+<Shift>+<3>) — по правой стороне;

□ Тор (комбинация клавиш <Ctrl>+<Shift>+<4>) — по верхней стороне;

□ Bottom (комбинация клавиш <Ctrl>+<Shift>+<6>) — по нижней стороне.

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

И наконец, вы можете задавать некоторые параметры сразу для нескольких свободных элементов. К таким параметрам относятся: местоположение и размеры (поля ввода L, Т, W и Н редактора свойств), видимость (раскры­вающийся список Vis), тег (раскрывающийся список Tag), фоновое изобра­жение (поле ввода Bg Image) и цвет фона (поле ввода Bg Color).

Работа со свободно позиционируемыми элементами

Если на вашей странице создано несколько свободно позиционируемых элементов, управлять ими удобнее всего в специальной панели. Панель Layers появляется на экране после включения пункта-выключателя Layers подменю Others меню Window или нажатия клавиши <F2>. Вы можете так­же щелкнуть по любому свободному элементу правой кнопкой мыши и вы­брать в контекстном меню пункт Layers Panel. Сама эта панель показана на рис. 11.11.

Как видите, большую часть этой панели занимает список свободно пози­ционируемых элементов, имеющихся на странице. Данный список пред­ставляет собой таблицу, состоящую из трех колонок: изображение глаза (видимость), Name (имя свободного элемента) и Z (z-индекс). Вы можете менять размеры двух последних колонок, перетаскивая мышью границу между ними. И, разумеется, любой из элементов, перечисленных в списке, можно выбрать и произвести над ним предусмотренные в Dreamweaver ма­нипуляции.

В верхней части панели находится флажок Prevent Overlaps. Если он вклю­чен, Dreamweaver следит, чтобы свободные элементы не перекрывали друг друга. Этот флажок аналогичен пункту Prevent Layer Overlaps, находящему­ся в подменю Arrange меню Modify. Так что вы можете пользоваться либо пунктом меню, либо флажком.

Пункты списка свободных элементов выбираются так же, как пункты любо­го другого списка. Но, кроме того, вы можете выбрать сразу несколько эле­ментов. Для этого выберите первый элемент обычным щелчком мыши, по­сле чего щелкните на остальных элементах, удерживая нажатой клавишу <Shift>.

Как только вы выбираете какие-либо из элементов, они тотчас же отобра­жаются в окне документа как выделенные. Это очень удобно — вы сразу же видите, какие именно свободные элементы вы выбрали. И, наоборот, когда вы выделяете один или несколько элементов в окне документа, они отобра­жаются выбранными в панели Layers.

Вы можете изменить имя любого из свободных элементов, перечисленных в списке. Для этого используется уже знакомая вам методика: вы выбираете соответствующий пункт списка и щелкаете по нему снова в колонке Name (имя). (Возможно, щелкнуть придется дважды.) После этого вместо имени свободного элемента появится поле ввода, в котором вы сможете ввести новое имя. Не забудьте нажать клавишу <Enter> для сохранения нового имени или клавишу <Esc> — для отказа от него и возврата к старому имени.

Теперь обратите внимание на колонку Z списка элементов. Дело в том, что свободные элементы отображаются в списке в том порядке, в котором они перекрывают друг друга. Иначе говоря, они отсортированы по z-индексу. И Dreamweaver предоставляет вам несколько возможностей по изменению данного порядка.

Самый простой способ изменить порядок перекрытия — это перетащить нужный элемент на новое место в списке. При этом Dreamweaver сам изме­нит значения z-индексов всех свободных элементов, расположенных на странице. Увы, иногда он делает это не очень корректно; в таком случае не обойтись без ручной коррекции, о которой мы сейчас и узнаем.

Если вы хотите точно управлять перекрытием одними свободно позициони­руемыми элементами других, задайте значения z-индекса вручную. Для это­го также выберите нужный элемент в списке и снова щелкните по нему в колонке Z. Вместо значения z-индекса появится поле ввода, в котором вы сможете ввести новое значение, после чего нажмите клавишу <Enter> для

Его сохранения или клавишу <Esc> — для его отмены. Останется только

Проверить и, если нужно, изменить значения z-индекса у соседних свобод­ных элементов в списке, чтобы они не совпадали с уже введенным.

Также панель Layers предлагает вам самый простой способ изменить види­мость свободного элемента. Для этого используется колонка с изображени­ем глаза, самая левая в списке. Выберите нужный элемент в списке и по­следовательно щелкайте по нему в колонке со значком глаза. При этом со­держимое колонки будет последовательно меняться:

□ изображение закрытого глаза — элемент невидим;

□ изображение открытого глаза — элемент видим;

□ пустая колонка — элемент "наследует" видимость у родителя.

В качестве примера см. рис. 11.12— на нем изображены все три значения параметра видимости, доступных для свободно позиционируемого элемента.

TOC o "1-5" h z <3fr|| Name | Z

O' Laj)er3 3

A - Layer2 2

Layerl 1

Рис. 11.12. Три свободно позиционируемых элемента (сверху вниз): невидимый, видимый, "наследующий" видимость у родителя

Самая интересная возможность, предлагаемая панелью Layers, — возмож­ность "переноса" одних элементов в другие. Иначе говоря, создание вло­женных элементов. Для этого также используется перетаскивание свобод­ных элементов с помощью мыши.

Выберите в списке свободный элемент, который вы хотите "вложить" в дру­гой. После этого найдите в списке элемент, в который вы хотите "вложить" выбранный, но не выбирайте его. А перетащите на него выбранный эле­мент, удерживая нажатой клавишу <Ог1>; при этом элемент, на который вы "тащите" выбранный, будет выделен тонкой синей рамкой. Осталось только "отпустить" перетаскиваемый элемент; на рис. 11.13 изображен результат этого действия. Также, возможно, придется подкорректировать г-индекс.

TOC o "1-5" h z ДЕ| Name | Z

Layer3 4

Е Layer2 2

I— Layer! 2

Рис. 11.13. Вложенные свободно позиционируемые элементы в списке панели Layers

Как видите, в случае наличия вложенных свободных элементов в списке создается "дерево", "растущее" из родителя. Вы можете упорядочивать вло­женные элементы, изменяя их z-индекс, независимо от невложенных эле­ментов. Также вы можете создавать целые структуры свободных элементов, многократно вложенных друг в друга. Пример такой структуры показан на рис. 11.14. Это вполне возможно сделать, правда, трудно вообразить себе такую ситуацию, когда бы такие структуры понадобились.

TOC o "1-5" h z Д | Name | Z

Layer6 7

- LayerS G

--Layer4 6

I Mlayerl 2

L Layer3 5

Рис. 11.14. Структуры свободно позиционируемых элементов многократной вложенности

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