Professional Documents
Culture Documents
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Macromedia
Dreamweaver MX 2004.
Oficjalny podrcznik
Autor: Khristine Annwn Page
Tumaczenie: Mikoaj Szczepaniak
ISBN: 83-7361-536-9
Tytu oryginau: Macromedia Dreamweaver
MX 2004: Training from the Source
Format: B5, stron: 600
Macromedia Dreamweaver MX 2004 to kolejne wcielenie jednego z najpopularniejszych
edytorw stron WWW. Zarwno pocztkujcy, jak i najbardziej zaawansowani
projektanci witryn WWW doceniaj jego moliwoci. Dreamweavera mona uywa
w trakcie caego procesu tworzenia i utrzymania witryny WWW od zdefiniowania jej
struktury, poprzez tworzenie stron w trybie wizualnym i w trybie edycji kodu, a do
publikowania i aktualizacji witryny. Moliwo stosowania gotowych skryptw JavaScript
i komponentw umoliwiajcych tworzenie dynamicznych stron WWW, wsppraca
z innymi produktami firmy Macromedia oraz rozbudowane narzdzia edycyjne
Dreamweavera usprawniaj i przyspieszaj proces tworzenia witryny.
Macromedia Dreamweaver MX 2004. Oficjalny podrcznik to polecany przez firm
Macromedia zbir wicze, dziki ktrym poznasz moliwoci tej aplikacji. wiczenia
przygotowano przy wsppracy z pracownikami dziau obsugi technicznej firmy
Macromedia, co gwarantuje ich poprawno merytoryczn. Czytajc kolejne rozdziay
podrcznika, nauczysz si korzystania z narzdzi Dreamweavera, tworzenia
pojedynczych stron WWW i caych witryn, dodawania do stron elementw
interaktywnych i multimedialnych oraz umieszczania witryny na serwerze za pomoc
wbudowanego w Dreamweaver klienta FTP.
Definiowanie witryny lokalnej i zdalnej
Wprowadzanie i formatowanie tekstu
Umieszczanie na stronie elementw graficznych
Tworzenie mechanizmw nawigacyjnych
Wstawianie tabel do dokumentw
Korzystanie ze stylw, bibliotek i szablonw
Budowa stron opartych na ramkach
Tworzenie formularzy i elementw interaktywnych
Publikowanie i aktualizowanie witryny
Testowanie witryny
Gotowe skrypty behawiory
Edycja kodu rdowego stron WWW
Tworzenie animacji opartych na DHTML-u
Ksiki z serii Oficjalny podrcznik s wykorzystywane na kursach i szkoleniach
prowadzonych w autoryzowanych centrach szkoleniowych firmy Macromedia. Skorzystaj
z autoryzowanego rda wiedzy i poznaj moliwoci programu docenianego przez wielu
webmasterw.
Spis treci
Wprowadzenie .................................................................................................................................................................................. 13
Lekcja 1. Podstawy programu Dreamweaver MX 2004............................................................................................... 19
Poznawanie rodowiska pracy ..................................................................................................................................20
Strona pocztkowa..................................................................................................................................................... 21
Przygotowania do rozpoczcia pracy nad wasn witryn....................................................................................22
Definiowanie witryny lokalnej.................................................................................................................................24
Tworzenie i zapisywanie nowej strony .................................................................................................................... 31
Przegld dostpnych narzdzi .................................................................................................................................. 35
Praca z panelami......................................................................................................................................................... 38
Nadawanie tytuu stronie..........................................................................................................................................40
Okrelanie koloru ta................................................................................................................................................. 41
Okrelanie przegldarek internetowych dla podgldu ......................................................................................... 43
SPIS TRECI
10
SPIS TRECI
11
Dodawanie waciwej
treci do strony WWW
Podczas tej lekcji nauczysz si importowa tekst z plikw w rnych formatach oraz wykorzystywa
materiay pochodzce z rnych systemw operacyjnych. Dowiesz si take, jak naley ustawia
domylne opcje dokumentu, jak formatowa tekst w wielu rnych typach list, oraz jak mona
wykorzystywa dostpne kroje i rozmiary czcionek celem dostosowania tekstu do edytowanej
strony. Waciwe formatowanie tekstu jest wanym elementem tworzenia stron WWW, ktre bd
czytelne i estetyczne. W wielu przypadkach tekst jest najwaniejsz czci strony; powiniene wic
powici troch czasu na odpowiednie zorganizowanie i sformatowanie prezentowanego materiau,
dziki czemu uytkownicy bd mogli szybko i wygodnie zapozna si z zawart w nim treci.
Podczas niniejszej lekcji
dowiesz si, jak dodawa
tre do swoich stron, oraz
jak naley formatowa tekst
podczas tworzenia strony
wprowadzajcej dla witryny
internetowej Lights of the
Coast. Nauczysz si take
testowa swoje strony
i stosowa tekst Flasha
Czego si nauczysz?
Po przerobieniu materiau tej lekcji bdziesz potrafi:
umieszcza tekst na stronie,
tworzy listy,
rozmieszcza i formatowa tekst,
ustawia domylne opcje dokumentu dla czcionki i koloru,
dostosowywa opcje dotyczce kroju, rozmiaru i koloru czcionki,
wstawia znaki specjalne i inne elementy,
tworzy i modyfikowa tekst Flasha.
Czas trwania
Lekcja powinna w przyblieniu zaj jedn godzin.
Materiay do lekcji
Pliki startowe:
Lekcja_02_Tre/introduction.htm
Lekcja_02_Tre/Text/introduction.txt
Lekcja_02_Tre/Text/introduction_mac.txt
Gotowy projekt:
Lekcja_02_Tre/Completed/introduction.htm
48
Do innych ustawie formatowania stosowanych wycznie na poziomie caych blokw tekstu nale
opcje akapitw, list, linii poziomych oraz wyrwnywania. Wicej informacji na temat stosowania
tych elementw znajdziesz w dalszej czci lekcji.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
49
W wielu dokumentach pierwszy nagwek strony jest identyczny jak jej tytu. W przypadku wieloczciowych dokumentw tekst pierwszego nagwka powinien zawiera szersze informacje, np. tytu
rozdziau. Tytu nadawany caej stronie powinien identyfikowa dany dokument w szerszym kontekcie (powinien zawiera np. jednoczenie tytu caej ksiki i tytu biecego rozdziau).
3. Nacinij klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh).
Stworzylimy wanie pod nagwkiem Introduction to Lights of the Coast: Exploring Lighthouses
kolejny wiersz bdcy czci nowego bloku tekstu. Domylnie nowy blok tekstu jest
formatowany jako akapit. Kady nowy akapit jest autonomicznym blokiem tekstu.
Format akapitu jest w oglnoci wykorzystywany dla podstawowego tekstu oddzielonego
od pozostaych blokw tekstu za pomoc pewnej liczby odstpw takim odstpem
oddzielajcym nowy blok tekstu od poprzedniego moe by np. pojedynczy pusty wiersz.
Jedynym sposobem modyfikowania odstpw jest zastosowanie arkuszy stylw CSS
do kontrolowania formatowania.
Aby zastosowa formatowanie akapitu dla bloku tekstu, naley z listy rozwijanej Format dostpnej
w panelu Property inspector wybra opcj Paragraph (akapit) lub uy skrtu Ctrl+Shift+P (w systemach Windows) albo Command+Shift+P (w systemach Macintosh).
4. Zapisz plik.
50
Jeli zastosujesz dwa podziay wiersza, moesz upozorowa nowy akapit; poniewa jednak faktycznie nie stworzono nowego akapitu, moesz mie trudnoci w zastosowaniu rnych stylw formatowania dla fragmentw tekstu, ktre oddzielono co prawda dwoma podziaami wiersza, ale
wci nale do tego samego akapitu.
Moesz take wstawi we wskazanym miejscu podzia wiersza, klikajc opcje Insert/HTML/
Special Characters/Line Break (wstaw/HTML/znaki specjalne/podzia wiersza) lub wybierajc
kategori Text w pasku Insert, klikajc menu Characters (znaki) i wybierajc pozycj Line Break.
Ikona znaku podziau wiersza jest oznaczona literami BR, poniewa znacznikiem jzyka HTML
dla podziau wiersza jest <br>.
51
Macintosh), aby wywietli okno dialogowe Preferences, i na licie Category kliknij pozycj Code
Format (format kodu). Z listy rozwijanej Line Break Type wybierz opcj CR LF (Windows).
Z listy rozwijanej Line Break Type moemy wybra opcj CR LF (Windows), CR (Macintosh)
lub LF (Unix).
W przypadku uytkownikw systemw Windows domylnie ustawiona jest opcja CR LF
(Windows).
W przypadku uytkownikw systemw Macintosh domylnie ustawiona jest opcja CR
(Macintosh).
Jeli korzystasz z wersji Dreamweavera dla systemw Macintosh, zmie to ustawienie na CR LF
(Windows). Jeli pracujesz w systemie Windows, upewnij si tylko, e wybrana jest domylna
opcja CR LF (Windows).
2. Kliknij przycisk OK.
52
Importowanie tekstu
Jeli mamy ju prawidowo ustawion opcj podziau wiersza, moemy przystpi do importowania
tekstu.
W tym wiczeniu wykorzystamy dokument stworzony na komputerze z systemem Windows. W poprzednim wiczeniu ustawilimy opcj Line Break Type w sposb umoliwiajcy prawidowe importowanie plikw stworzonych w tym systemie. W folderze Pliki pocztkowe znajduje si take
dodatkowy dokument, intro_mac.txt (stworzony na komputerze Macintosh), dziki czemu moesz
eksperymentowa z importowaniem plikw tekstowych pochodzcych z innych platform. Jeli zdecydujesz
si na eksperymenty z tym plikiem, pamitaj, e musisz odpowiednio zmieni ustawienie Line Break
Type przed otwarciem lub zaimportowaniem tego pliku musisz zmieni wybran wczeniej opcj
CR LF (Windows) na CR (Macintosh).
1. Otwrz w programie Dreamweaver plik Lekcja_02_Tre/Text/introduction.txt, po czym zaznacz
i skopiuj cay tekst zawarty w tym pliku. W pliku introduction.htm umie punkt wstawiania
stworzonym wczeniej wierszu nowego akapitu (pod nagwkiem Introduction to Lights of the Coast:
Exploring Lighthouses) i wklej tekst skopiowany przed chwil z pliku Lekcja_02_Tre/Text/introduction.txt.
Do kopiowania i wklejania tekstu moesz uywa menu Edit, opcji Edit/Copy (edycja/kopiuj)
i (lub) Edit/Paste (edycja/wklej), albo zastosowa powszechnie znane skrty klawiaturowe:
Ctrl+C i Ctrl+V (w systemach Windows) lub Command+C i Command+V (w systemach Macintosh)
odpowiednio do kopiowania i wklejania.
Uytkownicy systemw Windows: Domylnie okno dokumentu zajmuje ca dostpn
przestrze okno zawiera po jednej zakadce dla kadego z otwartych dokumentw.
Moesz przecza si pomidzy dokumentami, klikajc odpowiednie zakadki. Kliknicie
zakadki prawym przyciskiem myszy powoduje wywietlenie menu kontekstowego, w ktrym
mamy do dyspozycji midzy innymi opcj zamknicia danego pliku. Aby wyczy interfejs
oparty na zakadkach i wywietli interfejs wykorzystujcy tzw. pywajce okna, kliknij przycisk
maksymalizacji w prawym grnym rogu okna dokumentu (nie przycisk maksymalizacji
caego programu). Aby powrci do interfejsu z zakadkami, ponownie kliknij przycisk
maksymalizacji okna dokumentu. Zakadki nie s wykorzystywane w wersji programu
Dreamweaver dziaajcej w systemach Macintosh.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
53
Exploring i Lighthouses.
Jeli naciniesz spacj wicej ni raz, odstp pomidzy sowami nie zmieni si nadal
bd oddzielone przez pojedynczy znak spacji. Spacje wielokrotne nie s rozpoznawane
w jzyku HTML.
2. Nacinij dwukrotnie kombinacj klawiszy Ctrl+Shift+Spacja (w systemach Windows)
Coast. W panelu Property inspector kliknij przycisk Align Center (patrz rysunek na nastpnej stronie).
Nagwek jest teraz wyrodkowany. Poniewa pomidzy czci nagwka Introduction to Lights
of the Coast a Exploring Lighthouses wstawilimy podzia wiersza (nie znak nowego akapitu),
wyrodkowane zostay oba wiersze.
54
Poniewa tekst zosta rozdzielony za pomoc znaku podziau wiersza, oba wiersze pozostaj
w tym samym bloku akapitu. Kade formatowanie akapitu (w tym nagwek i wyrwnywanie)
zastosowane dla ktregokolwiek z tych wierszy ma wpyw na wszystkie elementy bdce czci
tego akapitu.
2. Zaznacz pierwszy akapit dokumentu introduction.htm i w panelu Property inspector kliknij przycisk
Text Indent.
Do wstawiania wci w zaznaczonym tekcie moesz take uywa opcji Text/Indent (tekst/wcicie).
Akapit zosta teraz wcity. Wcicia s stosowane dla caych akapitw bez arkuszy stylw
CSS (patrz lekcja 6.) nie bdziemy mogli stosowa wci np. tylko dla pierwszego wiersza
akapitu. Wcicia mog by wykorzystywane do wyodrbnienia wybranych fragmentw
tekstu spord tekstu podstawowego. Kiedy naciskamy przycisk Tekst Indent (zwiksz wcicie),
tekst jest wcinany zarwno od strony lewego, jak i prawego marginesu strony. Nie moemy
ustawia gbokoci wcicia, poniewa obsuga tego elementu zaley od przegldarki
internetowej i moe si rni w poszczeglnych aplikacjach tego typu.
Wcicie dla pojedynczego akapitu mona stosowa wicej ni raz. Marginesy po lewej i prawej
stronie akapitu s poszerzane po kadorazowym zwikszeniu wcicia dla wybranego bloku
tekstu. Wiksza liczba wci dla akapitu moe mie na celu jego odrnienie od wczeniejszego
akapitu, dla ktrego zastosowano np. pojedyncze wcicie.
W panelu Property inspector kliknij przycisk Tekst Outdent (zmniejsz wcicie) lub wybierz opcje
Text/Outdent, aby usun wcicie.
Jeli sprbujesz wprowadzi wcicie dla jednego akapitu i okae si, e zostao ono zastosowane take
dla ssiadujcych akapitw, sprawd, czy pomidzy akapitami faktycznie znajduje si znak nowego
akapitu czy tylko podwjny podzia wiersza. Aby upewni si, e akapity s oddzielone znakiem nowego
akapitu, umie wskanik na pocztku akapitu, dla ktrego chcesz zastosowa wcicie, i naciskaj klawisz Backspace (w systemach Windows) lub Delete (w systemach Macintosh) tak dugo, a osigniesz
koniec poprzedniego akapitu, po czym nacinij klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh), aby stworzy nowy akapit.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
55
Tworzenie list
W programie Dreamweaver moemy tworzy trzy podstawowe rodzaje list: uporzdkowan, nieuporzdkowan i list definicji. Lista uporzdkowana skada si z elementw uporzdkowanych
numerycznie lub alfabetycznie. Mamy do dyspozycji opcj stosowania numeracji arabskiej lub
rzymskiej oraz maych i wielkich liter. Listy uporzdkowane s doskonaym rozwizaniem w przypadku, gdy musimy jasno zorganizowa i oznaczy odpowiednimi etykietami kolejne elementy
np. kiedy przedstawiamy list kolejnych krokw do wykonania. Lista nieuporzdkowana jest czsto
nazywana list punktowan, poniewa przed kadym elementem listy znajduj si tzw. punktory.
Domylne punktory uywane w programie Dreamweaver mona zmieni na kka, okrgi lub wypenione kwadraty. Listy nieuporzdkowane nadaj si idealnie do prezentowania informacji, w ktrych
kady z wymienianych elementw musi by odpowiednio wyrniony, ale jednoczenie numerowanie
lub oznaczanie literami jest zbdne (np. w przypadku listy produktw dla przepisu kulinarnego). Lista
definicji skada si z poj i ich definicji; listami tego typu zajmiemy si w nastpnym wiczeniu.
W przypadku wszystkich wymienionych typw list, aby moliwe byo poprawne formatowanie,
kady element musi tworzy osobny akapit.
W poniszym wiczeniu stworzymy dwie listy: jedn uporzdkowan i jedn nieuporzdkowan.
Nastpnie wykorzystamy okno dialogowe List Properties (waciwoci listy) do zmodyfikowania zastosowanych stylw (listom definicji powicimy osobne wiczenie w dalszej czci tej lekcji).
1. W dokumencie introduction.htm zaznacz test rozpoczynajcy si od sw Guiding ships into port
i koczcy si zdaniem Serving as identifying markers of particular region. Kliknij teraz przycisk
Ordered List (lista uporzdkowana) dostpny w panelu Property inspector.
Zaznaczony tekst zosta sformatowany jako lista uporzdkowana (dodatkowo zastosowano
dla akapitu automatyczne wcicie).
Lista uporzdkowana znajduje si na licie rozwijanej List type (typ listy) dostpnej w oknie
dialogowym List Properties oznaczona etykiet Numbered List.
3. Z listy rozwijanej Style (styl) wybierz pozycj Alphabet Small (a,b,c) (mae litery alfabetu).
that theyve played oraz The technological advances that brought the lighthouses into its golden age. W panelu
Property inspector kliknij przycisk Unordered List.
Do sformatowania zaznaczonego fragmentu tekstu jako listy uporzdkowanej moesz uy opcji
Text/List/Unordered List.
Dla zaznaczonego tekstu zastosowano wcicie i przeksztacono go w list wypunktowan.
Moesz zmieni domylny symbol punktora listy nieuporzdkowanej, modyfikujc
waciwoci tej listy (podobnie jak w przypadku listy uporzdkowanej). Wygld poszczeglnych
symboli punktorw moe by inny w rnych przegldarkach, rnice w wywietlaniu list
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
57
dowolnych typw mog dotyczy take stosowanych odstpw. Liczba dostpnych w jzyku
HTML opcji dotyczcych wygldu liczb i liter, punktorw oraz odstpw jest bardzo
ograniczona wiksz kontrol nad wygldem listy moemy uzyska, stosujc arkusze
stylw CSS (patrz lekcja 6.).
W menu List type okna dialogowego List Properties (wykorzystywanego w poprzednim kroku)
lista nieuporzdkowana jest oznaczona etykiet Bulleted List (lista wypunktowana).
Aby usun formatowanie listy lub zmieni jej typ, zaznacz ca list i kliknij odpowiedni przycisk
w panelu Property inspector. Jeli chcesz usun formatowanie listy uporzdkowanej, kliknij przycisk Ordered List; jeli chcesz usun formatowanie listy wypunktowanej, kliknij przycisk Numbered
List. Jeli natomiast chcesz zmieni typ listy, od razu kliknij przycisk odpowiadajcy docelowemu
formatowaniu.
5. Umie punkt wstawiania na kocu ostatniego wiersza listy wypunktowanej i nacinij
klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh). Wpisz tekst:
The influence lighthouses have had on human culture.
Kiedy chcemy doda tekst do listy, musimy uy standardowego znaku nowego akapitu
celem stworzenia nowego bloku tekstu dla dodawanego elementu. Kady element listy
musi by osobnym akapitem.
Dwukrotne nacinicie klawisza Enter (w systemach Windows) lub Return (w systemach Macintosh) powoduje opuszczenie trybu listy i powrt do domylnego formatowania akapitu. Jeli musimy
stworzy jeden lub wicej nowych wierszy nalecych do tego samego elementu listy, powinnimy
wykorzysta znak (lub znaki) podziau wiersza.
6. Umie punkt wstawiania w dowolnym wierszu listy wypunktowanej i wybierz opcje
Text/List/Properties.
Lista rozwijana List type w oknie dialogowym List Properties zawiera dwa dodatkowe typy list:
Menu i Directory. S to starsze odmiany list punktowanych (typu Bulleted list) obie maj podobne przeznaczenie jak listy nieuporzdkowane i s zwykle wywietlane w przegldarkach internetowych dokadnie w ten sam sposb. W oglnoci zaleca si stosowanie dla wszystkich list nieuporzdkowanych opcji Bulleted list.
Upewnij si, e korzystasz z listy rozwijanej Style, nie z listy New style. Gdyby uy listy rozwijanej
New style w obszarze List item, wprowadzona zmiana dotyczyaby wycznie wiersza listy, w ktrym znajdowa si punkt wstawiania w momencie wywietlenia okna dialogowego List Properties.
Wszystkie elementy listy s teraz wyrnione symbolem wypenionego kwadratu.
Kolor liczb i punktorw wykorzystywanych odpowiednio w listach uporzdkowanych i nieuporzdkowanych jest taki sam jak domylny kolor tekstu w dokumencie. Domylne ustawienia dokumentu
bdziemy modyfikowa w dalszej czci tej lekcji.
sowami associated with the operation and maintenance of lighthouses. Wybierz opcje Text/List/Definition List.
Terminy znajduj si teraz przy lewym marginesie, a odpowiadajce im definicje
z odpowiednimi wciciami znajduj si w wierszach nastpujcych po tych terminach.
Nasza lista definicji powinna teraz wyglda podobnie do tej z poniszego przykadu.
Teraz, kiedy woye troch pracy w tworzenie i formatowanie wszystkich opisywanych list,
warto zapisa zmodyfikowany dokument.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
59
Zagniedanie list
W programie Dreamweaver moemy take tworzy tzw. listy zagniedone (ang. nested list), czyli listy
znajdujce si wewntrz innych list. Listy zagniedone mog by formatowane w ten sam sposb
co listy nadrzdne, ale mog take by listami zupenie innego typu. Przykadowo, moemy wewntrz listy definicji stworzy list uporzdkowan. Domylnie punktorami zagniedonych list
nieuporzdkowanych s koa, okrgi lub wypenione kwadraty (w wymienionej kolejnoci). W programie Dreamweaver punktory te s nazywane odpowiednio bullet, circle i square. Te same elementy
w terminologii jzyka HTML nosz odpowiednio nazwy disc, circle i square.
Niektre przegldarki wywietlaj puste punktory kwadratowe. Dotyczy to np. przegldarki
Netscape 4.7 dziaajcej w systemach Macintosh, ale np. przegldarka Internet Explorer 5.0 wywietla wypenione kwadraty. W wikszoci aplikacji dziaajcych w systemach Windows kwadratowe punktory s wypenione.
1. W dokumencie introduction.htm dodaj nowy element do wypunktowanej listy, umieszczajc punkt
wstawiania na kocu wiersza The technological advances that brought the lighthouses into its golden age
i naciskajc klawisz Enter (w systemach Windows) lub Return (w systemach Macintosh).
W ten sposb dodajemy kolejny element za tym wierszem, ale na tym samym poziomie listy.
2. Aby zagniedzi tworzony wanie element listy, w panelu Property inspector kliknij przycisk
Text Indent, a nastpnie wpisz tekst: Incandescent oil vapor lamp.
60
Aby zmieni typ akapitu z elementu nalecego do listy zagniedonej na element listy standardowej, umie punkt wstawiania wewntrz zagniedonego elementu (nie zaznaczajc go). Kliknij
przycisk Text Outdent dostpny w panelu Property inspector.
3. Dodaj do zagniedonej listy nastpujce elementy: Argand lamp, Fresnel lens, Screwpile
construction oraz Electricity.
Podobnie jak w przypadku przedstawianych wczeniej w tej lekcji wci stosowanych w tekcie,
nie moemy kontrolowa ani modyfikowa odstpw dla wci, list czy samych list
zagniedonych.
Jeli pomidzy ostatnim elementem zagniedonej listy a nastpujcym po nim elementem listy gwnej
pojawi si dodatkowy wiersz przerwy, moesz umieci w nim punkt wstawiania i nacisn klawisz
Backspace (w systemach Windows) lub Delete (w systemach Macintosh). Moe to spowodowa
usunicie ostatniego znaku w ostatnim wierszu listy zagniedonej jeli tak si stanie, po prostu
wpisz ten znak ponownie.
Formatowanie znakw
Dla tekstu tworzonego w programie Dreamweaver moemy stosowa rozmaite opcje formatowania,
a dziki ktrym ka nacisk na pewne elementy, sowa lub zdania. Do dostpnych opcji formatowania nale pogrubienie, kursywa i podkrelenie.
1. W dokumencie introduction.htm zaznacz sowa Light Source na licie definicji.
Aby zastosowa dla zaznaczonego tekstu pogrubienie, moemy take wybra opcje
Text/Style/Bold (tekst/styl/pogrubienie) lub klikn przycisk Bold dostpny w kategorii
Text paska Insert. W programie Dreamweaver dostpny jest take klawisz skrtu dla operacji
pogrubienia zaznaczonego tekstu: Ctrl+B (w systemach Windows) lub Command+B
(w systemach Macintosh).
Kiedy do wprowadzania efektu pogrubienia wykorzystujemy odpowiedni przycisk panelu Property
inspector, program Dreamweaver umieszcza zaznaczony fragment tekstu pomidzy znacznikami
<strong> i </strong>. Podobnie, kiedy stosujemy formatowanie kursywy, Dreamweaver zamyka formatowany fragment w znacznikach <em> i </em> (em jest skrtem od ang. emphasis,
czyli wyrnienia). Dreamweaver wykorzystuje znaczniki wzmocnienia i wyrnienia (nazywane
czsto znacznikami logicznymi), poniewa za ich pomoc mona modyfikowa zawarto strony
zarwno na poziomie konceptualnym, jak i wizualnym czyli inaczej ni w przypadku znacznikw pogrubienia i kursywy (odpowiednio <b> oraz <i>), ktre nazywa si znacznikami fizycznymi z uwagi na ich wpyw wycznie na warstw wizualn strony. Znaczniki logiczne s bardziej
elastyczne i dostpne dla szerszej grupy odbiorcw.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
61
W ten sam sposb moemy zastosowa dla zaznaczonego tekstu efekt kursywy.
Ostronie uywaj efektu podkrelenia na swoich stronach internetowych. Jednym ze sposobw oznaczania czy na stronach WWW jest wanie podkrelenie. Stosowanie stylu podkrelenia dla fragmentw tekstu niebdcych czami moe wprowadza w bd odwiedzajcych.
3. Zastosuj efekt pogrubienia dla pozostaych poj na licie definicji.
62
Zmiana czcionki
Aby uczyni swoj stron bardziej interesujc i czyteln dla odwiedzajcych, moesz zmieni
czcionki wykorzystywane do wywietlania znajdujcego si na stronie tekstu. Chocia istnieje wiele
materiaw dotyczcych krojw czcionek wykorzystywanych w dokumentach drukowanych, nie
wszystkie zawarte w nich zalecenia maj zastosowanie w przypadku stron internetowych.
W oglnoci czcionki bezszeryfowe (ang. sans-serif) s bardziej czytelne na ekranie komputera ni
czcionki szeryfowe (ang. serif). Czcionki szeryfowe s zazwyczaj wykorzystywane w mediach drukowanych, poniewa ich waciwoci uatwiaj czytajcemu szybkie rozpoznawanie uytych znakw. Na ekranie komputera te same kroje czcionek mog jednak utrudnia rozrnianie znakw,
w szczeglnoci jest to trudne w duych blokach tekstu, w ktrych zastosowano stosunkowo niewielki rozmiar czcionki. Warto te pamita, e sposb wywietlania tekstu na ekranie bardzo czsto zaley od ustawie wprowadzonych przez konkretnego uytkownika.
Do definiowania opcji czcionek program Dreamweaver wykorzystuje zintegrowane arkusze stylw
CSS zamiast przestarzaej metody opartej na atrybutach znacznika font. Wicej informacji na temat arkuszy stylw znajdziesz w lekcji 6.
Moemy zmienia czcionk dla caej strony lub tylko dla zaznaczonego fragmentu tekstu, o czym
przekonasz si, wykonujc ponisze wiczenie.
1. W dokumencie introduction.htm wybierz opcje Modify/Page Properties (modyfikuj/waciwoci
strony) i na licie Category kliknij pozycj Appearance (wygld). Z listy rozwijanej Page font
(czcionka strony) wybierz opcj Arial, Helvetica, sans-serif. Aby zamkn okno dialogowe
Page Properties, kliknij przycisk OK.
Czcionka caego tekstu na naszej stronie zostanie teraz zmieniona na wybran przez nas
Arial, Helvetica, sans-serif. Ta sama czcionka zostanie zastosowana dla kadego kolejnego
fragmentu tekstu, ktry dodamy na stronie w przyszoci.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
63
Okno dialogowe Page Properties generuje wewntrzny arkusz stylu CSS wykorzystywany do ponownego zdefiniowania zbioru znacznikw (body, td i th) z wybranymi przez nas atrybutami.
Wewntrzne arkusze stylw CSS omwimy w lekcji 6.
Kombinacje czcionek dostpne na licie rozwijanej Page font kategorii Appearance w oknie
dialogowym Page Properties instruuj przegldark, by zmienia stosowan czcionk na jedn
z czcionek nalecych do tych kombinacji wybr konkretnej czcionki zaley od dostpnego
zestawu czcionek zainstalowanych w komputerze odwiedzajcego. Jeli pierwsza czcionka
z wybranej grupy (w tym przypadku Arial) jest niedostpna, przegldarka prbuje wykorzysta
drug czcionk (w tym przypadku Helvetica). Jeli druga czcionka jest niedostpna,
wykorzystywana jest trzecia czcionka (w tym przypadku sans-serif). Jeli adna z czcionek
wybranej kombinacji nie jest dostpna w komputerze uytkownika, tekst jest wywietlany
w domylnej czcionce przegldarki.
2. Zaznacz tekst Introduction to Lights of the Coast: Exploring Lighthouses na samym pocztku strony.
Z listy rozwijanej Font menu w panelu Property inspector wybierz pozycj New Roman, Times, serif.
Wybrana przez nas czcionka dla nagwka zastpuje domylny zbir czcionek dla naszej
strony. Na licie rozwijanej Font panelu Property inspector dostpne s dokadnie takie same
kombinacje czcionek jak te znajdujce si na licie Page font kategorii Appearance w oknie
dialogowym Page Properties.
Wiele opcji formatowania mona zastosowa dla zaznaczonego tekstu bezporednio w oknie dokumentu
wystarczy klikn prawym przyciskiem myszy (w systemach Windows) lub klikn z przytrzymywanym klawiszem Control (w systemach Macintosh z jednoprzyciskowymi myszami), aby uzyska dostp do menu kontekstowego.
Aby odwiedzajcy Twoj witryn uytkownicy mogli zobaczy tekst wywietlany
z wykorzystaniem wybranych przez Ciebie czcionek, czcionki te musz by zainstalowane
na ich komputerach. Nie moesz zakada, e wszystkie czcionki znajdujce si w Twoim
komputerze bd dostpne take w komputerach uytkownikw. W przypadku kadej czcionki,
ktra nie naley do podstawowego zbioru instalowanego z systemem operacyjnym, naley
przyj, e nie jest zainstalowana w komputerze odwiedzajcego. W oglnoci czcionki
uwzgldnione w domylnych zestawach programu Dreamweaver s dostpne w zdecydowanej
wikszoci komputerw, zarwno tych z systemami Windows, jak i Macintosh.
64
Jeli chcesz stosowa na swojej stronie czcionki specjalne, ktre prawdopodobnie nie s dostpne w komputerach odwiedzajcych, zaleca si stworzenie grafiki wykorzystywanej w miejscu odpowiedniego
fragmentu tekstu. Ta technika jest czsto wykorzystywana dla nagwkw, tytuw itp. Stosowanie
grafiki nie jest zalecane w przypadku duych blokw tekstu.
Kombinacje czcionek (np. Arial, Helvetica, sans-serif) s przydatne, nie zawsze jednak zawieraj
konkretne czcionki, ktrych chcielibymy uy na naszej stronie. Moemy dowolnie
modyfikowa dostpne kombinacje, jeli wybierzemy opcj Edit Font List (edytuj list czcionek)
z dostpnego w panelu Property inspector menu rozwijanego Font lub klikajc opcje Text/Font/
Edit Font List w obu przypadkach na ekranie zostanie wywietlone okno dialogowe Edit
Font List.
W oknie dialogowym Edit Font List moemy wprowadza wiele istotnych zmian w dostpnych
zbiorach czcionek.
Aby doda czcionki do istniejcych kombinacji, naley na licie Font list (lista czcionek)
ktr chcemy zmodyfikowa, i z listy Chosen fonts wybra czcionk, ktr chcemy usun;
nastpnie trzeba klikn umieszczony pomidzy listami Chosen fonts i Available fonts
przycisk ze strzak skierowan w praw stron, aby usun wybran czcionk z listy
Chosen fonts.
Aby doda kombinacj czcionek, naley wybra pozycj Add fonts in list below
(dodaj czcionki z poniszej listy) z listy Font list. W przypadku kolejnych kombinacji
czcionek naley klikn przycisk oznaczony znakiem plusa w lewym grnym rogu
okna dialogowego i klikn now pozycj Add fonts in list below na licie Font list.
Aby usun kombinacj czcionek, naley zaznaczy na licie Font list kombinacj czcionek,
ktr chcemy usun, i klikn przycisk oznaczony znakiem minusa w lewym grnym
rogu okna dialogowego Edit Font List.
Aby doda czcionk, ktra nie jest zainstalowana w naszym systemie, naley wpisa
nazw czcionki w polu tekstowym znajdujcym si bezporednio pod list Available fonts
i klikn przycisk ze strzak, co spowoduje dodanie nowej czcionki do aktualnie
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
65
Tekst jest teraz wywietlany w przegldarce za pomoc wybranych przez nas czcionek
wygld strony zaley od tego, ktre ze wskazanych przez nas czcionek s zainstalowane
w naszym komputerze.
Moemy w prosty sposb usun ustawienia czcionek i przywrci ustawienia domylne wystarczy
zaznaczy interesujcy nas tekst i w panelu Property inspector z menu rozwijanego Font wybra pozycj
Default Font (czcionka domylna) lub wybra kolejno opcje Text/Font/Default Font (tekst/czcionka/
czcionka domylna).
dostpnej w panelu Property inspector wybierz liczb 12. Pozostaw niezmienion warto
pola Measurement (jednostka), czyli pixels (piksele) (patrz rysunek na nastpnej stronie).
66
Rozmiary czcionek w systemach Macintosh i Windows bardzo si od siebie rni. Na komputerach Macintosh tekst jest o okoo 25% mniejszy od tego samego tekstu wywietlanego w systemach
Windows rozmiar tekstu wywietlanego na komputerach Macintosh jest mniej wicej rwny
trzem czwartym rozmiaru tego samego tekstu w systemach Windows. Take uytkownicy przegldarek mog zmienia rozmiar czcionki, co moe wpywa na ukad Twoich stron. Musisz wic pamita o projektowaniu i testowaniu swoich stron pod tym ktem tylko w ten sposb bdziesz mg
zapewni estetyczny i czytelny wygld swoich witryn dla moliwie najszerszej grupy odwiedzajcych.
Rozmiar tekstu w zaznaczonym akapicie nieco si zmniejszy tekst akapitu bdzie teraz
drobniejszy od tekstu pozostaych akapitw, dla ktrego nie zastosowalimy formatowania
z nowym rozmiarem. Za kadym razem, gdy wybierzemy rozmiar stosowany po raz pierwszy
na edytowanej stronie, Dreamweaver stworzy nowy styl, ktry zostanie umieszczony na licie
Style w panelu Property inspector. Wszystkie kolejne fragmenty tekstu, dla ktrych zostanie
zastosowany ten sam rozmiar czcionki, bd wykorzystyway ten sam styl. Tworzonym
w ten sposb stylom nadawane s automatycznie generowane nazwy: style1, style2 itd.
Nowe style s tworzone dla kadej unikalnej kombinacji kroju, rozmiaru i koloru czcionki.
Moesz take ustawi domylny rozmiar tekstu dla danego dokumentu w sekcji Appearance okna
dialogowego Page Properties.
Jeli dla zaznaczonego tekstu nie wybrano adnego rozmiaru, zarwno na licie rozwijanej Size,
jak i na licie Style widnieje opcja None. Przegldarki wywietlaj tekst z niezdefiniowanym
rozmiarem w oparciu o swoje domylne ustawienia rozmiarw, ktre w wikszoci przypadkw
s rwnowane wartoci 14 na licie Size (chocia mog si rni w zalenoci od przegldarki
i ustawie wprowadzonych przez uytkownika).
Moesz usun ustawienia dotyczce rozmiaru czcionki i przywrci rozmiar domylny. Aby to zrobi,
w pierwszej kolejnoci musisz zaznaczy interesujcy Ci fragment tekstu. Kliknij nastpnie pozycj
None na licie rozwijanej Style w panelu Property inspector lub wybierz opcje Text/CSS Styles/None
(tekst/style CSS/brak).
Nie moemy wpisywa dowolnych wartoci w polu Size musimy jedynie wybiera spord
dostpnych opcji. Jeli chcemy zastosowa inne rozmiary ni wypisane na licie, musimy
stworzy dodatkowe style tekstu, co nie jest takie trudne, jeli wykorzystamy list Style. Tworzenie
dodatkowych stylw i prac z arkuszami stylw omwimy bardziej szczegowo w lekcji 6.
Dostpne na licie rozwijanej Size numeryczne opcje rozmiaru czcionki mog by Ci znane,
poniewa s bardzo podobne do standardowych rozmiarw wykorzystywanych w edytorach tekstu.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
67
Bezwzgldne rozmiary
tekstu HTML
Wartoci numeryczne*
na licie Size (CSS)
Wartoci wzgldne
na licie Size (CSS)
9
10
xx-small
12
x-small/smaller
None (domylny)
14
small
+1
18
medium/larger
+2
24
large
+3
+4
x-large
36**
xx-large
* Dla ustawie domylnych, czyli wybranej pozycji pixels na licie rozwijanej Measurement.
** Ta warto numeryczna jest troch wiksza od x-large (6) i troch mniejsza od xx-large (7).
Znacznik HTML <font> definiuje rozmiary tekstu w formie bezwzgldnych wartoci (od 1 do 7)
lub wartoci wzgldnych (od +1 do +7 oraz od 1 do 7). Wybr bezwzgldnego rozmiaru (gdzie 1
reprezentuje rozmiar najmniejszy, a 7 najwikszy) jest najprostszym sposobem definiowania wielkoci stosowanej czcionki. Domylnym bazowym rozmiarem tekstu w przegldarce jest 3. Wybr dodatniej lub ujemnej wartoci wzgldnej powoduje zmian rozmiaru tekstu wzgldem rozmiaru bazowego.
Przykadowo, zastosowanie dodatniej wartoci +1 spowoduje, e rozmiar czcionki bdzie o jeden
punkt wikszy od rozmiaru bazowego. Jeli wybierzemy warto +3 dla rozmiaru czcionki, w rzeczywistoci zmienimy stosowany rozmiar na 6 (3 + 3). Najwikszym rozmiarem czcionki w tym
systemie jest 7, najmniejszym 1. Kady rozmiar czcionki HTML wikszy ni 7 i tak powoduje
wywietlanie tekstu o rozmiarze 7; przykadowo, jeli ustawimy wzgldny rozmiar czcionki na +6,
rozmiar bezwzgldny 3 + 6 bdzie wikszy ni 7, ale w przegldarce nadal wywietlany bdzie
tekst w rozmiarze 7. Wymienione ograniczenia dostpnego w jzyku HTML znacznika <font> nie
dotycz arkuszy stylw CSS, ktre zapewniaj znacznie bardziej elastyczne i uniwersalne metody
definiowania specyfikacji tekstu.
przycisk OK.
Aby wybra kolor, moesz albo wpisa kod szesnastkowy koloru w polu tekstowym,
albo klikn prbk odpowiadajcego Ci koloru na palecie. Po klikniciu przycisku OK
okno dialogowe Page Properties zostanie zamknite i powrcimy do naszego dokumentu.
Program Dreamweaver oferuje szereg wstpnie wyznaczonych bezpiecznych schematw kolorw.
Aby otworzy odpowiednie okno dialogowe i wybra jeden z nich, kliknij opcje Commands/Set Color
Scheme (polecenia/ustaw schemat kolorw). W otwartym w ten sposb oknie dialogowym w kolumnie po lewej stronie moesz wybra kolor ta, w rodkowej kolumnie znajduj si dostpne opcje
dla kolorw tekstu i czy. W prawej kolumnie prezentowany jest podgld wybranej kombinacji.
Kliknij przycisk Apply (zastosuj), aby zobaczy wpyw nowych ustawie w swoim dokumencie bez
koniecznoci zamykania okna dialogowego. Kliknij przycisk OK, aby zaakceptowa wprowadzone
zmiany, zamkn okno dialogowe i wrci do dokumentu.
4. Zaznacz w dokumencie tekst Introduction to Lights of the Coast: Exploring Lighthouses.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
69
W niektrych sytuacjach, kiedy stosujesz formatowanie tekstu polegajce na zmianie czcionki, rozmiaru lub koloru, odpowiednie pola w panelu Property inspector mog wyglda na puste. W takich
przypadkach moesz odwiey panel Property inspector, klikajc obszar okna dokumentu poza tekstem, dla ktrego chcesz zastosowa formatowanie. Nastpnie ponownie kliknij tekst, dla ktrego
zastosowae formatowanie, a w odpowiednich polach tekstowych panelu zostan wywietlone uyte
przez Ciebie wartoci.
Paleta kolorw zamyka si automatycznie w momencie kliknicia ktrej z prbek barw
program Dreamweaver stosuje wybrany przez Ciebie kolor natychmiast. Podobnie jak
w przypadku opcji kroju i rozmiaru czcionki, kolor czcionki jest definiowany za pomoc
zintegrowanych arkuszy stylw CSS. Stosujc nowy kolor, zmodyfikowalimy styl stworzony
w momencie wybrania kroju czcionki dla zaznaczonego tekstu. Nazwa tego stylu jest widoczna
na licie rozwijanej Style w panelu Property inspector. Jeli eksperymentowae z krojami, rozmiarami
i atrybutami kolorw czcionek, numer Twojego nowego stylu moe si rni od tego, ktry
jest widoczny na poniszym zrzucie ekranu.
Okno dialogowe Colors mona otworzy, wybierajc opcje Text/Color. Uytkownicy systemw
Windows mog wykorzystywa to okno do wybierania kolorw z penego spektrum barw,
mog uy specjalnego suwaka, mog wybra spord czterdziestu omiu prbek podstawowych
kolorw lub stworzy wasne kolory w najwikszym stopniu odpowiadajce ich potrzebom.
Uytkownicy komputerw Macintosh mog w oknie dialogowym Colors wybra jedn z wielu
metod dobierania i definiowania kolorw: Color Wheel (koo kolorw), Color Sliders (suwaki
kolorw), Color Palettes (palety kolorw), Image Palettes (inaczej Spectrum) oraz Crayons (pastele).
Mona take wpisywa szesnastkowe kody kolorw bezporednio w polu tekstowym obok
ikony wyboru koloru w panelu Property inspector.
Moesz ledzi szesnastkowe kody kolorw wykorzystywane na Twoich witrynach za pomoc panelu
Assets. Panel ten naley do grupy paneli Files (w systemach Macintosh z powodu wspomnianego
ju bdu w programie Dreamweaver grupa paneli Files moe mie zmienion nazw na Assets).
Panel Assets moesz take otworzy za pomoc opcji Window/Assets. Aby uzyska dostp do zasobw kolorw, kliknij ikon Colors w lewej kolumnie panelu Assets. Za pomoc przyciskw opcji na
grze panelu Assets moesz wybra jeden z dwch trybw wywietlania kolorw: Site (uyte w witrynie) i Favorities (ulubione). Klikajc przycisk opcji Site list, spowodujesz wywietlenie kolorw,
ktre zostay ju uyte w projekcie Lights of the Coast lub innej aktualnie edytowanej witrynie. Lista
nie bdzie zawieraa adnych kolorw, jeli w danej witrynie nie zastosowae jeszcze formatowania
kolorami. Jeli zdefiniowae jakie kolory, ktrych nie ma na licie, kliknij przycisk Refresh Site
List w prawym dolnym rogu panelu.
70
Na licie znajd si kolory, ktrych jeszcze nie stosowae, poniewa istniej kolory wykorzystywane
w dokumentach umieszczonych w pozostaych (stworzonych na potrzeby innych lekcji) folderach
projektu Lights of the Coast. Aby zapewni spjno schematw kolorw stosowanych w caej witrynie, moesz zapisa najczciej wykorzystywane kolory w grupie ulubione panelu Assets. Musisz jedynie zaznaczy ulubiony kolor na licie Site i klikn przycisk Add to Favorities znajdujcy si
w prawym dolnym rogu panelu Assets. Dreamweaver wywietli okno dialogowe informujce Ci,
e wybrana barwa zostaa dodany do listy Twoich ulubionych kolorw. Aby zapozna si z pen
list ulubionych kolorw, musisz teraz klikn przycisk opcji Favorities na grze panelu Assets.
ang. copyright), aby wstawi go w nowym wierszu na samym dole dokumentu. Na prawo
od znaku praw autorskich wpisz tekst: 2003, Lights of the Coast.
Podobnie jak w przypadku pozostaych menu paska Insert ikona reprezentujca menu Characters
zmieni si w zalenoci od tego, jaki element wybralimy w tym menu po raz ostatni.
Uytkownicy systemw Macintosh: Jeli po wybraniu kategorii Text na pasku Insert nie
widzisz ikony reprezentujcej menu Characters, by moe bdziesz musia powikszy pasek
Insert. Aby to zrobi, kliknij i przecignij prawy dolny naronik paska w prawo w ten
sposb zwikszysz jego szeroko (patrz rysunek na nastpnej stronie).
Znak jest wstawiany w nowym wierszu w momencie kliknicia odpowiedniej ikony
w menu znakw.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
71
Chocia rozwijane menu Characters w kategorii Text paska Insert daje Ci moliwo uzyskania
szybkiego dostpu do najczciej stosowanych znakw, nie znajdziemy w nim wszystkich potrzebnych
znakw specjalnych. Jeli znak, ktrego chcemy uy, nie jest dostpny w menu Characters, moemy go
znale, klikajc pozycj Other Characters na samym dole tego menu lub wybierajc opcje Insert/
HTML/Special Characters/Other. Kiedy wybierzemy potrzebny nam znak w oknie dialogowym
Insert Other Character, w polu tekstowym na w lewym grnym rogu tego okna pojawi si odpowiedni
kod HTML. Po wskazaniu znaku, ktrego chcesz uy na swojej stronie, kliknij przycisk OK.
powiconego prawom autorskim. Na pasku Insert wska kategori HTML i kliknij przycisk
Horizontal Rule.
72
Moesz take umieci punkt wstawiania w odpowiednim miejscu w dokumencie i wybra opcje
Insert/HTML/Horizontal Rule (wstaw/HTML/pozioma linia).
Po wstawieniu poziomej linii nowy element w oknie dokumentu jest zaznaczony.
Linia znajduje si bezporednio nad informacjami o prawach autorskich, ktre zostay
tym samym sprowadzone o jeden wiersz w d (pod wstawiony przed momentem element).
Jeli pasek Insert jest niewidoczny, wybierz opcje Window/Insert (okno/wstaw).
2. Majc cay czas zaznaczon poziom lini, w dostpnym w panelu Property inspector polu
Dugo poziomej linii bdzie teraz rwna 70% szerokoci okna przegldarki,
niezalenie od jego rozmiarw. Linia jest wywietlana w przegldarkach w postaci
cienkiej poprzeczki.
Aby zdefiniowa bezwzgldn szeroko, wybierz z tej samej listy rozwijanej opcj pixels. Jeli zdecydujesz si na takie rozwizanie, dugo linii nie bdzie modyfikowana wraz ze zmianami rozmiarw okna przegldarki.
3. Majc cay czas zaznaczon poziom lini, w panelu Property inspector usu zaznaczenie pola
wyboru Shading. W polu tekstowym H (reprezentujcym wysoko, czyli grubo) wpisz teraz
warto 1.
Usuwajc zaznaczenie pola wyboru Shading (cieniowanie), spowodujesz, e linia bdzie
wywietlana jako jednolity odcinek. Wysoko (grubo) linii bdzie teraz rwna 1.
Wybierajc odpowiednie opcje z menu Align (wyrwnanie), moesz take wyrwna
lini do lewej, do rodka lub do prawej. Domylnym sposobem wyrwnania linii
poziomych jest wyrodkowanie. W tym wiczeniu pozostawiamy wanie domylne
wyrwnanie do rodka.
4. Majc cay czas zaznaczon poziom lini, w panelu Property inspector kliknij menu Class.
Z listy Class wybierz styl stworzony podczas stosowania wczeniej w tej lekcji ciemnoniebieskiego
koloru dla tekstu nagwka. Zapisz dokument i wcz jego podgld w oknie przegldarki
internetowej.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
73
Tak wstawiana data oczywicie nie jest elementem dynamicznym zmieniajcym si pod wpywem
czasu odwiedzania strony przez uytkownika. Data ma na celu jedynie informowanie odwiedzajcych, kiedy Twoje strony byy po raz ostatni aktualizowane. Daty dynamiczne s zwykle generowane za pomoc jzyka JavaScript (wicej informacji na jego temat znajdziesz w lekcji 11.).
1. Umie punkt wstawiania na kocu wiersza z informacj o prawach autorskich, wstaw podzia
przycisk Date.
Do otwierania okna dialogowego Insert Date (wstaw dat) moesz take wykorzystywa opcje
Insert/Date (wstaw/data).
74
3. Z listy rozwijanej Day format (format dnia) wybierz opcj Thursday (czwartek). Na licie Date
format (format daty) zaznacz pozycj March 7, 1974 (7 marca 1974). Z listy rozwijanej Time
format (format czasu) uytkownicy systemw Windows powinni wybra pozycj 10:18 PM,
natomiast uytkownicy systemw Macintosh powinni wybra 9:18 PM. Zaznacz pole wyboru
Update automatically on save (automatycznie aktualizuj podczas zapisywania), aby Dreamweaver
automatycznie aktualizowa dat na stronie za kadym razem, gdy bdziesz zapisywa swj
dokument. Kliknij przycisk OK.
W dokumencie zosta wywietlony aktualny dzie tygodnia, data i czas wszystkie
te informacje bd si zmieniay za kadym razem, gdy bdziesz zapisywa dokument. Thursday
(czwartek) w oknie dialogowym Insert Date peni jedynie rol przykadu dnia wywietlanego
w Twoim dokumencie. Wybierana data i czas take s tylko przykadami formatowania tych
informacji.
Jeli wczymy opcj automatycznego aktualizowania daty, bdziemy mogli zmieni jej format
w dowolnym momencie po wstawieniu tego elementu. Aby zmieni stosowany format, umie w tej
dacie punkt wstawiania w swoim dokumencie i kliknij Edit date format (edytuj format daty)
w panelu Property inspector. Program Dreamweaver raz jeszcze wywietli okno dialogowe Insert
Date. Wprowad odpowiednie zmiany i kliknij przycisk OK. Nowe ustawienia zostan zastosowane w dokumencie. Edycja formatu daty w oknie dialogowym Insert Date nie jest moliwa, jeli
wyczye opcj jej automatycznego aktualizowania aby zaktualizowa tak dat, bdziesz
musia j usun i ponownie wstawi lub samodzielnie zmieni wstawiony wczeniej tekst w oknie
dokumentu.
75
Tekst Flasha oferuje najlepsze cechy obu przedstawionych powyej rozwiza. Moemy wykorzysta dowoln wybran przez siebie czcionk i stworzy tekst bezporednio w programie Dreamweaver. Stworzony przez nas tekst zostanie zapisany jako may plik Flasha czyli plik z popularnym
rozszerzeniem .swf.
Tworzenie i praca z tekstem Flasha co prawda jest szybka i atwa, jednak przed zastosowaniem
tego typu obiektw zawsze powiniene mie na uwadze ewentualny brak odpowiednich rozszerze
(ang. plug-in) w przegldarkach goci Twoich witryn.
1. Umie punkt wstawiania w nowym pustym wierszu akapitu ponad list rozpoczynajc si
od sw The Lighthouse of Alexandria (Egypt). Kliknij ikon Media w kategorii Common paska Insert
i z rozwinitego menu wybierz opcj Flash Text.
Upewnij si, e nie wybrae opcji Flash lub Flash Button. W tym wiczeniu mamy zamiar
stworzy jedynie tekst Flasha. Opcja Flash umoliwia nam wstawianie na stronie animacji
Flasha, natomiast opcja Flash Button daje nam moliwo tworzenia interesujcych przyciskw.
Program Dreamweaver wywietli okno dialogowe Insert Flash Text (wstaw tekst Flasha).
2. Wprowad nastpujce zmiany:
Z listy rozwijanej Font wybierz czcionk Comic Sans MS. Jeli czcionka Comic Sans MS
76
Zaraz po wczeniu okna dialogowego Insert Flash Text w polu tekstowym Save as znajduje si automatycznie wygenerowana nazwa pliku. Domylne nazwy s generowane z kolejnymi identyfikatorami
numerycznymi: np. text1.swf, text2.swf itd. Zaleca si zastpowanie ich nieco bardziej opisowymi nazwami tworzonych plikw tekstu Flasha. Domyln lokalizacj, w ktrej zapisywane s pliki tekstu
Flasha, jest ten sam folder, w ktrym znajduje si plik HTML, do ktrego wstawiamy obiekty jeli
chcesz, moesz oczywicie zapisywa tworzone pliki w innym folderze, np. w folderze obrazw lub mediw).
Tekst Flasha zostanie wywietlony w dokumencie. W panelu Property inspector bd teraz dostpne
atrybuty stworzonego przed chwil pliku tekstu Flasha notable.swf.
4. W oknie dokumentu zaznacz tekst Flasha i zmie jego rozmiar, przecigajc jeden z jego
uchwytw.
Moesz dowolnie zdefiniowa rozmiar swojego tekstu Flasha. Poniewa tekst ten ma
charakter grafiki wektorowej, inaczej ni typowy tekst podstawowy lub grafika rastrowa,
moesz zmienia jego rozmiar bezporednio w oknie dokumentu. Moesz zwiksza
i zmniejsza rozmiar tego obiektu, nie obawiajc si utraty jakoci.
Modyfikowanie rozmiarw obrazw graficznych (patrz lekcja 3.) w programie Dreamweaver
nie jest zalecane. Poniewa jednak stworzony przez Ciebie tekst Flasha jest grafik wektorow,
moesz zmienia jego rozmiary w dowolny odpowiadajcy Ci sposb. W przeciwiestwie
do grafiki rastrowej (np. obrazw GIF lub JPEG), skalowanie grafiki wektorowej nie powoduje
utraty jej jakoci.
Aby zachowa proporcje, podczas modyfikowania rozmiaru tekstu Flasha przytrzymaj klawisz Shift.
5. Zapisz dokument i wcz jego podgld w oknie przegldarki internetowej.
Tekst w przegldarce wyglda dokadnie tak samo jak w oknie dokumentu programu
Dreamweaver.
LEKCJA 2.
Dodawanie waciwej treci do strony WWW
77
W tekcie Flasha moesz take ustawi kolor cza i efektu rollover. Przycisk Play w panelu Property inspector umoliwia podgld wpywu tych ustawie na wygld tekstu Flasha bezporednio w programie
Dreamweaver. cza omwimy w lekcji 4., natomiast efektami rollover i innymi elementami interaktywnymi zajmiemy si w lekcji 11.
Jeli nie moesz zaznaczy tekstu, kliknij najpierw przycisk Stop w panelu Property inspector.
Program Dreamweaver wywietli okno dialogowe Insert Flash Text.
2. Zmie odpowiednie opcje i kliknij przycisk Apply, aby zapozna si z efektami wprowadzonych
modyfikacji. Kiedy skoczysz, kliknij przycisk OK, aby zamkn okno dialogowe Insert Flash Text.
Zmieniony obiekt tekstu Flasha zostanie odwieony na stronie, a jednoczenie
zaktualizowany zostanie odpowiedni plik .swf.
Podsumowanie
Podczas niniejszej lekcji wykonalimy nastpujce zadania:
Nauczylimy si, jak naley ustawia waciwoci tekstu i zapoznalimy si z rnymi
78