Слоят (layer) e правоъгълен контейнер за HTML съдържание, който можете да позиционирате на точно място в прозореца на браузъра. Всичко, което можете да разположите в HTML документ (текст, изображения, таблици, други слоеве) можете да поставите и в слой. Слоевете са подходящи за разполагане на елементи един върху друг или така, че да се припокриват. Те се поддържат само от браузъри с версии 4.0 или по-нови. В комбинация със CSS те могат да контролират разположението и външния вид; при използването им заедно с поведения осигуряват интерактивност. Слоят се идентифицира с тага div.
2. Създаване на слой
1н.) Insert/Layout Objects/Layer
2н.) свойствата на слоевете, определящи разположението и позиционирането им да се включат във външен CSS – използват се чрез експортиране на вътрешни стилове или чрез предварителното им създаване във външен стил.
3н.) изчертаване на слой върху страницата – кодът се вмъква в горната част на страницата, без да бъде разделен от абзаци или от друг код.
1) Лента Insert, категория Layout, бутон Standard, бутон Draw Layer
При преместване на курсора в прозорец Document той става на знак (+). Издърпайте мишката, за да създадете слоя и отпуснете бутона й – появява се правоъгълник, в който се намира слоя.
2) Edit/Preferences, категория Invisible Elements
□ Anchor Points For Layers (“Точки на закотвяне на слоевете”); ОК
Вижда се маркер за слоя в горната лява част на прозорец Document. Очертанието на слоя се оцветява в синьо при селектирането му.
Кодът на слоя се добавя в горната част на страницата непосредствено след тага
body. Dreamweaver използва тага div
за създаване на слоеве с абсолютно позициониране спрямо горната и лявата страна на прозореца на браузъра. Тагът
div
Позволява на посетителя да „вземе” слой в прозореца на браузъра и да го премести на различно място на страницата. Това е отлично средство при създаване на интерактивни игри или инструменти за обучение с елементи, които потребителите могат да преместват.
1) селектирайте тага
body
- поведението Drag Layer не може да бъде директно приложено към слой. Необходимо е да го приложите към тага
body
на документа.
2) панел Behaviors, бутон (+), меню Actions, Drag Layer
3) отваря се диалогов прозорец Drag Layer страница Basic
Layer – избирате слой
Movement – съдържа следните опции:
Constrained – за контролиране на посоката и размера на отместването в пиксели при издърпване на слоя от потребителите. Възможно е преместване на слоя в 4-те посоки чрез полетата up, down, left и right. За преместване само в хоризонтална посока въведете стойност 0 на полетата up и down, а само за вертикално преместване - въведете стойност 0 на полетата left и right.
UnConstrained – потребителите ще могат да преместват слоя на произволно място в страницата.
Drop Target – ако имат целева област, където желаете потребителите да поставят слоя, можете да посочите мястото й като въведете лявата и горната стойност на слоя в целевата му позиция.
Snap if within – прилепване на слоя към целевата му позиция, когато бъде преместен достатъчно близо (в рамките на определен обхват от пиксели). страница Advanced – от нея се контролират z-индексите при преместване на слоя.
2. Поведение Show-Hide Layers
Използва се за контролиране на видимостта на слой и за промяната й в зависимост от действията на потребителите.
а) показване на слой при преместване на курсора на мишката над изображение от друг слой
1) създайте 2 слоя с имена Layer1 и Layer2. Добавете в Layer1 изображение с име Image1, в Layer2 някакъв текст.
2) направете Layer2 скрит слой
3) селектирайте изображението Image1
- въведете знака # в поле Link на панел Properties; Enter
- панел Behaviors, бутон (+), Show-Hide Layers
4) отваря се диалогов прозорец Show-Hide Layers, който съдържа списък със слоевете на страницата
Named Layers – изберете слоя Layer2 и натиснете бутон Show.
До слоя Layer2 се появява текста (Show); ОК
панел Behaviors, меню Show all Events – изберете A onMouseOver
б) скриване на слой при преместване на курсора на мишката извън изображение от друг слой – повторете стъпките от 3) и 4) като в 4) натиснете бутона Hide вместо Show и изберете A onMouseOut вместо A onMouseOver.
3. Конвертиране на слоеве в таблици
1. Необходимост
По-старите браузъри не поддържат слоеве. За това е добре да ги конвертирате в таблица (имената на слоевете изчезват) и по този начин да осигурите алтернативна страница за потребителите с браузъри, които не поддържат слоеве.
2. Ограничения
а) не могат да се използват вложени слоеве и слоевете не могат да се припокриват
б) не може един или група слоеве да се конвертират в таблица, а други да се запазят в непроменен вид – цялата страница и всички слоеве, които съдържа, се конвертират в таблица.
3. Алгоритъм
1) панел Layers, □ Prevent OverLарs (без припокриване)
В прозореца Document разположете слоевете, така че да не бъдат прекалено близо един до друг и да не се припокриват.
2) премахнете поведенията, които се прилагат към слоеве или оказват влияние върху тях (ако има такива) – селектирайте елемент (изображение, таг), в панел Behaviors изберете поведение (Drag Layer, Show-Hide Layers) и натиснете бутона Remove Event
3) Modify/Convert/Layers to Table
4) отваря се диалогов прозорец Convert Layers to Table със следните опции:
• Most accurate – за създаване на отделна таблица за всеки слой, както и допълнителни клетки, чиято роля е да запазят пространството между слоевете.
• Smallest: collapse empty cells – подравнява ръбовете на слоевете, ако са позиционирани в рамките на посочения брой пиксели. При избиране на тази опция резултатната таблица ще има по-малко празни редове и колони.
• Use transparent GIFs – запълва последния ред на таблицата с прозрачни GIF изображения, което осигурява еднаквия й вид във всички браузъри. При избиране на тази опция, няма да можете да редактирате получената таблица чрез издърпване на колоните й с мишката.
• Center on page – центрира получената таблица на страницата.
• Layout tools – позволява да конфигурирате всички желани настройки за разположението и мрежата.
Изберете настройки и ОК.
5) премахнете всички стилове, които използват имената на слоевете