Po Prostu Dreamweaver 4

IDZ DO
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Po prostu Dreamveawer 4
Autor: J. Tarin Towers
Tumaczenie: Iwo Nowosielski
ISBN: 83-7197-631-3
Tytu oryginau: Visual QuickStart Guide
Dreamweaver 4 for Windows and Macintosh
Format: B5, stron: 638
Dreamweaver jest wspaniaym narzdziem. Jest on take jednym z najlepszych

edytorw WYSIWYG (What You See Is What You Get, czyli uzyskasz dokadnie to,
co widzisz), jakie pojawiy si na rynku oprogramowania. Dreamweaver nie jest jedynie
kolejnym graficznym narzdziem jzyka HTML. W programie mona zrobi to wszystko,
co w najlepszych edytorach: utworzy tabele, edytowa ramki, atwo przechodzi
z podgldu strony do podgldu kodu HTML. Jednoczenie przewysza on inne edytory,
gdy pozwala tworzy witryny WWW z wykorzystaniem DHTML (dynamicznego HTML).
Ta ksika pozwoli szybko zapozna si programem i wykorzysta jego moliwoci
w tworzeniu stron WWW.
Spis treci
Wprowadzenie
15
Pierwsze kroki
27
Narzdzia Dreamweavera..........................................................................28
rodowisko Dreamweavera.......................................................................29
Dostosowywanie obszaru roboczego ........................................................31
Paleta Launcher .........................................................................................32
Planowanie witryny...................................................................................33
Okno Document ........................................................................................35
Nowy pasek narzdzi ................................................................................37
Mierzenie w oknie Document ...................................................................38
Podgld kodu.............................................................................................40
Paleta Objects............................................................................................42
Obiekty Dreamweavera ..............................................................................43
Zaznaczanie obiektw i kodu ....................................................................45
Inspektor Property .....................................................................................47
Niewidzialne elementy ..............................................................................48
O historii....................................................................................................49
Rozdzia 2.
Zakadanie witryny lokalnej

51
O oknie Site...............................................................................................52
Okno Site...................................................................................................53
Zakadanie witryny lokalnej......................................................................54
Edycja witryny lokalnej i jej usuwanie .....................................................57
Okno Site wskazwki i skrty..............................................................58
Przenoszenie plikw..................................................................................60
Zarzdzanie palet Assets .........................................................................61
Rodzaje zasobw.......................................................................................62
Jak dziaa paleta Assets .............................................................................63
Korzystanie z palety Assets.......................................................................64
Ogldanie zasobw i ich wstawianie.........................................................66
Uywanie Ulubionych i nazw dodatkowych.............................................68
Edytowanie zasobw i ich dzielenie .........................................................70
5
Spis treci
Rozdzia 1.
Spis treci
Najprostsze strony WWW

73
Tworzenie plikw HTML i ich otwieranie................................................74
Tworzenie zawartoci................................................................................75
Waciwoci strony ...................................................................................80
Modyfikowanie koloru strony i jej ta.......................................................82
Zapisywanie efektw pracy.......................................................................85
Zapisywanie kopii pliku ............................................................................86
Podgld strony w przegldarce....................................................................87
Drukowanie z okna przegldarki...............................................................88
Kolory a strony WWW .............................................................................89
Kolory a Windows ....................................................................................90
Kolory dla Maca........................................................................................91
Rozdzia 4.
Edycja kodu HTML

97
O HTML....................................................................................................98
Jak nauczy si jzyka HTML ..................................................................99
Praca z kodem .........................................................................................102
Opcje kodu ..............................................................................................105
Wykorzystywanie funkcji Code Reference .............................................107
Wykorzystywanie podrcznego edytora znacznikw ................................109
Zaznaczanie znacznikw nadrzdnych i podrzdnych............................115
Wstawianie komentarzy ..........................................................................117
Preferencje formatowania kodu HTML ..................................................119
Korekta kodu HTML...............................................................................121
Rozdzia 5.
Praca z grafik
127
Zamieszczanie grafiki .............................................................................128
Wstawianie grafiki za pomoc palety Assets ..........................................129
Zaznaczanie grafiki .................................................................................131
Inspektor Property ...................................................................................132
Formaty grafiki........................................................................................134
Waciwoci grafiki.................................................................................135
Waciwoci wygldu..............................................................................136
Waciwoci ukadu.................................................................................139
Waciwoci adowania strony ....................................................................142
Integracja z edytorem grafiki ..................................................................144
Rozdzia 6.
Hipercza i adresy URL

147
Rodzaje hiperczy ..................................................................................148
Wicej o czach wzgldnych .................................................................150
Tworzenie hiperczy ..............................................................................154
Spis treci
Rozdzia 3.
Spis treci
Tworzenie czy wzgldnych ..................................................................155

Hipercza graficzne................................................................................157
Wskazywanie pliku .................................................................................158
cza do adresw e-mail.........................................................................159
cza do okrelonego miejsca na stronie ................................................161
Otwieranie hiperczy w nowym oknie...................................................165
Kierunek cel .......................................................................................166
Zmienianie kolorw hiperczy.................................................................167
Strategia tworzenia hiperczy ..................................................................168
Wstawianie obiektw multimedialnych i ich obsuga
171
Rollovery graficzne .................................................................................173
Uywanie paskw nawigacyjnych ..........................................................175
Pliki dwikowe ......................................................................................180
Parametry pliku dwikowego ................................................................184
Rozszerzenia Netscapea.........................................................................186
Obiekty Shockwave i Flash.....................................................................188
Tworzenie obiektw Flash w Dreamweaverze........................................189
Aplety Javy..............................................................................................195
Technologia ActiveX ..............................................................................196
Parametry dodatkowe..............................................................................197
Rozdzia 8.
Praca z tekstem
199
Wprowadzanie tekstu ..............................................................................200
Zmienianie rozmiaru czcionki.................................................................201
Style tekstu ..............................................................................................205
Fizyczne style tekstu ...............................................................................206
Wicej fizycznych stylw tekstu.............................................................207
Logiczne style tekstu...............................................................................208
Zmienianie kroju czcionki.......................................................................209
Tworzenie grupy czcionek ......................................................................210
Zmienianie koloru czcionki.....................................................................213
Znaki specjalne w jzyku HTML............................................................215
Okno Find and Replace ...........................................................................217
Sprawdzanie pisowni...............................................................................220
Rozdzia 9.
Akapity i ukad dokumentu

223
Akapity kontra koce wiersza .................................................................224
Waciwoci akapitu................................................................................226
Tworzenie nagwkw ............................................................................227
7
Spis treci
Rozdzia 7.
Spis treci
Stosowanie tekstu preformatowanego.....................................................228

Formatowanie list....................................................................................230
Wyrwnanie tekstu..................................................................................234
Wcicia w tekcie....................................................................................235
Twarda spacja..........................................................................................237
Linie poziome..........................................................................................239
Spis treci
Rozdzia 10. Tworzenie stylw HTML

241
Stosowanie stylw HTML ......................................................................243
Usuwanie stylw .....................................................................................245
Tworzenie nowych stylw ......................................................................246
Edycja stylu .............................................................................................250
Rozdzia 11. Arkusze stylw
253
W tym rozdziale ......................................................................................254
Jak dziaa arkusz stylw ..........................................................................255
Rodzaje stylw ........................................................................................256
Rodzaje arkuszy stylw...........................................................................258
Tworzenie stylu .......................................................................................259
Redefiniowanie znacznika HTML ..........................................................260
Tworzenie klasy stylu..............................................................................262
Stosowanie klasy stylu ............................................................................264
Usuwanie stylw .....................................................................................265
Definiowanie nowych selektorw ...........................................................266
Wykorzystanie zewntrznych arkuszy stylw ........................................271
Tworzenie zewntrznego arkusza stylw lub cza do niego....................272
Doczanie zewntrznego arkusza stylw ...............................................275
Eksportowanie stylw wewntrznych .....................................................276
Zapisywanie strony z arkuszem stylw w postaci czystego HTML .........277
Edytowanie stylw ..................................................................................278
Konflikty stylw......................................................................................280
Definicje stylw ......................................................................................281
Parametry tekstu......................................................................................283
Parametry ta ...........................................................................................286
Parametry bloku tekstu............................................................................288
Parametry kontenera................................................................................291
Parametry obramowania..........................................................................293
Parametry listy.........................................................................................294
Rozszerzenia............................................................................................295
8
Spis treci
Rozdzia 13. Ramki

331
Ramki a nawigacja ..................................................................................332
Tworzenie strony z ramkami...................................................................333
Tworzenie ramek przez przeciganie ......................................................334
Szybkie ramki i faszywe ramki ...............................................................336
Inspektor Frames .....................................................................................339
Modyfikowanie ukadu strony z ramkami...............................................340
Usuwanie ramek......................................................................................341
Ramki zagniedone ...............................................................................342
Ustawienia kolumn i wierszy ..................................................................344
Okrelanie zawartoci ramek .....................................................................346
Tworzenie dokumentu w ramce ..............................................................347
Zapisywanie efektw pracy.....................................................................348
Zapisywanie strony definiujcej ramki ...................................................349
Opcje bloku Frameset..............................................................................350
Ustawienia marginesw ..........................................................................353
Ramki docelowe......................................................................................354
9
Spis treci
Rozdzia 12. Tabele

297
Definiowanie tabel ..................................................................................298
O tabelach tworzcych ukad strony .......................................................299
Wstawianie tabeli w widoku Standard ....................................................301
Rysowanie ukadu ...................................................................................302
Zaznaczanie elementw ..........................................................................305
Dodawanie wierszy i kolumn w widoku Standard ..................................307
Dopasowanie rozmiarw tabeli ...............................................................310
Zmienianie rozmiaru wierszy i kolumn w widoku Standard...................312
Przesuwanie elementu tworzcego ukad strony.....................................313
Ustawianie szerokoci w widoku Layout ................................................314
czenie i dzielenie komrek..................................................................318
Wstawianie zawartoci do tabeli .............................................................319
Wyrwnywanie tabel i zawartoci ..........................................................321
Odstpy w tabeli......................................................................................322
Krawdzie tabeli......................................................................................323
Kolory w tabeli........................................................................................324
Grafika jako to w tabeli..........................................................................325
Wstawianie danych tabelarycznych ........................................................326
Eksportowanie tabel ................................................................................328
Sortowanie zawartoci tabeli...................................................................329
Spis treci
Spis treci
Definiowanie miejsc docelowych.............................................................356

Testowanie hiperczy.............................................................................358
Tworzenie zawartoci bez ramek ............................................................359
Ramki inline ............................................................................................361
Rozdzia 14. Warstwy i pozycjonowanie
363
Pozycjonowanie CSS ..............................................................................364
Pozycjonowanie bezwzgldne kontra wzgldne ...........................................365
Parametry pozycjonowania .....................................................................366
Inne parametry CSS zwizane z pozycjonowaniem .................................368
Inspektor Layers......................................................................................369
Siatka.......................................................................................................370
Tworzenie warstw ...................................................................................371
Zaznaczanie warstw ................................................................................373
Zmienianie nazwy warstwy.....................................................................374
Znaczniki warstw ....................................................................................375
Przemieszczanie warstw..........................................................................376
Zmienianie rozmiaru warstwy...................................................................377
Zagniedanie warstw i nakadanie ich na siebie....................................379
Zmienianie widocznoci warstwy ...........................................................381
Kolejno warstw ....................................................................................382
Zawarto warstw....................................................................................384
Warstwy a style .......................................................................................385
Kadrowanie .............................................................................................386
Zawarto przepeniona...........................................................................388
To warstwy.............................................................................................389
Ustawienia warstw ..................................................................................390
Znaczniki warstw Navigatora..................................................................392
Dodatkowe waciwoci warstw Navigatora...........................................393
Definicja waciwoci warstwy Netscapea ............................................394
Konwersja warstw w tabele (i odwrotnie)...............................................395
Kalka grafiki............................................................................................399
Rozdzia 15. Formularze
403
Tworzenie formularza .............................................................................404
Formatowanie formularzy .......................................................................406
Dodawanie elementw formularza..........................................................407
Nazwy i wartoci.....................................................................................408
Pola tekstowe...........................................................................................409
10
Spis treci
Pola wyboru.............................................................................................414
Przyciski wyboru opcji............................................................................415
Menu i listy .............................................................................................417
Edycja elementw menu .........................................................................419
Tworzenie listy........................................................................................420
Menu skokw ..........................................................................................421
Ukryte pola formularza ...........................................................................424
Przyciski Submit i Reset .........................................................................425
Pola graficzne..........................................................................................427
Wylij formularz .....................................................................................429
11
Spis treci
Rozdzia 16. Behawiory

431
Zasada dziaania JavaScript.....................................................................432
Dodawanie behawiorw ..........................................................................434
Usuwanie behawiorw i ich edycja.........................................................436
Najczciej uywane obiekty ...................................................................438
Obsuga zdarze ......................................................................................440
Najczstsze akcje.....................................................................................442
Wiadomo na pasku stanu przegldarki ................................................443
Przejd do URL.......................................................................................444
Okno komunikatu....................................................................................445
Otwrz okno przegldarki .......................................................................446
Sprawd modu rozszerzajcy .................................................................448
Sprawd wersj przegldarki ......................................................................450
Podmiana obrazw ..................................................................................452
Wstpne adowanie grafiki......................................................................454
Przywrcenie pierwotnego obrazu ..........................................................455
Odtwarzanie dwiku..............................................................................456
Odtwarzanie animacji Shockwave lub Flash...........................................457
Poka warstwy i ukryj je .........................................................................458
Weryfikacja formularza...........................................................................460
Zmiana zawartoci ramek i warstw .........................................................462
Wstawianie tekstu do pola tekstowego formularza .................................465
Zmie waciwo ...................................................................................466
Przecignij warstw.................................................................................468
Dodawanie nowych skryptw i zdarze..................................................472
Dodawanie nowych akcji ........................................................................474
Korekta skryptu JavaScript .....................................................................476
Spis treci
Spis treci
Rozdzia 17. Animacje Timelines

479
Co mona zrobi za pomoc Timelines ..................................................480
Inspektor Timelines.................................................................................481
Budowa inspektora Timelines .................................................................482
Dodawanie warstwy do Timeline............................................................484
Akcje Timelines ......................................................................................485
Klatki kluczowe.......................................................................................489
Wywietlanie warstw i ich ukrywanie.....................................................491
Zmienianie Z-indeksu .............................................................................492
Zmienianie czasu trwania animacji ..........................................................493
Zmienianie rozmiaru warstwy.................................................................494
Dodawanie rolloverw graficznych do Timeline ....................................495
Dodawanie behawioru do Timeline ........................................................497
Uruchamianie animacji ...........................................................................498
Odtwarzanie animacji za pomoc behawiorw.......................................499
Odtwarzanie w ptli i przewijanie...........................................................501
Dodawanie klatek i ich usuwanie ................................................................503
Uywanie zoonych Timelines .................................................................504
Zmiana nazwy animacji i usuwanie animacji..........................................505
Usuwanie obiektw i ich zamiana...........................................................506
Poczenie wszystkiego...........................................................................507
Rozdzia 18. Zakadanie witryny lokalnej
509
O bibliotekach .........................................................................................510
Elementy biblioteki .................................................................................512
Tworzenie elementu biblioteki..................................................................513
Wstawianie elementw biblioteki i ich usuwanie ...................................514
Edycja elementw biblioteki ...................................................................515
Usuwanie elementw biblioteki ..............................................................517
Odtworzenie elementu biblioteki ............................................................518
Szablony Dreamweavera.........................................................................519
Tworzenie szablonw..............................................................................520
Definiowanie waciwoci strony dla szablonu.......................................521
Uywanie stylw i skryptw JavaScript w szablonach...........................521
Definiowanie obszarw do edycji ...........................................................522
Tworzenie stron na podstawie szablonw...............................................524
Odczanie strony od szablonu................................................................525
Usuwanie szablonu..................................................................................526
Doczanie istniejcej strony do szablonu...............................................527
12
Spis treci
Obszary do edycji....................................................................................528
Edycja szablonw....................................................................................529
Wyrnienia w szablonach......................................................................530
Eksport w formacie XML .......................................................................531
Aktualizacja witryny ...............................................................................535
Zmienianie nazw szablonw i elementw biblioteki ..............................537
Pliki doczane serwera ...........................................................................538
Wstawianie SSI .......................................................................................540
Paleta History ..........................................................................................541
Powtarzanie czynnoci i ich cofanie .......................................................543
Kopiowanie czynnoci i ich wklejanie....................................................547
Czyszczenie listy historii.........................................................................549
Zapisywanie czynnoci w postaci polece ..............................................550
Rejestrowanie polece.............................................................................551
Powtarzanie polece................................................................................552
Zmienianie nazw i usuwanie polece......................................................553
Rozdzia 20. Zarzdzanie witrynami WWW

575
Przygotowania do umieszczania witryny w sieci.....................................576
Definiowanie informacji o serwerze WWW ...........................................577
Poczenie z serwerem ............................................................................580
Pobieranie plikw i przenoszenie ich na serwer........................................581
Synchronizacja plikw ............................................................................582
Opcje odwieania i zmiany widoku.......................................................583
Mapa witryny ..........................................................................................584
Ikony mapy witryny i porady ..................................................................586
13
Spis treci
Rozdzia 19. Dostosowanie programu

555
Wasne obiekty........................................................................................557
Edycja menu Dreamweavera...................................................................561
Troch o XML.........................................................................................562
Szersza modyfikacja Dreamweavera poprzez interfejs JavaScript API..563
Plik menus.xml........................................................................................564
Pozycje menu ..........................................................................................566
Kolejno pozycji w menu ......................................................................568
Usuwanie pozycji z menu .......................................................................569
Dodawanie separatora .............................................................................569
Zmienianie skrtw klawiszowych .........................................................570
Dostosowanie okien dialogowych...........................................................574
Spis treci
Spis treci
Rysowanie czy na mapie witryny.........................................................587

Zarzdzanie hiperczami........................................................................588
Zmienianie hipercza wystpujcego wielokrotnie w witrynie .............593
Podzia zasobw w witrynach lokalnych ................................................594
Ustawienia FTP .......................................................................................596
Rozdzia 21. Praca i wsppraca
599
Meldowanie plikw i ich wymeldowanie ...............................................601
Wymeldowanie plikw ...........................................................................604
Meldowanie plikw.................................................................................606
Konfigurowanie notatnika projektu.........................................................608
Korzystanie z notatnika ...........................................................................610
Dostp do notatnika projektu ..................................................................612
Usuwanie niepotrzebnych notatek...........................................................613
Wyczanie notatnika projektu................................................................614
Modyfikowanie kolumn w oknie Site .....................................................615
Dodawanie File View Columns (kolumn widoku pliku) ........................617
Udostpnianie kolumn.............................................................................618
Raport witryny.........................................................................................620
Udostpnianie pliku stylw .....................................................................624
Korzystanie z Dremweavera do zarzdzania zawartoci.......................626
Skorowidz
14
629
Warstwy i pozycjonowanie
Dziki istnieniu warstw mona kontrolowa

dokadne pooenie swoich elementw na
stronie WWW. Warstwa jest pojemnikiem
na pewn wydzielon znacznikami
lub cz kodu HTML, ktr mona
umieci w dowolnym miejscu na stronie.
Warstwy mog na siebie zachodzi lub nakada
si na siebie, czym rni si od komrek tabeli.
Na poszczeglnych warstwach obiekty mog
by widoczne lub te nie bdzie ich wida,
a mog by take przemieszczane.
Projektanci kochaj warstwy za ich uniwersalno.

Podczas pierwszego adowania strony warstwa
(lub jej cz) moe by ukryta. Odpowiedni
skrypt ujawnia ukryty obszar po okrelonym
upywie czasu lub w wyniku zdefiniowanego
dziaania (w rozdziaach 16. i 17. znale mona
informacje na temat zdarze i dziaania animacji
Timelines).
Wskazwka
Przegldarki, takie jak IE czy Netscape 4.0,
wywietl zawarto warstw, jednake

ignoruj wikszo ich waciwoci, w tym
pozycjonowanie. Zajrzyj do dodatku C na
stronie internetowej, aby dowiedzie si, jak
poradzi sobie ze starszymi przegldarkami.
363
Rysunek 14.1. Ten may kola utworzono z trzech

nakadajcych si na siebie warstw (takiego efektu
nie mona uzyska za pomoc tabeli)
Warstwy nazwano tak dlatego, e mona je

umieszcza w przestrzeni trjwymiarowej.
Mona zdefiniowa bezwzgldne lub wzgldne
pooenie warstwy w stosunku do wsprzdnych
X i Y strony. Trzeci wymiar, zwany Z-indeksem,
pozwala nakada warstwy na siebie
(rysunek 14.1).
Rozdzia 14.
Pozycjonowanie CSS
Pozycjonowanie CSS
Warstwy s czci kaskadowych arkuszy

stylw (Cascading Style Sheets, w skrcie CSS)
i dynamicznego kodu HTML. Pozycjonowanie
kaskadowych arkuszy stylw, inaczej CSS-P,
pozwala na bardzo dokadne ustawienie obiektw.
Wczeniejsze metody, zwizane z uyciem tabel,
ramek czy marginesw ramek, nie pozwalay
osign takich efektw, jak przy uyciu CSS-P.
Tabele, tworzce ukad strony (zobacz w rozdziale
12.), daj projektowi pewn elastyczno, ale
nie pozwalaj elementom zachodzi na siebie,
tworzy animacji Timelines czci strony ani
uywa behawiorw.
CSS-P mona zastosowa do bloku tekstu,
elementu typu blok, grafiki lub warstwy.
Pozycjonowanie mona wykorzysta na dwa
sposoby. Jeden to utworzenie klasy stylu
i zastosowanie jej do wybranego tekstu (w ten
sposb obiekt stanie si praktycznie warstw).
Drugi to utworzenie w oknie dokumentu warstwy,
ktr mona nastpnie modyfikowa niezalenie
od tworzonych stylw.
Rysunek 14..2. Ta warstwa jest uoona w odlegoci

150 pikseli od lewej krawdzi okna i 70 pikseli
od grnej
Wsprzdne X i Y
Warstwy lub inne elementy s umieszczane
wzgldem wsprzdnych X i Y, ktre odpowiadaj
odlegociom od lewej i grnej krawdzi. Mog
to by krawdzie strony lub innego nadrzdnego
pojemnika, np. warstwy lub bloku tekstu
(rysunek 14.2).
Z-indeks
Trzeci waciwoci warstwy w odniesieniu
do pozycjonowania jest Z-indeks. Jest ona
wykorzystywana wtedy, gdy wicej warstw
na stronie nakada si na siebie. Z-indeks okrela
kolejno warstw (rysunek 14.3). Im wyszy jest
indeks, tym warstwa jest pooona bliej wierzchu.
364
Rysunek 14.3. Mniejsza warstwa jest uoona

nad wiksz, co oznacza, e jej Z-indeks jest wikszy
Warstwy a animacja
Dynamiczny HTML umoliwia
przemieszczanie warstw na stronie.
W palecie Timelines, ktra zostaa
opisana w rozdziale 17., tworzy si
animacj. Zdarzenia Show Layer
Behavior i Drag Layer Behavior
pozwalaj zmienia wygld warstwy
lub jej pozycj po wykonaniu okrelonej
akcji przez uytkownika. Zdarzenia
(behawiory) zostay omwione
w rozdziale 16.
Pozycjonowanie bezwzgldne
kontra wzgldne
Pozycja elementu w dokumencie HTML moe
by bezwzgldna, wzgldna lub statyczna.
Rysunek 14.4. W pozycji statycznej (static)

warstwa jest traktowana jak blok tekstu
i umieszczana zgodnie z normalnym nurtem tekstu
Rysunek 14.6. Tu kod jest nieomal taki sam, jak

strony z rysunku 14.5 jedynie zamiast znacznika
<div> uyto znacznika <span>
Pozycja wzgldna (relative) oznacza, e pozycja

warstwy lub innego elementu jest okrelona
wzgldem grnego lewego rogu nadrzdnego
kontenera. Element, mimo e zosta wstawiony do
pojemnika i zawarty w nurcie strony, nie bdzie
automatycznie ama wierszy (rysunek 14.5).
Aby takie waciwoci wstawiania byy pewne,
naley zamiast znacznika uy znacznika
(rysunek 14.6).
Element taki, jak np. warstwa, umiejscowiony
w sposb bezwzgldny (absolute), znajduje si
zupenie poza nurtem dokumentu. Warstwa ani
nie jest zawarta w podstawowym nurcie strony,
ani nie zakca jego przepywu (rysunek 14.7).
Rysunek 14.7. Warstwa jest z powrotem ujta

w znacznik <div> i jest pozycjonowana w sposb
bezwzgldny (absolute), co oznacza, e podstawowy
nurt tekstu ponownie zaczyna si od gry strony,
a warstwa jest pooona nad nim
365
Pozycjonowanie bezwzgldne
Rysunek 14.5. Zastosowanie pozycjonowania

wzgldnego (relative) powoduje umieszczenie
warstwy zgodnie ze zdefiniowanymi wsprzdnymi
X i Y, co wpywa na podstawowy nurt tekstu.
Znacznik <div>, na przykad, powoduje przerwanie
akapitu za warstw (porwnaj z rysunkiem 14.6)
Pozycja normalna jest nazywana statyczn

(static) i oznacza, e element jest umieszczony
w podstawowym nurcie tekstu. Zdefiniowanie
wsprzdnych dla tej pozycji nie spowoduje
wprowadzenia adnych zmian zostan one
zignorowane (rysunek 14.4).
Rozdzia 14.
Parametry pozycjonowania
Waciwoci pozycjonowania mog by stosowane

do dowolnego obiektu. Jednak po ich zdefiniowaniu
zachowanie obiektu bdzie podobne do zachowania
warstwy w Dreamweaverze bdzie on tak
traktowany, jak warstwa, chocia w przegldarce
inaczej mog by obsugiwane elementy nieujte
w znaczniki lub .
Aby zastosowa pozycjonowanie do obiektu
innego ni warstwa, naley utworzy styl i uy
go w sposb opisany w rozdziale 11. oraz
zdefiniowa waciwoci Positioning w oknie
Style Definition (rysunek 14.8). Jednak generalnie
prociej jest utworzy warstw oddzielnie, wedug
instrukcji opisanych w tym rozdziale. Kto raz
zrozumie istot warstw i stylw, ten moe tworzy
style, za pomoc ktrych bdzie dodawa
do projektu rne warstwy.
Rysunek 14.8. Panel Positioning okna Style

Definition Style zostay omwione w rozdziale 11.,
pozycjonowanie omawiam w biecym rozdziale
Ponisze waciwoci bd omwione peniej

w dalszych czciach rozdziau:
Parametr Type okrela rodzaj pozycjonowania:
bezwzgldne (absolute), wzgldne (relative)
lub statyczne (static).
Visibility okrela, czy element bdzie widoczny
po zaadowaniu strony. Mona zdeklarowa
element w ten sposb, eby by widoczny (visible)
lub ukryty (hidden). Mona te zdecydowa,
by przejmowa on waciwoci (inherit) od
nadrzdnych elementw. Przy definiowaniu
zdarze (rozdzia 16.) mona sprawi,
e widoczno warstwy zmieni si po upywie
okrelonego czasu lub po akcji uytkownika.
Rysunek 14.9. Dwie proste prostoktne

warstwy jedna jest pooona nad drug
Za pomoc Z-indexu (rysunek 14.9) definiuje

si kolejno warstw. Wskanik ten jest trzeci,
po X i Y, wsprzdn, ktra okrela pooenie
warstwy w trzecim wymiarze. Element o wyszym
Z-indeksie ma pierwszestwo, czyli warstwa
o indeksie 3. bdzie pooona nad warstw
o indeksie 2.
Jeli warstwy nie maj kolorowego ta i wstawiono
do nich przezroczyst grafik, to mona je tak
naoy na siebie, aby jeden obraz przykry drugi
(rysunek 14.10).
366
Rysunek 14.10. Kady z tych obrazw znajduje si

w osobnej warstwie, a poniewa obydwa maj
przezroczyste to, to kady jest widoczny na stronie
Przy uyciu parametru Overflow mona
zdefiniowa zachowanie warstwy, gdy zawarto
nie mieci si w jej granicach. Mona wybra
opcj wywietlania (visible) przepenionej
zawartoci lub jej ukrywania (hidden). Do
warstwy mog te by dodane paski przewijania
(scroll) (w opcji auto najczciej rwnie s
dodawane paski przewijania) (rysunek 14.11).
Rysunek 14.11. Paski przewijania zostan

dodane przez Internet Explorera do warstwy, ktrej
zawarto przekracza jej rozmiary (tak zawarto
mona take zdefiniowa jako widoczn (visible)
lub ukryt (hidden))
Wskazwka
Ustawienie Overflow jest niepoprawnie
wywietlane przez Dreamweavera i nie jest
obsugiwane przez Navigatora 4.x, cho jest
obsugiwane przez Netscape 6. W Navigatorze
4 przepeniona zawarto warstwy jest
zawsze widoczna.
Rysunek 14.12. Obszar kadrowania pozwala

zdefiniowa obszar warstwy, ktra bdzie widoczna
lub ukryta po zaadowaniu strony. W tym przykadzie
tylko grna poowa obrazu bdzie widoczna
po zaadowaniu
Clip okrela wykadrowany obszar warstwy,

czyli taki, w ktrym zawarto bdzie widoczna
(rysunek 14.12). Mona utworzy warstw
o rozmiarze 200200 pikseli, a nastpnie
zdefiniowa w niej obszar 100100 pikseli,
w ktrym bdzie widoczna zawarto. Obszar
kadru jest prostoktem, zdefiniowanym przez
cztery miary (Top, Right, Bottom i Left).
Wskazwka
Kadrowanie nie ma nic wsplnego
z przepenieniem zawartoci. Przepenienie
pozostaje w zwizku z wymiarami warstwy,
bez wzgldu na to, jak zdefiniowany jest
obszar kadrowania.
367
Skorzystanie z parametrw Placement (rysunki

14.9 i 14.10) spowoduje zdefiniowanie odlegoci
warstwy od lewej (Left) i grnej (Top) krawdzi
nadrzdnej jednostki. Miary Width (szeroko)
i Height (wysoko) pozostaj w relacji do
pooenia i okrelaj pozycj prawego dolnego
naronika warstwy.
Rozdzia 14.
Inne parametry CSS zwizane

z pozycjonowaniem
Inne parametry CSS
Inne parametry arkuszy stylw s mniej zwizane

z pozycjonowaniem i bardziej odnosz si do
pooenia tekstu ni grafiki. Ale podaj ich list:
wszystkie parametry bloku (panel Block okna
Style Definition) (rysunek 14.13); wyrwnanie
tekstu (Text Align) (rysunek 14.14); wysoko
wiersza Line Height (panel Type) parametr
tekstu; parametr Position listy (panel List)
odnosi si do wcicia pozycji listy; wikszo
parametrw kontenera (panel Box), a szczeglnie
Float, Clear, Margins i Padding. Moesz take
otacza warstwy ramkami za pomoc parametrw
panelu Border. Wszystkimi parametrami
zajmowalimy si w rozdziale 11.
Rysunek 14.13. W panelu Block okna Style Definition

mona zdefiniowa parametry wyrwnania
pionowego bloku tekstu lub zaznaczenia
Rysunek 14.14. Opcje wyrwnania pionowego

za pomoc stylw
368
Inspektor Layers
Inspektor Layers (rysunek 14.15) pokazuje
list wszystkich warstw na biecej stronie.
Po utworzeniu nowej warstwy jej nazwa
pojawi si na licie w inspektorze Layers.
Aby otworzy okno inspektora Layers:

Rysunek 14.15. W inspektorze Layers wywietlana
jest lista wszystkich warstw na stronie
Z menu okna Document wybierz polecenie
Window/Layers.
lub
Nacinij F2.
W obu przypadkach pojawi si inspektor Layers.
Inspektor Layers
369
Rozdzia 14.
Siatka
Siatka przypomina papier w kratk. Uatwia ona
dokadne pozycjonowanie warstw i zmian ich
rozmiaru.
Aby wywietli siatk:

View/Grid/Show Grid.
Siatka zostanie wywietlona (rysunek 14.16).
Linijki
Linijki mog by wywietlane wzdu lewej
i grnej krawdzi okna Document. Pomagaj one
pozycjonowa warstwy i zmienia ich rozmiar.
Rysunek 14.16. Wywietlona siatka pozwoli

lepiej zorientowa si w pooeniu obiektw
Aby wywietli linijki:

View/Rulers/Show.
Siatka
Zostan wywietlone linijki (rysunek 14.17).

Wskazwka
Jednostki linijek i siatki oraz opcj
przycigania do siatki zostay omwione
w podrozdziale Mierzenie w oknie Document
w rozdziale 1.
370
Rysunek 14.17. Linijki (z siatk lub bez niej)

umoliwiaj dokadne okrelenie pooenia obiektw
Tworzenie warstw
Zanim wykorzystasz wszystkie moliwoci
warstw, musisz cho jedn z nich utworzy.
Moesz wstawi warstw z palety Objects
i rysowa j na ekranie, moesz rwnie uy
polecenia z menu Insert, aby wstawi warstw
domylnej wielkoci. Rozmiar warstwy i jej
pooenie moesz zawsze zmieni.
Rysunek 14.18. Za pomoc polecenia Layer z menu

Insert mona wstawi warstw domylnej wielkoci.
Wygld warstwy mona zmieni po jej wstawieniu
Wskazwka
Moesz zmieni waciwoci domylnej
warstwy. Zobacz Ustawienia warstw
w dalszej czci rozdziau.
Aby wstawi warstw z menu Insert:

Insert/Layer.
Aby wstawi warstw z palety Objects:

1. Jeli palety nie ma na ekranie, wywietl j
za pomoc polecenia View/Objects z menu

okna Document.
2. Kliknij przycisk Draw Layer
. Kursor
myszy zamieni si w krzyyk (rysunek 14.19).
3. Kliknij w miejscu, w ktrym powinien znale

Rysunek 14.19. Po klikniciu przycisku Draw Layer
wskanik myszy zamieni si w krzyyk rysujcy warstw
si lewy grny naronik warstwy i przecignij

mysz do wybranego miejsca.
371
Tworzenie warstw
Domylna warstwa pojawi si w lewym grnym

rogu okna dokumentu (rysunek 14.18).
Rozdzia 14.
4. Zwolnij przycisk myszy. Warstwa zostanie
narysowana (rysunek 14.20).

Wraz z warstw pojawi si jej ikona, ktra
wskazuje, gdzie w kodzie strony znajduje si
odpowiadajcy warstwie fragment.
Wskazwka
Jeli ikona warstwy nie jest widoczna,
to wybierz polecenie View/Visual Aids/
Invisible Elements z menu okna Document.
Ikon mona w ten sposb dowolnie
pokazywa lub ukrywa.
Tworzenie warstw
Rysunek 14.20. Pojawi si rysowana warstwa

oraz ikona, ktra wskazuje na jej pooenie w kodzie
strony
372
Zaznaczanie warstw
Aby usun warstw, przesun j lub zmieni
jej rozmiar, naley j zaznaczy. Kliknicie
wewntrz warstwy nie wystarczy. Ale i na to jest
kilka sposobw.
Aby zaznaczy warstw:

1. Kliknij wewntrz warstwy.
2. Kliknij uchwyt wyboru w lewym grnym
rogu warstwy (rysunek 14.21).

lub
lub
Kliknij krawd warstwy.
lub
Kliknij ikon warstwy w oknie dokumentu.
lub
Kliknij znacznik warstwy
, ,
lub ) w selektorze
znacznikw na pasku stanu okna Document
(rysunek 14.21).
Rysunek 14.22. Po zaznaczeniu warstwy na jej

krawdziach pojawi si osiem uchwytw, a jej
nazwa w inspektorze Layers zostanie wyrniona
Osiem punktw, zwanych uchwytami,

pojawi si na krawdziach zaznaczonej warstwy
(rysunek 14.22), a jej nazwa zostanie wyrniona
w inspektorze Layers. I oczywicie nasz
stary znajomy, inspektor Property, wywietli
waciwoci warstwy (rysunek 14.23).
Rysunek 14.23. Waciwoci warstwy s wywietlane

w inspektorze Property
Kiedy warstwa jest zaznaczona, moesz j

usun, jeli zechcesz.
Aby usun$ warstw:

1. Zaznacz warstw.
2. Nacinij klawisz Delete lub Backspace.
Warstwa zniknie.
373
Zaznaczanie warstw
Rysunek 14.21. Aby zaznaczy warstw, kliknij jej

uchwyt wyboru lub ikon warstwy w oknie albo
znacznik <div> lub <span> w selektorze znacznikw
bd nazw warstwy w inspektorze Layers
Zaznacz nazw warstwy w inspektorze

Layers.
Rozdzia 14.
Zmienianie nazwy warstwy

Nazwy warstw s uywane przez przegldarki
i w skryptach. Dreamweaver nadaje warstwom
domylne nazwy Layer1, Layer2, itd.
Rysunek 14.24. Naley wpisa now

nazw warstwy w polu Layer ID w oknie
inspektora Property
Moesz warstwom nada bardziej znaczce

nazwy:
1. Zaznacz warstw.
2. W inspektorze Property zaznacz star nazw
i usu j (rysunek 14.24).
Zmienianie nazwy warstwy
lub
W inspektorze Layers kliknij nazw warstwy
i przytrzymaj wcinity przycisk myszy
(Windows) lub dwukrotnie kliknij nazw
warstwy (Macintosh). Wiersz, ktry zawiera
t nazw, zostanie wyrniony, a ona sama
pojawi si w polu tekstowym.
3. Wpisz now nazw (rysunek 14.25).
Nazwa warstwy zostanie zmieniona.
374
Rysunek 14.25. Naley wpisa

now nazw w inspektorze Layers
Znaczniki warstw
Rysunek 14.26. Znacznik mona zmieni w menu

Tag w rozwinitym oknie inspektora Property
Do tworzenia warstw wykorzystuje si cztery

znaczniki. i tworz tak zwane
warstwy CSS. Ze znacznikiem zwizane jest
pozycjonowanie bezwzgldne znacznik otacza
odstp akapitowy. Aby utworzy warstw,
wstawion w nurt strony bez takich odstpw,
naley uy znacznika , w ktrym
wykorzystywane jest pozycjonowanie wzgldne.
Aby zmieni znacznik:

1. Zaznacz warstw.
2. Z inspektora Property wybierz znacznik
lub z rozwijanej listy Tag
(rysunek 14.26).
Znacznik zmieni si zgodnie z wyborem.
375
Znaczniki warstw
Wskazwka
Pozostae dostpne znaczniki
i s znacznikami Navigatora.
Ich specjalne waciwoci omwione s
pod koniec rozdziau w czci Znaczniki
warstw Navigatora.
Rozdzia 14.
Przemieszczanie warstw
Pooenie warstwy na stronie jest definiowane
przez odlego od grnego lewego naronika
strony (lub nadrzdnej warstwy) do grnego
lewego naronika warstwy. Pooenie warstwy
zawsze mona zmieni przed dodaniem
zawartoci lub po wykonaniu tej czynnoci.
Aby zmieni poo%enie warstwy

przez przeci$ganie:
1. Zaznacz warstw.
Rysunek 14.27. Naley klikn uchwyt wyboru

i przecign go w nowe miejsce
2. Kliknij uchwyt wyboru (rysunek 14.27)
i przecignij go w nowe miejsce

(rysunek 14.28).
Przemieszczanie warstw
lub
Uyj klawiszy kursorw do przesunicia
warstwy w jednopikselowych skokach.
Wskazwka
Aby przemieci warstw za pomoc opcji
przycigania do siatki, przytrzymaj wcinity
klawisz Shift podczas uycia klawiszy
kursorw.
Aby precyzyjnie zdefiniowa

poo%enie warstwy:
1. Wywietl inspektora Property.
2. Zaznacz warstw.
3. W polu L (Left) inspektora wpisz odlego
warstwy od lewego marginesu, a w polu T

(Top) jej odlego od grnego marginesu
(rysunek 14.29).
4. Nacinij Enter (Return) lub kliknij przycisk
Apply.
Pooenie warstwy zmieni si.
Wskazwka
Domyln jednostk miary s tu piksele, ale
moesz uy te centymetrw, cali lub innych

jednostek. Zobacz dodatkowe wskazwki
w czci pt. Jednostki w rozdziale 11.
376
Rysunek 14.28. Warstwa znalaza si w nowej

pozycji
Rysunek 14.29. Naley wpisa wsprzdne X i Y

w polach L i T w oknie inspektora Property
Zmienianie rozmiaru warstwy

Szeroko warstwy lub jej wysoko zawsze
mona zmieni przed dodawaniem
zawartoci lub po wykonaniu tej czynnoci.
Rozmiar mona zmieni przy uyciu myszy,
klawiatury lub przez wpisanie dokadnej
wartoci w oknie inspektora Property.
Rysunek 14.30. Jeli chce si zmieni
szeroko warstwy i jej wysoko, to naley
przecign uchwyt pooony w naroniku,
a wymiary zmieni si
Aby zmieni rozmiar warstwy

przez przeci$ganie:
1. Zaznacz warstw. Na jej krawdziach
pojawi si uchwyty.
2. Aby zmieni i szeroko warstwy, i jej
3. Aby zmieni tylko jeden rozmiar, kliknij
i pocignij uchwyt boczny (rysunek 14.31).

Rysunek 14.31. Jeli chce si zmieni
tylko jeden wymiar warstwy, to naley
przecign uchwyt boczny
Po zwolnieniu przycisku myszy warstwa zmieni

swj rozmiar.
Aby zmieni rozmiar warstwy

przy u%yciu klawiatury:
1. Zaznacz warstw.
2. Aby minimalnie poszerzy warstw lub j
wyduy, nacinij Ctrl+klawisz kursora

(Option+klawisz kursora).
Aby zmieni rozmiar o oczko siatki, nacinij
Shift+Ctrl+klawisz kursora (Shift+Option
+klawisz kursora).
Wskazwka
Jak zmieni ustawienia siatki? Zostao to
opisane w rozdziale 1. (zobacz Mierzenie
w oknie Document).
377
wysoko, pocignij za uchwyt w naroniku

(rysunek 14.30).
Rozdzia 14.
Aby precyzyjnie zmieni

wielko warstwy:
1. Wywietl okno inspektora Property.
2. Zaznacz warstw.
3. W polach W (Width) i H (Height) inspektora
okrel szeroko warstwy i jej wysoko

(rysunek 14.32).
4. Nacinij klawisz Enter (Return) lub kliknij
przycisk Apply.
Wskazwka
Jeli zmieniasz rozmiar warstwy, ktra
zawiera tekst lub grafik, nie moesz
uczyni jej mniejszej, ni jej zawarto.
Moesz zmieni jej wymiary, ale warstwa
skurczy si tylko na tyle, na ile pozwala jej
zawarto. Zobacz cz Kadrowanie
i Zawarto przepeniona, aby dowiedzie
si, jak poradzi sobie z rozmiarem zawartoci
warstwy.
378
Rysunek 14.32. Nowe rozmiary warstwy mona

zdefiniowa w polach W (szeroko) i H (wysoko)
inspektora Property
Zagniedanie warstw
i nakadanie ich na siebie
Niewtpliw zalet warstw jest to, e mona
umieszcza je jedna w drugiej lub nakada
je na siebie.
Aby nao%y na siebie warstwy:

Wystarczy przesun warstwy tak, by jedna
przykrywaa drug lub utworzy warstw
w miejscu, w ktrym znajduje si inna
(rysunek 14.33).
Rysunek 14.33. Dwie nakadajce si na siebie
warstwy
Moesz te zagnieda jednoczenie dwie

warstwy, ktre dodatkowo mog si na siebie
nakada. Pozycja warstw zagniedonych
na stronie okrelana jest wzgldem lewego
grnego rogu innej warstwy, a nie strony.
1. Utwrz pierwsz warstw.

2. Jeli warstwy maj si na siebie nakada,
usu zaznaczenie (jeli tego nie uczynie)

z pola Prevent Overlaps w palecie Layers.
3. Kliknij wewntrz warstwy.
4. Utwrz drug warstw w pierwszej
Rysunek 14.34. Jedna warstwa zagniedona
w drugiej
Rysunek 14.35. W inspektorze

Layers wywietlona jest nazwa
zagniedonej warstwy
tu pod warstw nadrzdn
(rysunek 14.34).
W inspektorze Layers nazwa zagniedonej
warstwy pojawi si tu pod nazw warstwy
nadrzdnej, lecz bdzie ona lekko przesunita
w prawo (rysunek 14.35).
Wskazwki
Jeli zagniedon warstw chcesz utworzy
przy uyciu myszy, to przytrzymaj klawisz
Ctrl (Command) podczas przecigania.
Wicej szczegw na ten temat zawiera
cz Ustawienia warstw.
Zaznaczenie pola wyboru Prevent Overlaps
w oknie inspektora Layers uniemoliwi

nakadanie na siebie warstw oraz ich
zagniedanie. Jeli przed zaznaczeniem
tego pola wyboru jakie warstwy byy
na siebie naoone, to mona je rozdzieli
przez przecignicie mysz.
379
Zagniedanie warstw
Aby umieci jedn$ warstw w drugiej:
Rozdzia 14.
Aby zagnie(dzi
dwie istniej$ce warstwy:
1. W oknie inspektora Layers kliknij nazw
warstwy, ktr chcesz umieci w innej.

Pojawi si ikona warstwy (rysunek 14.36).
2. Przytrzymaj klawisz Ctrl (Command)
Rysunek 14.36. Naley

przytrzyma klawisz Ctrl
(Command) i klikn nazw
warstwy, ktra ma by
umieszczona w innej
i przecignij nazw na nazw warstwy

nadrzdnej. Wok nazwy nowej warstwy
nadrzdnej pojawi si ramka (rysunek 14.37).
3. Zwolnij przycisk myszy. Nazwa warstwy
zagniedonej pojawi si pod nazw jej

warstwy nadrzdnej (rysunek 14.38),
lecz bdzie w stosunku do niej przesunita.

przecign warstw
na nazw warstwy nadrzdnej
Zagniedanie warstw
By moe zmienisz zdanie i zechcesz rozdzieli

warstwy.
Aby zlikwidowa zagnie%d%enie:

Kliknij nazw warstwy (rysunek 14.39)
i przecignij j tak, aby nie znajdowaa si

tu pod nazw warstwy nadrzdnej.
Wskazwki
Kiedy zagniedasz lub usuwasz zagniedenie,
warstwy mog zmieni swoje pooenie
(rysunek 14.40), poniewa ich pozycja
(wsprzdne X-Y) jest okrelana wzgldem
warstwy nadrzdnej. Ale zawsze moesz j
przesun z powrotem na waciwe miejsce.

zwolni klawisz myszy, a nazwa
zagniedonej wanie warstwy
pojawi si tu pod warstw
nadrzdn

klikn zagniedon warstw,
ktra ma by odczona
W oknie inspektora Layers moesz zwin
list warstw zagniedonych lub j rozwin.

Kliknicie znaku + obok nazwy warstwy
nadrzdnej spowoduje rozwinicie listy,
a kliknicie znaku minusa () jej zwinicie.
Zagniedon warstw najatwiej jest
zaznaczy przez kliknicie jej nazwy

na licie.
atwo te moesz zmieni kolejno
warstw. W tym celu przecignij nazw

na licie. Kolejno uoenia warstw zostaa
omwiona w dalszej czci rozdziau
pt. Kolejno warstw.
380
Rysunek 14.40. Naley przecign warstw,

a przestanie by zagniedona. Trzeba zauway,
e warstwa zmienia swoje pooenie (z rysunku
14.34), poniewa jej pozycja odnosi si teraz
do grnego lewego naronika strony, a nie do
warstwy nadrzdnej
Zmienianie
widoczno"ci warstwy
Kiedy pracujesz nad stron, ktra zawiera wiele
warstw, moesz chwilowo ukry niektre z nich.
To uatwia prac, szczeglnie gdy warstwy
nakadaj si na siebie lub s zagniedone.
Moesz take okreli, ktre warstwy bd
widoczne po zaadowaniu strony, a ktre nie
bd wywietlane.
Rysunek 14.41. Warstwa na wierzchu, ktra
bya widoczna na rysunku 14.40, zostaa ukryta
Widoczno warstwy okrela status oka

w oknie inspektora Layers.
Zamknite oko
oznacza, e warstwa jest
ukryta.
oznacza warstw widoczn.
Brak rysunku oka oznacza, e wywietlanie
warstwy jest zalene od statusu jej warstwy

nadrzdnej (jeli taka istnieje).
Rysunek 14.42. Widzialno kadej warstwy mona
okreli indywidualnie przez zmian statusu oka
w kolumnie definiujcej ich widoczno
Aby wywietli warstw lub j$ ukry:

1. W oknie inspektora Layers kliknij nazw
warstwy.
2. Kliknij w kolumnie po lewej stronie, aby
zmieni status oka na waciwy: oko

zamknite, otwarte lub brak oka.
Warstwa pojawi si lub zniknie (rysunek 14.41)
w zalenoci od statusu (rysunek 14.42).
Aby wywietli wszystkie warstwy

lub je ukry:
Kliknij rysunek oka w nagwku kolumny,
Rysunek 14.43. Naley klikn rysunek oka nad
lew kolumn, aby jednoczenie ukry wszystkie
warstwy lub je wywietli
Ukryte warstwy moesz wykorzysta
w poczeniu z behawiorami lub animacj

(zobacz rozdzia 16. oraz 17.) tak, aby
pojawiay si po upywie okrelonego
czasu lub po wykonaniu okrelonej akcji.
ktry znajduje si w grnej czci lewej

kolumny palety Layers (rysunek 14.43).
Wszystkie warstwy pojawi si, gdy oko bdzie
otwarte, a znikn, kiedy bdzie zamknite.
Wskazwki
Zdefiniowanie widocznoci warstw nie
dotyczy tylko okna dokumentu. Warstwy
ukryte nie bd widoczne rwnie w oknie
przegldarki.
381
Zmienianie widocznoci warstwy
Otwarte oko
Rozdzia 14.
Kolejno" warstw
To za pomoc Z-indeksu warstw mona
zdecydowa, w jakiej kolejnoci zostan one
odtworzone przez przegldark (rysunki 14.44
14.46).
Wskazwki
Chocia w Dreamweaverze uywa si
terminu kolejno na stosie dla Z-indeksu,
to nie oznacza to jednak, i jest to jaka
wykluczajca skala. Trzy rne warstwy
na stronie mog mie taki sam Z-indeks 1.
Dwie warstwy o tym samym Z-indeksie (lub
Kolejno warstw
bez zdefiniowanego indeksu) bd uoone

w ten sposb, e pierwsza w kodzie bdzie
uoona na wierzchu.
Rysunek 14.44. Maa posta

w tym kolau ma najwyszy Z-indeks
Rysunek 14.45. W tej wersji zmieniam kolejno

obrazw i teraz pistolet ma najwyszy Z-indeks,
znak jest drugi, a posta trzecia, natomiast
banknot znalaz si na spodzie
Moesz zmieni dowolnie Z-indeks kadej

z warstw lub zdefiniowa ich kolejno
w inspektorze Layers.
Aby zmieni Z-indeks

pojedynczej warstwy:
1. Wywietl 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. Najwiksza liczba

oznacza pierwszestwo (indeks 2 bdzie
pooony nad indeksem 1).
Rysunek 14.46. Tak kompozycja wyglda w oknie

Dreamweavera
Rysunek 14.47. Z-indeks mona zdefiniowa

po wpisaniu liczby w polu Z-Index
382
Aby zmieni kolejno warstw

na licie inspektora Layers:
Kliknij nazw warstwy i przecignij j w d
lub w gr listy (rysunek 14.48).

Warstwa pierwsza na licie ma pierwszestwo
(bdzie pierwsza w kodzie), nastpna bdzie
druga i tak dalej (rysunek 14.49).
Rysunek 14.48. Kolejno warstw
mona zmieni przez przecignicie ich
nazwy na licie inspektora Layers
Wskazwki
Uwaaj, aby nie przecign warstwy
na nazw innej warstwy, poniewa spowoduje
to zagniedenie tej pierwszej w drugiej
(zobacz Zagniedanie warstw i nakadanie
ich na siebie wczeniej w tym rozdziale).
Inspektor Layers moe w dziwny sposb
Rysunek 14.49. Przecignam warstw z postaci.

Teraz jest widoczna nad warstw znaku, a jej
Z-indeks wynosi 6 (Dreamweaver troch niedbale
zmienia numeracj)
383
Kolejno warstw
przenumerowa Z-indeksy po przecigniciu

warstw na licie. Wartoci 3, 2 i 1 mog si
zamieni w liczby 6, 4 i 1. Moesz je
zresetowa w inspektorze Property.
Rozdzia 14.
Zawarto" warstw
W warstwie moe si znale nieomal kada
zawarto: tekst, grafika, tabele, formularze,
multimedia i oczywicie inne warstwy.
Aby w warstwie umiejscowi jak zawarto,
umie kursor w jej wntrzu, a nastpnie wstaw
dowolny obiekt (rysunek 14.50).
Wskazwki
Moesz przecign do warstwy zawarto
z zewntrz. Zaznacz wybrany obiekt,
przytrzymaj wcinity przycisk myszy
i przecignij obiekt w granice warstwy.
Do warstwy moesz wstawi prawie wszystko,
Zawarto warstw
oprcz ramek. Moesz wstawi formularz,

ale nie jest moliwe podzielenie zawartoci
jednego formularza midzy kilka warstw.
Rysunek 14.50. Do warstwy mona wstawi

dowoln zawarto tu w rnych warstwach
umieszczono tabel, tekst i grafik. Jedynym
obiektem, ktrego nie mona umiejscowi
w warstwie, jest ramka
Jeli zawarto warstwy bdzie mniejsza ni
jej rozmiar, to w Navigatorze 4.0. zostanie

wywietlona jedynie zawarto (a nie caa
warstwa), chocia rozmiar warstwy nadal
bdzie brany pod uwag w ukadzie strony.
W Explorerze 4.0 (lub nowszym) oraz
Netscapie 4.5 (lub nowszym) warstwa bdzie
wywietlona w penym rozmiarze,
bez wzgldu na zawarto (rysunek 14.51).
W przegldarkach wczeniejszych (przed 4.0)
Rysunek 14.51. W Navigatorze (po lewej) nie jest

wywietlana caa warstwy, a jedynie jej zawarto
zostanie wywietlona zawarto warstwy,

ale zignorowane bd: pozycjonowanie,
kolejno i parametry widocznoci. Znacznik
zachowa si jak , a znacznik
jak (zobacz rysunek 14.52).
W Netscapie istnieje bd odtwarzania
warstw po zmianie rozmiaru jego okna.

Dreamweaver zawiera funkcj naprawy
bdu, opart na JavaScript. Zobacz uwagi
dodatkowe Korekta bdu Netscapea,
ktre zostay umieszczone w dalszej czci
rozdziau.
Rysunek 14.52. W przegldarkach wczeniejszych
ni 4.0, np. Operze 3.2., wywietlana jest zawarto
warstw, ale ignorowane s parametry
pozycjonowania mimo e obraz postaci zosta
wyrwnany centralnie w warstwie, znalaz si
na rodku strony
384
Warstwy a style
Wszystkie wszechstronne parametry arkuszy
stylw, nie tylko pozycjonowanie, opisane
w rozdziale 11., mog by stosowane w warstwach.
Podczas tworzenia warstwy w Dreamweaverze
parametry stylw, ktre opisuj zachowanie
warstwy, pojawiaj si zazwyczaj bezporednio
w znaczniku (inaczej ni w przypadku
parametrw klasy lub redefiniowanych
znacznikw, ktre pojawi si z obszarze
znacznika ).
Rysunek 14.53. Redefiniowaam znacznik
<div> na tej stronie wszystkie warstwy,
utworzone za pomoc tego znacznika, maj
jednopikselowe czarne obramowanie
Moesz, tak jak to opisaam w rozdziale 11.,

redefiniowa znacznik lub . Nowe
waciwoci zostan wtedy dodane do kadej
warstwy, ktra zostaa utworzona za pomoc
tych znacznikw (rysunek 14.53). Przykadowo,
znacznik moesz zdefiniowa tak, aby
warstwa miaa krawd o staej gruboci jednego
piksela.
Jeli natomiast eksperymentujesz ze stylami,

opisanymi w rozdziale 13., moesz zmodyfikowa
kod rdowy strony i w kodzie utworzy inne
style warstwy.
Rysunek 14.54. Na tej stronie przypisaam klas
.red do pierwszego akapitu i pierwszego z trzech
prostoktw, a trzeci prostokt, mimo e nie zosta
zmodyfikowany za pomoc klasy .red, rwnie ma
czerwone to
Kod warstwy (przed dodaniem zawartoci)

bdzie wyglda mniej wicej tak:

! "#!"$%%&&'
('
Cay zapis, ujty w znacznik , jest kodem

arkusza stylw. W razie potrzeby moesz doda
wicej parametrw stylu. Moesz wprowadzi
je rcznie na warstwie za pomoc inspektora
Property, a take utworzy klas stylw lub
zredefiniowa znacznik. Dalsze informacje
o kaskadowych arkuszach stylw (CSS)
znajdziesz w rozdziale 11.
385
Warstwy a style
Moesz rwnie utworzy now klas i przypisa

j do warstwy przez wybranie znacznika
i przypisanie klasy do znacznika
(rysunek 14.54). Na przykad moesz utworzy
styl o nazwie .box, ktry bdzie zawiera krawd
o gruboci jednego piksela, i korzysta z niego
na zaznaczonych warstwach.
Rozdzia 14.
Kadrowanie
Warstwy s troch podobne do komrek tabeli,
poniewa take dopasowuj si do zawartoci.
Nawet jeli zdefiniujesz dokadne wymiary
warstwy, to po umieszczeniu w niej wikszej
zawartoci wymiary zostan zignorowane.
Warstwa rni si te od komrki tabeli tym,
e moesz j wykadrowa. Jak ju wspomniaam
wczeniej, kadr jest czci warstwy, ktra jest
widoczna. Przypomina to troch kadrowanie
grafiki, tyle e tu cz obcita jest ukryta,
a nie usunita (rozmiar pliku wykadrowanej
zawartoci jest taki sam, jak niewykadrowanej).
Obszar wykadrowany moe mie ten sam rozmiar
(rysunki 14.55 i 14.56), co warstwa lub by
mniejszy od niej (mone te by wikszy,
ale to raczej jest bez sensu).
Kadrowanie
Aby zdefiniowa obszar kadru:

1. Wywietl okno inspektora Property i rozwi je
tym samym uka si waciwoci.
Rysunek 14.55. Objanienie kadrowania:

warstwa ma ten sam rozmiar, co grafika. Linie T
i B s odlegociami od grnej krawdzi warstwy.
T wynosi 70 pikseli, a B 96. Linie L i R s
odlegociami od lewej krawdzi; L jest
w odlegoci 20 pikseli, a R 101 pikseli.
Prostoktny obszar, zawarty midzy liniami,
pozostanie widoczny
2. Zaznacz warstw.
3. Wpisz liczby w polach Clip Rectangle:
L (lewa strona), T (gra), R (prawa strona),

B (d), aby zdefiniowa kadr (rysunek 14.57).
4. Nacinij Enter (Return) lub kliknij przycisk
Apply.
Zdefiniowany obszar warstwy bdzie widoczny,
a pozostaa cz zawartoci ukryta.
Rysunek 14.56. Wygld warstwy po wykadrowaniu

(w oknie Dreamweavera, wic nie wida krawdzi
warstwy)
Rysunek 14.57. Naley zdefiniowa obszar

kadru w inspektorze Property
386
Wskazwki
Miary L i R s odmierzane od lewej krawdzi
warstwy, a T i B od grnej (rysunek 14.55).
Kadrowanie odbywa si w nastpujcy
sposb: obcinany jest obszar od lewej

krawdzi warstwy do wartoci L i obszar
od wartoci R do prawej krawdzi. Obszar
pomidzy L i R pozostaje widoczny.
Analogicznie jest przycinany obszar dla T i B
(rysunek 14.56).
Domyln jednostk s piksele. Moesz te
zdefiniowa inne jednostki, jak w tym

przykadzie: 1.5cm (bez spacji pomidzy
liczb a jednostk; liczby uamkowe zapisuje
si z kropk, a nie z przecinkiem).
Jak radzi sobie z zawartoci, ktra przekracza
rozmiar warstwy, dowiesz si z czci pt.

Zawarto przepeniona na nastpnej stronie.
Dla Navigatora moesz zdefiniowa wszystkie
387
Kadrowanie
cztery obszary lub tylko dolny i prawy

(grny i lewy zostanie okrelony jako zero,
co odpowiada lewej grnej krawdzi warstwy).
Rozdzia 14.
Zawarto" przepeniona
Kiedy zawarto jest wiksza od rozmiaru
warstwy (niezalenie od kadrowanego obszaru),
mamy do czynienia z tzw. zawartoci przepenion.
Mona pozwoli przegldarce, by w sposb
domylny potraktowaa przepenienie, lub wybra
jedn z trzech opcji: hidden (ukryj), visible (poka)
lub scroll (przewijaj). Uycie tej ostatniej powoduje
dodanie paskw przewijania do warstwy
(rysunek 14.58).
Aby okreli
sposb traktowania przepenienia:
Rysunek 14.58. W Navigatorze (po lewej)

przepenienie jest ukryte, a w Explorerze paski
przewijania s dodawane do tej samej warstwy
1. Zaznacz warstw.
Zawarto przepeniona
2. W rozwinitym oknie inspektora Property
wybierz z menu Overflow opcj: hidden,

visible lub scroll (rysunek 14.59).
3. Kliknij przycisk Apply.
W oknie Dreamweavera dziaanie opcji nie

bdzie widoczne program zawsze wywietla
pen zawarto warstwy.
Wskazwki
Jeli nie wybierzesz adnej z opcji (pole
Overflow pozostanie puste), to przegldarka
wywietli pen zawarto warstwy, bez wzgldu
na jej rozmiar.
Ustawienie auto powoduje ukrycie przepenienia
w Navigatorze, a w Explorerze dodanie

paskw przewijania.
W Navigatorze 4 nie s obsugiwane paski
przewijania.
388
Rysunek 14.59. Naley wybra sposb

wywietlania przepenienia z menu
Overflow w oknie inspektora Property
To warstwy
Warstwy, podobnie jak tabele, komrki tabel,
czy bloki tekstu CSS mog mie wasne to
jednobarwne lub graficzne. To warstwy
przykrywa kolory lub grafik ta strony
(rysunek 14.60).
Aby zdefiniowa kolor ta warstwy:

1. Zaznacz warstw.
2. W inspektorze Property wpisz kod lub nazw
koloru w polu Bg Color.

lub
Rysunek 14.60. Ta brzydka strona ma graficzne
to, na ktre naoono trzy warstwy. Warstwa
u gry po prawej stronie zawiera rwnie graficzne
to, ktrym jest przezroczysty GIF to strony
przewieca przez GIF
Kliknij przycisk Color rozwinie si

prbnik kolorw. Wybierz waciw barw
(rysunek 14.61).
lub
Wskazwka
Informacje na temat okna Color znajduj si
w rozdziale 3.
Aby wstawi do warstwy to graficzne:

1. Zaznacz warstw.
2. W polu BgImage inspektora Property wpisz
URL pliku graficznego.

lub
Rysunek 14.61. Kolor ta warstwy mona wybra
z palety, ktra zawiera tzw. bezpieczne kolory
Kliknij ikon folderu, aby otworzy okno

Select Image File. Wrd plikw i folderw
na swoim komputerze znajd plik graficzny,
ktry chcesz wykorzysta, a potem zaznacz
go przez kliknicie przycisku Open.
Wskazwka
Dodatkowe parametry ta graficznego
moesz zdefiniowa w arkuszach stylw.

Zajrzyj do czci Parametry ta, ktr
389
To warstwy
Nacinij przycisk System Color Picker

z palety. Przycisk ten otwiera okno Color.
Rozdzia 14.
Ustawienia warstw
Kiedy wstawiasz warstw za pomoc polecenia
z menu Insert, program wklei domyln
warstw, ktr bdziesz mg zmodyfikowa
(rysunek 14.62). Oczywicie, Dreamweaver
jest tak plastyczny, e domylne waciwoci
warstwy rwnie moesz zmieni. Wszystkie,
oprcz rozmiaru, s take dodawane do warstw
rysowanych przy uyciu polecenia z palety
Objects (przycisk Draw Layer).
Aby zdefiniowa
domylne ustawienia warstwy:
Rysunek 14.62. Za pomoc polecenia z menu

Insert/Layer mona wstawi domyln warstw
1. Z menu okna Document wybierz polecenie
Edit/Preferences. Pojawi si okno Preferences.
Ustawienia warstw
2. Z listy po lewej stronie wybierz kategori
Layers, aby otworzy w ten sposb panel

dotyczcy warstw (rysunek 14.63).
3. Teraz moesz zdecydowa, ktry znacznik
bdzie domylnym znacznikiem warstwy:

, , czy .
Wybierz waciwy z rozwijanej listy Tag.
4. Widoczno warstwy domylnie jest zalena
od akcji na stronie. Aby wszystkie warstwy

byy domylnie widoczne (visible) lub
ukryte (hidden), wybierz odpowiedni opcj
z menu Visibility. Wybranie opcji inherit
spowoduje, e widoczno warstwy
zagniedonej bdzie taka sama, jak
warstwy nadrzdnej.
5. Domylna warstwa ma wymiary 200115
pikseli. Moesz wpisa nowe wymiary

w polach Width (szeroko) i Height
(wysoko).
6. Moesz te zmieni domylny kolor warstwy
lub grafik ta. Zdefiniuj te parametry zgodnie

ze wskazwkami z czci To warstwy.
390
Rysunek 14.63. Panel Layers w oknie Preferences
7. Zaznaczenie pola wyboru Nesting spowoduje,
e nakadajce si na siebie warstwy bd

domylnie zagniedane.
8. Uycie opcji Netscape 4 Compatibility
Rysunek 14.64. Aby doda skrypt do strony,
naley klikn przycisk Add
powoduje, e skrypt JavaScript zostanie

automatycznie dodany do kadej strony,
ktra zawiera jedn lub wicej warstw.
Po zaznaczeniu pola Add Resize Fix when
Inserting Layer skrypt bdzie poprawia
bd zmiany rozmiaru. Wicej szczegw
zawieraj wskazwki Korekta bdu
Netscapea, ktre s zamieszczone poniej.
9. Kiedy ju uznasz, e wprowadzone zmiany
s idealne, kliknij przycisk OK. Nowe

ustawienia bd widoczne w nastpnej,
nowej warstwie.
Rysunek 14.65. To jest peny skrypt wywietlony

w oknie inspektora Code
Korekta bdu Netscapea

W wersjach programu Netscape Navigator od 4 wzwy wywietlane s warstwy, ale
podczas zmiany rozmiaru okna przegldarki mog si one nieoczekiwanie przesun
na stronie lub zmieni wielko. Czasami te po prostu znikaj.
Dreamweaver zawiera prosty skrypt JavaScript, ktry sprawdza, czy przegldark nie jest
Navigator 4, a jeli tak, to wymusza przeadowanie strony, aby po zmianie rozmiaru okna
odtworzy poprawny ukad warstw.
Aby skrypt by dodawany automatycznie do kadej strony, zawierajcej warstwy, wykonaj
polecenie z punktu 8. na tej stronie (Ustawienia warstw).
Skrypt moesz rwnie doda do pojedynczej strony, nawet jeli nie zawiera ona warstw.
1. Z menu okna Document wybierz polecenie Commands/Add/Remove Netscape Resize
Fix. Pojawi si okno widoczne na rysunku 14.64.
2. Kliknij przycisk Add, aby doda skrypt. Jego kod jest widoczny na rysunku 14.65.
Aby usun skrypt, gdy na przykad ze strony usune warstwy lub gdy tworzysz wersj 3.0
strony, powtrz powysze kroki i kliknij przycisk Remove.
391
Ustawienia warstw
Wskazwka
Automatyczne zagniedanie warstw
moesz wcza lub wycza przez
przytrzymanie klawisza Ctrl (Command).
Rozdzia 14.
Znaczniki warstw Navigatora

Tradycyjnie warstwy s tworzone przez dodanie
parametrw pozycjonowania do znacznikw
i . Ale pomys nazwania ich tak
powsta po wprowadzeniu przez Netscapea
dwch wasnych znacznikw wraz z wersj beta
Navigatora 4.
Znaczniki warstw Navigatora
Znaczniki i dziaaj podobnie, jak

CSS-P, ale maj kilka dodatkowych parametrw.
Uycie znacznika powoduje wstawienie
warstwy inline, ktra jest osadzona w warstwie
nadrzdnej (rysunek 14.66). Moesz te zagniedzi
dwa znaczniki warstw. Dziaanie zagniedenia
jest troch inne w przypadku warstw Netscapea
(rysunek 14.67).
Warstwy i nie s obsugiwane
przez Explorera, a ich wygld w Dreamweaverze
jest podobny do ich ksztatu w Navigatorze.
Rysunek 14.66. Zagniedona warstwa ilayer

(warstwa inline)
Aby utworzy warstw layer

lub ilayer:
1. Utwrz warstw w zwyky sposb.
2. Zaznacz warstw i wybierz LAYER lub
ILAYER z rozwijanej listy Tag inspektora

Property.
Warstwa CSS zamieni si w warstw
lub , a inspektor Property wywietli jej
dodatkowe waciwoci (rysunek 14.68).
Rysunek 14.67. Zagniedona warstwa layer
Rysunek 14.68. Inspektor Property wywietla

dodatkowe opcje znacznikw <layer> i <ilayer>
392
Dodatkowe wa"ciwo"ci
warstw Navigatora
Znaczniki i Netscapea maj
kilka wasnych parametrw.
Kiedy zagniedasz dwie warstwy Netscapea,
moesz wybra jedn z dwch zalenoci: Left,
Top (X-Y) odpowiada podstawowej zalenoci
pozycji warstwy zagniedonej od lewego
grnego rogu warstwy nadrzdnej. Wybranie
opcji PageX, PageY ustala pozycj zagniedonej
warstwy w odniesieniu do lewego grnego
naronika strony (kada z tych opcji ma swoje
zalety).
Wskazwki
Warstwy nadrzdne automatycznie wstawiane
s pod warstwy podrzdne w Z-indeksie
warstw.
Warstwy Netscapea i warstwy utworzone
za pomoc znacznika nie zagniedaj
si poprawnie.
393
Dodatkowe waciwoci warstw
Warstwy Netscapea mog by powizane

relacjami Z-indeksu. Moesz umieci warstw
nad (Above) ssiedni warstw lub pod ni
(Below), tzn. warstw znajdujc si w tej samej
warstwie nadrzdnej. Kolejno ukadu ustala
si po utworzeniu obydwch warstw.
Rozdzia 14.
Definicja wa"ciwo"ci
warstwy Netscapea
Istnieje moliwo zdefiniowania zwizku
pomidzy warstwami Netscapea, moesz take
wywietli cakiem inny dokument HTML
w postaci zawartoci ramki przez okrelenie
jego adresu URL w polu Layer Source.
Aby zdefiniowa waciwoci

warstwy Netscapea:
1. Utwrz warstw lub
i zaznacz j.
2. Wybierz opcj pooenia: Left, Top lub
Definicja waciwoci warstwy
PageX, PageY w oknie inspektora Property.

3. Z menu A/B wybierz kolejno pooenia
Above (nad) lub Below (pod), a z menu obok

wybierz warstw, do ktrej odnosi si
to ustawienie.
4. Aby wybra stron, ktra zostanie umieszczona
w warstwie, wpisz jej adres w polu Src.

lub
Otwrz okno Select HTML File przez
kliknicie ikony folderu, a pniej odszukaj
potrzebny plik wrd plikw i folderw
na swoim komputerze. Kiedy go znajdziesz,
zaznacz go kliknij Open.
Znacznik <nolayer>
Obydwie omwione na ostatnich
stronach warstwy s specyficzne
dla Navigatora.
W przegldarkach, ktre nie obsuguj
znacznikw i , jak np.
w Explorerze 4, ich zawarto zostanie
wywietlona, ale pozycjonowanie i efekty
dodane za pomoc skryptw bd
kompletnie zignorowane.
Trzeba wic pamita o uytkownikach
tych przegldarek i z t myl uy
znacznika . Naley po prostu
doda kod podobny do tych z poniszych
przykadw.
Na przykad:

!"
# $%& '
# &

Lub w troch przystpniejszej formie:
<

"" "(
) &
* *
(+ +
# #"%

394
Konwersja warstw
w tabele (i odwrotnie)
Jeli zachwycia Ci uniwersalno warstw,
to wci powiniene pamita, e tylko
w przegldarkach w wersji 4 lub pniejszych
wywietlane s one poprawnie. Przykadowo,
ich zawarto moe by pokazana poprawnie,
ale pozycjonowanie i Z-indeksy bd
zignorowane, przez co zastosowanie warstw
okae si bezuyteczne.
Rysunek 14.69. Napisanie dla tabel kodu, ktry

miaby odzwierciedla ten warstwowy ukad
strony, stanowioby ogromny problem. Tak wyglda
ta strona w oknie przegldarki
Aby skonwertowa warstwy w tabel:

Rysunek 14.70. Okno Convert to 3.0 Compatible
pozwala zachowa warstwy w postaci tabel,
a arkusze stylw jako znaczniki HTML
1. Otwrz stron, zawierajc warstwy, ktre
chcesz zapisa w postaci tabeli (rysunek

14.69). Zapisz j, jeli dotychczas tego
nie zrobie.
File/Convert/3.0 Browser Compatible.

Pojawi si okno konwersji (rysunek 14.70).
3. Zaznacz przycisk Layers To Table i kliknij
OK. Pojawi si nowe pole bez nazwy,

zawierajce tabel, ktra odzwierciedla
ukad warstw (rysunek 14.71).
Nie zapomnij zapisa nowej strony.
Rysunek 14.71. Kiedy warstwy (rysunek 14.69)

zostay przeksztacone w tabele, ta strona
w Dreamweaverze wyglda wanie tak
Wskazwka
W Dreamweaverze nie istnieje moliwo
konwertowania nakadajcych si lub
zagniedonych warstw. Przed rozpoczciem
pracy moesz wic zaznaczy pole wyboru
Prevent Overlaps w inspektorze Layers.
Nie bdzie wtedy moliwe nakadanie
warstw jednej na drug. Jeli na stronie s
takie warstwy lub warstwy zagniedone,
powiniene je rozczy.
395
Konwersja warstw
Moesz jednak przeksztaci stron, zawierajc

warstwy, do formatu tabeli i uy skryptu, ktry
wykryje rodzaj przegldarki (zobacz rozdzia 16.),
ta za zaaduje odpowiedni wersj. Moesz te
uy warstw do utworzenia makiety strony,
a nastpnie przekonwertowa projekt w ukad
strony z tabel unikniesz rozwaa na temat,
ktre komrki powinny pozosta puste. Funkcja
Dreamweavera 4 o nazwie Layout Tables rwnie
sprosta temu zadaniu (zobacz w rozdziale 12.).
Rozdzia 14.
Aby skonwertowa warstwy w tabele

z wiksz$ liczb$ mo%liwoci:
1. Otwrz plik, zawierajcy warstwy (rysunek
14.72) i zapisz go pod now nazw

(File/Save As). Inaczej po zapisaniu nowego
dokumentu utracisz pierwotny ukad warstw.
Modify/Convert/ Layers to Table. Pojawi si

okno Convert Layers to Table (rysunek 14.73).
Konwersja warstw
3. W obszarze Table Layout kliknij opcj
Most Accurate lub Smallest. Pierwsza z nich

spowoduje precyzyjne powielenie
rozmieszczenia warstw na stronie, cho moe
przy tym powsta niewiarygodna liczba
komrek. Druga opcja Smallest: Collapse
Empty Cells sprawi, e za pomoc jednej
tabeli zostan wyeliminowane przerwy
pomidzy warstwami i powstanie bardziej
pynny ukad.
Rysunek 14.72. Ta strona wykres, legenda

i caa reszta zostaa utworzona za pomoc
warstw i arkuszy stylw (wykresy nie bd
widoczne w starszych typach przegldarek)
Jeli wybierzesz opcj Smallest, moesz

okreli minimaln liczb pikseli kolumny
lub wiersza, zanim elementy te zostan
wstawione do tabeli.
4. Zaznacz pole Use Transparent GIFs,
aby w dolnym wierszu tabeli wstawi obrazki

rozdzielajce, dziki czemu szeroko kolumn
bdzie precyzyjnie okrelona. Dalsze
informacje o kontroli szerokoci kolumn
Rysunek 14.73. Okno Convert Layers to Table

steruje ukadem nowej tabeli
5. Aby wyrodkowa tabel na stronie, zaznacz
pole Center on Page, gdy w przeciwnym

wypadku zostanie ona wyrwnana do lewej.
6. Pozostae opcje Prevent Layer Overlaps,
Show Layer Palette, Show Grid i Snap to

Grid steruj widocznoci narzdzi do
tworzenia ukadu; s one bardzo przydatne
w czasie konwersji tabel w warstwy.
7. Kliknij OK, a Dreamweaver przeksztaci
warstwy w tabele (rysunek 14.74).

Rysunek 14.74. Dreamweaver automatycznie
przeksztaci projekt z warstwami w stron
z tabelami. Kada z warstw jest komrk tabeli;
przezroczyste GIF-y stay odstpami midzy
elementami zawartoci ramek
396
Wskazwki
Moesz na chwil wyczy krawdzie
tabeli, aby ukad strony by bardziej
przejrzysty. Z menu okna Document wybierz
polecenie View/Visual Aids/Table Borders
(rysunek 14.75).
Wszystkie warstwy, ktre znajduj si
na stronie z tabelami, pozostan niezmienione

po konwersji tabel w warstwy.
Wicej szczegw na temat zapisywania
Rysunek 14.75. Mona na chwil wyczy
krawdzie tabeli, aby lepiej zorientowa si
w wygldzie strony; naley wybra polecenie
View/Visual Aids/Table Borders
stron CSS w formatach kompatybilnych ze

starszymi przegldarkami zawieraj wskazwki
w podrozdziale Zapisywanie strony z arkuszem
stylw w postaci czystego HTML
w rozdziale 11.
Konwersja tabel w warstwy
Aby skonwertowa tabele w warstwy:

1. Zapisz stron z tabelami, jeli jeszcze tego
nie zrobie (polecenie File/Save As) (rysunek

14.76). Jeli korzystasz z witryny lokalnej,
to zapisz stron w jej folderze.
Rysunek 14.76. Ukad strony z tabelami
Ukad strony z tabelami z rysunku 14.73

wyglda dobrze, ale gdy kad komrk
tabeli zamieni si w warstw, bdzie mona
je animowa za pomoc behawiorw
(rozdzia 16.) lub Timelines (rozdzia 17.).
Modify/Convert/ Tables to Layers. Pojawi

si okno konwersji (rysunek 14.77).
Rysunek 14.77. W oknie Convert Tables to Layers
naley wybra opcje dotyczce nowej strony
397
Konwersja warstw
Aby manipulowa komrkami na stronie

i utworzy bardziej precyzyjny ukad, moesz
przeksztaci tabele w warstwy (ktre pniej
moesz z powrotem zmieni w tabele).
Rozdzia 14.
3. Wybierz odpowiednie opcje:
Aby warstwy nie mogy nachodzi
na siebie, zaznacz pole Prevent Layer

Overlaps.
Aby po otwarciu strony pojawia si
rwnie paleta Layers, zaznacz pole

Show Layer Palette.
Aby po otwarciu strony wywietli siatk,
zaznacz pole Show Grid.

Ostatnie pole, Snap To Grid, pozwala
wczy opcj przycigania do siatki.

Dziki temu warstwy na stronie zostan
wyrwnane do siatki o ustalonych
odstpach midzy liniami (domylnie
wynosz one 50 pikseli).
Konwersja warstw
4. Po zaznaczeniu waciwych pl kliknij
przycisk OK. Strona z tabelami zostanie

przeksztacona w stron z warstwami. Kadej
komrce tabeli odpowiada osobna warstwa,
pooona dokadnie w miejscu komrki
(rysunek 14.78).
Rysunek 14.78. Kada komrka tabeli oryginau

jest teraz osobn warstw, ktrych powstao
w ten sposb 83 (mona ukry ikony warstw
za pomoc polecenia View/Visual Aids/Invisible
Elements). Nie chciaabym rcznie ukada
na stronie tych wszystkich elementw
Teraz, jeli chcesz, moesz dowolnie zmieni

ukad warstw, a nastpnie ponownie skonwertowa
je w tabele (rysunek 14.79).
Wskazwka
Za pomoc polecenia menu File/Convert/
Browser Compatible mona utworzy now
stron. Uycie polecenia Modify/Convert/
Layers to Table (lub Tables to Layers) sprawi,
e ukad zostanie tylko skonwertowany,
nowy dokument nie zostanie utworzony.
Rysunek 14.79. Zmieniam ukad strony przy
uyciu warstw, a nastpnie skonwertowaam je
ponownie w tabel. Efekt jest widoczny w oknie
Navigatora 4.5. Jeli skorzysta si tego samego
projektu w trybie z warstwami, to mona utworzy
interesujce efekty wizualne za pomoc zdarze
Drag and Drop Layers Behavior (rozdzia 16.)
lub animacji Timelines (rozdzia 17.). Kwadraciki
zostay utworzone przy uyciu parametrw Box
i Border arkusza stylw (rozdzia 11.)
398
Kalka grafiki
Niektrzy projektanci, przed rozpoczciem
pracy nad dokumentem HTML, tworz makiet
strony w Photoshopie (lub innym programie
graficznym). Czy nie byoby wspaniale, gdyby
mona byo wywietli w tle makiet strony i na
podkadzie umieci poszczeglne jej elementy?
Rysunek 14.80. Oto przykad obrazka, ktry mona

poci i w kawakach umieci na stronie. Mona
te cay obrazek umieci w tle strony jako kalk
W Dreamweaverze rwnie moliwe jest

tworzenie makiety. Mona wywietli graficzn
makiet (rysunek 14.80) o odpowiednim stopniu
przezroczystoci, a nastpnie umieci na niej
warstwy dokadnie w miejscach, o jakich myla
projektant.
Potem mona, oczywicie, skonwertowa stron
z warstwami w zwyk stron z tabelami tak, aby
posiadacze przegldarek sprzed wersji 4.0 mogli
rwnie podziwia efekt kocowy.
Aby wstawi kalk grafiki:

Modify/Page Properties. Otworzy si okno
Page Properties, widoczne na rysunku 14.81.
2. W polu Tracing Image wpisz ciek do
pliku lub odszukaj plik na dysku (.jpg, .gif

lub .png) naciskaj przycisk Browse.
Rysunek 14.81. W oknie Page Properties mona
wybra grafik, ktra zostanie uyta jako kalka,
i okreli jej przezroczysto kalka nie bdzie
widoczna w oknie podgldu ani po umieszczeniu
strony na serwerze
3. Na suwaku Image Transparency dobierz
stopie przezroczystoci grafiki.

4. Kliknij przycisk Apply, aby podgldn
obraz (moesz jeszcze doregulowa

przezroczysto).
lub
Kliknij OK.
W obydwu przypadkach obraz pojawi si
w oknie dokumentu pod jego zawartoci
(rysunek 14.82).
Rysunek 14.82. Przezroczysto tego obrazu

wynosi 40%
399
Kalka grafiki
Rozdzia 14.
Moesz teraz podzieli grafik na kawaki
w edytorze Fireworks lub innym, utworzy dla
kolejnych fragmentw osobn warstw, a potem
przecign kady z nich na kalk i powieli
ukad obrazka (rysunek 14.83).
Aby w$czy widok kalki

lub go wy$czy:
View/Tracing Image/Show.
Aby przesun$ kalk:

View/Tracing Image/Adjust Position. Pojawi

si okno Adjust Tracing Image Position
(rysunek 14.84).
Rysunek 14.83. Za pomoc z kalki umieciam

kawaki grafiki dokadnie tam, gdzie chciaam.
Jeli zechc, mog wykona dokadn kopi kalki,
a nastpnie skonwertowa warstwy w tabel
2. Wpisz wsprzdne X (gra) i Y (lewa strona).
Kalka grafiki
lub
Gdy okno jest otwarte, uyj klawiszy kursorw
i przesu dowolnie grafik w jednopikselowych
skokach.
3. Na zakoczenie kliknij OK.
Aby zresetowa pozycj kalki:

View/Tracing Image/Reset Position.

Domylne wsprzdne obrazu zostan
przywrcone.
400
Rysunek 14.84. Gdy otwarte jest powysze

okno, mona zmieni pozycj kalki w oknie
dokumentu naley wpisa odpowiednie
wartoci w pola X i Y lub uy klawiszy kursorw
Aby wyrwna kalk wzgldem

wybranego obiektu:
1. Zaznacz obiekt w oknie dokumentu.
View/Tracing Image/Align With Selection.

Grafika kalki i wybrana warstwa lub obraz
zostan wyrwnane do linii, ktra przechodzi
przez ich grny lewy naronik.
Wskazwki
Poniewa ustawienie 0% (Transparent)
oznacza cakowit przezroczysto, a 100%

(Opaque) zupeny jej brak, w wikszoci
przypadkw najlepiej jest wybra
przezroczysto 40 60%.
Program do kreowania grafiki sieciowej
401
Kalka grafiki
Macromedia Fireworks pozwala tworzy

makiety i ci je na mae elementy, a nastpnie
eksportowa je do formatu GIF. Moesz wic
wykorzysta Dreamweavera do umieszczenia
obrazw na stronie (za pomoc warstw)
i uoenia ich tak, aby dokadnie odpowiaday
projektowi z makiety.
Rozdzia 14.
402

Po Prostu Dreamweaver 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Po Prostu Dreamweaver 4

Uploaded by

Copyright:

Available Formats

IDZ DO

Dreamweaver jest wspaniaym narzdziem. Jest on take jednym z najlepszych

Zakadanie witryny lokalnej

Najprostsze strony WWW

Edycja kodu HTML

Hipercza i adresy URL

Tworzenie czy wzgldnych ..................................................................155

Akapity i ukad dokumentu

Stosowanie tekstu preformatowanego.....................................................228

Rozdzia 10. Tworzenie stylw HTML

Rozdzia 13. Ramki

Rozdzia 12. Tabele

Definiowanie miejsc docelowych.............................................................356

Rozdzia 16. Behawiory

Rozdzia 17. Animacje Timelines

Rozdzia 20. Zarzdzanie witrynami WWW

Rozdzia 19. Dostosowanie programu

Rysowanie czy na mapie witryny.........................................................587

Dziki istnieniu warstw mona kontrolowa

Projektanci kochaj warstwy za ich uniwersalno.

wywietl zawarto warstw, jednake

Rysunek 14.1. Ten may kola utworzono z trzech

Warstwy nazwano tak dlatego, e mona je

Warstwy s czci kaskadowych arkuszy

Rysunek 14..2. Ta warstwa jest uoona w odlegoci

Rysunek 14.3. Mniejsza warstwa jest uoona

Rysunek 14.4. W pozycji statycznej (static)

Rysunek 14.6. Tu kod jest nieomal taki sam, jak

Pozycja wzgldna (relative) oznacza, e pozycja

Rysunek 14.7. Warstwa jest z powrotem ujta

Rysunek 14.5. Zastosowanie pozycjonowania

Pozycja normalna jest nazywana statyczn

Waciwoci pozycjonowania mog by stosowane

Rysunek 14.8. Panel Positioning okna Style

Ponisze waciwoci bd omwione peniej

Rysunek 14.9. Dwie proste prostoktne

Za pomoc Z-indexu (rysunek 14.9) definiuje

Rysunek 14.10. Kady z tych obrazw znajduje si

Rysunek 14.11. Paski przewijania zostan

Rysunek 14.12. Obszar kadrowania pozwala

Clip okrela wykadrowany obszar warstwy,

Skorzystanie z parametrw Placement (rysunki

Inne parametry CSS zwizane

Inne parametry CSS

Inne parametry arkuszy stylw s mniej zwizane

Rysunek 14.13. W panelu Block okna Style Definition

Rysunek 14.14. Opcje wyrwnania pionowego

Aby otworzy okno inspektora Layers:

Z menu okna Document wybierz polecenie

Aby wywietli siatk:

Rysunek 14.16. Wywietlona siatka pozwoli

Aby wywietli linijki:

Zostan wywietlone linijki (rysunek 14.17).

Rysunek 14.17. Linijki (z siatk lub bez niej)

Rysunek 14.18. Za pomoc polecenia Layer z menu

Aby wstawi warstw z menu Insert:

Aby wstawi warstw z palety Objects:

za pomoc polecenia View/Objects z menu

3. Kliknij w miejscu, w ktrym powinien znale

si lewy grny naronik warstwy i przecignij

Domylna warstwa pojawi si w lewym grnym

narysowana (rysunek 14.20).

Rysunek 14.20. Pojawi si rysowana warstwa

Inne parametry CSS zwizane

Aby wywietli siatk:

Aby wywietli linijki:

Aby umieci jedn$ warstw w drugiej:

Aby wywietli warstw lub j$ ukry:

Aby wywietli wszystkie warstwy