IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

Dreamweaver MX

KATALOG KSIEK
KATALOG ONLINE

Autor: Maria Sok

ISBN: 83-7197-997-5
Format: B5, stron: 216

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, narzdzie do graficznego projektowania stron internetowych, powsta

niewtpliwie z myl o uatwieniu pracy twrcom stron WWW. Nowy, zintegrowany
interfejs programu daje uytkownikom pen swobod ruchu. Pozwala manipulowa
paletami i jest bardzo elastyczny w dostosowywaniu do wasnych potrzeb.
Predefiniowane projekty stron oraz fragmenty kodu HTML i JavaScript pozwalaj
z atwoci budowa wasne strony. Poprawiono obsug kaskadowych arkuszy stylw
i rozbudowano moliwoci szablonw. Zadowoleni powinni by wszyscy zwolennicy
rcznego tworzenia kodu stron WWW: prac z kodem uatwiaj narzdzia, takie jak
na przykad edytor znacznikw, Tag Inspector czy narzdzie kontroli poprawnoci kodu.
Usprawniono take proces tworzenia nowego dokumentu: program proponuje bogaty
zestaw kategorii nowego dokumentu, od prostych stron HTML a po bardziej
zaawansowane projekty. Dreamweaver MX umoliwia take tworzenie stron
korzystajcych z baz danych.
Co znajdziesz w tym opracowaniu? S tu podstawowe pojcia dotyczce jzyka HTML,
najwaniejsze informacje na temat planowania i projektowania witryn WWW, opis
rodowiska pracy programu Dreamweaver MX i narzdzi pracy z kodem rdowym.
Z ksik w rku bez trudu utworzysz witryn WWW, jej stron gwn, ustawisz
kodowanie, zdefiniujesz ukad strony przy uyciu tabel lub warstw oraz nauczysz si
korzysta z szablonw i bibliotek. Wiele uwagi powicono obrazom nauczysz si
definiowa waciwoci obrazw, korzysta z palety Assets oraz ze stylw CSS.
Poznasz moliwoci tabel, list, linii czasowych i behawiorw. Dowiesz si, jak planowa
nawigacj i poczenia oraz jak nimi zarzdza. Bdziesz wiedzia, jak zarzdza
witrynami: lokaln i odleg, a take jak korzysta z ramek.

Spis treci
Wstp.............................................................................................................................................................. 9
Rozdzia 1.

Informacje podstawowe ..................................................................................................................... 11

HTML.........................................................................................................................................11
Strona WWW i witryna WWW .................................................................................................12
Znaczniki....................................................................................................................................13
Elementy dokumentu HTML .....................................................................................................13

Rozdzia 2. Projektujemy witryn WWW.............................................................................................................. 15

Planowanie witryny....................................................................................................................15
Projektowanie witryny ...............................................................................................................16
Projektowanie systemu nawigacji ..............................................................................................17
Zasoby ........................................................................................................................................17
Projektowanie witryny podsumowanie ....................................................................................17
Praktyka......................................................................................................................................18
Zadania do samodzielnego wykonania ......................................................................................20
Analiza problemu.................................................................................................................20

Rozdzia 3. Praca w rodowisku Dreamweaver MX.......................................................................................23

Uruchamianie programu.............................................................................................................23
rodowisko pracy.......................................................................................................................24
Powrt do pulpitu programu Dreamweaver 4 ............................................................................26
Okno dokumentu ........................................................................................................................28
Przeczanie si midzy widokami ......................................................................................28
Wywietlanie kodu rdowego dokumentu w samodzielnym oknie..................................29
Wywietlanie dokumentu w oknie przegldarki..................................................................30
Pasek narzdzi Insert..................................................................................................................31
Narzdzia paska Insert .........................................................................................................31
Ukrywanie i wywietlanie paska Insert ...............................................................................35
Wstawianie obiektu z poziomu paska Insert........................................................................35
Wybr sposobu prezentacji narzdzi na pasku Insert ..........................................................36
Pasek narzdzi Standard.............................................................................................................36
Pasek Launcher ..........................................................................................................................38
Definiowanie ustawie palet ......................................................................................................40
Pasek stanu .................................................................................................................................40

Dreamweaver MX

Narzdzia pracy z kodem rdowym ........................................................................................42

Dostosowywanie widoku Code View ..................................................................................42
Opcja wspomagania tworzenia kodu ...................................................................................44
Narzdzie Tag Chooser........................................................................................................45
Narzdzie Quick Tag Editor ................................................................................................46
Narzdzia kontroli poprawnoci kodu .................................................................................47
Edycja kodu za pomoc narzdzia Tag Inspector................................................................48
Okno New Document.................................................................................................................49

Rozdzia 4. Tworzenie witryny................................................................................................................................. 53

Definiowanie witryny lokalnej...................................................................................................53
Okno Site....................................................................................................................................55
Przegldarka plikw.............................................................................................................56
Widoki Local View i Remote View.....................................................................................56
Tworzenie folderu ................................................................................................................58
Tworzenie pliku ...................................................................................................................58
Strona gwna witryny ...............................................................................................................60
Mapa witryny .............................................................................................................................61
Definiowanie tytuu strony.........................................................................................................64
Ustawienia kodowania ...............................................................................................................65
Definiowanie ukadu strony .......................................................................................................66
Podgld ukadu strony w przegldarce ................................................................................66
Definiowanie ukadu strony przy uyciu tabeli ...................................................................67
Rysowanie komrek tabeli ukadu strony............................................................................67
Zagniedanie tabel ukadu strony.......................................................................................70
Wstawianie zawartoci w komrkach tabeli ukadu strony ...................................................71
Definiowanie szerokoci kolumn.........................................................................................72
Dopasowywanie wysokoci komrki do zawartoci ...........................................................74
Definiowanie ukadu strony przy uyciu warstw.................................................................75
Tworzenie warstwy ..............................................................................................................76
Paleta Layers ........................................................................................................................77
Definiowanie nazw warstw..................................................................................................79
Zagniedanie warstw..........................................................................................................80
Przesuwanie warstw i zmiana ich rozmiarw ......................................................................81
Zapobieganie nakadaniu si warstw ...................................................................................82
Wstawianie obrazu na warstw............................................................................................83
Umieszczanie na warstwie tekstu ........................................................................................84
Definiowanie ta warstwy ....................................................................................................84
Definiowanie warstw przezroczystych ................................................................................85
Pozycjonowanie i zmiana rozmiarw warstw......................................................................86
Konwersja warstw na tabele.......................................................................................................87
Konwersja tabel na warstwy ......................................................................................................89
To strony ...................................................................................................................................90
Szablony .....................................................................................................................................92
Tworzenie szablonu .............................................................................................................92
Modyfikacja szablonu ..........................................................................................................92
Stosowanie szablonu ............................................................................................................93
Biblioteki....................................................................................................................................95
Tworzenie i stosowanie elementw bibliotecznych.............................................................95
Zadania do samodzielnego wykonania ......................................................................................96
Tworzenie ukadu strony przy uyciu predefiniowanych fragmentw kodu.......................96

Rozdzia 5. Praca z obrazami.................................................................................................................................... 99

Waciwoci obrazw...............................................................................................................100
Nadawanie obrazom nazw .................................................................................................100
Definiowanie rozmiarw obrazw.....................................................................................100
Dodawanie tekstu alternatywnego .....................................................................................101
Dodawanie obramowania do obrazu..................................................................................102
Dodawanie wolnej przestrzeni wok obrazu ....................................................................102
Wyrwnanie obrazu ...........................................................................................................104
Przeksztacanie obrazw w poczenia ....................................................................................105
Obrazy aktywne........................................................................................................................106
Jak przypisa obrazowi behawior? ....................................................................................108
Paleta Assets i obrazy...............................................................................................................110
Wstawianie obrazw z poziomu palety Assets ..................................................................112
Ulubione obrazy.................................................................................................................112
Definiowanie ukadu strony na podstawie obrazu ...................................................................113
Internetowy album fotograficzny .............................................................................................114
Zadania do samodzielnego wykonania ....................................................................................117
Umieszczanie obrazw na serwerze ..................................................................................117

Rozdzia 6. Formatowanie tekstu ......................................................................................................................... 119

Wstpne formatowanie tekstu ..................................................................................................119
Formatowanie stylu akapitu .....................................................................................................120
Formatowanie czcionki ............................................................................................................121
Definiowanie wyrwnania i wci ...........................................................................................124
Style HTML .............................................................................................................................125
Tworzenie stylu HTML na podstawie istniejcego tekstu .....................................................126
Kaskadowe arkusze stylw (CSS)............................................................................................127
Grupowanie stylw ............................................................................................................128
Dziedziczenie stylu ............................................................................................................128
Kaskadowo .....................................................................................................................128
Atrybuty stylu ....................................................................................................................129
CSS a HTML .....................................................................................................................130
Klasy ..................................................................................................................................131
Paleta CSS Styles...............................................................................................................131
Proces definiowania stylu CSS ..........................................................................................132
Eksportowanie arkusza CSS ..............................................................................................140
Korzystanie z zewntrznych arkuszy CSS.........................................................................141
Edycja arkusza CSS ...........................................................................................................142
Tworzenie arkusza CSS na bazie istniejcego...................................................................143
Zmiana definicji znacznika HTML przy pomocy arkusza CSS...........................................143
Przypisywanie klasy lub selektora ID okrelonym elementom
przy wykorzystaniu menu kontekstowego......................................................................144
Zadania do samodzielnego wykonania ....................................................................................145
Prosty kaskadowy arkusz stylw formatowania tekstu .....................................................145
Styl pocze ......................................................................................................................146
Kontrola poprawnoci ortograficznej tekstu ......................................................................146

Rozdzia 7.

Zaawansowana edycja stron WWW ........................................................................................... 147

Listy..........................................................................................................................................147
Przeksztacanie tekstu w list.............................................................................................147
Wstawianie nowej listy ......................................................................................................148
Tworzenie listy zagniedonej...........................................................................................149

Dreamweaver MX

Tabele .......................................................................................................................................149
Wstawianie tabeli w widoku Standard...............................................................................149
Zaznaczanie tabeli lub jej elementw ................................................................................151
Wprowadzanie danych do tabeli ........................................................................................152
Wyrwnanie danych w tabeli.............................................................................................152
Wyrwnywanie tabel i definiowanie obramowa .............................................................153
Obramowanie tabeli ...........................................................................................................153
Rozpinanie komrek tabeli na wierszach i kolumnach......................................................153
Wstawianie wierszy i kolumn ............................................................................................156
Usuwanie wierszy i kolumn...............................................................................................157
Zmiana rozmiarw komrki ..............................................................................................157
Zamiana pikseli na procenty i odwrotnie...........................................................................158
Podzia obrazu na wycinki a tabele....................................................................................158
Tworzenie animacji ..................................................................................................................160
Okno Timelines..................................................................................................................160
Definiowanie linii czasowej...............................................................................................161
Przypisywanie liniom czasowym behawiorw ..................................................................164
Przyciski Flash .........................................................................................................................164
Menu rozwijane........................................................................................................................165
Rozbudowa menu rozwijanego..........................................................................................167
Zadania do samodzielnego wykonania ....................................................................................168
Pasek nawigacji..................................................................................................................168

Rozdzia 8. Poczenia na stronach WWW ..................................................................................................... 169

Ulokowanie dokumentu a cieka dostpu ..............................................................................169
Adres bezwzgldny ............................................................................................................170
Adresy wzgldne definiowane wzgldem dokumentu.......................................................170
Adresy wzgldne definiowane wzgldem folderu nadrzdnego........................................171
Uwagi na temat pocze .........................................................................................................171
Konwersja tekstu w poczenie ................................................................................................172
System nawigacji w obrbie strony..........................................................................................174
Tworzenie poczenia z innym plikiem ...................................................................................176
Mapy odnonikw ....................................................................................................................176
Poczenia e-mail .....................................................................................................................179
Zarzdzanie poczeniami ........................................................................................................179
Przekierowanie pocze do innego pliku ...................................................................................180
Analiza pocze midzy dokumentami ..................................................................................181
Naprawa pocze ....................................................................................................................182
Dodatkowe opcje pocze.......................................................................................................183
Testowanie pocze ................................................................................................................184
Zadania do samodzielnego wykonania ....................................................................................184
Otwieranie poczenia w nowym oknie .............................................................................184
Poczenia do strony gwnej ............................................................................................185

Rozdzia 9. Zarzdzanie witryn ............................................................................................................................ 187

Przegldanie struktury witryny ................................................................................................187
Przesuwanie pliku midzy folderami .......................................................................................190
Tworzenie poczenia z poziomu okna Site...............................................................................190
Usuwanie pliku lub folderu ......................................................................................................191
Usuwanie witryny z listy..........................................................................................................191
Stowarzyszanie serwera odlegego z witryn lokaln..............................................................192
Umieszczanie plikw witryny na serwerze .................................................................................193

Synchronizacja plikw witryny lokalnej i odlegej..................................................................194

Zadania do samodzielnego wykonania ....................................................................................195
Testowanie witryny przed umieszczeniem na serwerze ....................................................195

Rozdzia 10. Ramki.......................................................................................................................................................... 197

Korzystanie z predefiniowanych ukadw ramek ....................................................................197
Modyfikacja ramek ..................................................................................................................199
Podzia ramki .....................................................................................................................199
Usuwanie ramek i ukadu ramek........................................................................................200
Zaznaczanie ramek i ukadw ramek .......................................................................................200
Paleta Frames ...........................................................................................................................201
Wywietlanie palety Frames ..............................................................................................201
Zaznaczanie ramek i ukadu ramek z poziomu palety Frames ..........................................201
Zapisywanie ramek i ukadw ramek.......................................................................................202
Waciwoci ramek i ukadu ramek .........................................................................................203
Waciwoci ramki.............................................................................................................203
Waciwoci ukadu ramek ................................................................................................204
Element noframes.....................................................................................................................205
Zadania do samodzielnego wykonania ....................................................................................206
Definiowanie nazwy ukadu ramek ...................................................................................206
To ramki............................................................................................................................206
Przeksztacenie strony bez ramek w stron z ramkami......................................................206

Skorowidz ................................................................................................................................................209

10.
Ramki

Rozdzia

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 wybranego dokumentu.
Nie wszyscy je kochaj. Powiem wicej ramki s w odwrocie. Wynika to z problemw z ich obsug s przegldarki, ktre sobie z ni nie radz. Trudniej jest w nich
take zapanowa nad ukadem elementw graficznych. Wreszcie wszystko to, co umoliwiaj ramki, mona uzyska take innymi metodami.
Maj te jednak swoje zalety. Zawarto ramek nawigacyjnych nie musi by wielokrotnie adowana przy kolejnych poczeniach, a ramki zawartoci mog by przewijane
niezalenie.

Korzystanie z predefiniowanych
ukadw ramek
Predefiniowane ukady ramek programu Dreamweaver MX 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.

198

Dreamweaver MX

Aby zdefiniowa ukad ramek w istniejcym dokumencie:

1. Umie punkt wstawiania w dokumencie.
2. Kliknij zakadk Frames paska narzdzi Insert i wybierz jeden z proponowanych

tu ukadw (patrz rysunek 10.1) lub wybierz predefiniowany ukad ramek w menu
podrzdnym Frames menu Insert.
Rysunek 10.1.
Definiowanie
ukadu ramek
za pomoc paska
Insert wybierz
ukad, ktry ci
odpowiada, kliknij
jego ikon na
pasku Insert i ukad
zostanie utworzony

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 (patrz rysunek 10.2).
2. Wybierz ukad ramek z listy Framesets i kliknij przycisk Create.
W istniejcym dokumencie ramki mona definiowa, korzystajc z menu podrzdnego
Frameset menu Modify.
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.

Rysunek 10.2.
Wybierz w menu File
pozycj New, a w oknie
New Document kliknij
kategori Frameset
na licie Framesets
znajdziesz mnstwo
predefiniowanych
ukadw ramek

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 (patrz rysunek 10.3).
Rysunek 10.3.
Wybierz sposb
podziau ramki

200

Dreamweaver MX

Przecignij krawd boczn ukadu ramek w kierunku rodka okna

(patrz rysunek 10.4).
Rysunek 10.4.
Przecignij
krawd ukadu
ramek do rodka

Przecignij krawd, ktra nie jest krawdzi ukadu ramek, wcisnwszy klawisz
Alt (patrz rysunek 10.5).
Rysunek 10.5.
Przecignij
krawd ramki

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.
Aby usun ukad ramek:

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

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 (patrz rysunek 10.6).

Rysunek 10.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.

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 Others w menu Window, a nastpnie kliknij pozycj Frames
lub zastosuj skrt klawiszowy Shift+F2 (patrz rysunek 10.7).

Zaznaczanie ramek i ukadu ramek

z poziomu palety Frames
Aby zaznaczy ramk z poziomu palety Frames:

W palecie Frames w 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.

202

Dreamweaver MX

Rysunek 10.7.
Otwieranie okna
palety Frames

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.
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.
Aby zapisa wszystkie pliki stowarzyszone z ukadem ramek:

Wybierz w menu File pozycj Save All Frames. 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 (patrz rysunek 10.8). Zdefiniuj
wasne nazwy i kliknij przycisk zapisywania. Wywietlone zostanie kolejne
okienko Save As dla nastpnego pliku ramki.

Rysunek 10.8.
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 ukadu ramek

Zarwno ramki, jak i ich ukad maj swoje waciwoci. Definiowanie tych waciwoci
odbywa si podobnie jak w przypadku 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 (patrz rysunek 10.9).
Rysunek 10.9.
Okno
Properties
dla ramki

Nazwa ramki musi by pojedynczym wyrazem, zaczynajcym si od litery. Znaki podkrelenia

(_) s dozwolone, natomiast mylniki, kropki i spacje nie. Wielko znakw jest w nazwach
ramek istotna. Nie wolno take stosowa wyrae jzyka JavaScript (np. top lub navigator).

204

Dreamweaver MX

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

4. Zdefiniuj w polach Margin Width i Height szerokoci marginesw w pikselach.

Okrelaj one odlego midzy obramowaniem ramki a zawartoci.

5. Jeli chcesz, zmie ustawienia przewijania (lista rozwijana Scroll) i ustawienia

dotyczce wywietlania obramowa (lista rozwijana Border).

6. Moesz take zaznaczy pole wyboru No Resize, aby uniemoliwi uytkownikowi

zmian rozmiaru ramki.

7. 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. Pamitaj o tej zalenoci, definiujc waciwoci.

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.
Aby skonfigurowa waciwoci ukadu ramek:

Zaznacz ukad ramek i zdefiniuj dane waciwoci w oknie Properties (patrz
rysunek 10.10). Okno waciwoci ukadu ramek umoliwia zmian rozmiarw
ramek (pola Value i Units) oraz zdefiniowanie koloru i szerokoci obramowania
oddzielajcego ramki (pola Borders, Borders Width i Border Color).
Rysunek 10.10.
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, jeli 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 przydzielony zostanie 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 wybranie 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.
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, umie punkt wstawiania midzy znacznikami
DQF[ DQF[ umieszczonymi w obrbie elementu noframes i wpisz rcznie kod HTML
(patrz rysunek 10.11).
Rysunek 10.11.
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.

206

Dreamweaver MX

Zadania do samodzielnego wykonania

Definiowanie nazwy ukadu ramek
Zdefiniuj tytu strony zbudowanej z ukadu ramek.
Zaznacz ukad ramek, otwrz okno Page Properties i podaj nazw dokumentu.

To ramki
Zdefiniuj w wybranej ramce inny kolor ta.
Kliknij pole ramki, wybierz w menu Modify pozycj Page Properties, a reszta jest
oczywista.

Przeksztacenie strony bez ramek w stron z ramkami

Korzystajc ze wstpnie zdefiniowanego ukadu dwch ramek (po lewej ramka nawigacyjna, po prawej ramka gwna) sprbujmy nasz witryn przekonstruowa tak, aby
w ramce nawigacyjnej umieci pasek nawigacji (patrz rozdzia 7.), a w ramce centralnej zawarto stron otwieranych klikniciami przyciskw paska.
Oto kolejne etapy tej procedury:
1. Utwrz nowy dokument, korzystajc z predefiniowanego ukadu ramek, lub wybierz

w oknie palety obiektw kategori Frames i kliknij ikon ukadu ramek, w ktrym
ramka gwna znajduje si z prawej strony (pierwsz na pasku). Skonfiguruj ramki.
2. W ramce nawigacyjnej wstaw pasek nawigacji (patrz rysunek 10.12). Definiujc

jego przyciski pamitaj, aby wybra ramk gwn jako miejsce wywietlenia pliku,
do ktrego prowadzi kliknicie przycisku (plik wskazujesz w polu When Clicked
Go to URL). Rozwi wic list obok pola When Clicked Go to URL i wybierz
z niego nazw ramki gwnej (pamitaj o nadawaniu nazw!).
Jeli zdefiniujesz ukad ramek, nazwy ramek pojawiaj si na licie Target w oknie
Properties, co pozwala wskazywa ramk jako miejsce otwarcia pliku.
3. Jeli chcesz wstawi pasek nawigacji do pionowej ramki, wybierz z listy Insert

pozycj Vertically.
4. Przygotuj jak prost stron powitaln i zapisz cao.
5. Przetestuj dziaanie ukadu ramek w przegldarce (patrz rysunek 10.13).

Rysunek 10.12.
Utwrz pasek
nawigacji, ktrego
przyciski otwieraj
kolejne strony
w gwnej ramce

Rysunek 10.13.
Przyciski paska
nawigacji
prowadz do stron
tematycznych, ktre
przygotowae
w poprzednich
rozdziaach