Dreamweaver CS3.

Tworzenie stron
internetowych. Projekty
Autor: Nolan Hester
Tumaczenie: Sawomir Dzieniszewski
ISBN: 978-83-246-1475-2
Tytu oryginau: Creating a Web Site
in Dreamweaver CS3: Visual QuickProject Guide
Format: 170x230, stron: 160
Poznaj techniki tworzenia wspaniaych witryn WWW
Jak umieci tekst na stronie i perfekcyjnie go sformatowa?
W jaki sposb stosowa arkusze stylw?
Jak uatrakcyjnia witryny elementami interaktywnymi?

Dreamweaver ju od dawna dziery palm pierwszestwa wrd dziesitek edytorw

wspomagajcych proces tworzenia witryn WWW. Jego moliwoci, wygod obsugi
i elastyczno doceniaj zarwno twrcy stron internetowych dopiero rozpoczynajcy
sw przygod, jak i ci, przed ktrymi HTML nie ma adnych tajemnic. Tych pierwszych
zainteresuje moliwo wizualnego tworzenia stron i dodawania gotowych elementw
interaktywnych z bogatej biblioteki Dreamweavera, a tych drugich edytor kodu
rdowego, wsppraca z najpopularniejszymi platformami skryptowymi i doskonae
poczenie z innymi narzdziami firmy Adobe.
Ksika Dreamweaver CS3 PL. Tworzenie stron internetowych. Projekty przedstawia
krok po kroku proces budowania witryny WWW przy uyciu tego narzdzia. Czytajc j,
poznasz kolejne etapy tego procesu od przygotowania materiaw rdowych
i zaprojektowania struktury witryny, a po jej publikacj na serwerze WWW.
Dowiesz si, jak wprowadza i formatowa na stronie tekst, grafik, tabele
oraz mechanizmy nawigacyjne. Przeczytasz o stylach CSS, bibliotekach i elementach
interaktywnych. Kade zadanie przedstawione jest za pomoc zrzutw ekranu i krtkich
instrukcji. Dziki temu w krtkim czasie utworzysz swoj pierwsz witryn WWW,
korzystajc z programu Dreamweaver.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Projektowanie struktury witryny

Tworzenie dokumentw HTML
Wstawianie na strony elementw graficznych i multimedialnych
Tabele na stronach WWW
Projektowanie i dodawanie do strony mechanizmw nawigacyjnych
Stosowanie stylw CSS
Korzystanie z elementw interaktywnych oferowanych przez Dreamweavera
Zapisywanie czci witryny w bibliotekach
Testowanie witryny
Publikacja serwisu WWW na serwerze

Zaprojektuj wasn witryn WWW, wykorzystujc najnowoczeniejsze narzdzia

spis treci
wprowadzenie
co waciwie bdziemy tworzy?
jak zbudowana jest ta ksika
witryna www naszej ksiki

7
8
10
12

przydatne narzdzia
kolejny krok

1. wprowadzenie do dreamweavera
poznajemy dreamweavera
tworzenie lokalnej wersji witryny

15
16
21

informacje dodatkowe

2. tworzenie prostej witryny

tworzenie strony gwnej
dodawanie tekstu
wstawianie znacznika obrazka
tworzenie nagwkw

26
29
31
33

tworzenie list
dodawanie stopki
informacje dodatkowe

35
37
38

41
42
43
45
47
49
52

tworzenie miniaturki obrazka

wstawianie obrazka w miejsce
obrazu zastpczego
zawijanie tekstu naokoo obrazka
informacje dodatkowe

4. dodawanie tabel
dodawanie tabeli
zaznaczanie i zmienianie
fragmentw tabeli

23

25

3. dodawanie plikw graficznych

narzdzia do edycji obrazkw
dodawanie obrazkw
dodawanie filmw flash
dodawanie filmw quicktime
przycinanie obrazkw
dostosowywanie jasnoci obrazka

13
14

53
56
58
60

63
64
66

importowanie danych do tabel

sortowanie danych w tabelach
informacje dodatkowe

70
73
75

5
Dreamweaver_book.indb 5

2008-09-16 20:45:59

spis treci
5. tworzenie czy
wewntrzne cza tekstowe
zewntrzne cza tekstowe
dodawanie cza e-mail
dodawanie kotwicy

77
78
80
81
82

cze pod obrazkiem

tworzenie mapy graficznej
kolorowanie czy w witrynie
informacje dodatkowe

84
85
88
93

6. korzystanie z arkuszy stylw

95

korzystanie z panelu style css

96
doczanie i odczanie arkuszy stylw 98
tworzenie stylu dla znacznika
100

tworzenie stylu zalenego od kontekstu 102

tworzenie stylu klasy
107
informacje dodatkowe
109

7. dodawanie elementw interaktywnych

dodawanie menu nawigacyjnego
dodawanie menu przeskoku

112
117

111
tworzenie formularza
informacje dodatkowe

120
126

8. wielokrotne wykorzystywanie elementw dla zaoszczdzenia czasu

127

tworzenie listy ulubionych zasobw

uywanie ulubionych zasobw
tworzenie elementu biblioteki
edytowanie elementu biblioteki

133
134

128
129
130
132

wstawianie elementu
z biblioteki na stron
informacje dodatkowe

9. publikowanie witryny
dodawanie informacji
uatwiajcych wyszukiwanie strony
sprawdzanie i naprawianie czy
moliwoci panelu pliki
definiowanie zdalnego serwisu

skorowidz

6
Dreamweaver_book.indb 6

135
136
138
139
141

czenie si ze zdaln witryn

wysyanie wielu plikw naraz
wysyanie pojedynczej strony
informacje dodatkowe

143
144
146
147

149

spis treci
2008-09-16 20:46:00

dodawanie
tabel

Dawniej powszechn praktyk byo wykorzystywanie tabel do tworzenia ukadu

stron WWW. Na szczcie obecnie moemy korzysta z wygodniejszej i bardziej
wszechstronnej techniki opartej na kaskadowych arkuszach stylw (CSS). Dlatego
te rozdzia ten koncentrowa si bdzie na wykorzystywaniu tabel do prezentacji
danych.

63
Dreamweaver_book.indb 63

2008-09-16 20:46:16

dodawanie tabeli
Tabele s znakomitym narzdziem do prezentowania informacji uporzdkowanych
w formie atwych do przegldania wierszy i kolumn. (Patrz Informacje dodatkowe
na stronie 75).
1 Otwrz stron WWW, do ktrej chcesz doda tabel. (W naszym przykadzie ponownie skorzystamy ze strony index.html, gwnej strony witryny, ktr wykorzystywalimy w przykadach w poprzednim rozdziale). Upewnij si, e widoczny jest panel
Waciwoci i e na pasku narzdzi wybrana jest karta Wsplne.
2 Wcinij klawisz
(Windows)
lub
(Mac), by zacz nowy
akapit. Na karcie Wsplne kliknij
przycisk Tabela.
3 Kiedy pojawi si okno dialogowe
Tabela, w jego polach okrel szeroko tabeli w polu Szeroko tabeli
i zdecyduj, czy tabela powinna posiada nagwek w sekcji Nagwek,
co oznacza, e pola zaznaczone na
ciemno bd zawiera wytuszczony
tekst. W naszym przykadzie wpisalimy w polu Wiersze warto 3, w polu
Kolumny warto 3, w polu Szeroko
tabeli 400 pikseli, w polu Grubo
krawdzi warto 0, a w polu Odstp
od krawdzi komrki warto 3. Kliknij
OK, aby wstawi now tabel.

Sekcja Dostpno pozwala przygotowa i wyrwna tytu tabeli, ktry bdzie odczytywany przez przegldarki dla niewidomych.

64
Dreamweaver_book.indb 64

dodawanie tabel
2008-09-16 20:46:16

4 Gdy pojawi si nowa tabela,

wpisz w polach nagwka odpowiednie etykiety, ktrych tekst
zostanie wytuszczony. Nastpnie
wpisz reszt zawartoci tabeli do
kadej z komrek, wciskajc klawisz Tab, by przenosi si midzy
kolejnymi komrkami. Nie przejmuj
si formatowaniem tekstu, zajmij
si nim dopiero po lekturze rozdziau 6. przekonasz si, e to
nic trudnego.
5 Jeli w trakcie wpisywania danych przekonasz si, e potrzebujesz
dodatkowych komrek, przecz pasek Wstaw na kart Ukad.

6 Kliknij wiersz tabeli lub kolumn,

obok ktrych chcesz doda komrki,
i wybierz odpowiedni z czterech przyciskw. W naszym przykadzie kliknlimy kilkakrotnie przycisk Wstaw
wiersz poniej, poniewa nie bylimy
pewni, ile dokadnie wierszy powinna
mie jeszcze nasza tabela.
7 Dokocz wpisywanie informacji do tabeli. Zachowaj efekty swojej pracy,
wciskajc klawisze
(Windows) lub
(Mac).

dodawanie tabel
Dreamweaver_book.indb 65

65
2008-09-16 20:46:17

zaznaczanie i zmienianie fragmentw tabeli

W trakcie pracy z tabelami trudno bdzie unikn koniecznoci zmieniania ich na
rne sposoby, na przykad usuwania niepotrzebnych wierszy, dodawania kolumn,
czy te w ogle przenoszenia caej tabeli. W tej czci rozdziau omwimy techniki
wykonywania najczciej wprowadzanych zmian. Bardziej zaawansowane opcje
formatowania omwione zostan w rozdziale 6. (Patrz te Informacje dodatkowe na
stronie 75).
1 Jeli strona z tabel zostaa zamknita, otwrz j ponownie i w razie potrzeby dodaj dodatkowy wiersz, uywajc
przycisku Wstaw wiersz poniej. (Nasza
tabela na stronie index.html ma ju dodatkowy, pusty wiersz u dou).

2 Zazwyczaj wiersz wybiera si w ten sposb, e przesuwa si kursor do lewej krawdzi tabeli, a przyjmie on posta duej, pogrubionej strzaki. Niemniej czsto, tak
jak w naszym przykadzie, tabela przylega do lewej krawdzi kolumny tekstu na stronie, co czyni wspomnian metod odrobin kopotliw. atwiej jest w tym przypadku skorzysta z pola wyboru znacznika na pasku stanu. Kliknij dowoln komrk w
pustym wierszu, a znacznik tej komrki <td> na pasku stanu zostanie podwietlony.
3 Zaraz na prawo od znacznika komrki znajduje si znacznik wiersza <tr>.
kliknij go, a zaznaczony zostanie cay
wiersz.
4 Wcinij klawisz
(Windows) lub
(Mac), a cay zaznaczony wiersz zostanie usunity.

66
Dreamweaver_book.indb 66

dodawanie tabel
2008-09-16 20:46:17

5 Aby doda now kolumn, przesu

kursor ku grze kolumny, obok ktrej
chcesz wstawi (po prawej lub lewej
stronie) now kolumn. Kursor przyjmie
posta duej, pogrubionej strzaki.

6 Na karcie Ukad paska Wstaw

kliknij jeden z dwch przyciskw
sucych do wstawiania kolumn
(na prawo lub na lewo od zaznaczonej kolumny). Do tabeli wstawiona
zostanie nowa, pusta kolumna.

7 Uywajc rozwijanego menu ustawiania powikszenia na pasku stanu,

powiksz stron, aby atwiej byo wstawia informacje do nowej kolumny.

dodawanie tabel
Dreamweaver_book.indb 67

67
2008-09-16 20:46:17

zmienianie fragmentw tabeli cd.

8 Jeli chcesz poczy kilka komrek w jedn, przecignij kursor, wciskajc klawisz
myszy, nad wybranymi komrkami (w naszym przypadku komrk z liczb 3 i pust
komrk pod ni). Kliknij prawym klawiszem myszy i w menu kontekstowym wybierz
polecenia Tabela/Scal komrki, a komrki zostan scalone ze sob.

9 Po scaleniu komrek konieczne moe by poprawienie wyrwnania

ich zawartoci w pionie (w naszym przykadzie liczba 3 jest wyrwnana
do rodka, podczas gdy my chcielibymy wyrwna j do gry komrki).
Zaznacz odpowiednie komrki, w panelu Waciwoci kliknij rozwijane
menu Pion i wybierz nowy sposb wyrwnania. Natychmiast zostanie on
zastosowany na zawartoci komrki. Powtrz te kroki dla kadej z komrek powstaych w wyniku scalenia.
10 Pamitaj, aby dla kadej nowej kolumny wpisa odpowiedni etykiet-nagwek. Jej tekst zostanie automatycznie pogrubiony.

68
Dreamweaver_book.indb 68

dodawanie tabel
2008-09-16 20:46:17

11 Jeli chcesz poprawi wyrwnanie

zawartoci komrki
w poziomie, zaznacz
odpowiednie komrki,
kliknij rozwijane menu
Poz. w panelu Waci
woci i wybierz nowy
sposb wyrwnania.
Zostanie natychmiast
zastosowany do zawartoci komrki.

12 Aby doda do tabeli wiersz, zaznacz wiersz, nad lub pod ktrym
chcesz doda nowy wiersz, tak jak to
zostao opisane w krokach 2. i 3.
Na karcie Ukad paska narzdzi
Wstaw kliknij jeden z dwch przyciskw wstawiania wierszy (powyej
lub poniej), a nowy wiersz zostanie
wstawiony do tabeli.

13 Zachowaj efekty swojej pracy, wciskajc klawisze

(Windows) lub
(Mac), a nastpnie wcinij przycisk podgldu (w ksztacie planety) na pasku Dokument, by obejrze
stron w rnych przegldarkach.

dodawanie tabel
Dreamweaver_book.indb 69

69
2008-09-16 20:46:18

importowanie danych do tabel

Nic nie sprawdza si lepiej ni tabela, gdy chcemy prezentowa dane arkusza kalkulacyjnego lub dane oddzielone znakami tabulacji zapisane w pliku przygotowanym w edytorze tekstu. Co waniejsze w przypadku danych separowanych znakami
tabulacji, takich jak arkusze kalkulacyjne Excela, zaimportowanie takich danych moe
nam zaoszczdzi godzin pracy przy ich wpisywaniu. (Patrz Informacje dodatkowe
na stronie 75).
1 Otwrz stron, na ktrej chcesz umieci dane z tabeli przygotowanej w innym programie. (W naszym przykadzie skopiowalimy plik index.html wykorzystywany we wczeniejszych
przykadach i usunlimy cay tekst w gwnym obszarze strony.
Nastpnie nadalimy mu now nazw tabela.html).

2 Kliknij stron, na ktrej

chcesz umieci dane.

3 Na karcie Dane paska Wstaw kliknij pierwszy przycisk

po lewej, by zaimportowa dane do tabeli.

70
Dreamweaver_book.indb 70

dodawanie tabel
2008-09-16 20:46:18

4 Kliknij przycisk Przegldaj, by odnale katalog, w ktrym przechowujesz odpowiedni arkusz kalkulacyjny lub dokument przygotowany w edytorze tekstu.
5 Jako Ogranicznik wybierz
Tabulator lub inny znak, ktry
wykorzystywany jest do rozdzielania danych w importowanym
dokumencie. W sekcji Szeroko
tabeli wybierz opcj Ustaw na
i w ssiednim polu tekstowym
wpisz odpowiedni warto
szerokoci (w naszym przykadzie 90 procent szerokoci gwnej sekcji strony). Pomi opcje Odstp midzy krawdziami komrki i Odstp
midzy komrkami, w opcji Formatuj grny rzd wybierz Bez formato
wania i kliknij OK.
6 Dane pojawi si na stronie WWW
ju uporzdkowane w odpowiedniej
tabeli. Niestety, tabela zapewne bdzie
miaa kilka bdw. Tabel t mona
jednak modyfikowa tak jak kad inn
tabel, jak to zostao opisane wczeniej.
Popraw wic j w razie potrzeby.

dodawanie tabel
Dreamweaver_book.indb 71

71
2008-09-16 20:46:18

importowanie danych do tabel cd.

7 Nie formatuj specjalnie importowanej
tabeli, gdy formatowanie najlepiej jest
wykonywa za pomoc kaskadowych
arkuszy stylw (CSS), tak jak to opiszemy
w rozdziale 6. Niemniej w naszym przykadzie skorzystamy z panelu Waciwoci,
by zastosowa na nagwku tabeli format
Nagwek 4. W rozdziale 6. wzbogacimy
format Nagwek 4, uywajc kaskadowych arkuszy stylw, co automatycznie
zmieni formatowanie tabeli na stronie.

8 Zachowaj stron, wciskajc klawisze

(Windows) lub
(Mac), i kliknij przycisk Podgld na pasku narzdzi Dokument), by obejrze podgld strony w rnych przegldarkach.

72
Dreamweaver_book.indb 72

dodawanie tabel
2008-09-16 20:46:18

sortowanie danych w tabelach

Dreamweaver potrafi automatycznie sortowa dane w tabelach wedug kolumn
to uyteczna funkcja, ktra pozwala zmienia sposb organizacji danych w tabeli
nawet dugo po ich zaimportowaniu. Jest tu tylko jeden haczyk: tabeli nie da si posortowa, jeli zawiera cho jedn komrk rozcigajc si na par kolumn, tak jak
na przykad komrki powstae z zespolenia ssiadujcych komrek. Niemniej mona
omin to ograniczenie za pomoc prostej operacji wycinania i wklejania pod warunkiem, e nie mamy do czynienia z kilkoma zespolonymi komrkami, rozrzuconymi po
rnych miejscach tabeli. (Patrz Informacje dodatkowe na stronie 76).
1 Zaznacz cz tabeli niezawierajc
adnych zespolonych komrek. (W naszym przykadzie bd to wszystkie
komrki pod tekstem Zastrzegamy).
Wytnij j ze strony, wciskajc klawisze
(Windows) lub
(Mac).

2 Gdy ju zaznaczony fragment tabeli

zostanie wycity, kliknij gdzie poniej
na stronie i wklej tam wycit cz
tabeli, wciskajc
(Windows) lub
(Mac).
Wklejone dane pojawi si w osobnej
tabeli, ktr bdzie mona bez problemu posortowa.
Skorzystaj z moliwoci wybierania
znacznikw na pasku stanu, by wybra
znacznik <table>. Nastpnie wybierz
w menu polecenia Polecenia/Sortuj tabe
l, by otworzy okno dialogowe Sortuj
tabel.

dodawanie tabel
Dreamweaver_book.indb 73

73
2008-09-16 20:46:19

sortowanie danych w tabelach cd.

3 Skorzystaj z rozwijanego menu Sortuj wg, by wybra, wedug ktrej kolumny
przeprowadzane bdzie sortowanie. Uyj rozwijanych menu z grupy Porzdek, by wybra typ sortowania Alfabetycznie lub Liczbowo oraz okreli porzdek sortowania:
Rosnco lub Malejco. W naszym przykadzie bdziemy sortowa wedug kolumny 3.
(Dni). Skorzystamy te z opcji Nastpnie wg, by w drugiej kolejnoci sortowa wedug
kolumny 1. (Kraj).

4 Dreamweaver posortuje tabele,

opierajc si na dokonanych przez
Ciebie wyborach. W razie potrzeby
zmie ustawienia w oknie dialogowym Sortuj tabel i ponownie kliknij
Zastosuj. Gdy ju wynik Ci zadowoli,
kliknij OK, by zamkn okno dialogowe.

74
Dreamweaver_book.indb 74

dodawanie tabel
2008-09-16 20:46:19

informacje dodatkowe
dodawanie tabeli str. 64
Gdy po raz pierwszy korzystamy
z okna dialogowego Tabela, domylne ustawienia tworz tabel o trzech
kolumnach i trzech wierszach. Pniej
wywietla bdzie ono ustawienia
ostatnio utworzonej tabeli.
Ustawienie opcji Grubo krawdzi
na 1 lub 2 piksele (lub 0, tak jak w naszym przykadzie) poprawi estetyk
tabeli.
Sekcja Dostpno w oknie dialogowym
Tabela pozwala okreli dla tabeli Pod
pis, ktry bdzie odczytywany przez
specjalne przegldarki internetowe
przeznaczone dla ludzi niewidomych.
W razie potrzeby mona doda bardziej
szczegowe informacje w polu Podsu
mowanie.
Komrki tabeli mog przechowywa
nie tylko tekst, ale rwnie obrazki. Procedura wstawiania obrazka do komrki
tabeli przypomina procedur wstawiania obrazkw na stron WWW, opisan
na stronie 43.

dodawanie tabel
Dreamweaver_book.indb 75

zaznaczanie i zmienianie
fragmentw tabeli str. 66
Jeli pojawi si jaki problem z zazna
czaniem tabeli, mona po prostu klikn znacznik <table> u dou, na pasku
stanu.
Aby podzieli komrk tabeli na dwie,
kliknij prawym klawiszem myszy
wewntrz komrki i w menu kontekstowym wybierz opcje Tabela/Podziel
komrk.

importowanie danych do tabel

str. 70

Zanim przystpimy do importowania,

naley oczywicie w arkuszu kalkulacyjnym lub edytorze tekstu zapisa dane
tabeli w formie pliku separowanego
znakami tabulacji.
Zamiast uywa przycisku Importuj
dane tabelaryczne na karcie Dane,
mona rwnie skorzysta z opcji
Wstaw/Obiekty tabeli/Importuj dane
tabelaryczne.

75
2008-09-16 20:46:19

informacje dodatkowe cd.

sortowanie danych w tabelach
str. 73

Domylnie pola w sekcji Opcje w oknie

Sortuj tabel nie s zaznaczone, poniewa rzadko zaley nam na sortowaniu
rwnie nagwka i stopki tabeli.

76
Dreamweaver_book.indb 76

dodawanie tabel
2008-09-16 20:46:19