IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE

Dreamweaver
MX 2004
Autor: Maria Sok
ISBN: 83-7361-442-7
Format: B5, stron: 352

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

Dreamweaver MX 2004 to najnowsza wersja doskonaego narzdzia do tworzenia

serwisw WWW i aplikacji internetowych. Jego moliwoci sprawiaj, e mog z niego
korzysta zarwno pocztkujcy twrcy stron internetowych, jak i zaawansowani
programici. Pierwsi doceni rozbudowany edytor wizualny pozwalajcy na tworzenie
dokumentw HTML bez znajomoci kodu, a drugich zafascynuj moliwoci rcznego
modyfikowania kodu, edycji stylw CSS, wykorzystywania gotowych skryptw
JavaScript i tworzenia aplikacji internetowych w technologiach PHP, ASP.NET i JSP.
Ksika Dreamweaver MX 2004 jest przeznaczona dla tych, ktrzy chc rozpocz
prac z Dreamweaverem MX 2004 i pozna jego podstawowe moliwoci.
Pocztkujcy uytkownicy znajd w niej informacje o interfejsie uytkownika, zasadach
definiowania struktur witryn WWW i tworzenia dokumentw HTML z wykorzystaniem
edytora wizualnego.
Zasady projektowania serwisw WWW
Interfejs uytkownika Dreamweavera MX 2004
Operacje na plikach
Serwis lokalny i zdalny
Definiowanie ukadu strony WWW
Szablony i paleta Assets
Kaskadowe arkusze stylw
Elementy stron WWW obrazki, listy, tabele i elementy nawigacyjne
cza i adresy URL
Zarzdzanie serwisem WWW
Podstawowe wiadomoci o jzyku PHP

Spis treci
Wstp .............................................................................................................11
Rozdzia 1. Informacje podstawowe ................................................................... 15
Internet i sie WWW........................................................................................................................ 15
HTML ................................................................................................................................................ 15
Strona WWW i serwis internetowy................................................................................................ 16
Znaczniki........................................................................................................................................... 18
Elementy dokumentu HTML ........................................................................................................ 19

Rozdzia 2. Projektujemy serwis internetowy ..................................................... 21

Planowanie serwisu internetowego................................................................................................ 21
Projektowanie serwisu .....................................................................................................................22
Projektowanie systemu nawigacji ..................................................................................................23
Zasoby................................................................................................................................................23
Rady dla projektantw serwisu internetowego ............................................................................23
Praktyka .............................................................................................................................................25

Rozdzia 3. rodowisko programu Dreamweaver MX 2004 i uyteczne narzdzia ... 29

Uruchamianie programu ................................................................................................................29
rodowisko pracy .............................................................................................................................30
Wybr rodowiska i trybu pracy .................................................................................................... 33
Okno dokumentu ............................................................................................................................ 35
Przeczanie si midzy widokami .......................................................................................... 35
Wywietlanie kodu rdowego dokumentu w samodzielnym oknie ............................... 36
Wywietlanie dokumentu w oknie przegldarki ...................................................................37
Rozbudowa listy przegldarek .................................................................................................37
Pasek narzdzi Insert .......................................................................................................................40
Narzdzia paska Insert ..............................................................................................................40
Ukrywanie i wywietlanie paska Insert ...................................................................................43
Wywietlanie zakadek paska Insert w postaci menu............................................................43
Wstawianie obiektu z poziomu paska Insert .........................................................................44
Dostosowywanie zakadki Favorites paska Insert .................................................................45
Umieszczanie wasnego obiektu na zakadce Favorites........................................................47

Dreamweaver MX 2004
Pasek narzdzi Standard..................................................................................................................49
Definiowanie ustawie palet .......................................................................................................... 51
Pasek stanu ........................................................................................................................................ 51
Narzdzia pracy z kodem rdowym...........................................................................................54
Dostosowywanie widoku Code View ......................................................................................54
Opcja wspomagania tworzenia kodu......................................................................................58
Narzdzie Tag Chooser.............................................................................................................59
Narzdzie Quick Tag Editor .................................................................................................... 61
Narzdzia kontroli poprawnoci kodu ..................................................................................62
Odwieanie widoku Design View .......................................................................................... 65
Edycja kodu za pomoc narzdzia Tag Inspector................................................................. 66
Narzdzia kontroli kompatybilnoci przegldarki ....................................................................68
Narzdzie czyszczenia kodu HTML..............................................................................................73

Rozdzia 4. Operacje na plikach.......................................................................... 75

Okno New Document.....................................................................................................................75
Zapisywanie dokumentw..............................................................................................................77
Przywracanie ostatniej zapisanej wersji dokumentu...................................................................78
Otwieranie istniejcych dokumentw ..........................................................................................79
Edycja pliku HTML utworzonego w edytorze Microsoft Word ........................................ 81
Importowanie dokumentw edytora Word...........................................................................83

Rozdzia 5. Rozszerzanie moliwoci programu Dreamweaver MX 2004.............. 85

Macromedia Exchange....................................................................................................................85
Pobieranie rozszerze programu Dreamweaver MX 2004 ..................................................85
Instalowanie rozszerzenia.........................................................................................................89

Rozdzia 6. Tworzenie serwisu internetowego....................................................93

Definiowanie lokalnej kopii serwisu.............................................................................................93
Paleta Files .........................................................................................................................................98
Okno Files jako przegldarka plikw .....................................................................................99
Widoki Local view i Remote view.......................................................................................... 100
Tworzenie folderu.................................................................................................................... 102
Tworzenie pliku ....................................................................................................................... 102
Strona gwna serwisu ................................................................................................................... 104
Mapa serwisu................................................................................................................................... 106
Definiowanie tytuu strony .......................................................................................................... 108
Ustawienia kodowania .................................................................................................................. 109

Rozdzia 7. Definiowanie ukadu strony WWW .................................................. 111

Ukad strony ....................................................................................................................................111
Podgld ukadu strony w przegldarce ..................................................................................111
Definiowanie ukadu strony przy uyciu tabeli ........................................................................ 112
Rysowanie komrek tabeli ukadu strony.............................................................................113
Zagniedanie tabel ukadu strony ........................................................................................116

Spis treci

Wstawianie zawartoci w komrkach tabeli ukadu strony............................................... 117

Definiowanie szerokoci kolumn.......................................................................................... 120
Dopasowywanie wysokoci komrki do zawartoci ........................................................... 122
Definiowanie ukadu strony przy uyciu warstw ...................................................................... 124
Tworzenie warstwy................................................................................................................... 124
Paleta Layers.............................................................................................................................. 126
Definiowanie nazw warstw ..................................................................................................... 127
Zagniedanie warstw.............................................................................................................. 127
Przesuwanie warstw i zmiana ich rozmiarw ...................................................................... 130
Zapobieganie nakadaniu si warstw..................................................................................... 130
Wstawianie obrazu na warstw............................................................................................... 132
Umieszczanie na warstwie tekstu........................................................................................... 133
Definiowanie ta warstwy........................................................................................................ 133
Definiowanie warstw przezroczystych.................................................................................. 134
Pozycjonowanie i zmiana rozmiarw warstw...................................................................... 135
Konwersja warstw na tabele .......................................................................................................... 138
Konwersja tabel na warstwy .......................................................................................................... 140
To strony ........................................................................................................................................ 141
Definiowanie ukadu strony przy uyciu predefiniowanych fragmentw kodu ................. 144

Rozdzia 8. Szablony...................................................................................... 149

Do czego su szablony................................................................................................................ 149
Zapisywanie dokumentu jako szablonu............................................................................... 149
Tworzenie szablonu przy uyciu narzdzi palety Assets.................................................... 150
Modyfikacja szablonu ..............................................................................................................151
Usuwanie obszaru edytowalnego........................................................................................... 153
Tworzenie nowego dokumentu na bazie szablonu............................................................. 154
Stosowanie szablonu do istniejcego dokumentu .............................................................. 156
Odczanie szablonu ............................................................................................................... 157
Aktualizacja stron opartych na szablonach ......................................................................... 158
Tworzenie dokumentu HTML na bazie projektu programu Dreamweaver MX 2004........ 160

Rozdzia 9. Biblioteki...................................................................................... 163

Biblioteki ......................................................................................................................................... 163
Tworzenie i stosowanie elementw bibliotecznych............................................................ 163
Edycja elementw bibliotecznych ......................................................................................... 165
Odczanie i usuwanie elementw bibliotecznych ............................................................. 166
Elementy biblioteczne korzystajce ze skryptw JavaScript.............................................. 167

Rozdzia 10. Praca z obrazami.........................................................................171

Waciwoci obrazw..................................................................................................................... 172
Nadawanie obrazom nazw ..................................................................................................... 174
Definiowanie rozmiarw obrazw........................................................................................ 174
Dodawanie tekstu alternatywnego ........................................................................................ 175

Dreamweaver MX 2004
Dodawanie obramowania do obrazu.................................................................................... 176
Dodawanie wolnej przestrzeni wok obrazu...................................................................... 176
Wyrwnanie obrazu ................................................................................................................ 177
Przeksztacanie obrazw w poczenia........................................................................................ 179
Obrazy aktywne.............................................................................................................................. 181
Behawiory.................................................................................................................................. 183
Paleta Assets i obrazy ..................................................................................................................... 186
Wstawianie obrazw z poziomu palety Assets .................................................................... 187
Ulubione obrazy ...................................................................................................................... 187
Definiowanie ukadu strony na podstawie obrazu ................................................................... 188
Internetowy album fotograficzny................................................................................................ 189
Uwagi przed umieszczeniem obrazw na serwerze ................................................................... 192

Rozdzia 11. Formatowanie tekstu i style CSS.................................................... 195

Wstpne formatowanie tekstu...................................................................................................... 195
Formatowanie stylu akapitu ......................................................................................................... 196
Formatowanie czcionki................................................................................................................. 197
Definiowanie wyrwnania i wci ............................................................................................... 198
Kaskadowe arkusze stylw (CSS) .................................................................................................200
Nowoci wersji MX 2004.........................................................................................................200
Podstawy.................................................................................................................................... 201
Grupowanie stylw ..................................................................................................................202
Dziedziczenie stylu ..................................................................................................................202
Kaskadowo.............................................................................................................................202
Atrybuty stylu...........................................................................................................................203
CSS a HTML.............................................................................................................................204
Klasy...........................................................................................................................................205
Paleta CSS Styles.......................................................................................................................206
Okno Page Properties, style CSS i style HTML ...................................................................206
Proces definiowania stylu CSS ...............................................................................................207
Eksportowanie arkusza CSS ................................................................................................... 216
Korzystanie z zewntrznych arkuszy CSS ............................................................................ 217
Edycja arkusza CSS .................................................................................................................. 219
Tworzenie arkusza CSS na bazie istniejcego ......................................................................220
Zmiana definicji znacznika HTML za pomoc arkusza CSS ........................................... 221
Przypisywanie klasy lub selektora ID okrelonym elementom
przy wykorzystaniu menu kontekstowego .......................................................................222
Stosowanie osadzonych arkuszy stylw................................................................................223
Styl pocze .............................................................................................................................225
Strona WWW utworzona za pomoc arkuszy CSS...................................................................225
Kontrola poprawnoci ortograficznej tekstu.......................................................................242

Spis treci

Rozdzia 12. Dodatkowe elementy stron WWW................................................243

Listy ..................................................................................................................................................243
Przeksztacanie tekstu w list..................................................................................................243
Wstawianie nowej listy ............................................................................................................245
Tworzenie listy zagniedonej ...............................................................................................245
Tabele ...............................................................................................................................................245
Wstawianie tabeli w widoku Standard ..................................................................................246
Zaznaczanie tabeli lub jej elementw....................................................................................248
Wprowadzanie danych do tabeli ...........................................................................................249
Wyrwnanie danych w tabeli .................................................................................................250
Wyrwnywanie tabel i definiowanie obramowa...............................................................250
Obramowanie tabeli ................................................................................................................ 251
Rozpinanie komrek tabeli na wierszach i kolumnach..................................................... 251
Wstawianie wierszy i kolumn.................................................................................................253
Usuwanie wierszy i kolumn....................................................................................................255
Zmiana rozmiarw tabeli .......................................................................................................255
Zmiana wymiarw kolumn i wierszy....................................................................................256
Podzia obrazu na wycinki a tabele .......................................................................................257
Menu rozwijane..............................................................................................................................259
Rozbudowa menu rozwijanego .............................................................................................260
Pasek nawigacji ......................................................................................................................... 261

Rozdzia 13. Poczenia na stronach WWW .....................................................265

Umiejscowienie dokumentu a cieka dostpu .........................................................................265
Adres bezwzgldny...................................................................................................................266
Adresy wzgldne definiowane wzgldem dokumentu .......................................................266
Adresy wzgldne definiowane wzgldem folderu nadrzdnego .......................................267
Uwagi na temat pocze ..............................................................................................................267
Konwersja tekstu na poczenie ...................................................................................................268
System nawigacji w obrbie strony ..............................................................................................270
Tworzenie poczenia tekstowego................................................................................................272
Mapy odnonikw .........................................................................................................................273
Poczenia e-mail ............................................................................................................................275
Zarzdzanie poczeniami ............................................................................................................276
Przekierowanie pocze do innego pliku .................................................................................277
Analiza pocze midzy dokumentami....................................................................................278
Naprawa pocze.......................................................................................................................... 281
Dodatkowe opcje pocze ........................................................................................................... 281
Testowanie pocze ......................................................................................................................282

Rozdzia 14. Zarzdzanie serwisem internetowym............................................283

Przegldanie struktury serwisu internetowego ..........................................................................283
Wywietlanie i ukrywanie elementw mapy serwisu ..........................................................285
Przesuwanie pliku midzy folderami ..........................................................................................286
Zarzdzanie poczeniami z poziomu okna Files .....................................................................287

Dreamweaver MX 2004
Usuwanie pliku lub folderu..........................................................................................................289
Usuwanie serwisu internetowego z listy......................................................................................290
Konfigurowanie poczenia z serwerem sieciowym..................................................................290
Testowanie lokalnej kopii serwisu internetowego
przed umieszczeniem na serwerze sieciowym.........................................................................292
Umieszczanie plikw serwisu internetowego na serwerze sieciowym ....................................292
Synchronizacja plikw lokalnej i sieciowej kopii serwisu internetowego .............................293

Rozdzia 15. Strony WWW wykorzystujce ramki ........................................... 297

Korzystanie z predefiniowanych ukadw ramek .....................................................................298
Modyfikacja ramek ........................................................................................................................300
Podzia ramki ...........................................................................................................................300
Usuwanie ramek i ukadu ramek ...........................................................................................300
Zaznaczanie ramek i ukadw ramek .......................................................................................... 301
Paleta Frames ..................................................................................................................................302
Wywietlanie palety Frames....................................................................................................302
Zaznaczanie ramek i ukadu ramek z poziomu palety Frames ......................................... 303
Zapisywanie ramek i ukadw ramek .......................................................................................... 303
Waciwoci ramek i ukadw ramek ..........................................................................................304
Waciwoci ramki ...................................................................................................................304
Waciwoci ukadu ramek .....................................................................................................305
Element noframes ..........................................................................................................................306
To ramki .........................................................................................................................................307
Kontrolowanie zawartoci ramki za pomoc pocze............................................................308

Rozdzia 16. Strony PHP.................................................................................311

Kilka sw o PHP.............................................................................................................................311
Testowanie serwera PHP................................................................................................................ 312
Krtki kurs PHP............................................................................................................................. 313
Zmienne PHP ........................................................................................................................... 316
Tablice........................................................................................................................................ 319
Wyraenie warunkowe if......................................................................................................... 321
Ptla for .....................................................................................................................................322
Ptla while i generowanie tabel HTML................................................................................. 323
Funkcje budowanie stron WWW .....................................................................................324

Dodatek A Wybrane skrty klawiaturowe programu Dreamweaver MX 2004 .....329

Zarzdzanie plikami ......................................................................................................................329
Edycja...............................................................................................................................................329
Przeczanie si midzy widokami............................................................................................... 330
Wywietlanie elementw pomocniczych.................................................................................... 331
Edycja kodu..................................................................................................................................... 331
Edycja tekstu ................................................................................................................................... 332
Formatowanie tekstu ..................................................................................................................... 332
Tabele ............................................................................................................................................... 332

Spis treci

Obrazy ............................................................................................................................................. 333

Ramki............................................................................................................................................... 333
Warstwy ........................................................................................................................................... 334
Pomoc .............................................................................................................................................. 334
Wstawianie obiektw..................................................................................................................... 334
Poczenia........................................................................................................................................ 335
Wywietlanie w przegldarce ........................................................................................................ 335
Zarzdzanie serwisem .................................................................................................................... 335
Mapa serwisu................................................................................................................................... 336
Otwieranie i zamykanie paneli..................................................................................................... 336

Skorowidz ....................................................................................................339

Rozdzia 15.
Strony WWW
wykorzystujce ramki
Ramka to wydzielony obszar okna przegldarki, w ktrym mona wywietli
inny dokument HTML ni w pozostaej czci okna. Sama ramka nie jest plikiem.
Ukad ramek to plik HTML, ktry definiuje ukad i waciwoci ramek wchodzcych w skad ukadu, w tym ich liczb, rozmiar i ulokowanie oraz adresy
URL stron wywietlanych w poszczeglnych ramkach. W pliku ukadu ramek
nie ma zawartoci dokumentw w nich prezentowanych. Wyjtkiem jest sekcja
noframes dokumentu okrela ona zawarto strony dla przegldarek nieobsugujcych ramek.
Najczciej ramki wykorzystywane s do wspomagania nawigacji jedna ramka
moe zawiera pasek nawigacji, a w drugiej wywietlana jest zawarto dokumentu
wybranego za pomoc paska nawigacji.
Ramki maj swoich przeciwnikw zarwno wrd projektantw stron WWW,
jak i wrd uytkownikw. Zazwyczaj niech do nich wynika z bdw twrcw stron irytacj budzi na przykad nieustanne przeadowywanie zawartoci ramki nawigacyjnej przy kadym klikniciu przycisku nawigacji. Zraaj do
stosowania ramek take inne przyczyny: ich ograniczona obsuga w niektrych
przegldarkach oraz znacznie trudniejsze ni na stronach tworzonych za pomoc tabel zapanowanie nad ukadem elementw graficznych. Jeli wic decydujesz si na zastosowanie ramek, zawsze na wszelki wypadek umieszczaj w kodzie rdowym sekcj noframes.
Ramki maj te swoje zalety. Zawarto ramek nawigacyjnych nie musi by wielokrotnie adowana przy kolejnych poczeniach, a ramki zawartoci mog by
przewijane niezalenie.
Naley jednak pamita, e wszystko to, co umoliwiaj ramki, da si uzyska
take innymi metodami.

298

Dreamweaver MX 2004

Korzystanie z predefiniowanych ukadw ramek

Predefiniowane ukady ramek programu Dreamweaver MX 2004 pozwalaj
szybko zdefiniowa odpowiedni ukad ramek. Istniej dwie podstawowe metody
definiowania ukadu ramek: przy uyciu narzdzi Frames paska Insert lub za
pomoc predefiniowanych ukadw dostpnych w oknie New Document.
Aby zdefiniowa ukad ramek w istniejcym dokumencie:
1. Umie punkt wstawiania w dokumencie.
2. Kliknij zakadk Layout paska narzdzi Insert, kliknij przycisk Frames i wybierz

jeden z proponowanych tu ukadw ramek lub wybierz predefiniowany

ukad ramek w menu podrzdnym Frames menu Insert (zob. rysunek 15.1).
Rysunek 15.1.
Aby zdefiniowa
ukad ramek, moesz
skorzysta z paska
Insert lub menu Insert

Rozdzia 15.
Strony WWW wykorzystujce ramki

3. Okno dokumentu zostanie podzielone na ramki zgodnie z dokonanym
wyborem (zob. rysunek 15.2).
Rysunek 15.2.
Ramki w dokumencie

Aby zdefiniowa nowy dokument korzystajcy z ramek:

1. Wybierz w menu File pozycj New i zaznacz w oknie New Document
kategori Framesets na licie Framesets znajdziesz wiele ukadw ramek.
2. Wybierz ukad ramek z listy Framesets i kliknij przycisk Create
(zob. rysunek 15.3).
Rysunek 15.3.
Wybierz w menu File
pozycj New, a w oknie
New Document kliknij
kategori Framesets
na licie Framesets
znajdziesz
predefiniowane ukady
ramek. W oknie
podgldu moesz
zapozna si
z proponowanym
ukadem, a w polu
Description znajdziesz
opis tekstowy

299

300

Dreamweaver MX 2004
Aby moliwa bya praca z ramkami, ich obramowania musz by widoczne jeli tak
nie jest, wybierz w menu View pozycj Visual Aids, a nastpnie pozycj Frame Borders
w menu podrzdnym.
W istniejcym dokumencie ramki mona definiowa, korzystajc z menu podrzdnego
Frameset menu Modify.

Modyfikacja ramek
Podzia ramki
Aby podzieli ramk, skorzystaj z jednej z metod:
Umie punkt wstawiania w dzielonej ramce i wybierz sposb podziau
w menu podrzdnym Frameset menu Modify (zob. rysunek 15.4).
Rysunek 15.4.
Wybierz sposb
podziau ramki

Umie wskanik myszy nad grn lub boczn krawdzi ukadu ramek
(wskanik przyjmie posta dwukierunkowej strzaki) i przecignij krawd
w kierunku rodka okna (zob. rysunek 15.5).
Przecignij krawd, ktra nie jest krawdzi ukadu ramek, wcisnwszy
klawisz Alt.

Usuwanie ramek i ukadu ramek

Aby usun ramk:
Przecignij obramowanie ramki poza stron lub do obramowania ramki
nadrzdnej. Jeli w usuwanej ramce znajduje si jaka zawarto, zostaniesz
poproszony o zapisanie dokumentu.

Rozdzia 15.
Strony WWW wykorzystujce ramki

301

Rysunek 15.5.
Przecignij
krawd ukadu
ramek do rodka

Aby usun ukad ramek:

Zamknij okno dokumentu, w ktrym wywietlany jest ukad ramek, i usu
jego plik, korzystajc z okna Files.

Zaznaczanie ramek i ukadw ramek

Aby wprowadza zmiany w ramce lub w ukadzie ramek, musisz najpierw zaznaczy odpowiedni element.
Aby zaznaczy ramk lub ukad ramek w oknie dokumentu:
Wcinij klawisz Alt i kliknij wewntrz ramki. Zaznaczona ramka zostanie
obwiedziona obramowaniem (zob. rysunek 15.6).
Rysunek 15.6.
Wcinij klawisz Alt
i kliknij wewntrz
ramki, ktr chcesz
zaznaczy wok
niej pojawi si
kropkowane
obramowanie

Aby przenie zaznaczenie do innej ramki:

Wcinij klawisz Alt i nacinij klawisz ze strzak w lewo lub w prawo
zaznaczona zostanie nastpna z ramek.

302

Dreamweaver MX 2004
Wcinij klawisz Alt i nacinij klawisz ze strzak w gr zaznaczony
zostanie nadrzdny ukad ramek.
Wcinij klawisz Alt i nacinij klawisz ze strzak w d zaznaczona
zostanie ramka podrzdna zaznaczonego wczeniej ukadu ramek.
Aby zaznaczy ukad ramek:
W oknie dokumentu kliknij obramowanie ukadu ramek.

Paleta Frames
Paleta Frames na bieco informuje, jak wyglda podzia dokumentu na ramki
i jaka jest hierarchia ramek. Umoliwia take zaznaczanie poszczeglnych ramek
oraz ich ukadu.

Wywietlanie palety Frames

Aby wywietli palet Frames:
Wybierz pozycj Frames w menu Window lub zastosuj skrt klawiszowy
Shift+F2 (zob. rysunek 15.7).
Rysunek 15.7.
Otwieranie okna
palety Frames

Rozdzia 15.
Strony WWW wykorzystujce ramki

303

Zaznaczanie ramek i ukadu ramek

z poziomu palety Frames
Aby zaznaczy ramk z poziomu palety Frames:
W palecie Frames kliknij obszar ramki, ktr chcesz zaznaczy. Ramka
zostanie zaznaczona take w oknie dokumentu.
Aby zaznaczy ukad ramek z poziomu palety Frames:
W palecie Frames kliknij obramowanie ukadu ramek. W oknie dokumentu
zaznaczony zostanie ukad ramek.

Zapisywanie ramek i ukadw ramek

Plik ukadu ramek i stowarzyszone z nim pliki zawartoci ramek musz zosta
zapisane, aby moliwe stao si wywietlenie strony z ramkami w przegldarce.
Aby zapisa ukad ramek:
Zaznacz ukad ramek w oknie palety Frames lub w oknie dokumentu
i wybierz w menu File pozycj Save Frameset lub Save Frameset As, jeli chcesz
zapisa ukad pod now nazw (zob. rysunek 15.8). W oknie Save As podaj
nazw ukadu ramek i miejsce zapisania.
Rysunek 15.8.
Zaznacz ukad
ramek klikajc
jego obramowanie
w oknie palety Frames,
a nastpnie wybierz
w menu File pozycj
Save Frameset

Aby zapisa dokument wywietlany w ramce:

Kliknij ramk zawierajc dokument i wybierz w menu File pozycj Save Frame
lub Save Frame As. Nadaj plikowi swoj nazw, ktra zastpi nazw domyln.

304

Dreamweaver MX 2004
Aby zapisa wszystkie pliki stowarzyszone z ukadem ramek:
Wybierz w menu File pozycj Save All. Zapisane zostan wszystkie
otwarte dokumenty, w tym dokumenty ramek i ukadu ramek. Aby nie
pogubi si w czasie zapisywania kolejnych dokumentw, Dreamweaver
wywietla obramowania wok aktualnie zapisywanych (zob. rysunek 15.9).
Zdefiniuj wasne nazwy i kliknij przycisk zapisywania. Wywietlone
zostanie kolejne okienko Save As dla nastpnego pliku ramki.

Rysunek 15.9.
Aktualnie zapisywana
ramka obwiedziona
jest w oknie
dokumentu szerokim
obramowaniem;
bez trudu zorientujesz
si wic, jaki plik
zapisujesz. Podaj jego
nazw i kliknij Zapisz.
Pojawi si kolejne
okienko Save As
dla nastpnego pliku

Waciwoci ramek i ukadw ramek

Zarwno ramki, jak i ich ukad maj swoje waciwoci. Definiowanie tych waciwoci odbywa si podobnie jak dla innych elementw strony czy samej strony.

Waciwoci ramki
Zdefiniuj waciwoci ramek.
Aby zdefiniowa waciwoci ramki:
1. Zaznacz ramk, ktrej waciwoci chcesz skonfigurowa.
2. W oknie Properties zdefiniuj w polu Frame name nazw ramki
(zob. rysunek 15.10).
Nazwa ramki musi by pojedynczym wyrazem, zaczynajcym si od litery. Znaki
podkrelenia (_) s dozwolone, natomiast mylniki, kropki i spacje nie s. Wielko
znakw jest w nazwach ramek istotna. Nie wolno take stosowa wyrae jzyka
JavaScript (np. top lub navigator).

Rozdzia 15.
Strony WWW wykorzystujce ramki

305

Rysunek 15.10.
Definiowanie
waciwoci ramki
w oknie Properties

Moesz wskaza w polu Src plik rdowy, ktry ma by adowany do ramki.

1. Zdefiniuj w polach Margin Width i Height szerokoci marginesw
w pikselach. Okrelaj one odlego midzy obramowaniem ramki
a zawartoci.
2. Jeli chcesz, zmie ustawienia przewijania (lista rozwijana Scroll)
i ustawienia dotyczce wywietlania obramowa (lista rozwijana Borders).
3. Moesz take zaznaczy pole wyboru No Resize, aby uniemoliwi
uytkownikowi zmian rozmiaru ramki.
4. Zdefiniuj kolor obramowania ramki (pole i przycisk Border color).
Ustawienia zdefiniowane dla ramki dominuj nad ustawieniami ukadu ramek. Jeli wic
zdefiniujesz inny kolor obramowania ramki, a inny dla ukadu ramek, to kolor obramowania
ramki nie zostanie zmieniony. Definiujc waciwoci, pamitaj o tej zalenoci.

Waciwoci ukadu ramek

W ramkach wstpnie zdefiniowanych ukadw ramek nie ma obramowa,
paskw przewijania, a opcja zmiany rozmiarw w oknie przegldarki jest wyczona. Zmiana tych ustawie jest moliwa w oknie Properties.

306

Dreamweaver MX 2004
Aby skonfigurowa waciwoci ukadu ramek:
Zaznacz ukad ramek i zdefiniuj dane waciwoci w oknie Properties
(zob. rysunek 15.11). Okno waciwoci ukadu ramek umoliwia zmian
rozmiarw ramek (pola Value i Units) oraz zdefiniowanie koloru i szerokoci
obramowania oddzielajcego ramki (pola Borders, Border width i Border color).

Rysunek 15.11.
Okno Properties
dla ukadu ramek

W polach Value i Units okienka waciwoci ukadu ramek definiujesz sposb przydzielania
ramkom powierzchni przy zmianie rozmiarw okna przegldarki.
Warto w pikselach (pozycja Pixels) okrela rozmiar kolumny lub wiersza w sposb
bezwzgldny w takim przypadku rozmiar ten zawsze bdzie taki sam. Jest to wic
odpowiednie rozwizanie, gdy w ramce umieszczasz stay element, na przykad pasek
nawigacji. Jeli pozostaym ramkom przyporzdkujesz rozmiary w innych jednostkach,
przestrze zostanie im przydzielona dopiero po zapewnieniu powierzchni dla ramki,
ktrej rozmiar wskazae w pikselach. Jest to wic ustawienie dominujce.
Pozycja Percent oznacza, e ramka ma zajmowa okrelony w procentach obszar ukadu
ramek. Zostanie jej on przydzielony po spenieniu wymaga ramki, ktrej rozmiar
wskazae w pikselach. Ustawienie to jest dominujce tylko wzgldem ustawienia Relative.
Wybranie pozycji Relative okrela, e biecej ramce zostanie przydzielony obszar
proporcjonalnie wzgldem innych ramek.
Ustawienie wskazane na licie Borders okienka waciwoci ukadu ramek okrela sposb
wywietlania obramowa ramek. Pozycja Yes jest rwnowana wywietleniu obramowa
trjwymiarowych. W przypadku wybrania pozycji No obramowania bd paskie i szare,
a wskazanie pozycji Default pozostawi kwesti wyboru wygldu obramowa przegldarce.

Element noframes
Jeli decydujesz si na korzystanie z ramek, powiniene przygotowa take dokument alternatywny, ktry zostanie wywietlony w przegldarce nieobsugujcej ramek. Zawarto ta umieszczana jest w elemencie noframes. Nie ograniczaj

Rozdzia 15.
Strony WWW wykorzystujce ramki

307

si jedynie do wpisania w tym elemencie, e przegldarka uytkownika nie obsuguje ramek i naley pomyle o zainstalowaniu nowszej wersji. Szacunek dla
czytelnika Twoich stron WWW nakazuje umieci tu pen wersj dokumentu,
rwnowan tej ramkowej.
Aby zdefiniowa zawarto elementu noframes:
1. Wybierz w menu Modify pozycj Frameset, a nastpnie pozycj Edit NoFrames
Content. Dreamweaver wyczyci okno dokumentu i wywietli nagwek
NoFrames Content u gry okna dokumentu.
2. Zdefiniuj w widoku Design View dokument zastpczy w taki sam sposb
jak zwyky dokument.
Moesz wpisa zawarto elementu noframes bezporednio w kodzie. Nacinij F10,
aby otworzy okno Code Inspector, ulokuj punkt wstawiania midzy znacznikami
<body></body> umieszczonymi w obrbie elementu noframes i wpisz rcznie
kod HTML (zob. rysunek 15.12).
Rysunek 15.12.
Wpisz kod HTML
zawartoci zastpczej,
ktra zostanie
wykorzystana
w przegldarkach
nieobsugujcych
ramek

3. Wybierz ponownie pozycj Edit NoFrames Content w menu podrzdnym

Frameset menu Modify, aby powrci do ukadu ramek.

To ramki
Zdefiniujmy w wybranej ramce kolor ta.
Aby skonfigurowa kolor ta ramki:
1. Kliknij pole ramki.
2. Kliknij w oknie Properties przycisk Page Properties lub wybierz w menu Modify
pozycj Page Properties.

308

Dreamweaver MX 2004
3. W oknie Page Properties wybierz kolor ta (zob. rysunek 15.13).

Rysunek 15.13.
Definiowanie
waciwoci ramek
jest tak proste,
jak zwykych
dokumentw HTML

4. Ustaw inne waciwoci i kliknij przycisk Apply, aby sprawdzi, jak prezentuje
si ramka. Jeli zadowala Ci jej wygld, zamknij okno Page Properties.

Kontrolowanie zawartoci ramki

za pomoc pocze
W przypadku stosowania ramek na stronach WWW, najczciej stosowanym
schematem jest ukad dwch ramek, z ktrych jedna jest ramk nawigacyjn,
a druga prezentuje zawarto wskazan w ramce nawigacyjnej. Aby taki system
funkcjonowa poprawnie, musisz zidentyfikowa ramki, nadajc im nazwy,
zdefiniowa poczenia i wskaza ich cel ramk gwn.
Aby zdefiniowa w ramce nawigacyjnej poczenie wywietlajce zawarto
w ramce gwnej:
1. Zdefiniuj ukad ramek skadajcy si z ramki nawigacyjnej i ramki gwnej.
2. Zapisz ukad, nadajc ramkom nazwy.
3. W widoku Design zaznacz w ramce nawigacyjnej tekst lub obiekt,
ktry chcesz przeksztaci w poczenie.

Rozdzia 15.
Strony WWW wykorzystujce ramki

309

4. W polu Link okna Properties kliknij ikon folderu i wska plik, ktry
ma zosta wywietlony w ramce gwnej.
5. Rozwi list Target i wybierz z niej nazw ramki gwnej (zob. rysunek 15.14).
Rysunek 15.14.
Definiujemy
poczenie, ktrego
kliknicie wywietli
w ramce gwnej
wskazan zawarto

Nazwy ramek pojawiaj si na licie Target okna Properties tylko przy edycji dokumentu
w ukadzie ramek. Jeli ten sam dokument otworzysz w jego wasnym oknie dokumentu,
na licie Target nie bdzie nazw ramek. W takim przypadku moesz sam wpisa nazw
ramki w polu tekstowym Target.
Jeli w ramce nawigacyjnej chcesz umieszcza poczenia prowadzce do stron spoza
Twojego serwisu, wybierz z listy Target pozycj _top lub _blank, aby nie byo wtpliwoci,
e strony te s obce.