10.1. Macromedia DreamWeaver MX. Слои.Часть1.
Слой - это элемент веб страницы, который интересен в первую очередь для веб - дизайнеров, так как именно с помощью этих элементов вы сможете претворить в жизнь все ваши дизайнерские фантазии. Так же, использование слоев имеет и еще один плюс, а именно, слои, - это единственный элемент страницы (за исключением графики), который можно анимировать. Слои чем-то напоминают записки-липучки, которые прилепляются "поверх" веб- страницы. На одну веб- страницу можно прилепить сразу несколько (много!) слоев, так как они могут перекрываться и "находить" друг на друга. Слой может содержать в себе: текст, таблицы, графику, мультимедиа, формы, другие слои, веб- страницы ... и так далее (в общем те же элементы которые присутствуют на стандартных страницах).
Для создания слоя следует выбрать место на странице куда вы собираетесь вставить слой (кликнув мышкой), а затем дать команду Insert - Layer (Рис. 10.01).
Рис. 10.01
Другой способ, это на вкладке Common нажать кнопку "1" (Рис. 10.02)
Рис. 10.02
но в этом случае вам самим придется рисовать слой при помощи мышки. И в том и другом случае результат будет один и тот же, а сам слой будет выглядеть приблизительно так (Рис. 10.03)
Рис. 10.03
Чтобы переместить слой по странице - нажмите левой кнопкой мышки на прямоугольник помеченный на рисунке 10.03 цифрой "1", (указатель сменит вид на крестик) и не отпуская кнопку тащите слой в нужное место (Рис. 10.04)
Рис. 10.04
Для удаления слоя со страницы - кликните правой кнопкой мыши по объекту помеченному цифрой 2 (Рис. 10.03) и в раскрывшемся контекстном меню выберите пункт Cut (так же можно правой кнопкой мышки кликнуть и по цифре "1" того же рисунка и выбрать Cut).
Для изменения размера слоя нужно навести курсор на один из квадратиков расположенных по его (слоя) периметру, нажать левую кнопку мышки и снова "тянуть" куда надо (Рис. 10.05)
Рис. 10.05
Если же вы не хотите чтобы слои накладывались друг на друга или частично перекрывались, то в меню Modify поставте галочку напротив пункта Prevent Layer Overlaps (Рис. 10.06)
Рис. 10.06
Тогда вы не сможете накладывать (перекрывать) слои друг на друга, хотя те слои которые уже перекрываются останутся в прежнем состоянии.
Теперь самое время задать необходимые параметры для слоя. Для этого следует выделить слой и перейти на вкладку Properties (Рис. 10.07)
Рис. 10.07
В поле Layer ID вводится уникальное имя слоя, в поля L и T вводятся горизонтальная и вертикальная координаты верхнего левого угла слоя, а в поля W и H вводятся длина (ширина) и высота слоя. В поле Z-index вводится номер слоя, для чего он нужен - вот представьте, что на странице расположено сразу несколько слоев, да к тому же они еще и перекрываются друг другом. И как же можно будет указать "кто сегодня сверху, а кто снизу"- :) Вот и получается, что слой сам перекрывает все другие слои с меньшим значением Z-index, и в тоже время перекрываем другими слоями у кого значение Z-index больше. Значение Z-index может быть не только положительным, но и отрицательным. Чтобы было понятней, скажу, что слои с более высоким индексом расположены над слоями с более низким индексом.
Список Vis, принимаемые значения:
show - делает содержимое слоя видимым,
hidden - делает содержимое слоя невидимым,
inherit - использует свойства видимости родительского слоя.
С помощью поля BG Image - задается фоновый рисунок слоя, а с помощью поля BG Color - задается цвет фона слоя. В поле Tag задается тэг с помощью которого создается слой (это может быть как DIV, так и Span). А с помощью списка Overflow задается метод отображения тех элементов слоя, которые не влезли в его видимую часть. В общем принцип тот же, что и элементов Inframe
Я ничего не писал об Inframe в части посвященной фреймам по той причине, что DreamWeaver MX их не понимает, но они понимаются другими редакторами (например FronPage, тот который входит в состав офиса).
Так вот здесь (в слоях) принцип отображения тот же, всего в списке Overflow доступно четыре пункта (Рис. 10.08)
Рис. 10.08
visible - увеличивает размер слоя (вниз и направо) чтобы все его содержимое было видимо.
hidden - отсекает все содержимое слоя которое не влезло в видимую честь (размер слоя вы задаете сами).
scroll - добавляет к слою полосы прокрутки независимо от того, превышает ли содержимое размер слоя.
auto - добавляет к слою полосы прокрутки только тогда, когда содержимое слоя превышает его размер.
Набор полей Clip определяет видимую область слоя: поля L и T горизонтальная и вертикальная координаты верхнего левого угла, а R и B горизонтальная и вертикальная координаты нижнего правого угла видимой части слоя. Отсчет в данном случае ведется не от границы страницы, а от границы самого слоя. |
