Zabawa na warstwach, czyli "zakładanie dwóch sukienek"

Jako że na forum pojawiło się pytanie o “założenie dwóch sukienek” postanowiłam pobawić się w tłumaczenie zawiłości tego jakże ciężkiego zagadnienia, które gdy już się zrozumie okazuje się być całkiem proste. Ja sama w chwili pisania tego posta mam założone trzy spódnice i dwie “kurtki” (chociaż to drugie wyszło przypadkiem). Postaram się Wam przedstawić jak najprostszą, a jednocześnie możliwie najbardziej skróconą wersję “tutoriala”. Mam nadzieję, że po tym poście zabawa na warstwach nie będzie miała przed Wami żadnych tajemnic, ale w razie czego zawsze możecie zadawać swoje pytania w komentarzach. :)
Ja gram na Mozilli i nie posiadam Google Chrome, więc za wszelkie rozbieżności nie odpowiadam. Wszystko powinno wyglądać podobnie, ewentualne różnice są pewnie czysto kosmetyczne.

Na początek zakładamy element, który chcemy przenieść na inną warstwę i dowolne "coś" z tej warstwy, co zostanie zastąpione (czyli jak chcemy wrzucić spódnicę zamiast kolczyków to wybieramy naszą spódnicę i dowolne kolczyki). Całą zabawę z kodami i linkami musimy zacząć od otworzenia panelu programistów (wiem, brzmi strasznie, jeszcze straszniej wygląda, ale my chcemy oswoić bestię!). W tym celu wchodzimy do Szafy i klikamy na naszą miss prawym przyciskiem myszy. Z opcji, które nam się pojawiły wybieramy "Zbadaj element" i nie przerażamy się okienkiem, które nam wyskoczy.

Owe okienko to właśnie tajemniczy i przerażający panel programistów. Dla ludzi zaprzyjaźnionych z HTMLem powinien wyglądać zrozumiale – dla mnie wyglądał i dzięki temu sama poradziłam sobie z ogarnięciem warstw, chociaż instrukcja, z której korzystałam, była mocno okrojona. Wracając do meritum, po otworzeniu panelu szukamy warstwy, na której leży nasz element, który chcemy przenieść w inne miejsce. (Kawałek niżej macie wypisane po kolei warstwy, więc nie powinno być problemu.)

Po znalezieniu interesującej nas warstwy szukamy w kodzie fragmentu, który zaczyna się od "style=" i klikamy dwa razy w dowolnym miejscu za. W ten sposób otworzymy sobie możliwość edytowania tego fragmentu i będziemy mogli przejść do naszej wisienki na torcie.

W otworzonym przed chwilą do edycji fragmencie kodu szukamy części "background: url(http://dowolnylink.com)". Link w nawiasie kopiujemy albo podmieniamy, w zależności od tego, na jakim etapie pracy na warstwach jesteśmy. Jeśli dopiero szukamy naszego elementu, który chcemy wrzucić na inną warstwę – kopiujemy, a kiedy już go znaleźliśmy i mamy otworzoną do edycji warstwę, na którą chcemy go wrzucić – podmieniamy.

Aby wyjść z edycji danego fragmentu kodu wystarczy kliknąć gdzieś obok w tym panelu programistów. Zmianę w stroju od razu przeniesie Wam na Waszą miss.

Następnie zamykamy panel programistów i koniecznie zapisujemy nasze czary-mary. Pamiętajcie, aby nie najechać na żadną z miniaturek po prawej, bo będzie trzeba zaczynać wszystkie zamiany od nowa! (A przynajmniej na mojej Mozilli trzeba.)

Po zapisaniu zamiany możecie już normalnie edytować strój w szafie – na przykład zdjąć "nadprogramowy", podwojony element czy dodać jakieś rzeczy z innych kategorii niż są w użyciu. Grunt to nie wrzucić na miss czegoś z kategorii, którą zajęliśmy dla naszego przeniesionego elementu, bo ją "rozbierzemy" z tej przeniesionej rzeczy. ;)

Uwaga!
Czasami rzecz nie chce się zapisać na danej warstwie. Wystarczy wtedy zrobić cały szacher-macher od nowa, ale przenosząc element na inną warstwę niż poprzednio. Zrobiliśmy raz, damy radę zrobić i drugi. ;)

Wszystkie "ubraniowe" warstwy:

Underwear - Bielizna
SockB - Rajstopy/Skarpetki, które są włożone w buty
ShoesB - Buty, które są schowane pod spodnie
Pants - Spodnie
SockF - Rajtopy/Skarpetki, które są założone na buty np. getry
ShoesF - Buty, w które schowane spodnie (tzn. buty nie są zasłaniane przez spodnie, są na wierzchu)
Skirt - Spódnica
Top - Bluzka
Dress - Sukienka
Glove - Rękawiczki
Ring - Pierścionek
Coat - Okrycie wierzchnie
Belt - Pasek
Necklace - Naszyjnik
BagB - Torebka, czyli dowolna rzecz do ręki
Bracelet - Bransoletka
Earrings - Kolczyki
Glasses - Okulary
Hat - Kapelusz
BagF - Torebka, czyli dowolna rzecz do ręki.

Jak można łatwo zauważyć, są dostępne czasami dwa rodzaje tej samej kategorii (Sock, Shoes, Bag). Różnią się one w kodzie elementem z-index, który “po normalnemu” oznacza kolejność, w której są wyświetlane rzeczy. Im coś ma większy z-index, tym jest bardziej “na wierzchu” (czyli nie nachodzą na owe coś inne elementy), a im mniejszy - tym bardziej pod spodem (schowane pod innymi elementami). Ot, cała filozofia. Czasami rzeczy wrzucone do tej samej kategorii, ale na różnych warstwach mogą robić problemy z zapisaniem stroju, ale nie jest to regułą. Tak samo jak nie zawsze jest problem z zapisaniem sukienki, spódnicy i spodni jednocześnie. Wszystko zależy i trzeba próbować.

Uwaga!
Całość została wytłumaczona w wersji "dla opornych" i ja wiem, że można to wszystko wykonać w mniejszej liczbie kroków. Dla początkujących jednak wydaje mi się to być najprzystępniejszą wersją zabawy na warstwach, z czasem na pewno każdy dojdzie do tego, jak przejść przez całość szybciej. :)

Bardzo chętnie przyjmę wszelkie uwagi, szczególnie że tutorial był robiony w wersji "na szybko" i mogłam coś przeoczyć. Nie bójcie się pytać, ja nie gryzę! :)