Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00070 007773 10468579 na godz. na dobę w sumie
Po prostu Dreamweaver 4 - książka
Po prostu Dreamweaver 4 - książka
Autor: Liczba stron: 648
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-631-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> dreamweaver
Porównaj ceny (książka, ebook, audiobook).
Dreamweaver jest wspaniałym narzędziem. Jest on także jednym z najlepszych edytorów WYSIWYG (What You See Is What You Get, czyli 'uzyskasz dokładnie to, co widzisz'), jakie pojawiły się na rynku oprogramowania. Dreamweaver nie jest jedynie kolejnym graficznym narzędziem języka HTML. W programie można zrobić to wszystko, co w najlepszych edytorach: utworzyć tabele, edytować ramki, łatwo przechodzić z podglądu strony do podglądu kodu HTML. Jednocześnie przewyższa on inne edytory, gdyż pozwala tworzyć witryny WWW z wykorzystaniem DHTML (dynamicznego HTML). Ta książka pozwoli szybko zapoznać się programem i wykorzystać jego możliwości w tworzeniu stron WWW.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI Po prostu Dreamveawer 4 Autor: J. Tarin Towers T‡umaczenie: Iwo Nowosielski ISBN: 83-7197-631-3 Tytu‡ orygina‡u: Dreamweaver 4 for Windows and Macintosh Format: B5, stron: 638 Visual QuickStart Guide Dreamweaver jest wspania‡ym narzŒdziem. Jest on tak¿e jednym z najlepszych edytor(cid:243)w WYSIWYG (What You See Is What You Get, czyli (cid:132)uzyskasz dok‡adnie to, co(cid:160) widzisz(cid:148)), jakie pojawi‡y siŒ na rynku oprogramowania. Dreamweaver nie jest jedynie kolejnym graficznym narzŒdziem jŒzyka HTML. W programie mo¿na zrobi(cid:230) to wszystko, co w najlepszych edytorach: utworzy(cid:230) tabele, edytowa(cid:230) ramki, ‡atwo przechodzi(cid:230) z(cid:160) podgl„du strony do podgl„du kodu HTML. Jednocze(cid:156)nie przewy¿sza on inne edytory, gdy¿ pozwala tworzy(cid:230) witryny WWW z wykorzystaniem DHTML (dynamicznego HTML). Ta ksi„¿ka pozwoli szybko zapozna(cid:230) siŒ programem i wykorzysta(cid:230) jego mo¿liwo(cid:156)ci w(cid:160) tworzeniu stron WWW. KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Spis treści Rozdział 1. Rozdział 2. Wprowadzenie 15 Pierwsze kroki 27 Narzędzia Dreamweavera...................................................e.......................28 Środowisko Dreamweavera...................................................e....................29 Dostosowywanie obszaru roboczego ...................................................e.....31 Paleta Launcher ...................................................e......................................32 Planowanie witryny...................................................e................................33 Okno Document ...................................................e.....................................35 Nowy pasek narzędzi ...................................................e.............................37 Mierzenie w oknie Document ...................................................e................38 Podgląd kodu...................................................e..........................................40 Paleta Objects...................................................e.........................................42 Obiekty Dreamweavera ...................................................e...........................43 Zaznaczanie obiektów i kodu ...................................................e.................45 Inspektor Property ...................................................e..................................47 Niewidzialne elementy...................................................e...........................48 O historii...................................................e.................................................49 Zakładanie witryny lokalnej 51 O oknie Site...................................................e............................................52 Okno Site...................................................e................................................53 Zakładanie witryny lokalnej...................................................e...................54 Edycja witryny lokalnej i jej usuwanie ...................................................e..57 Okno Site — wskazówki i skróty...................................................e...........58 Przenoszenie plików...................................................e...............................60 Zarządzanie paletą Assets ...................................................e......................61 Rodzaje zasobów...................................................e....................................62 Jak działa paleta Assets ...................................................e..........................63 Korzystanie z palety Assets...................................................e....................64 Oglądanie zasobów i ich wstawianie...................................................e......66 Używanie Ulubionych i nazw dodatkowych.............................................68 Edytowanie zasobów i ich dzielenie ...................................................e......70 5 S p i s t r e ś c i Spis treści Rozdział 3. Najprostsze strony WWW 73 Tworzenie plików HTML i ich otwieranie................................................74 Tworzenie zawartości...................................................e.............................75 Właściwości strony ...................................................e................................80 Modyfikowanie koloru strony i jej tła...................................................e....82 Zapisywanie efektów pracy...................................................e....................85 Zapisywanie kopii pliku ...................................................e.........................86 Podgląd strony w przeglądarce...................................................e.................87 Drukowanie z okna przeglądarki...................................................e............88 Kolory a strony WWW ...................................................e..........................89 Kolory a Windows ...................................................e.................................90 Kolory dla Maca...................................................e.....................................91 Rozdział 4. i c ś e r t s i p S Rozdział 5. Edycja kodu HTML 97 O HTML...................................................e.................................................98 Jak nauczyć się języka HTML ...................................................e...............99 Praca z kodem ...................................................e......................................102 Opcje kodu ...................................................e...........................................105 Wykorzystywanie funkcji Code Reference.............................................107 Wykorzystywanie podręcznego edytora znaczników ................................109 Zaznaczanie znaczników nadrzędnych i podrzędnych............................115 Wstawianie komentarzy ...................................................e.......................117 Preferencje formatowania kodu HTML ..................................................119 Korekta kodu HTML...................................................e............................121 Praca z grafiką 127 Zamieszczanie grafiki ...................................................e..........................128 Wstawianie grafiki za pomocą palety Assets ..........................................129 Zaznaczanie grafiki ...................................................e..............................131 Inspektor Property ...................................................e................................132 Formaty grafiki...................................................e.....................................134 Właściwości grafiki...................................................e..............................135 Właściwości wyglądu...................................................e...........................136 Właściwości układu...................................................e..............................139 Właściwości ładowania strony ...................................................e.................142 Integracja z edytorem grafiki ...................................................e...............144 Rozdział 6. Hiperłącza i adresy URL 147 Rodzaje hiperłączy ...................................................e...............................148 Więcej o łączach względnych ...................................................e..............150 Tworzenie hiperłączy ...................................................e...........................154 6 Spis treści Tworzenie łączy względnych ...................................................e...............155 Hiperłącza graficzne...................................................e.............................157 Wskazywanie pliku ...................................................e..............................158 Łącza do adresów e-mail...................................................e......................159 Łącza do określonego miejsca na stronie ................................................161 Otwieranie hiperłączy w nowym oknie...................................................e165 Kierunek — cel ...................................................e....................................166 Zmienianie kolorów hiperłączy...................................................e..............167 Strategia tworzenia hiperłączy ...................................................e...............168 S p i s t r e ś c i Rozdział 7. Wstawianie obiektów multimedialnych i ich obsługa 171 Rollovery graficzne ...................................................e..............................173 Używanie pasków nawigacyjnych ...................................................e.......175 Pliki dźwiękowe ...................................................e...................................180 Parametry pliku dźwiękowego ...................................................e.............184 Rozszerzenia Netscape’a...................................................e......................186 Obiekty Shockwave i Flash...................................................e..................188 Tworzenie obiektów Flash w Dreamweaverze........................................189 Aplety Javy...................................................e...........................................195 Technologia ActiveX ...................................................e...........................196 Parametry dodatkowe...................................................e...........................197 Rozdział 8. Rozdział 9. Praca z tekstem 199 Wprowadzanie tekstu ...................................................e...........................200 Zmienianie rozmiaru czcionki...................................................e..............201 Style tekstu ...................................................e...........................................205 Fizyczne style tekstu ...................................................e............................206 Więcej fizycznych stylów tekstu...................................................e..........207 Logiczne style tekstu...................................................e............................208 Zmienianie kroju czcionki...................................................e....................209 Tworzenie grupy czcionek ...................................................e...................210 Zmienianie koloru czcionki...................................................e..................213 Znaki specjalne w języku HTML...................................................e.........215 Okno Find and Replace ...................................................e........................217 Sprawdzanie pisowni...................................................e............................220 Akapity i układ dokumentu 223 Akapity kontra końce wiersza ...................................................e..............224 Właściwości akapitu...................................................e.............................226 Tworzenie nagłówków ...................................................e.........................227 7 Spis treści Stosowanie tekstu preformatowanego...................................................e..228 Formatowanie list...................................................e.................................230 Wyrównanie tekstu...................................................e...............................234 Wcięcia w tekście...................................................e.................................235 Twarda spacja...................................................e.......................................237 Linie poziome...................................................e.......................................239 Rozdział 10. Tworzenie stylów HTML 241 Stosowanie stylów HTML ...................................................e...................243 Usuwanie stylów ...................................................e..................................245 Tworzenie nowych stylów ...................................................e...................246 Edycja stylu ...................................................e..........................................250 Rozdział 11. Arkusze stylów 253 W tym rozdziale ...................................................e...................................254 Jak działa arkusz stylów...................................................e.......................255 Rodzaje stylów ...................................................e.....................................256 Rodzaje arkuszy stylów...................................................e........................258 Tworzenie stylu ...................................................e....................................259 Redefiniowanie znacznika HTML ...................................................e.......260 Tworzenie klasy stylu...................................................e...........................262 Stosowanie klasy stylu ...................................................e.........................264 Usuwanie stylów ...................................................e..................................265 Definiowanie nowych selektorów ...................................................e........266 Wykorzystanie zewnętrznych arkuszy stylów ........................................271 Tworzenie zewnętrznego arkusza stylów lub łącza do niego....................272 Dołączanie zewnętrznego arkusza stylów...............................................275 Eksportowanie stylów wewnętrznych ...................................................e..276 Zapisywanie strony z arkuszem stylów w postaci czystego HTML .........277 Edytowanie stylów ...................................................e...............................278 Konflikty stylów...................................................e...................................280 Definicje stylów ...................................................e...................................281 Parametry tekstu...................................................e...................................283 Parametry tła ...................................................e........................................286 Parametry bloku tekstu...................................................e.........................288 Parametry kontenera...................................................e.............................291 Parametry obramowania...................................................e.......................293 Parametry listy...................................................e......................................294 Rozszerzenia...................................................e.........................................295 i c ś e r t s i p S 8 Spis treści Rozdział 12. Tabele 297 Definiowanie tabel ...................................................e...............................298 O tabelach tworzących układ strony ...................................................e....299 Wstawianie tabeli w widoku Standard ...................................................e.301 Rysowanie układu ...................................................e................................302 Zaznaczanie elementów ...................................................e.......................305 Dodawanie wierszy i kolumn w widoku Standard ..................................307 Dopasowanie rozmiarów tabeli ...................................................e............310 Zmienianie rozmiaru wierszy i kolumn w widoku Standard...................312 Przesuwanie elementu tworzącego układ strony.....................................313 Ustawianie szerokości w widoku Layout................................................314 Łączenie i dzielenie komórek...................................................e...............318 Wstawianie zawartości do tabeli ...................................................e..........319 Wyrównywanie tabel i zawartości ...................................................e.......321 Odstępy w tabeli...................................................e...................................322 Krawędzie tabeli...................................................e...................................323 Kolory w tabeli...................................................e.....................................324 Grafika jako tło w tabeli...................................................e.......................325 Wstawianie danych tabelarycznych ...................................................e.....326 Eksportowanie tabel ...................................................e.............................328 Sortowanie zawartości tabeli...................................................e................329 Rozdział 13. Ramki 331 Ramki a nawigacja ...................................................e...............................332 Tworzenie strony z ramkami...................................................e................333 Tworzenie ramek przez przeciąganie ...................................................e...334 Szybkie ramki i fałszywe ramki ...................................................e............336 Inspektor Frames ...................................................e..................................339 Modyfikowanie układu strony z ramkami...............................................340 Usuwanie ramek...................................................e...................................341 Ramki zagnieżdżone ...................................................e............................342 Ustawienia kolumn i wierszy ...................................................e...............344 Określanie zawartości ramek ...................................................e..................346 Tworzenie dokumentu w ramce ...................................................e...........347 Zapisywanie efektów pracy...................................................e..................348 Zapisywanie strony definiującej ramki ...................................................e349 Opcje bloku Frameset...................................................e...........................350 Ustawienia marginesów ...................................................e.......................353 Ramki docelowe...................................................e...................................354 9 S p i s t r e ś c i i c ś e r t s i p S Spis treści Definiowanie miejsc docelowych...................................................e..........356 Testowanie hiperłączy...................................................e..........................358 Tworzenie zawartości bez ramek ...................................................e.........359 Ramki inline ...................................................e.........................................361 Rozdział 14. Warstwy i pozycjonowanie 363 Pozycjonowanie CSS ...................................................e...........................364 Pozycjonowanie bezwzględne kontra względne ...........................................365 Parametry pozycjonowania ...................................................e..................366 Inne parametry CSS związane z pozycjonowaniem .................................368 Inspektor Layers...................................................e...................................369 Siatka...................................................e...................................................e.370 Tworzenie warstw ...................................................e................................371 Zaznaczanie warstw ...................................................e.............................373 Zmienianie nazwy warstwy...................................................e..................374 Znaczniki warstw ...................................................e.................................375 Przemieszczanie warstw...................................................e.......................376 Zmienianie rozmiaru warstwy...................................................e................377 Zagnieżdżanie warstw i nakładanie ich na siebie....................................379 Zmienianie widoczności warstwy ...................................................e........381 Kolejność warstw ...................................................e.................................382 Zawartość warstw...................................................e.................................384 Warstwy a style ...................................................e....................................385 Kadrowanie ...................................................e..........................................386 Zawartość przepełniona...................................................e........................388 Tło warstwy...................................................e..........................................389 Ustawienia warstw ...................................................e...............................390 Znaczniki warstw Navigatora...................................................e...............392 Dodatkowe właściwości warstw Navigatora...........................................393 Definicja właściwości warstwy Netscape’a ............................................394 Konwersja warstw w tabele (i odwrotnie)...............................................395 Kalka grafiki...................................................e.........................................399 Rozdział 15. Formularze 403 Tworzenie formularza ...................................................e..........................404 Formatowanie formularzy ...................................................e....................406 Dodawanie elementów formularza...................................................e.......407 Nazwy i wartości...................................................e..................................408 Pola tekstowe...................................................e........................................409 10 Spis treści Pola wyboru...................................................e..........................................414 Przyciski wyboru opcji...................................................e.........................415 Menu i listy ...................................................e..........................................417 Edycja elementów menu ...................................................e......................419 Tworzenie listy...................................................e.....................................420 Menu skoków ...................................................e.......................................421 Ukryte pola formularza ...................................................e........................424 Przyciski Submit i Reset ...................................................e......................425 Pola graficzne...................................................e.......................................427 Wyślij formularz ...................................................e..................................429 Rozdział 16. Behawiory 431 Zasada działania JavaScript...................................................e..................432 Dodawanie behawiorów...................................................e.......................434 Usuwanie behawiorów i ich edycja...................................................e......436 Najczęściej używane obiekty ...................................................e................438 Obsługa zdarzeń ...................................................e...................................440 Najczęstsze akcje...................................................e..................................442 Wiadomość na pasku stanu przeglądarki ................................................443 Przejdź do URL...................................................e....................................444 Okno komunikatu...................................................e.................................445 Otwórz okno przeglądarki...................................................e....................446 Sprawdź moduł rozszerzający ...................................................e..............448 Sprawdź wersję przeglądarki ...................................................e...................450 Podmiana obrazów ...................................................e...............................452 Wstępne ładowanie grafiki...................................................e...................454 Przywrócenie pierwotnego obrazu ...................................................e.......455 Odtwarzanie dźwięku...................................................e...........................456 Odtwarzanie animacji Shockwave lub Flash...........................................457 Pokaż warstwy i ukryj je ...................................................e......................458 Weryfikacja formularza...................................................e........................460 Zmiana zawartości ramek i warstw ...................................................e......462 Wstawianie tekstu do pola tekstowego formularza .................................465 Zmień właściwość ...................................................e................................466 Przeciągnij warstwę...................................................e..............................468 Dodawanie nowych skryptów i zdarzeń..................................................472 Dodawanie nowych akcji ...................................................e.....................474 Korekta skryptu JavaScript ...................................................e..................476 S p i s t r e ś c i 11 i c ś e r t s i p S Spis treści Rozdział 17. Animacje Timelines 479 Co można zrobić za pomocą Timelines ..................................................480 Inspektor Timelines...................................................e..............................481 Budowa inspektora Timelines ...................................................e..............482 Dodawanie warstwy do Timeline...................................................e.........484 Akcje Timelines ...................................................e...................................485 Klatki kluczowe...................................................e....................................489 Wyświetlanie warstw i ich ukrywanie...................................................e..491 Zmienianie Z-indeksu ...................................................e..........................492 Zmienianie czasu trwania animacji ...................................................e.......493 Zmienianie rozmiaru warstwy...................................................e..............494 Dodawanie rolloverów graficznych do Timeline ....................................495 Dodawanie behawioru do Timeline ...................................................e.....497 Uruchamianie animacji ...................................................e........................498 Odtwarzanie animacji za pomocą behawiorów.......................................499 Odtwarzanie w pętli i przewijanie...................................................e........501 Dodawanie klatek i ich usuwanie ...................................................e.............503 Używanie złożonych Timelines ...................................................e..............504 Zmiana nazwy animacji i usuwanie animacji..........................................505 Usuwanie obiektów i ich zamiana...................................................e........506 Połączenie wszystkiego...................................................e........................507 Rozdział 18. Zakładanie witryny lokalnej 509 O bibliotekach ...................................................e......................................510 Elementy biblioteki ...................................................e..............................512 Tworzenie elementu biblioteki...................................................e...............513 Wstawianie elementów biblioteki i ich usuwanie ...................................514 Edycja elementów biblioteki...................................................e................515 Usuwanie elementów biblioteki ...................................................e...........517 Odtworzenie elementu biblioteki ...................................................e.........518 Szablony Dreamweavera...................................................e......................519 Tworzenie szablonów...................................................e...........................520 Definiowanie właściwości strony dla szablonu.......................................521 Używanie stylów i skryptów JavaScript w szablonach...........................521 Definiowanie obszarów do edycji ...................................................e........522 Tworzenie stron na podstawie szablonów...............................................524 Odłączanie strony od szablonu...................................................e.............525 Usuwanie szablonu...................................................e...............................526 Dołączanie istniejącej strony do szablonu...............................................527 12 Spis treści Obszary do edycji...................................................e.................................528 Edycja szablonów...................................................e.................................529 Wyróżnienia w szablonach...................................................e...................530 Eksport w formacie XML ...................................................e....................531 Aktualizacja witryny ...................................................e............................535 Zmienianie nazw szablonów i elementów biblioteki ..............................537 Pliki dołączane serwera...................................................e........................538 Wstawianie SSI ...................................................e....................................540 Paleta History ...................................................e.......................................541 Powtarzanie czynności i ich cofanie ...................................................e....543 Kopiowanie czynności i ich wklejanie...................................................e.547 Czyszczenie listy historii...................................................e......................549 Zapisywanie czynności w postaci poleceń..............................................550 Rejestrowanie poleceń...................................................e..........................551 Powtarzanie poleceń...................................................e.............................552 Zmienianie nazw i usuwanie poleceń...................................................e...553 S p i s t r e ś c i Rozdział 19. Dostosowanie programu 555 Własne obiekty...................................................e.....................................557 Edycja menu Dreamweavera...................................................e................561 Trochę o XML...................................................e......................................562 Szersza modyfikacja Dreamweavera poprzez interfejs JavaScript API..563 Plik menus.xml...................................................e.....................................564 Pozycje menu ...................................................e.......................................566 Kolejność pozycji w menu ...................................................e...................568 Usuwanie pozycji z menu ...................................................e....................569 Dodawanie separatora ...................................................e..........................569 Zmienianie skrótów klawiszowych ...................................................e......570 Dostosowanie okien dialogowych...................................................e........574 Rozdział 20. Zarządzanie witrynami WWW 575 Przygotowania do umieszczania witryny w sieci.....................................576 Definiowanie informacji o serwerze WWW ...........................................577 Połączenie z serwerem ...................................................e.........................580 Pobieranie plików i przenoszenie ich na serwer........................................581 Synchronizacja plików ...................................................e.........................582 Opcje odświeżania i zmiany widoku...................................................e....583 Mapa witryny ...................................................e.......................................584 Ikony mapy witryny i porady ...................................................e...............586 13 Spis treści Rysowanie łączy na mapie witryny...................................................e......587 Zarządzanie hiperłączami...................................................e.....................588 Zmienianie hiperłącza występującego wielokrotnie w witrynie .............593 Podział zasobów w witrynach lokalnych ................................................594 Ustawienia FTP ...................................................e....................................596 Rozdział 21. Praca i współpraca 599 Meldowanie plików i ich wymeldowanie ...............................................601 Wymeldowanie plików ...................................................e........................604 Meldowanie plików...................................................e..............................606 Konfigurowanie notatnika projektu...................................................e......608 Korzystanie z notatnika...................................................e........................610 Dostęp do notatnika projektu ...................................................e...............612 Usuwanie niepotrzebnych notatek...................................................e........613 Wyłączanie notatnika projektu...................................................e.............614 Modyfikowanie kolumn w oknie Site ...................................................e..615 Dodawanie File View Columns (kolumn widoku pliku) ........................617 Udostępnianie kolumn...................................................e..........................618 Raport witryny...................................................e......................................620 Udostępnianie pliku stylów...................................................e..................624 Korzystanie z Dremweavera do zarządzania zawartością.......................626 Skorowidz 629 i c ś e r t s i p S 14 Warstwy i pozycjonowanie Rysunek 14.1. Ten mały kolaż utworzono z trzech nakładających się na siebie warstw (takiego efektu nie można uzyskać za pomocą tabeli) Warstwy i pozycjonowanie Dzięki istnieniu warstw można kontrolować dokładne położenie swoich elementów na stronie WWW. Warstwa jest „pojemnikiem” na pewną wydzieloną znacznikami .: lub 74+2 część kodu HTML, którą można umieścić w dowolnym miejscu na stronie. Warstwy mogą na siebie zachodzić lub nakładać się na siebie, czym różnią się od komórek tabeli. Na poszczególnych warstwach obiekty mogą być widoczne lub też nie będzie ich widać, a mogą być także przemieszczane. Warstwy nazwano tak dlatego, że można je umieszczać w przestrzeni trójwymiarowej. Można zdefiniować bezwzględne lub względne położenie warstwy w stosunku do współrzędnych X i Y strony. Trzeci wymiar, zwany Z-indeksem, pozwala nakładać warstwy na siebie (rysunek 14.1). Projektanci kochają warstwy za ich uniwersalność. Podczas pierwszego ładowania strony warstwa (lub jej część) może być ukryta. Odpowiedni skrypt ujawnia ukryty obszar po określonym upływie czasu lub w wyniku zdefiniowanego działania (w rozdziałach 16. i 17. znaleźć można informacje na temat zdarzeń i działania animacji Timelines). Wskazówka  Przeglądarki, takie jak IE czy Netscape 4.0, wyświetlą zawartość warstw, jednakże ignorują większość ich właściwości, w tym pozycjonowanie. Zajrzyj do dodatku C na stronie internetowej, aby dowiedzieć się, jak poradzić sobie ze starszymi przeglądarkami. W a r s t w y i p o z y c j o n o w a n i e 363 Rozdział 14. Pozycjonowanie CSS Warstwy są częścią kaskadowych arkuszy stylów (Cascading Style Sheets, w skrócie CSS) i dynamicznego kodu HTML. Pozycjonowanie kaskadowych arkuszy stylów, inaczej CSS-P, pozwala na bardzo dokładne ustawienie obiektów. Wcześniejsze metody, związane z użyciem tabel, ramek czy marginesów ramek, nie pozwalały osiągnąć takich efektów, jak przy użyciu CSS-P. Tabele, tworzące układ strony (zobacz w rozdziale 12.), dają projektowi pewną elastyczność, ale nie pozwalają elementom zachodzić na siebie, tworzyć animacji Timelines części strony ani używać behawiorów. CSS-P można zastosować do bloku tekstu, elementu typu blok, grafiki lub warstwy. Pozycjonowanie można wykorzystać na dwa sposoby. Jeden to utworzenie klasy stylu i zastosowanie jej do wybranego tekstu (w ten sposób obiekt stanie się praktycznie warstwą). Drugi to utworzenie w oknie dokumentu warstwy, którą można następnie modyfikować niezależnie od tworzonych stylów. Współrzędne X i Y Warstwy lub inne elementy są umieszczane względem współrzędnych X i Y, które odpowiadają odległościom od lewej i górnej krawędzi. Mogą to być krawędzie strony lub innego nadrzędnego „pojemnika”, np. warstwy lub bloku tekstu (rysunek 14.2). Z-indeks Trzecią właściwością warstwy w odniesieniu do pozycjonowania jest Z-indeks. Jest ona wykorzystywana wtedy, gdy więcej warstw na stronie nakłada się na siebie. Z-indeks określa kolejność warstw (rysunek 14.3). Im wyższy jest indeks, tym warstwa jest położona bliżej wierzchu. S S C e i n a w o n o j c y z o P 364 Rysunek 14..2. Ta warstwa jest ułożona w odległości 150 pikseli od lewej krawędzi okna i 70 pikseli od górnej Rysunek 14.3. Mniejsza warstwa jest ułożona nad większą, co oznacza, że jej Z-indeks jest większyo Warstwy a animacja Dynamiczny HTML umożliwia przemieszczanie warstw na stronie. W palecie Timelines, która została opisana w rozdziale 17., tworzy się animację. Zdarzenia Show Layer Behavior i Drag Layer Behavior pozwalają zmieniać wygląd warstwy lub jej pozycję po wykonaniu określonej akcji przez użytkownika. Zdarzenia (behawiory) zostały omówione w rozdziale 16. Warstwy i pozycjonowanie Pozycjonowanie bezwzględne kontra względne Pozycja elementu w dokumencie HTML może być bezwzględna, względna lub statyczna. Pozycja normalna jest nazywana statyczną (static) i oznacza, że element jest umieszczony w podstawowym nurcie tekstu. Zdefiniowanie współrzędnych dla tej pozycji nie spowoduje wprowadzenia żadnych zmian — zostaną one zignorowane (rysunek 14.4). Pozycja względna (relative) oznacza, że pozycja warstwy lub innego elementu jest określona względem górnego lewego rogu nadrzędnego kontenera. Element, mimo że został wstawiony do pojemnika i zawarty w nurcie strony, nie będzie automatycznie łamał wierszy (rysunek 14.5). Aby takie właściwości wstawiania były pewne, należy zamiast znacznika .: użyć znacznika 74+2 (rysunek 14.6). Element taki, jak np. warstwa, umiejscowiony w sposób bezwzględny (absolute), znajduje się zupełnie poza nurtem dokumentu. Warstwa ani nie jest zawarta w podstawowym nurcie strony, ani nie zakłóca jego przepływu (rysunek 14.7). P o z y c j o n o w a n i e b e z w z g l ę d n e Rysunek 14.4. W pozycji statycznej (static) warstwa jest traktowana jak blok tekstu i umieszczana zgodnie z normalnym nurtem tekstu Rysunek 14.5. Zastosowanie pozycjonowania względnego (relative) powoduje umieszczenie warstwy zgodnie ze zdefiniowanymi współrzędnymi X i Y, co wpływa na podstawowy nurt tekstu. Znacznik div , na przykład, powoduje przerwanie akapitu za warstwą (porównaj z rysunkiem 14.6) Rysunek 14.6. Tu kod jest nieomal taki sam, jak strony z rysunku 14.5 — jedynie zamiast znacznika div użyto znacznika span Rysunek 14.7. Warstwa jest z powrotem ujęta w znacznik div i jest pozycjonowana w sposób bezwzględny (absolute), co oznacza, że podstawowy nurt tekstu ponownie zaczyna się od góry strony, a warstwa jest położona nad nim 365 a i n a w o n o j c y z o p y r t e m a r a P Rozdział 14. Parametry pozycjonowania Właściwości pozycjonowania mogą być stosowane do dowolnego obiektu. Jednak po ich zdefiniowaniu zachowanie obiektu będzie podobne do zachowania warstwy — w Dreamweaverze będzie on tak traktowany, jak warstwa, chociaż w przeglądarce inaczej mogą być obsługiwane elementy nieujęte w znaczniki .: lub 74+2. Aby zastosować pozycjonowanie do obiektu innego niż warstwa, należy utworzyć styl i użyć go w sposób opisany w rozdziale 11. oraz zdefiniować właściwości Positioning w oknie Style Definition (rysunek 14.8). Jednak generalnie prościej jest utworzyć warstwę oddzielnie, według instrukcji opisanych w tym rozdziale. Kto raz zrozumie istotę warstw i stylów, ten może tworzyć style, za pomocą których będzie dodawał do projektu różne warstwy. Poniższe właściwości będą omówione pełniej w dalszych częściach rozdziału: Parametr Type określa rodzaj pozycjonowania: bezwzględne (absolute), względne (relative) lub statyczne (static). Visibility określa, czy element będzie widoczny po załadowaniu strony. Można zdeklarować element w ten sposób, żeby był widoczny (visible) lub ukryty (hidden). Można też zdecydować, by przejmował on właściwości (inherit) od nadrzędnych elementów. Przy definiowaniu zdarzeń (rozdział 16.) można sprawić, że widoczność warstwy zmieni się po upływie określonego czasu lub po akcji użytkownika. Za pomocą Z-indexu (rysunek 14.9) definiuje się kolejność warstw. Wskaźnik ten jest trzecią, po X i Y, współrzędną, która określa położenie warstwy w trzecim wymiarze. Element o wyższym Z-indeksie ma pierwszeństwo, czyli warstwa o indeksie 3. będzie położona nad warstwą o indeksie 2. Jeśli warstwy nie mają kolorowego tła i wstawiono do nich przezroczystą grafikę, to można je tak nałożyć na siebie, aby jeden obraz przykrył drugi (rysunek 14.10). 366 Rysunek 14.8. Panel Positioning okna Style Definition Style zostały omówione w rozdziale 11., pozycjonowanie omawiam w bieżącym rozdziale Rysunek 14.9. Dwie proste prostokątne warstwy — jedna jest położona nad drugą Rysunek 14.10. Każdy z tych obrazów znajduje się w osobnej warstwie, a ponieważ obydwa mają przezroczyste tło, to każdy jest widoczny na stronioe Rysunek 14.11. Paski przewijania zostaną dodane przez Internet Explorera do warstwy, której zawartość przekracza jej rozmiary (taką zawartość można także zdefiniować jako widoczną (visible) lub ukrytą (hidden)) Rysunek 14.12. Obszar kadrowania pozwala zdefiniować obszar warstwy, która będzie widoczna lub ukryta po załadowaniu strony. W tym przykładzie tylko górna połowa obrazu będzie widoczna po załadowaniu Warstwy i pozycjonowanie Przy użyciu parametru Overflow można zdefiniować zachowanie warstwy, gdy zawartość nie mieści się w jej granicach. Można wybrać opcję wyświetlania (visible) przepełnionej zawartości lub jej ukrywania (hidden). Do warstwy mogą też być dodane paski przewijania (scroll) (w opcji auto najczęściej również są dodawane paski przewijania) (rysunek 14.11). Wskazówka  Ustawienie Overflow jest niepoprawnie wyświetlane przez Dreamweavera i nie jest obsługiwane przez Navigatora 4.x, choć jest obsługiwane przez Netscape 6. W Navigatorze 4 przepełniona zawartość warstwy jest zawsze widoczna. Skorzystanie z parametrów Placement (rysunki 14.9 i 14.10) spowoduje zdefiniowanie odległości warstwy od lewej (Left) i górnej (Top) krawędzi nadrzędnej jednostki. Miary Width (szerokość) i Height (wysokość) pozostają w relacji do położenia i określają pozycję prawego dolnego narożnika warstwy. Clip określa wykadrowany obszar warstwy, czyli taki, w którym zawartość będzie widoczna (rysunek 14.12). Można utworzyć warstwę o rozmiarze 200200 pikseli, a następnie zdefiniować w niej obszar 100100 pikseli, w którym będzie widoczna zawartość. Obszar kadru jest prostokątem, zdefiniowanym przez cztery miary (Top, Right, Bottom i Left). Wskazówka  Kadrowanie nie ma nic wspólnego z przepełnieniem zawartości. Przepełnienie pozostaje w związku z wymiarami warstwy, bez względu na to, jak zdefiniowany jest obszar kadrowania. P a r a m e t r y p o z y c j o n o w a n i a 367 Rysunek 14.13. W panelu Block okna Style Definition można zdefiniować parametry wyrównania pionowego bloku tekstu lub zaznaczenia Rysunek 14.14. Opcje wyrównania pionowego za pomocą stylów Rozdział 14. Inne parametry CSS zwizane z pozycjonowaniem Inne parametry arkuszy stylów są mniej związane z pozycjonowaniem i bardziej odnoszą się do położenia tekstu niż grafiki. Ale podaję ich listę: wszystkie parametry bloku (panel Block okna Style Definition) (rysunek 14.13); wyrównanie tekstu (Text Align) (rysunek 14.14); wysokość wiersza Line Height (panel Type) — parametr tekstu; parametr Position listy (panel List) — odnosi się do wcięcia pozycji listy; większość parametrów kontenera (panel Box), a szczególnie Float, Clear, Margins i Padding. Możesz także otaczać warstwy ramkami za pomocą parametrów panelu Border. Wszystkimi parametrami zajmowaliśmy się w rozdziale 11. S S C y r t e m a r a p e n n I 368 Warstwy i pozycjonowanie Inspektor Layers Inspektor Layers (rysunek 14.15) pokazuje listę wszystkich warstw na bieżącej stronie. Po utworzeniu nowej warstwy jej nazwa pojawi się na liście w inspektorze Layers. Aby otworzyć okno inspektora Layers:  Z menu okna Document wybierz polecenie Window/Layers. lub Naciśnij F2. W obu przypadkach pojawi się inspektor Layers. Rysunek 14.15. W inspektorze Layers wyświetlana jest lista wszystkich warstw na stronie I n s p e k t o r L a y e r s 369 Rozdział 14. Siatka Siatka przypomina papier w kratkę. Ułatwia ona dokładne pozycjonowanie warstw i zmianę ich rozmiaru. Aby wylwietlić siatkę:  Z menu okna Document wybierz polecenie View/Grid/Show Grid. Siatka zostanie wyświetlona (rysunek 14.16). Linijki Linijki mogą być wyświetlane wzdłuż lewej i górnej krawędzi okna Document. Pomagają one pozycjonować warstwy i zmieniać ich rozmiar. Aby wylwietlić linijki:  Z menu okna Document wybierz polecenie View/Rulers/Show. Zostaną wyświetlone linijki (rysunek 14.17). Wskazówka  Jednostki linijek i siatki oraz opcję przyciągania do siatki zostały omówione w podrozdziale „Mierzenie w oknie Document” w rozdziale 1. a k t a i S Rysunek 14.16. Wyświetlona siatka pozwoli lepiej zorientować się w położeniu obiektów Rysunek 14.17. Linijki (z siatką lub bez niej) umożliwiają dokładne określenie położenia obiektów 370 Warstwy i pozycjonowanie Tworzenie warstw Zanim wykorzystasz wszystkie możliwości warstw, musisz choć jedną z nich utworzyć. Możesz wstawić warstwę z palety Objects i rysować ją na ekranie, możesz również użyć polecenia z menu Insert, aby wstawić warstwę domyślnej wielkości. Rozmiar warstwy i jej położenie możesz zawsze zmienić. Wskazówka  Możesz zmienić właściwości domyślnej warstwy. Zobacz „Ustawienia warstw” w dalszej części rozdziału. Aby wstawić warstwę z menu Insert:  Z menu okna Document wybierz polecenie Insert/Layer. Domyślna warstwa pojawi się w lewym górnym rogu okna dokumentu (rysunek 14.18). Aby wstawić warstwę z palety Objects: 1. Jeśli palety nie ma na ekranie, wyświetl ją za pomocą polecenia View/Objects z menu okna Document. 2. Kliknij przycisk Draw Layer . Kursor myszy zamieni się w krzyżyk (rysunek 14.19). 3. Kliknij w miejscu, w którym powinien znaleźć się lewy górny narożnik warstwy i przeciągnij myszą do wybranego miejsca. T w o r z e n i e w a r s t w Rysunek 14.18. Za pomocą polecenia Layer z menu Insert można wstawić warstwę domyślnej wielkości. Wygląd warstwy można zmienić po jej wstawieniu Rysunek 14.19. Po kliknięciu przycisku Draw Layer wskaźnik myszy zamieni się w krzyżyk rysujący warstowę 371 Rozdział 14. 4. Zwolnij przycisk myszy. Warstwa zostanie narysowana (rysunek 14.20). Wraz z warstwą pojawi się jej ikona, która wskazuje, gdzie w kodzie strony znajduje się odpowiadający warstwie fragment. Wskazówka  Jeśli ikona warstwy nie jest widoczna, to wybierz polecenie View/Visual Aids/ Invisible Elements z menu okna Document. Ikonę można w ten sposób dowolnie pokazywać lub ukrywać. Rysunek 14.20. Pojawi się rysowana warstwa oraz ikona, która wskazuje na jej położenie w kodzieo strony w t s r a w e i n e z r o w T 372 Warstwy i pozycjonowanie Zaznaczanie warstw Aby usunąć warstwę, przesunąć ją lub zmienić jej rozmiar, należy ją zaznaczyć. Kliknięcie wewnątrz warstwy nie wystarczy. Ale i na to jest kilka sposobów. Aby zaznaczyć warstwę: 1. Kliknij wewnątrz warstwy. 2. Kliknij uchwyt wyboru w lewym górnym rogu warstwy (rysunek 14.21). lub Zaznacz nazwę warstwy w inspektorze Layers. lub Kliknij krawędź warstwy. lub Kliknij ikonę warstwy w oknie dokumentu. lub Kliknij znacznik warstwy (cid:10)74+2, .:, +/6lub +/6) w selektorze znaczników na pasku stanu okna Document (rysunek 14.21). Osiem punktów, zwanych uchwytami, pojawi się na krawędziach zaznaczonej warstwy (rysunek 14.22), a jej nazwa zostanie wyróżniona w inspektorze Layers. I — oczywiście — nasz stary znajomy, inspektor Property, wyświetli właściwości warstwy (rysunek 14.23). Z a z n a c z a n i e w a r s t w Rysunek 14.21. Aby zaznaczyć warstwę, kliknij jej uchwyt wyboru lub ikonę warstwy w oknie albo znacznik div lub span w selektorze znaczników bądź nazwę warstwy w inspektorze Layers Rysunek 14.22. Po zaznaczeniu warstwy na jej krawędziach pojawi się osiem uchwytów, a jej nazwa w inspektorze Layers zostanie wyróżniona Rysunek 14.23. Właściwości warstwy są wyświetlane w inspektorze Property Kiedy warstwa jest zaznaczona, możesz ją usunąć, jeśli zechcesz. Aby usunć warstwę: 1. Zaznacz warstwę. 2. Naciśnij klawisz Delete lub Backspace. Warstwa zniknie. 373 Rozdział 14. Zmienianie nazwy warstwy Nazwy warstw są używane przez przeglądarki i w skryptach. Dreamweaver nadaje warstwom domyślne nazwy „Layer1”, „Layer2”, itd. Możesz warstwom nadać bardziej znaczące nazwy: 1. Zaznacz warstwę. 2. W inspektorze Property zaznacz starą nazwę i usuń ją (rysunek 14.24). lub W inspektorze Layers kliknij nazwę warstwy i przytrzymaj wciśnięty przycisk myszy (Windows) lub dwukrotnie kliknij nazwę warstwy (Macintosh). Wiersz, który zawiera tę nazwę, zostanie wyróżniony, a ona sama pojawi się w polu tekstowym. 3. Wpisz nową nazwę (rysunek 14.25). Nazwa warstwy zostanie zmieniona. Rysunek 14.24. Należy wpisać nową nazwę warstwy w polu Layer ID w oknie inspektora Property Rysunek 14.25. Należy wpisać nową nazwę w inspektorze Layers y w t s r a w y w z a n e i n a i n e i m Z 374 Rysunek 14.26. Znacznik można zmienić w menu Tag w rozwiniętym oknie inspektora Property Warstwy i pozycjonowanie Znaczniki warstw Do tworzenia warstw wykorzystuje się cztery znaczniki. .: i 74+2 tworzą tak zwane warstwy CSS. Ze znacznikiem .: związane jest pozycjonowanie bezwzględne — znacznik otacza odstęp akapitowy. Aby utworzyć warstwę, wstawioną w nurt strony bez takich odstępów, należy użyć znacznika 74+2, w którym wykorzystywane jest pozycjonowanie względne. Aby zmienić znacznik: 1. Zaznacz warstwę. 2. Z inspektora Property wybierz znacznik .: lub 74+2 z rozwijanej listy Tag (rysunek 14.26). Znacznik zmieni się zgodnie z wyborem. Wskazówka  Pozostałe dostępne znaczniki +/6 i +/6 są znacznikami Navigatora. Ich specjalne właściwości omówione są pod koniec rozdziału — w części „Znaczniki warstw Navigatora”. Z n a c z n i k i w a r s t w 375 w t s r a w e i n a z c z s e i m e z r P Rozdział 14. Przemieszczanie warstw Położenie warstwy na stronie jest definiowane przez odległość od górnego lewego narożnika strony (lub nadrzędnej warstwy) do górnego lewego narożnika warstwy. Położenie warstwy zawsze można zmienić — przed dodaniem zawartości lub po wykonaniu tej czynności. Aby zmienić połorenie warstwy przez przeciganie: 1. Zaznacz warstwę. 2. Kliknij uchwyt wyboru (rysunek 14.27) i przeciągnij go w nowe miejsce (rysunek 14.28). lub Użyj klawiszy kursorów do przesunięcia warstwy w jednopikselowych skokach. Wskazówka  Aby przemieścić warstwę za pomocą opcji przyciągania do siatki, przytrzymaj wciśnięty klawisz Shift podczas użycia klawiszy kursorów. Aby precyzyjnie zdefiniować połorenie warstwy: 1. Wyświetl inspektora Property. 2. Zaznacz warstwę. 3. W polu L (Left) inspektora wpisz odległość warstwy od lewego marginesu, a w polu T (Top) jej odległość od górnego marginesu (rysunek 14.29). 4. Naciśnij Enter (Return) lub kliknij przycisk Apply. Położenie warstwy zmieni się. Wskazówka  Domyślną jednostką miary są tu piksele, ale możesz użyć też centymetrów, cali lub innych jednostek. Zobacz dodatkowe wskazówki w części pt. „Jednostki” w rozdziale 11. 376 Rysunek 14.27. Należy kliknąć uchwyt wyboru i przeciągnąć go w nowe miejsce Rysunek 14.28. Warstwa znalazła się w nowej pozycji Rysunek 14.29. Należy wpisać współrzędne X i Y w polach L i T w oknie inspektora Property Rysunek 14.30. Jeśli chce się zmienić szerokość warstwy i jej wysokość, to należy przeciągnąć uchwyt położony w narożniku, a wymiary zmienią się Rysunek 14.31. Jeśli chce się zmienić tylko jeden wymiar warstwy, to należy przeciągnąć uchwyt boczny Warstwy i pozycjonowanie Zmienianie rozmiaru warstwy Szerokość warstwy lub jej wysokość zawsze można zmienić — przed dodawaniem zawartości lub po wykonaniu tej czynności. Rozmiar można zmienić przy użyciu myszy, klawiatury lub przez wpisanie dokładnej wartości w oknie inspektora Property. Aby zmienić rozmiar warstwy przez przeciganie: 1. Zaznacz warstwę. Na jej krawędziach pojawią się uchwyty. 2. Aby zmienić i szerokość warstwy, i jej wysokość, pociągnij za uchwyt w narożniku (rysunek 14.30). 3. Aby zmienić tylko jeden rozmiar, kliknij i pociągnij uchwyt boczny (rysunek 14.31). Po zwolnieniu przycisku myszy warstwa zmieni swój rozmiar. Aby zmienić rozmiar warstwy przy uryciu klawiatury: 1. Zaznacz warstwę. 2. Aby minimalnie poszerzyć warstwę lub ją wydłużyć, naciśnij Ctrl+klawisz kursora (Option+klawisz kursora). Aby zmienić rozmiar o oczko siatki, naciśnij Shift+Ctrl+klawisz kursora (Shift+Option +klawisz kursora). Wskazówka  Jak zmienić ustawienia siatki? Zostało to opisane w rozdziale 1. (zobacz „Mierzenie w oknie Document”). Z m i e n i a n i e r o z m i a r u w a r s t w y 377 Rozdział 14. Aby precyzyjnie zmienić wielkolć warstwy: 1. Wyświetl okno inspektora Property. 2. Zaznacz warstwę. Rysunek 14.32. Nowe rozmiary warstwy można zdefiniować w polach W (szerokość) i H (wysokość) inspektora Property 3. W polach W (Width) i H (Height) inspektora określ szerokość warstwy i jej wysokość (rysunek 14.32). 4. Naciśnij klawisz Enter (Return) lub kliknij przycisk Apply. Wskazówka  Jeśli zmieniasz rozmiar warstwy, która zawiera tekst lub grafikę, nie możesz uczynić jej mniejszej, niż jej zawartość. Możesz zmienić jej wymiary, ale warstwa skurczy się tylko na tyle, na ile pozwala jej zawartość. Zobacz część „Kadrowanie” i „Zawartość przepełniona”, aby dowiedzieć się, jak poradzić sobie z rozmiarem zawartości warstwy. y w t s r a w u r a i m z o r e i n a i n e i m Z 378 Rysunek 14.33. Dwie nakładające się na siebie warstwy Rysunek 14.34. Jedna warstwa zagnieżdżona w drugiej Rysunek 14.35. W inspektorze Layers wyświetlona jest nazwa zagnieżdżonej warstwy tuż pod warstwą nadrzędną Warstwy i pozycjonowanie Zagnierdranie warstw i nakładanie ich na siebie Niewątpliwą zaletą warstw jest to, że można umieszczać je jedna w drugiej lub nakładać je na siebie. Aby nałoryć na siebie warstwy: Wystarczy przesunąć warstwy tak, by jedna przykrywała drugą lub utworzyć warstwę w miejscu, w którym znajduje się inna (rysunek 14.33). Możesz też zagnieżdżać jednocześnie dwie warstwy, które dodatkowo mogą się na siebie nakładać. Pozycja warstw zagnieżdżonych na stronie określana jest względem lewego górnego rogu innej warstwy, a nie strony. Aby umielcić jedn warstwę w drugiej: 1. Utwórz pierwszą warstwę. 2. Jeśli warstwy mają się na siebie nakładać, usuń zaznaczenie (jeśli tego nie uczyniłeś) z pola Prevent Overlaps w palecie Layers. 3. Kliknij wewnątrz warstwy. 4. Utwórz drugą warstwę w pierwszej (rysunek 14.34). W inspektorze Layers nazwa zagnieżdżonej warstwy pojawi się tuż pod nazwą warstwy nadrzędnej, lecz będzie ona lekko przesunięta w prawo (rysunek 14.35). Wskazówki  Jeśli zagnieżdżoną warstwę chcesz utworzyć przy użyciu myszy, to przytrzymaj klawisz Ctrl (Command) podczas przeciągania. Więcej szczegółów na ten temat zawiera część „Ustawienia warstw”.  Zaznaczenie pola wyboru Prevent Overlaps w oknie inspektora Layers uniemożliwi nakładanie na siebie warstw oraz ich zagnieżdżanie. Jeśli przed zaznaczeniem tego pola wyboru jakieś warstwy były na siebie nałożone, to można je rozdzielić przez przeciągnięcie myszą. 379 Z a g n i e r d r a n i e w a r s t w w t s r a w e i n a r d r e i n g a Z Rozdział 14. Aby zagniepdzić dwie istniejce warstwy: 1. W oknie inspektora Layers kliknij nazwę warstwy, którą chcesz umieścić w innej. Pojawi się ikona warstwy (rysunek 14.36). 2. Przytrzymaj klawisz Ctrl (Command) i przeciągnij nazwę na nazwę warstwy nadrzędnej. Wokół nazwy nowej warstwy nadrzędnej pojawi się ramka (rysunek 14.37). 3. Zwolnij przycisk myszy. Nazwa warstwy zagnieżdżonej pojawi się pod nazwą jej warstwy nadrzędnej (rysunek 14.38), lecz będzie w stosunku do niej przesunięta. Być może zmienisz zdanie i zechcesz rozdzielić warstwy. Aby zlikwidować zagnierdrenie:  Kliknij nazwę warstwy (rysunek 14.39) i przeciągnij ją tak, aby nie znajdowała się tuż pod nazwą warstwy nadrzędnej. Wskazówki  Kiedy zagnieżdżasz lub usuwasz zagnieżdżenie, warstwy mogą zmienić swoje położenie (rysunek 14.40), ponieważ ich pozycja (współrzędne X-Y) jest określana względem warstwy nadrzędnej. Ale zawsze możesz ją przesunąć z powrotem na właściwe miejsce.  W oknie inspektora Layers możesz zwinąć listę warstw zagnieżdżonych lub ją rozwinąć. Kliknięcie znaku + obok nazwy warstwy nadrzędnej spowoduje rozwinięcie listy, a kliknięcie znaku minusa (–) — jej zwinięcie.  Zagnieżdżoną warstwę najłatwiej jest zaznaczyć przez kliknięcie jej nazwy na liście.  Łatwo też możesz zmienić kolejność warstw. W tym celu przeciągnij nazwę na liście. Kolejność ułożenia warstw została omówiona w dalszej części rozdziału pt. „Kolejność warstw”. 380 Rysunek 14.36. Należy przytrzymać klawisz Ctrl (Command) i kliknąć nazwę warstwy, która ma być umieszczona w innej Rysunek 14.37. Należy przeciągnąć warstwę na nazwę warstwy nadrzędnej Rysunek 14.38. Należy zwolnić klawisz myszy, a nazwa zagnieżdżonej właśnie warstwy pojawi się tuż pod warstwą nadrzędną Rysunek 14.39. Należy kliknąć zagnieżdżoną warstwę, która ma być odłączona Rysunek 14.40. Należy przeciągnąć warstwę, a przestanie być zagnieżdżona. Trzeba zauważyć, że warstwa zmieniła swoje położenie (z rysunku 14.34), ponieważ jej pozycja odnosi się teraz do górnego lewego narożnika strony, a nie do warstwy nadrzędnej Warstwy i pozycjonowanie Zmienianie widocznolci warstwy Kiedy pracujesz nad stroną, która zawiera wiele warstw, możesz chwilowo ukryć niektóre z nich. To ułatwia pracę, szczególnie gdy warstwy nakładają się na siebie lub są zagnieżdżone. Możesz także określić, które warstwy będą widoczne po załadowaniu strony, a które nie będą wyświetlane. Widoczność warstwy określa „status oka” w oknie inspektora Layers.  Zamknięte oko oznacza, że warstwa jest ukryta.  Otwarte oko oznacza warstwę widoczną.  Brak rysunku oka oznacza, że wyświetlanie warstwy jest zależne od statusu jej warstwy nadrzędnej (jeśli taka istnieje). Aby wylwietlić warstwę lub j ukryć: 1. W oknie inspektora Layers kliknij nazwę warstwy. 2. Kliknij w kolumnie po lewej stronie, aby zmienić status oka na właściwy: oko zamknięte, otwarte lub brak oka. Warstwa pojawi się lub zniknie (rysunek 14.41) w zależności od statusu (rysunek 14.42). Aby wylwietlić wszystkie warstwy lub je ukryć:  Kliknij rysunek oka w nagłówku kolumny, który znajduje się w górnej części lewej kolumny palety Layers (rysunek 14.43). Wszystkie warstwy pojawią się, gdy oko będzie otwarte, a znikną, kiedy będzie zamknięte. Z m i e n i a n i e w i d o c z n o l c i w a r s t w y Rysunek 14.41. Warstwa na wierzchu, która była widoczna na rysunku 14.40, została ukryta Rysunek 14.42. Widzialność każdej warstwy można określić indywidualnie przez zmianę „statusu oka” w kolumnie definiującej ich widoczność Rysunek 14.43. Należy kliknąć rysunek oka nad lewą kolumną, aby jednocześnie ukryć wszystkie warstwy lub je wyświetlić  Ukryte warstwy możesz wykorzystać Wskazówki w połączeniu z behawiorami lub animacją (zobacz rozdział 16. oraz 17.) tak, aby pojawiały się po upływie określonego czasu lub po wykonaniu określonej akcji.  Zdefiniowanie widoczności warstw nie dotyczy tylko okna dokumentu. Warstwy ukryte nie będą widoczne również w oknie przeglądarki. 381 Rozdział 14. Kolejnolć warstw To za pomocą Z-indeksu warstw można zdecydować, w jakiej kolejności zostaną one odtworzone przez przeglądarkę (rysunki 14.44 – 14.46). Wskazówki  Chociaż w Dreamweaverze używa się terminu „kolejność na stosie” dla Z-indeksu, to nie oznacza to jednak, iż jest to jakaś wykluczająca skala. Trzy różne warstwy na stronie mogą mieć taki sam Z-indeks 1.  Dwie warstwy o tym samym Z-indeksie (lub bez zdefiniowanego indeksu) będą ułożone w ten sposób, że pierwsza w kodzie będzie ułożona na wierzchu. Możesz zmienić dowolnie Z-indeks każdej z warstw lub zdefiniować ich kolejność w inspektorze Layers. Aby zmienić Z-indeks pojedynczej warstwy: 1. Wyświetl inspektora Property za pomocą polecenia Window/Properties z menu okna Document. 2. Zaznacz warstwę. 3. W polu Z-Index inspektora (rysunek 14.47) wpisz indeks warstwy. Największa liczba oznacza pierwszeństwo (indeks 2 będzie położony nad indeksem 1). w t s r a w ć l o n j e l o K Rysunek 14.44. Mała postać w tym kolażu ma najwyższy Z-indeks Rysunek 14.45. W tej wersji zmieniłam kolejność obrazów i teraz pistolet ma najwyższy Z-indeks, znak jest drugi, a postać trzecia, natomiast banknot znalazł się na spodzie Rysunek 14.46. Tak kompozycja wygląda w oknie Dreamweavera Rysunek 14.47. Z-indeks można zdefiniować po wpisaniu liczby w polu Z-Index 382 Warstwy i pozycjonowanie Aby zmienić kolejnolć warstw na lilcie inspektora Layers: 
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Po prostu Dreamweaver 4
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: