Слоеве

е блоков елемент, започва на нов ред или с нов блок. Други блокови елементи са p (за абзац) и ul (за неномериран списък). Блоковите елементи могат да съдържат други такива, както и инлайн елементи (обикновено съдържат само текст). Примери за инлайн елементи са span – за обхващане, br
– за край на ред, a – котва или хипервръзка.
За да начертаете няколко слоя последователно натиснете Ctrl докато чертаете първия слой.

3. Селектиране на:

а) един слой
1н.) щраквате върху жълтия маркер на слоя
2н.) щраквате върху тага му в Tag Selector или върху името му в панел Layers от групата панели CSS

3н.) позиционирайте курсора над рамката на слоя (тя се оцветява в червено) и щракнете с мишката, когато той се превърне в стрелка с 4 посоки
4н.) щракнете с мишката в слоя и едновременно с това натиснете Shift Сега слоят има квадратен етикет в горната си лява част. Това е манипулаторът за селектиране на слоя. Името на слоя е осветено в панел Layers б) няколко слоя – Shift и кликвате върху името на слоя в панел Layers Последно избраният слой има плътни манипулатори, а при другите те са само очертани.

4. Добавяне на съдържание в слой

1) селектирайте слоя и поставете курсора в него
2) вмъкнете съдържание
Слоевете винаги се разширяват, така че да се вижда цялото им съдържание, освен ако не промените настройката Overflow в панел Properties. Ако слоят е по-голям от съдържанието си, той не променя размерите си.

5. Именуване на слоеве

Dreamweaver автоматично присвоява стандартни имена в числов ред: Layer1, Layer2,…
1н.)
1) отворете панел Layers (Window/Layers или панел CSS, Layers) – той предоставя списък с всички слоеве върху страницата. Ако курсорът се намира в даден слой, името му е удебелено в панел Layers, а маркерът му за селектиране се появява в прозорец Document и показва, че слоят е активен, но не е селектиран.
2) щракнете 2 пъти върху желания слой и въведете име; Enter
2н.) селектирайте слоя и въведете името му в поле LayerID в панел Properties
Не използвайте интервали и специални символи (включително долна черта) за имена на слоеве. Името на слоя трябва да бъде уникално – не използвайте име, използвано за друг слой или друг елемент, например изображение.

6. Модифициране на слоеве

а) промяна на размерите
– на един слой
1н.) селектирайте слоя и променете размерите му в полетата H и W в панел Properties; Enter.
Можете да използвате следните следните мерни единици: пиксели (px), pc (пики), pt (пунктове), in (инчове), mm, cm.
Overflow – контролира поведението на слоя, ако съдържанието му надвишава размера му. Има 4 опции:
• Visible – е подразбиращата се опция. Тя позволява увеличаване на размерите на слоя и разширяването му надолу и надясно дотолкова, колкото е достатъчно, за да бъде видимо цялото негово съдържание.
• Hidden – запазва размерите на слоя и „изрязва” съдържанието, което не се събира в него, без да се добавят ленти за превъртане.
• Scroll – добавя ленти за превъртане към слоя, независимо дали съдържанието надвишава първоначално определения размер.
• Auto – лентите за превъртане се появяват само когато съдържанието на слоя надхвърля границите му.
2н.) издърпайте с мишката някой от манипулаторите за оразмеряване
– на няколко слоя едновременно
1) маркирайте слоевете
2) Modify/Arrange/Make Same Width или Make Same Height
Първите селектирани слоеве се изравняват по ширина и височина с последния
б) определяне на област за изрязване – указва каква част от слоя ще бъде видима. Съдържанието извън нея остава скритo.
1) селектирайте слой
2) панел Properties, полета Clip – L, T, R, B
L – определя мястото между лявата рамка на слоя и лявата страна на съдържанието му
T – определя мястото между горната рамка на слоя и горната страна на съдържанието му
в) фон на слой
Bg image – фоново изображение на слоя
Bg color – фонов цвят за слоя
г) подравняване на слоеве
1) маркирайте слоевете
2) Modify/Arrange/Align Top, Align Left, Align Right, Align Bottom
Align Top–горнитеръбовенаслоеветесавзаимноподравнени

7. Промяна на стек – последователността (ред на припокриване) на слоеве

Извършва се чрез промяна на z-индекса на всеки от тях в панел Properties или панел Layers. Този индекс определя реда на изчертаване на слоевете в браузър. Слой с по-голям z-индекс излиза над другите с по-малки индекси. Стойностите могат да бъдат както положителни, така и отрицателни числа. Може няколко слоя да имат еднакъв z-индекс. Тогава отгоре се разполага този от тях, който се намира първи в кода.
1) селектирайте слоя в панел Layers
2) издърпайте го на желаното място в списъка
3) полето на z-индекса променя стойността си (както в панел Properties, така и в панел Layers). Слоят, раположен най-отгоре в спикъка има най-голям z-индекс.

8. Създаване на вложени слоеве

Това е начин за групирането на слоеве. Вложеният слой се мести заедно с родителския и наследява неговото ниво на видимост.
1н.) чрез панел Layers – селектирайте слоя и издърпайте с мишката името му над слоя, който ще е родителския, като в същото време натискате Ctrl. Отпуснете бутона, когато вложения слой се намира над родителския си. Вложеният слой се извежда под родителския си в панел Layers. При кликване върху знак (+) пред родителския слой се показва списъкът с вложени слоеве.
2н.) начертаване на вложения слой във вече съществуващ
1) Edit/Preferences, категория Layers, □ Nest When Created Within A Layer
2) Лента Insert, бутон Draw Layer

9. Промяна на видимостта на слой (т.е. слоят да бъде скриван и показван)

1н.) селектирайте слоя, щракнете в колона Visibility на панел Layers
В колоната на реда с избрания слой се появява икона със затворено око, която показва, че видимостта е скрита, а слоят временно изчезва. Опции за видимост:
• Inherit – ако е активна се използва свойството за видимостта на родителския слой. За тази опция няма показана икона в колоната за видимостта.
• Visible – ако е активна съдържанието на слоя е видимо, независимо каква е стойността за родителския слой. В колоната за видимостта има икона, изобразяваща отворено око.
• Hidden – ако е активна съдържанието на слоя е прозрачно, независимо каква е стойността за родителския слой. В случай че изберете тази опция за даден слой, единственият начин да го селектирате остава панела Layers. Когато тя е активна, в колоната за видимостта има икона, изобразяваща затворено око.
За да промените видимостта на всички слоеве едновремено щраквате върху иконата с изобразеното око отгоре в колоната.
2н.) селектирайте слоя, панел Properties, меню Vis

10. Промяна на опциите на:

а) размерната мрежа (Grid)
– извеждане на мрежа – View/Grid/Show Grid
– прилепване към мрежа – View/Grid/Snap to Grid
Слоевете прилепват към линиите на мрежата, когато ги преместите достатъчно близо до тях.
– промяна настройките на мрежата – View/Grid/Grid Settings
б) размерни линии (Rulers) – появяват се от горната и лявата страна на прозореца Document
– извеждане – View/Rulers/Show
– промяна на мерните единици – View/Rulers/Pixels, Inches, Centimeters

2. Използване на поведения към слоеве

1. Поведение Drag Layer

Позволява на посетителя да „вземе” слой в прозореца на браузъра и да го премести на различно място на страницата. Това е отлично средство при създаване на интерактивни игри или инструменти за обучение с елементи, които потребителите могат да преместват.
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) премахнете всички стилове, които използват имената на слоевете