IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Po prostu DHTML i CSS

Autor: Jason Cranford Teague
Tumaczenie: Agata Bulandra
ISBN: 83-7197-569-4
Tytu oryginau: DHTML and CSS for the World Wide
Web, 2nd Edition, Visual QuickStart Guide
Format: B5, stron: 592
Przykady na ftp: 7771 kB
W ksice tej pokazano najlepsze sposoby wprowadzania w ycie DHTML-a i CSS,
umoliwiajce obejrzenie tych stron jak najwikszej liczbie osb myszkujcych po
Internecie. W celu lepszej organizacji informacji ksika jest podzielona na cztery
czci:
Cz 1. informuje, jak uywa CSS, aby zapanowa nad wygldem zawartoci
stron internetowych. Poka waciwe sposoby kontrolowania rnych
aspektw wygldu strony.
Cz 2. zajmuje si sposobem wykorzystania obiektowego modelu dokumentu
(DOM -- Document Object Model) wraz z CSS i JavaScriptem do stworzenia
prostych funkcji dynamicznych. Poka take, jak stworzy DOM, pozwalajcy
na uruchomienie funkcji dynamicznych w wikszoci przegldarek,
maksymalnie ograniczajc przy tym ilo zbdnego kodu.
Cz 3. skupia si nad sposobem wykorzystania DHTML-a i CSS w dwch
najbardziej znanych programach do edycji stron internetowych: Adobe GoLive
i Macromedia Dreamweaver. Chocia nie musimy uywa tych programw przy
tworzeniu stron internetowych w technologii DHTML i CSS, to mog one uatwi
nasze ycie.
Cz 4. pokazuje, jak przy uyciu DHTML-a i CSS zaprojektowa witryn
internetow, opisuje take niektre zastosowania tych technologii. Dodatkowo
pokazuje, jak szuka bdw w kodzie oraz zapoznaje nas z dopiero
pojawiajcymi si technologiami.

"
"
"
"

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Spis treci

13

Cz I

Kaskadowe arkusze stylw

23

Rozdzia 1.

Wprowadzenie do CSS
25
Czym jest styl? ..........................................................................................27
Czym s kaskadowe arkusze stylw?........................................................28
Wersje CSS ...............................................................................................31
Typy regu CSS .........................................................................................33
Czci skadowe reguy CSS.....................................................................34
Rodzaje znacznikw HTML .....................................................................36

Rozdzia 2.

Podstawy CSS
39
Dodawanie CSS do znacznika HTML ......................................................40
Dodawanie CSS do strony internetowej....................................................42
Dodawanie CSS do witryny internetowej .................................................45
(Re)Definiowanie znacznikw HTML......................................................51
Definiowanie klas w celu stworzenia wasnych znacznikw......................53
Definiowanie identyfikatorw w celu identyfikacji obiektw ..................55
Tworzenie wasnych znacznikw elementw wewntrznych ...................57
Tworzenie wasnych znacznikw elementw blokowych ........................59
Definiowanie znacznikw z t sam regu ..............................................61
Definiowanie znacznikw w kontekcie ...................................................63
Tworzenie definicji !important..................................................................65
Dziedziczenie waciwoci od rodzica ......................................................67
Zarzdzanie istniejcymi i dziedziczonymi wartociami waciwoci......69
Ustalanie kolejnoci w kaskadzie..............................................................71
Tworzenie arkusza stylw dla wydrukw .................................................73
Dodawanie komentarzy.............................................................................76
Strategie arkuszy stylw............................................................................77
5

Spis treci

Wprowadzenie

Spis treci

Sterowanie czcionkami
79
Podstawy typografii uywanej w Sieci .....................................................80
Rodzaje prezentacji tekstu w Sieci............................................................81
Ustawianie czcionki ..................................................................................83
Pobieranie czcionek...................................................................................85
Uywanie czcionek waciwych dla przegldarki.....................................87
Ustawianie wielkoci czcionki ..................................................................89
Ustawianie kursywy ..................................................................................91
Gruby, grubszy, najgrubszy ......................................................................93
Tworzenie kapitalikw ..............................................................................95
Ustawianie kilku wartoci dla czcionki.....................................................96

Rozdzia 4.

Kontrolowanie tekstu
99
Dostosowywanie kerningu ......................................................................100
Dostosowywanie odstpw midzy sowami..........................................101
Dostosowywanie interlinii.......................................................................102
Ustawianie wielkoci liter .......................................................................104
Wyrodkowanie tekstu oraz wyrwnanie do lewej, prawej strony .........105
Pionowe wyrwnanie tekstu....................................................................107
Tworzenie wci akapitw......................................................................109
Dekorowanie tekstu.................................................................................111
Kontrolowanie pustej przestrzeni............................................................113
Ustawianie podziau strony przy drukowaniu .........................................115

Rozdzia 5.

Kontrolowanie list i kursorw

117
Tworzenie listy........................................................................................118
Ustawianie stylw znakw wypunktowania ...........................................120
Tworzenie wcicia list.............................................................................121
Tworzenie wasnych znakw wypunktowania........................................122
Zmiana wygldu kursora myszy..............................................................124

Rozdzia 6.

Kontrolowanie koloru i ta
127
Ustawianie ta..........................................................................................128
Ustawianie poszczeglnych waciwoci ta ...........................................131
Okrelanie koloru pierwszego planu .......................................................136

Spis tre ci

Rozdzia 3.

Spis treci

Kontrolowanie ramek i marginesw

137
Pudeko elementu podstawowe informacje ........................................138
Ustawianie szerokoci i wysokoci elementu .........................................140
Ustawianie marginesw elementu...........................................................143
Ustawianie ramek elementu ....................................................................146
Ozdabianie ramek elementu ....................................................................148
Ustawianie dopenienia elementu............................................................151
Ustawianie ramek i marginesw tabeli ...................................................153
Oblewanie elementu tekstem...................................................................155
Uniemoliwianie oblewania tekstem.......................................................157
Okrelanie sposobu wywietlenia elementu............................................159

Rozdzia 8.

Kontrola pozycjonowania
161
Okno podstawowe informacje............................................................162
Ustawianie typu pozycjonowania.............................................................164
Ustawianie pozycji lewej i grnej ...........................................................168
Ustawianie pozycji prawej i dolnej .........................................................171
Ukadanie obiektw w stos (pozycjonowanie trjwymiarowe).................173
Zagniedanie elementu pozycjonowanego bezwzgldnie w elemencie
pozycjonowanym wzgldnie ...................................................................175
Zagniedanie elementu pozycjonowanego wzgldnie w elemencie
pozycjonowanym bezwzgldnie..............................................................177

Rozdzia 9.

Kontrolowanie widzialno$ci
179
Ustawianie widzialnoci elementu ..........................................................180
Ustawianie widocznego obszaru elementu (przycinanie) .........................182
Nadzr nad sposobem wywietlenia pozostaej zawartoci ....................184

Cz II

Dynamiczny HTML

187

Rozdzia 10. DHTML podstawowe informacje

189
Czym jest dynamiczny HTML? ..............................................................190
Smaczki DHTML-a.................................................................................191
Dlaczego powinnimy uywa DHTML-a?............................................193
Flash kontra DHTML..............................................................................195

Spis treci

Rozdzia 7.

Spis treci

Spis tre ci

Rozdzia 11. Obiektowy model dokumentu

199
DOM plan strony internetowej............................................................200
Tworzenie obiektu...................................................................................202
Procedury obsugi zdarze ......................................................................203
Wykrywanie zdarzenia ............................................................................205
Jak dziaa DOM.......................................................................................207
Sprawdzanie cech....................................................................................213
Sprawdzanie typu DOM..........................................................................214
Tworzenie DOM zgodnego z rnymi przegldarkami ..........................216
Uywanie DOM zgodnego z rnymi przegldarkami ...........................219
Netscape Navigator 4 a zagniedane warstwy.......................................221
Rozdzia 12. Zbieranie informacji na temat $rodowiska
225
Sprawdzanie nazwy i wersji przegldarki ...............................................226
Sprawdzanie systemu operacyjnego........................................................228
Sprawdzanie wymiarw ekranu ..............................................................230
Sprawdzanie ustawionej liczby kolorw .................................................232
Sprawdzanie wymiarw okna przegldarki ............................................234
Sprawdzanie wymiarw widocznej czci strony ...................................235
Sprawdzanie tytuu i adresu strony .........................................................237
Sprawdzanie pozycji, do ktrej zostaa przewinita strona......................238
Sprawdzanie wymiarw obiektu .............................................................240
Sprawdzanie grnej i lewej pozycji obiektu............................................242
Sprawdzanie dolnej i prawej pozycji obiektu..........................................244
Sprawdzanie kolejnoci nakadania si obiektw ...................................246
Sprawdzanie stanu widzialnoci obiektu.................................................248
Sprawdzanie widocznego obszaru obiektu..............................................250
Rozdzia 13. Podstawowe techniki dynamiczne
255
Wywietlanie i ukrywanie obiektw .......................................................256
Przesuwanie obiektu z miejsca na miejsce..............................................258
Przesunicie obiektu o pewn odlego .................................................260
Zmiana wartoci indeksu Z elementw...................................................262
Przewijanie strony internetowej ..............................................................265
Zmiana widocznego obszaru obiektu ......................................................267

Spis treci

Rozdzia 14. Zaawansowane techniki dynamiczne

269
Powtrne uruchomienie funkcji ..............................................................270
Przekazanie wydarzenia do funkcji.........................................................273
Globalna procedura obsugi zdarze .......................................................274
Animowanie obiektu ...............................................................................276
Sprawdzanie umiejscowienia wskanika na ekranie...............................279
Rozpoznanie elementu na ekranie...........................................................281
Wsppraca dynamicznej zawartoci rnych ramek..............................283
Przesuwanie okna przegldarki ...............................................................286
Otwieranie nowego okna przegldarki....................................................288
Zmiana rozmiaru okna ............................................................................292
Rozdzia 15. Techniki dynamiczne CSS
295
Zmiana deklaracji....................................................................................296
Zmiana klasy obiektu ..............................................................................298
Dodawanie nowej reguy.........................................................................300
Uniewanianie arkusza stylw ................................................................302

Rozdzia 17. Internet Explorer dla Windows

319
Przenikanie obiektu w obiekt ..................................................................320
Przejcie pomidzy stronami...................................................................321
Rozmywanie elementu ............................................................................323
Obiekty falujce...................................................................................324

Cz III

Uywanie narzdzi DHTML i CSS

325

Rozdzia 18. Elementarz GoLive

327
Interfejs GoLive ......................................................................................328
Dodawanie CSS.......................................................................................332
Dodawanie warstwy (pywajcego pudeka)...........................................336
Dodawanie animacji DHTML.................................................................338
9

Spis treci

Rozdzia 16. Warstwy Netscape

305
Czym s warstwy Netscape? ...................................................................306
Tworzenie warstwy .................................................................................307
Importowanie zewntrznej zawartoci za pomoc warstw Netscape......310
Uzyskiwanie dostpu do warstw przy uyciu JavaScriptu......................312
Modyfikowanie warstw za pomoc JavaScriptu .....................................316
Przegldarki nie obsugujce warstw umieszczanie treci .................318

Spis treci

Rozdzia 19. Elementarz Dreamweavera

341
Interfejs Dreamweavera ..........................................................................342
Dodawanie CSS.......................................................................................346
Dodawanie warstwy ................................................................................350
Dodawanie animacji................................................................................352

Cz IV

Dynamiczne witryny internetowe

355

Spis tre ci

Rozdzia 20. Podstawy dynamicznej Sieci

357
Co sprawia, e witryna jest dynamiczna? ...............................................358
Co to jest hipertekst? ...............................................................................360
Dynamicznie poprzez projekt..................................................................361
Ukad strony podstawowe informacje ................................................362
Tworzenie nawigacji o czym powinnimy pamita, a czego
powinnimy unika .................................................................................365
Rozdzia 21. Tworzenie dynamicznej witryny internetowej
369
Pierwszy krok okrel ..........................................................................370
Drugi krok zaprojektuj .......................................................................373
Trzeci krok zbuduj .............................................................................378
Rozdzia 22. Ukad strony internetowej
381
Naprawianie bdu implementacji CSS w Netscape Navigatorze...........382
Tworzenie arkuszy stylw dla rnych systemw operacyjnych................384
Tworzenie nagwkw ............................................................................386
Tworzenie nagwka o ustalonej pozycji ................................................388
Tworzenie bocznego menu......................................................................390
Ustawianie dynamicznego nagwka i stopki .........................................392
Tworzenie wasnych obramowa ramek .................................................394
Otwieranie i zamykanie ramek................................................................396
Zachowanie podziau strony na ramki.....................................................402
Dobry wygld w druku (w Sieci) ............................................................405
Rozdzia 23. Importowanie zewn:trznej zawarto$ci
407
czenie znacznikw <ilayer> i <iframe>..............................................408
Doczanie po stronie serwera...................................................................410
Uywanie zewntrznych plikw JavaScript............................................411
Przegldanie zewntrznych skryptw innych autorw ...........................412

10

Spis treci

Rozdzia 24. Nawigacja po witrynie

415
Ustawianie stylw odnonikw.................................................................416
Ustawianie wielu stylw odnonikw.....................................................419
Tworzenie rozwijanych list .....................................................................421
Tworzenie wysuwajcych si menu ........................................................426
Tworzenie zdalnego sterowania ..............................................................429
Tworzenie rozwijanych menu .................................................................433
Tworzenie wielopoziomowego menu .....................................................437
Nawigacja w przegldarkach niedynamicznych .....................................443
Informowanie przegldarki .....................................................................444

Rozdzia 26. Efekty specjalne

481
Tworzenie inicjaw................................................................................482
Tworzenie nieskomplikowanych cieni....................................................484
Tworzenie zaawansowanych cieni ..........................................................486
Pojawianie si lub wygaszanie tekstu HTML .........................................489
Podaj za kursorem myszy ....................................................................493
Pywajce obiekty ...................................................................................497
Tworzenie przezroczystej grafiki w formacie PNG ................................500
Tworzenie zegara ....................................................................................505
Rozdzia 27. Multimedia
507
Dodawanie dwiku ................................................................................508
Dodawanie animacji GIF ........................................................................510
Dodawanie animacji Flash ......................................................................517
Dodawanie filmw ..................................................................................523
Dodawanie apletw Javy.........................................................................526
11

Spis treci

Rozdzia 25. Obiekty steruj;ce

447
Tworzenie wasnych suwakw................................................................448
Tworzenie wasnego przycisku Wstecz ..................................................455
Tworzenie pokazu slajdw......................................................................456
Tworzenie wyskakujcego hipertekstu ...................................................460
Uywanie danych z formularzy w dynamicznych akcjach .........................463
Tworzenie formularzy kontekstowych....................................................465
Przeciganie i upuszczanie obiektw ......................................................468
Wymiana obrazkw.................................................................................471
Tworzenie inteligentnych menu ..............................................................476

Spis treci

Rozdzia 28. Usuwanie b:dw w kodzie

529
Identyfikowanie i usuwane usterek CSS .................................................530
Sprawdzanie kodu CSS ...........................................................................533
Identyfikowanie i usuwanie usterek JavaScript ......................................535
Midzyprzegldarkowe zagadki................................................................539

Spis tre ci

Rozdzia 29. Przyszo$ dynamicznej Sieci

541
Dlaczego standardy s wane? ................................................................542
Rozszerzalny jzyk znakowania (XML) .................................................544
Rozszerzalny hipertekstowy jzyk znakowania (XHTML) ....................547
Jzyk zsynchronizowanej integracji multimediw (SMIL) ....................551
Skalowalna grafika wektorowa (SVG)....................................................553
Co dalej: CSS poziom 3. .........................................................................554

Dodatki

555

Dodatek A

Przegl;darki obsuguj;ce DHTML-a i CSS

557
Internet Explorer .....................................................................................558
Netscape Navigator .................................................................................559

Dodatek B

Przegl;darki obsuguj;ce DHTML-a i CSS

561
Krtki przegld........................................................................................562

Dodatek C

DHTML krtka $ci;ga

571
Sowa zastrzeone ...................................................................................574
Skorowidz

12

577

Ukad strony internetowej

Rozdzia 22. Ukad strony internetowej

Jest tak wiele sposobw wykorzystania CSS
i DHTML-a, jak wielu jest projektantw
uywajcych tych technologii. Narzdzia te s
stosunkowo nowe i projektanci wci odkrywaj
ich moliwoci i ograniczenia. Dodatkowo
niektrzy projektanci, pocztkowo zafascynowani
moliwociami CSS w tworzeniu dynamicznego
HTML-a, zlekcewayli wiele z jego zalet,
dotyczcych ukadu strony.

Rozdzia ten odkrywa niektre z cennych

rozwiza CSS, oferowanych do rozwizania
codziennych problemw zwizanych z projektem
i jako najlepszy sposb zintegrowania
DHTML-a z ukadem stron.

381

Ukad strony internetowej

Spieszc si do eksperymentw z dynamicznymi

aspektami CSS, wielu projektantw przeoczyo
pewne praktyczne szczegy problemw, ktre
CSS rozwizuje. CSS uatwia stworzenie
jednolitego ukadu strony po prostu nie do
odrzucenia.

Rozdzia 22.

Naprawianie bdu implementacji CSS

Naprawianie bdu
implementacji CSS
w Netscape Navigatorze
W Netscape Navigatorze istnieje jeden oczywisty
bd zwizany z CSS, na ktry autorzy bardzo
czsto narzekaj. Gdy odwiedzajcy zmieni
wielko okna przegldarki, wszystkie style
CSS, pochodzce z zewntrznego pliku arkusza
stylw (podczanego poprzez znacznik

), tajemniczo znikaj, tak jakby podczony
plik CSS w ogle nie istnia. Jednak jeli
odwiedzajcy ponownie zaaduje stron, to style
CSS pojawiaj si znowu (rysunki 22.1 i 22.2).
Bd ten moe by czym odpychajcym dla
odwiedzajcego stron, zwaszcza jeli nie wie,
e ponowne zaadowanie strony rozwizuje ten
problem.

Rysunek 22.1. Tak strona powinna wyglda

w Netscape Navigatorze

Jak upewni si, e strona zostanie przeadowana

po zmianie wielkoci okna? Wystarczy sprawi,
by przegldarka zwracaa uwag na to, co dzieje
si w jej rodowisku (kod 22.1).

Aby wymusi ponowne zaadowanie

strony po zmianie jej wielkoci:
1. 
 

W znaczniku
 w nagwku strony

HTML (<head>) dodaj kod wykrywajcy,
czy przegldarka korzysta z obiektowego
modelu dokumentu dla warstw (zobacz
Sprawdzanie cech w rozdziale 11.). Jeli go
uywa, kod zarejestruje aktualn szeroko
(
) i wysoko ()
widocznego obszaru strony (zobacz
Sprawdzanie wymiarw widocznej czci
strony w rozdziale 12.).

382

Rysunek 22.2. Bez kodu naprawiajcego bd

w Netscape Navigatorze, gdy odwiedzajcy zmieni
wielko ekranu, do wywietlenia strony zostaj
uyte ustawienia domylne

Ukad strony internetowej

Kod 22.1. Jeli przegldarka korzysta z warstw
(co moe oznacza, e jest Netscape Navigatorem 4),
JavaScript rejestruje pocztkow warto szerokoci
i wysokoci dostpnego obszaru okna przegldarki.
Jeli wielko okna ulegnie zmianie, kod porwna
pocztkowe wymiary z nowymi i jeli si rni
strona zostaje przeadowana, co przywraca
zastosowanie zewntrznego pliku CSS

Do skryptu dodaj funkcj 

 .
Funkcja, gdy zostanie wywoana, porwna
obecn wysoko i szeroko widocznej
czci strony z wartociami zarejestrowanymi
w punkcie 1. Jeli wartoci si rni, strona
zostanie przeadowana.
3.  
!

Dodaj procedur , aby uruchomi

funkcj 
 z punktu 2. Jeli
uytkownik zmieni wielko okna, zmieniajc
tym samym widoczny obszar, to przegldarka
ponownie zaaduje stron, przywracajc
dziaanie zewntrznego arkusza stylw CSS.
Wskazwka

Dobrym pomysem jest umieszczenie tego
kodu w zewntrznym pliku ", ktry
bdziemy importowa do kadej strony
w witrynie, wykorzystujcej zewntrzny plik
CSS (zobacz Uywanie zewntrznych plikw
JavaScript w rozdziale 23.).

383

Naprawianie bdu implementacji CSS



 

 


 




































 




 







 



 

 

 



 





 
!








"
  !
 






 


#  $
!%&
'(

  


 


)
)


*
 


+,-.


 



2.  
 

Rozdzia 22.

Tworzenie arkuszy stylw

dla rnych systemw operacyjnych
Projektantw tworzcych za pomoc CSS denerwuje
kilka niezgodnoci pomidzy systemami Windows
i MacOS, zwaszcza w przypadku ustalania wielkoci
czcionki i kolorw. Tak naprawd sam problem tkwi
nie w CSS, ale w sposobie, w jaki te systemy operacyjne
definiuj wielko czcionki i kolor na ekranie.

Tworzenie arkuszy stylw...

Bez zagbiania si w szczegy historyczne

i techniczne podstawowy problem polega na tym,
e Windows ten sam rozmiar czcionki wywietla jako
wikszy, ni robi to MacOS, a ten sam kolor wywietla
jako nieco ciemniejszy. Taka sytuacja moe sprawi,
e projekt bdzie wyglda wymienicie na MacOS,
ale bdzie mia zbyt duy tekst i zbyt ciemne
kolory na komputerze typu PC.

Rysunek 22.3. Strona wywietlona w Internet

Explorerze 5 dla Windows

Jaka jest na to rada? Wykorzystujc JavaScript i kilka

arkuszy stylw dopasowanych do kolejnych systemw
operacyjnych, mona kademu z nich udostpni odpowiedni rozmiar czcionki i kolor (rysunki 22.3, 22.4 i 22.5).

Aby stworzy CSS odpowiedni dla systemu

operacyjnego odwiedzajcego:
1.
 

Stwrz zewntrzny plik CSS, zawierajcy style,

ktre zostan uyte w witrynie internetowej
i zapamitaj go jako default.css (kod 22.2). Plik
ten zostanie bezporednio podczony do stron
w punkcie 3.

Rysunek 22.4. Ta sama strona wywietlona

w Internet Explorerze 5 dla systemu MacOS
(bez korekcji). Tekst jest mniejszy i zbyt jasny

2. 

Stwrz drugi plik z arkuszem stylw i zapamitaj go

jako  (kod 22.3). Ta wersja pliku powinna
zosta wykorzystana do podmiany deklaracji
z pliku default.css i dostosowania ich dla
uytkownikw systemu MacOS poprzez zwikszenie
czcionki i dopasowanie koloru. Nie trzeba powtarza
wszystkich deklaracji z pliku default.css, poniewa te,
ktrych chcemy uy, znajd si w kaskadzie
arkuszy stylw.
3.
 #
 # #$#
 %#&'#

W nagwku dokumentu HTML w tym przykadzie

index.html (kod 22.4) podcz domyln wersj
arkusza stylw.
384

Rysunek 22.5. Ta sama strona wywietlona

w Internet Explorerze 5 dla systemu MacOS
z korekcyjnym arkuszem stylw.
Aby zrekompensowa wczeniejsze bdy,
tekst jest nieco wikszy i ciemniejszy

Ukad strony internetowej

Kod 22.2. Domylny arkusz stylw default.css
zawiera wszystkie domylne style, ktre powinny
zosta uyte na stronie

#

 $
/0%

$
123013
4 ,
5*
(4
6 7
,7
 %

* $
8223%
&
 
#

 ! 9 $
/%
&

Kod 22.3. Style w pliku mac.css uniewani

odpowiednie style z pliku default.css

Kod 22.4. JavaScript. System, w ktrym dziaa

przegldarka, to MacOS. Jeli tak, to kolejny arkusz
stylw zostaje dodany do strony i wprowadza pewne
korekcje



 
 
!
"
 "
"
#

"
$
"
%&"'

 
!;  

(
 $$)



%*+,+.

 /

+ 
!
"  "

"
#

"$
"
%&"'+

 

 

 


*7
*7
*



< 





 



Za znacznikiem
 umie skrypt

JavaScript, ktry sprawdza, czy przegldarka
wywietlajca stron jest uywana
w rodowisku MacOS. Jeli jest, to znacznik

 podczajcy wersj arkusza stylw
dla MacOS zostaje dopisany do strony
poprzez JavaScript. Drugi arkusz stylw
dopasowuje deklaracje tak, by byy
odpowiednie dla systemu MacOS.
Wskazwki

Chocia wersja stylu CSS dla klasy 
w MacOS nie zawiera deklaracji czcionki, to
tekst i tak wywietlony jest czcionk Times.
Dlaczego regua dla klasy copy z pliku CSS
dla MacOS nie podmienia deklaracji
w domylnym pliku CSS? Pojcie kaskadowe
w kaskadowych arkuszach stylw odnosi si
do moliwoci mieszania deklaracji, nawet
gdy pochodz z rnych rde.

Systemy operacyjne to nie jedyne rdo

problemw. Przegldarki, nawet gdy dziaaj

w tym samym systemie operacyjnym,
take dziwacznie wywietlaj rozmiar czcionki
i pozycjonuj elementy na stronie. Aby wykry
typ przegldarki, mona uy tej samej
techniki (zobacz Sprawdzanie nazwy i wersji
przegldarki w rozdziale 12.) i udostpni
kadej przegldarce odpowiedni arkusz
stylw.

Rozwizania JavaScript pokazanego w tym

podrozdziale mona uy take w innych

celach. Jeli chcemy udostpni rne
arkusze stylw w zalenoci od preferencji
odwiedzajcego, mona uy cookie, aby
nadzorowa, jakie arkusze stylw s
adowane. Skrypt umoliwia projektantowi
i odwiedzajcemu stron duo wiksz
kontrol nad tym, jak wywietlona jest
strona, a projektant nie musi tworzy
nowych stron dla kadej wersji.

385

Tworzenie arkuszy stylw...


#

 $
/1%

$
103083%

* $
:223%
&

4.  ()

&* '+'
, -.

Rozdzia 22.

Tworzenie nagwkw
Kolejna rzecz, irytujca projektantw, to
tworzenie nagwkw za pomoc grafiki, co
najczciej oznacza tworzenie nowej grafiki dla
kadego nagwka. Wykorzystujc waciwo
ta CSS, mona stworzy wiele rnych tytuw
bez koniecznoci tworzenia nowego pliku dla
kadego z nich. Takie rozwizanie ma
dodatkow zalet, polegajc na tym, e nie
wyduamy czasu pobierania strony przez
umieszczenie tekstu w plikach graficznych.

Aby stworzy nagwek

z graficznym tem:

Tworzenie nagwkw

1. / 
0


W programie graficznym stwrz i zapamitaj

to. Nazwij ten plik np. / 
0

 (rysunek 22.6).
2. 1

Dodaj regu CSS dla znacznika
1 (kod

22.5) z przypisan klas  (zobacz
Definiowanie klas w celu stworzenia
wasnych znacznikw w rozdziale 2.).
Docz waciwo ta i zadeklaruj uycie
grafiki stworzonej w punkcie 1. (zobacz
Ustawianie ta w rozdziale 6.).
Uwaga: Klasy zdefiniowanej w punkcie 2.
nie trzeba nazywa ; moemy uy
dowolnej innej nazwy.

Rysunek 22.6. Grafika, ktra wypeni to nagwkw

Kod 22.5. Zastosowanie grafiki w tle nagwkw

jest proste, a moliwoci s nieskoczone



 


3
0 

12333333
-/

14
-

1.5$%
-
1)
67
6
(

6
-


4!-12
$
10$%
4
1
.$2333333
$

1

(

/
1553$%
0 $

4!14!
4!8



-
$

14.9$%
(

6-


1/


/
1533$%
$
1.3$%

#

$
 
2=
7 %

9 $
183%

* $
=22%
&



 

 
 0"
"':7;<=)>> 4'
7,;
- &0'

,

*

 


 0"$
"':7;<=)>> 4'
7,;
- &0'

, 
*



!
! 

 

 


!


 



386

Ukad strony internetowej

3.
1 ##23456)77
/
3+
4-
'1

Od tej chwili zawsze, gdy bdziemy uywa

w dokumencie nagwka trzeciego stopnia
i dodamy do niego atrybut  z klas,
ktr zdefiniowalimy w punkcie 2., to
w jego tle zostanie wywietlona grafika
(rysunek 22.7).

Rysunek 22.7. Dwa przykady nagwka. W celu

uzyskania innych efektw mona poeksperymentowa
z rnymi grafikami, ramkami, a nawet z innym
dopenieniem

Wskazwki

To dla pozostaych poziomw nagwkw
mona stworzy w taki sam sposb. Mona
uy dla nich tej samej lub innej grafiki
poprzez zgrupowanie selektorw (zobacz
Definiowanie znacznikw z t sam regu
w rozdziale 2.).

Mona eksperymentowa z rnymi grafikami

Rysunek 22.8. Obydwa nagwki (About the

Site i Reading the Code) s tekstem HTML
z grafik w tle

387

Tworzenie nagwkw

w tle. Grafik dla ta, ktre stworzyem dla

jednej ze swych witryn, by gradient, ktry
zaczyna si pewnym kolorem po lewej
i stopniowo przechodzi w kolor ta po
prawej stronie (rysunek 22.8).

Rozdzia 22.

Tworzenie nagwka
o ustalonej pozycji

Tworzenie nagwka o ustalonej pozycji

Najwaniejsz zasad dobrego projektu jest

informowanie ludzi o tym, gdzie si znajduj.
Niestety, strony si przewijaj, a wane
informacje na temat ogldanej strony (takie jak
na przykad tytu strony) zazwyczaj przewijaj
si na sam gr i staj si niewidoczne.
Wykorzystujc CSS, mona ustali pooenie
tytuu na grze strony tak, by by zawsze
widoczny i informowa, w ktrym miejscu
witryny znajduj si odwiedzajcy bez
wzgldu na to, jak zostaa przewinita strona
(rysunek 22.9).
Jednak trzeba mie na uwadze, e Internet
Explorer 4 (dla Windows i MacOS) i 5 (dla
Windows) oraz Netscape Navigator 4 i 6 (dla
Windows i MacOS) nie obsuguj ustalonej
pozycji. Jedyna przegldarka, ktra obsuguje
ten typ pozycjonowania, to Internet Explorer 5
dla systemu MacOS.

Aby stworzy nagwek

o ustalonej pozycji:
1. 8


Rozpocznij list deklaracji selektorem klasy

lub identyfikatora. W tym przykadzie
stworzyem identyfikator o nazwie 

(kod 22.6).
2. 9&
!

Wpisz nazw waciwoci  i przypisz

jej warto &
.
3. 9
!

Dodaj do listy pozostae deklaracje, ktre

chcesz zastosowa przy tworzeniu nagwka.
W tym przykadzie zostanie wywietlony
czerwony tekst na szarym tle.

388

Rysunek 22.9. Pomimo e tekst zosta przewinity,

nagwek pozosta u gry okna przegldarki

Ukad strony internetowej

Kod 22.6. Styl nagwka o ustalonej pozycji zosta
przypisany do identyfikatora, ktry zosta nastpnie
nadany znacznikowi <div>

Zakocz list deklaracji zamykajcym

nawiasem klamrowym ().
5.

(
#
#
37
:


';<:2
'
(

Dodaj identyfikator do odpowiedniego

elementu. W tym przypadku do stworzenia
tytuu strony wykorzystaem znacznik

(.
Wskazwki

Naley pamita, e ta technika nie bdzie
dziaaa we wszystkich przegldarkach.
Przegldarki nie rozpoznajce tego typu
pozycjonowania traktuj nagwek tak,
jakby by elementem statycznym i przewijaj
go wraz z pozosta zawartoci strony.
Pozostaa cz formatowania CSS bdzie
dziaa.

Chocia byoby wspaniale, gdyby mona

byo umieszcza odnoniki w nagwku

o niezmiennej pozycji, to bd w Internet
Explorerze 5 dla MacOS powoduje, e
elementy o ustalonej pozycji s prawie
bezuyteczne (zobacz notatk Czy jest
niezmienna? w rozdziale 8.).

389

Tworzenie nagwka o ustalonej pozycji



 


3
2


1

-/

14
-

1.9$%
-
1";

?
/= "6@

6
;

6


4!-12
$
1A$%
$

1
%

-

%1.333
$13$%

13$%
/
1..3B
(

4

1(

4




 

 
 
(
"

"'

'7

>
 &
'CD
/

:
 &
('

 

>)>
! 

 



* 




 2?
* 122
0
  2
 "





*


 


>,

*


 *
@>


"



* 


 


 



4. 

Rozdzia 22.

Tworzenie bocznego menu

Boczne menu s chyba najczciej stosowanym
sposobem umieszczania narzdzi do nawigacji.
Tradycyjnie tworzono szerok grafik ta,
zawierajc to bocznego menu i to obszaru
zawartoci. Jednak wykorzystujc CSS,
wystarczy stworzy duo mniejsz grafik,
majc szeroko wyczenie bocznego menu
i uy wartoci -, aby wypeni to
bocznego menu obrazkiem powielanym w pionie
przy lewym brzegu okna przegldarki. Technika
ta zmniejsza czas pobierania strony poprzez
zmniejszenie wielkoci pliku grafiki ta.

Rysunek 22.10. Grafika ta wykorzystana

do stworzenia bocznego menu o szerokoci
160 pikseli

Aby stworzy boczne menu:

Tworzenie bocznego menu

1. / 
0


Stwrz grafik cienki pasek o szerokoci

takiej, jaka jest przeznaczona dla menu
(rysunek 22.10).
2. /
/ 
98 
/ 
0
-!

W dokumencie stwrz regu dla selektora

znacznika
/
 i zadeklaruj wykorzystanie
grafiki utworzonej w punkcie 1. oraz to, e
powinna by powielana jedynie wzdu osi
Y (zobacz Ustawianie poszczeglnych
waciwoci ta w rozdziale 6.). Take tutaj
mona zadeklarowa kolor ta dla pozostaej
czci strony (kod 22.7).
3. Wykorzystaj tabele lub pozycjonowanie

CSS, aby stworzy lew kolumn, w ktrej

znajdzie si zawarto bocznego menu,
i praw kolumn dla pozostaej treci.
W tym przykadzie stworzyem dwie
pozycjonowane bezwzgldnie kolumny,
jedn z przeznaczeniem na menu, a drug na
zawarto (rysunek 22.11).
Wskazwka

Mona eksperymentowa z rnymi grafikami
i rnymi efektami. Mona wyprbowa
powtarzanie grafiki w poziomie (-&),
aby zamiast bocznego menu stworzy
nagwek. Moliwoci s nieskoczone.

390

Rysunek 22.11. Grafika bocznego menu wypenia

lew cz ekranu do samego dou strony, a kolor
ta wypeni pozosta cz ekranu po prawej
stronie

Ukad strony internetowej

Kod 22.7. Stwrz boczne menu, uywajc grafiki ta i tworzc na stronie dwie kolumny

Tworzenie bocznego menu



 


3
4
4!124!8



$
-
2

4
$

14

$1.3$%

103$%
/
1.A3$%
2

$

14

$1.3$%

1.EA$%



 

 
 
(
"

4"'

0-!
0


 A
* :B
?
 '
 


 A  
* :B
?
 <  
 


 A 
* C1
CB
 < 
 


 A
* :B
?
 <
 


 A 
* C1
CB
 .
 


 A 
* C1
?

 ,
 &
('
 
(
"
"'

+0-
  
*
"
+0

>)> 



97
7>

"%
>!
 >


 !


>


>
3 D>


-
,! 


3!


>E7>

"7
>*
 
F 

!>


>"
*D>


-
,! 


> 
@>

"
 

 &
('

 



391

Rozdzia 22.

Ustawianie dynamicznego
nagwka i stopki

Ustawianie dynamicznego nagwka...

Z duymi witrynami wie si jeden problem

trudno jest zmieni ich wygld, gdy ju si je
utworzyo.
Moja witryna prezentuje okoo stu artykuw,
ktre napisaem na przestrzeni kilku lat. Nie
jestem guru baz danych, dlatego przechowuj je
jako statyczne strony HTML, ale zawsze
lubiem od czasu do czasu zmieni wygld
witryny. A wic, zamiast umieszcza nagwki
i stopki bezporednio na stronie, wykorzystuj
JavaScript do zapisania ich w odpowiednim
miejscu. Aby przekaza tytu, dat i inne
informacje na temat artykuu do zewntrznego
skryptu, wykorzystuj zmienne (zobacz
Uywanie zewntrznych plikw JavaScript
w rozdziale 23.).

Aby stworzy dynamiczny nagwek

i stopk:
1. 
"

Stwrz zewntrzny plik JavaScript i zapisz go

jako 
". Plik w punkcie 4. zostanie
zaimportowany na gr strony 
&.
W pliku dodaj metody
 : ,
aby zapisa cay kod HTML nagwka strony.
Dodatkowo nagwek bdzie uywa
zmiennych (
&), aby doda tytu,
podtytu, sentencj i dat (kod 22.8).
2. "

Stwrz zewntrzny plik JavaScript i zapisz

go jako ". Plik w punkcie 4. zostanie
zaimportowany na d strony index.html.
W pliku dodaj metody
 :
, aby zapisa cay kod HTML stopki
strony. W tym przykadzie stopka wywietla
tytu strony (ten znajdujcy si pomidzy
znacznikami
 w nagwku dokumentu,
a nie warto zmiennej ) oraz adres
URL strony, a take odnonik do strony
o prawach autorskich oraz odnonik 
(kod 22.9).

392

Kod 22.8. Ten plik JavaScript jest importowany

na gr dokumentu index.html, aby stworzy
nagwek dokumentu
!* 
G>
>H
!* 
GH
!* 
G>
>H
!* 
G>
0>H
!* 
G!,H
!* 
G>
0>H
!* 
G>
>H
!* 
G H
!* 
G>

 
 


$
2
 >H
!* 
G 
I
>
>
I

I
>
>
I
H
!* 
G>
>H

Kod 22.9. Ten plik JavaScript jest importowany

na d dokumentu index.html, aby stworzy stopk
dokumentu
!* G>
 
 

 >H
!* G>

 >H
!* G>
,$

>
I
 !H
!* G>
 >H
!* G>
J(.$



 >
I

I
>>
I

I
>
>
H
!* G>
 >H
!* G>

 !3  
K%

BB?91222

"
+(LF$MN*   ;

 
,!
"
"

  >
H
!* G>

 >H

Ukad strony internetowej

Kod 22.10. Oto przykadowa strona internetowa
(index.html), importujca nagwek i stopk. Zawiera
take kilka zmiennych JavaScript, dodajcych do
nagwka dokumentu tytu, podtytu, sentencj i dat

W znaczniku
 w nagwku

dokumentu, w ktrym chcemy doda
nagwek i stopk, dodajmy zmienne, takie
jak: ,  /4, ,
=, =
i =. JavaScript wykorzysta te zmienne
przy zapisywaniu nagwka (kod 22.10).
4.
 #
"#
'

W znaczniku
/
 strony HTML dodaj
znaczniki
 z atrybutem rda,
ktrego warto stanowi adres URL
zewntrznych plikw JavaScript,
zawierajcych nagwek i stopk
(rysunek 22.12).
Wskazwki

W nagwku i stopce mona umieci
dowolny kod HTML. Na przykad w mojej
witrynie ca nawigacj umieszczam
w zewntrznym pliku JavaScript takim,
jak te w tym przykadzie. Umoliwia mi to
dodawanie i usuwanie elementw nawigacji
bez koniecznoci zmieniania kadej strony
w witrynie.

Zmienne w punkcie 3. s tylko przykadem

typu informacji, jakie mona doda do

poszczeglnych stron HTML, uywajc
importowanego globalnego pliku JavaScript.
W taki sposb mona doczy kady typ
danych na temat artykuu, takich jak: rocznik,
numer wydania lub jego pooenie w witrynie.

Rysunek 22.12. Kocowy wygld strony

z dynamicznie stworzon stopk i nagwkiem.
Poniewa kodu nagwka i stopki nie umieszczamy
na stronie, moemy zmieni jej ukad w plikach
JavaScript, a zmiany zostan naniesione na kadej
uywajcej ich stronie HTML

393

Ustawianie dynamicznego nagwka...



 

 


+;
C



<+
4;

+>/

#
+


+;


!

64



>!/
/


/ 

+
F
+3.+
F
+G+
F
+H33.+

 



  !

 

 
 
$"

 I"' &
$'

@99
'

99

L
O!
 7
O!

7

 

 D


@99
L

99
 
$"
 I"' &
$'

 



3.  #4;5

#!

Rozdzia 22.

Tworzenie wasnych
obramowa" ramek

Tworzenie wasnych obramowa! ramek

W uywaniu ramek najbardziej denerwuje

projektantw przestarzay wygld obramowa
standardowo umieszczanych pomidzy ramkami
(rysunek 22.13). Jednak uywajc waciwoci ta,
mona stworzy ramki w dowolnym stylu, jaki
tylko moemy sobie wymarzy (rysunek 22.14).
Chocia takie obramowania mog zosta
umieszczone jedynie wzdu lewego lub
grnego boku pojedynczej ramki, to i tak s
bardzo poyteczne przy zaznaczaniu granic
pomidzy poszczeglnymi ramkami.

Rysunek 22.13. Dokument podzielony na ramki,

z wywietlonym domylnym obramowaniem

Aby stworzy obramowanie ramki:

1. /


Stwrz grafik, ktr wykorzystasz do

obramowania ramki. W tym przykadzie
korzystam z ornamentu, ktry zapamitaem
jako /
 (rysunek 22.15). Moecie
uy dowolnej grafiki, jaka si wam podoba.
2. 
&

Stwrz dokument podzielony na ramki

i upewnij si, e wyczye domylne
obramowanie:
/
 %>% %>%
/
 %%

Zapisz ten zestaw ramek jako index.html

(kod 22.11).

Rysunek 22.14. Dokument podzielony na ramki ze

stworzonym przy uyciu CSS rozdzielajcym ramki
obramowaniem w postaci czerwonego ornamentu
Rysunek 22.15. Dwie grafiki
wykorzystane do stworzenia
obramowania w prawej i dolnej
ramce. Mona wykorzysta dowoln
grafik, a wic zaszalejmy!

394

Ukad strony internetowej

Kod 22.11. Dokument podzielony na ramki



 
*P7=2
  2
 2
   

 
P782
  2
 2
   

 
  A 
 
 Q

 
  A 
 
 Q

 

 
 A 

 Q
 

 





 


3
4
4!1/

4
H 


$
-



 

 

=,
R

=


* B2S




 /
)



 



Wykorzystaj waciwo / 

w znaczniku
/
 dokumentu HTML
(kod 22.12 i 22.13), aby umieci grafik
ornamentu stworzon w punkcie 1. w tle
odpowiednich ramek (patrz rysunek 22.14).
Powiel grafik albo w pionie (-),
albo w poziomie (-&) (zobacz
Ustawianie ta w rozdziale 6.).
Wskazwki

Technika sprawdza si tylko przy ustawianiu
obramowania na grze ramki lub po jej lewej
stronie. Nie mona ustawi obramowa na
obu brzegach jednoczenie, na dole lub po
prawej stronie ramki.

Wygld obramowania moe by dowolny

i moe by dowolnie duy. Naley tylko

pamita, e obrazek powielany jest
w okrelonym przez nas kierunku.

Takie obramowania maj jedn ogromn

wad w porwnaniu z domylnym stylem

obramowania. Ani autor, ani odwiedzajcy
nie moe uy tych obramowa, aby zmieni
wielko ramki.

Kod 22.13. Ramka z poziomym obramowaniem



 


3
4
4!1
(
4
. 


$
-%3$%3



 

 

0
T
9
" 
 

 
0

 



395

Tworzenie wasnych obramowa! ramek

Kod 22.12. Ramka z pionowym obramowaniem

3. 0

Rozdzia 22.

Otwieranie
i zamykanie ramek

Otwieranie i zamykanie ramek

Wad ramek jest to, e monopolizuj obszar

ekranu poprzez umieszczanie na nim na stae
tytuw i menu. Jeli posiadamy duy monitor,
moe dziaa to znakomicie. Jednak osoby
majce mniejsze monitory mog wystraszy si
tym, co zobacz.
Oto technika, ktr opracowaem, wykorzystujca
zagniedone zestawy ramek oraz troch
skryptu JavaScript, aby otworzy i zamkn
menu znajdujce si w ramce (rysunki 22.16
i 22.17). Gdy menu jest zamknite, obszar
zawartoci okna moe wykorzysta dowoln
potrzebn przestrze.

Rysunek 22.16. Menu jest zamknite

Rysunek 22.17. Menu jest otwarte

396

Ukad strony internetowej

Kod 22.14. Dokument podzielony na ramki
wykorzystane do stworzenia ukadu strony

Aby stworzy zamykajce si ramki:

1. 
&



 

*087P
  2
 2
   

 
  
   
 
   
 Q
 +13
  13

 

 !A 
 * 2
 2
   

 



Stwrz gwny zestaw ramek. W tym

przykadzie stworzyem dwie ramki: 

i  (kod 22.14 i rysunek 22.18).
Ramka o nazwie 
 bdzie statyczna
(nie zmienia swojego rda) i bdzie
zawiera plik header.html z wikszoci
JavaScriptu, potrzebnego nam do wykonania
tego efektu. W ramce  pocztkowo
zaadowana jest strona  0,
ktra take podzielona jest na ramki.
Nastpnie rdo ramki zamieniane jest na
stron  0, aby przeczy
wygld na wersj z otwartym menu.

Stwrz zestaw ramek, dzielcy stron na

dwie kolumny, i zapisz go jako  0
 (kod 22.15 oraz rysunek 22.19).
Pierwsza ramka o nazwie  zawiera
plik , druga nazwana
? pocztkowo zawiera stron
.
Rysunek 22.18. Zestaw ramek pliku index.html

Kod 22.15. Zestaw ramek, ktry zostanie

zaadowany do ramki o nazwie content na stronie
index.html, gdy menu jest zamknite



 

187P
  2
 2
   

 
 
  
 * 2
 2
 
   
 Q

 
1
 
 * 2
 2
 !
   

 



Rysunek 22.19. Podzielona na ramki strona

nomenu_frames.html zostanie zaadowana do ramki
o nazwie content na stronie index.html wtedy,
gdy menu jest zamknite

397

Otwieranie i zamykanie ramek

2.  0

Rozdzia 22.
3.  0

Otwieranie i zamykanie ramek

Stwrz zestaw ramek, dzielcy stron na

trzy kolumny, i zapamitaj go jako
 0 (kod 22.16 i rysunek
22.20). Druga i trzecia ramka w tym
zestawie s identyczne jak zestaw ramek
z pliku nomenu_frames.html. Pierwsza ramka
ma szeroko 150 pikseli i wywietla plik
 . Odwiedzajcy bd mogli
przecza si pomidzy dwoma zestawami
ramek, utworzonymi w punkcie 2. i 3.,
w zalenoci od tego, czy bd chcieli,
by menu byo otwarte, czy nie.

Kod 22.16. Podzielony na ramki dokument

adowany jest do ramki content pliku index.html,
gdy menu jest otwarte



 

227187P
  2
 2
   

 
!
 !
 * 2
 2
 
   
 Q

 
 
  
 * 2
 2
 
   
 Q

 
1
 
 * 2
 2
 !
   

 

+,-.

Rysunek 22.20. Podzielona na ramki strona

menu_frames.html adowana jest do ramki content
na stronie index.html, gdy menu jest otwarte

398

Ukad strony internetowej

Kod 22.17. Dokument HTML wykorzystany w ramce
header na stronie index.html. Zawiera funkcj
menuToggle(). Gdy funkcja zostanie uruchomiona,
zamyka lub otwiera ramk menu

Stwrz plik HTML, ktry bdzie

wykorzystany w ramce o nazwie 

w pliku stworzonym w punkcie 1. i zapamitaj
go jako 
 (kod 22.17). Funkcja
 4  jest kluczow funkcj na tej
stronie. Wykonywana jest wtedy, gdy
odwiedzajcy kliknie odnonik Menu
w pliku control.html. Funkcja najpierw
sprawdza, jaki dokument jest zaadowany
do ramki ? i przechowuje ten URL
jako zmienn $62. Nastpnie
sprawdza, czy menu jest widoczne i zmienia
zestaw ramek na  0 albo
na  0. Zmienna $
zapisuje stan menu: > (zamknite) lub .
(otwarte).

399

Otwieranie i zamykanie ramek



 

 
!;  
(
#
3
(
#=:


;



#
3

#=:
$
 
 
H 
 

$ 
 

+
8
  +

#
.







#=:
$
 
 
H 
 

$ 
 

+
8
  +

#
3





 



3
1
# $
 %
9*$
 %
9
Q$
1=3%
9$
, !
-7
" 7
+ 7
6 7
9 %&
 
# ! 9 $
/000%
&



 

 

1* L5T)(R5-L5,
1

 



4. 


Rozdzia 22.
5.  

Stwrz plik HTML, ktry bdzie wywietlany

wtedy, gdy menu bdzie otwarte i zapisz go
jako menu.html (kod 22.18). Ja w przykadzie
uyem odnonikw HTML, jednak w pliku
tym mona umieci dowoln zawarto
HTML. Wszystkim odnonikom powinno
si przypisa ramk, w ktrej maj zosta
wywietlone ( %?%).

Otwieranie i zamykanie ramek

6. 

Stwrz plik HTML, ktry zostanie

wykorzystany w ramce  i zapisz go
jako  (kod 22.19). Plik zawiera
odnonik, ktry gdy zostanie kliknity
uruchamia funkcj  4 
z punktu 4.

Kod 22.18. Dokument HTML zawierajcy menu,

ktre bdzie wywietlane w ramce o nazwie menu
w pliku menu_frames.html. Dokument moe
zawiera dowoln zawarto HTML



 


3
 
# $
 %
$

131=3
, !
-7
" 7
+ 7
6 7
9 %
 ! 9 $
%&
$
# $
*%
39  $
%
&
$ 
# $
*%
39  $
!  %
&
$ 
# $
  %
39  $
!  %
&
$ 
# $
*%
39  $
%
&



 

 


 
 1+

 


 
 1<


 


 1
 1<
1

 


 0
 1<
0

 

 



Kod 22.19. Dokument HTML wykorzystany w ramce

o nazwie control w pliku menu_frames.html
i nomenu_frames.html. Plik zawiera odnonik,
uruchamiajcy funkcj menuToggle(), umieszczon
w pliku header.html



 


 


 M  $  !,GH%


 -!
* 12
22
  2



  

 



400

Ukad strony internetowej

Kod 22.20. Plik jest pocztkowo wywietlany
w ramce content2 w plikach menu_frames.html
i nomenu_frames.html. JavaScript, znajdujcy si
w pliku, sprawdza adres URL strony, ktra bya
wywietlona, zanim menu zostao zmienione
(zapisany w zmiennej contentSRC w pliku
header.html) i aduje stron w t ramk

Stwrz stron HTML, zawierajc kod

22.20. Strona ta jest krokiem porednim
i nigdy nie jest zbyt dugo widoczna na
ekranie. Kontroluje tylko, jaki dokument by
zaadowany do ramki ? poprzez
sprawdzenie wartoci przypisanej zmiennej
$62 zapisanej w ramce 
,
i zaadowuje ten dokument. Jeli wczeniej
nie by w niej wywietlony aden plik (na
przykad strona jest adowana po raz
pierwszy), to adowany jest plik home.html.
8. 

Stwrz wszystkie strony dla witryny

(kod 22.21). Wszystkie bd wywietlane
w ramce ?.
Wskazwki

Technika umoliwia odwiedzajcemu stron
otwarcie i zamknicie menu nawigacyjnego,
bez zgubienia miejsca, w ktrym znajdowa
si w witrynie.

W zamykanej ramce nie musi znajdowa si

menu. T technik zastosowaem w intranecie

pewnej organizacji do stworzenia kalendarza
zdarze, ktry mg by otwierany
w dowolnym momencie.

Ze wzgldu na pewne ograniczenia zwizane

z bezpieczestwem, w Internet Explorerze

i Netscape Navigatorze nie mona otwiera
lub zamyka menu, gdy ramka ?
zawiera dokument spoza serwera, na ktrym
znajduje si witryna, a wic nie mona
wykorzystywa zawartoci z innych witryn.

401

Otwieranie i zamykanie ramek



 

 
!;  
(
#=:


$
:


#=:$ 

 
#=:


#=:
 

+
 +



 

#=:


 

 

 
"
$
:
"

 



7. 

Rozdzia 22.

Zachowanie podziau strony na ramki

Zachowanie podziau strony

na ramki
Wyobramy sobie, e czytamy ksik.
Wieczorem, koczc czyta, wkadamy
zakadk na stron, ktr przeczytalimy jako
ostatni i odkadamy ksik. Nastpnego
wieczoru podnosimy ksik i chcemy
rozpocz czytanie w miejscu, w ktrym
poprzednio skoczylimy. Jednak przez jakie
dziwne okolicznoci zakadka w rzeczywistoci
znalaza si z powrotem za okadk, a my
musimy przekartkowa wczeniej przeczytane
strony, aby znale miejsce, w ktrym
skoczylimy. Jeli tworzymy stron przy
uyciu ramek, to takie sytuacje mog spotka
rwnie naszych odwiedzajcych. Chc
umieci zakadk na jednej z wewntrznych
stron, ale okazuje si, e zakadka znalaza si
za okadk.
Powysza sytuacja nie jest jedynym problemem,
zwizanym z wywoywaniem stron podzielonych
na ramki. Co si stanie, jeli zechcemy w e-mailu
umieci odnonik do konkretnej strony wewntrz
witryny lub stworzy taki odnonik w innej
witrynie? Pewnie, mona wysa URL pojedynczej
strony, ale jeli wylemy odwiedzajcych do tej
konkretnej strony bez ramek, to bdzie tak,
jakbymy dali im ksik bez pozostaych stron
lub bez grzbietu. Mona by stworzy dokument
podzielony na ramki dla kadej ze stron osobno,
ale byoby to problematyczne i nieporczne.
Jest atwiejszy sposb. Co prawda nie moemy
zmieni sposobu, w jaki dziaaj ramki
i z pewnych powodw twrcy przegldarek
zignorowali te powane problemy ich
uywalnoci, ale moemy w naszej witrynie
zaimplementowa specjalne obejcie tego
problemu i pomc naszym odwiedzajcym
(rysunki 22.21 i 22.22).

402

Rysunek 22.21. Strona pocztkowo aduje si

normalnie, ale prawie natychmiast...

Rysunek 22.22. ...ekran mruga i strona, ktr

ogldalimy, znajduje si ju wewntrz
odpowiedniego zestawu ramek

Ukad strony internetowej

Kod 22.22. Ten may zewntrzny plik JavaScript
sprawia, e strona znajdujca si w ramkach bdzie
znajdowa si w nich nadal. Jak tylko zaaduje si
strona zawierajca ten kod, to zostanie przeadowana
i wywietlona w odpowiedniej formie strony
podzielonej na ramki
<

%

<

%

G<

<H
#

(

G<H%

 J(.

> 3D>
I
(%

 

 J(.%
&



 
!;  

#=:

 
 4
.J

 
 4
.1
+
:
  +

#=:
$

#=:
(/

K
++
/

K
L+ K=7,<#<;:*D#"M6AEA6M"
C*=F<="3"K=7,<#7:>?@"3"
K=7,<C*=F<="?*"'+
/

K
L+ K=7,<
#=:"

  "'+
/

K
L+ K=7,<#<;
=*#"A36M6A3"'+
/

K
L+ K=7,<
#=:"

  "'+
/

K
L+ K=7,<#=:"+L

#=:L+"?7,<"
"?*=<#>N<'+
/

K
L+ K=7,<
#=:"

  "'+
/

K
L+ &K=7,<#<;'+
/

K
L+ K=7,<
#=:"

  "'+
/

K
L+ &K=7,<#<;'+

 /

/

K


 



1. 
"

Stwrz zewntrzny plik JavaScript (zobacz

Uywanie zewntrznych plikw JavaScript
w rozdziale 23.) i zapisz go jako 
"
(kod 22.22). Dodaj skrypt, ktry najpierw
sprawdza, czy dokument jest zaadowany do
strony podzielonej na ramki (porwnujc
adres URL strony z adresem URL caego
okna). Jeli dokument jest zaadowany do
ramki, to adresy s rne i nic si nie dzieje.
Jeli adresy s takie same (strony nie otacza
aden zestaw ramek), to skrypt czy URL
strony podzielonej na ramki, w ktrej
powinna znajdowa si strona (w tym
przypadku 
&), z adresem URL
samej strony (zmienna ), oddzielajc te
dwa adresy URL od siebie za pomoc znaku
zapytania (?). Funkcja koczy swoje dziaanie,
zmieniajc stron na now, ktrej adres
podany jest w zmiennej @6<.
2. 
&

Stwrz dokument podzielony na ramki, uyj

JavaScriptu, aby zapisa kod HTML na
stronie i zapamitaj plik jako index.html
(kod 22.23). JavaScript wydobywa adres
URL strony, ktra ma by zaadowana do
ramki  z adresu URL strony, ktra
jest aktualnie zaadowana. Jeli znak
zapytania (?) pojawia si w gwnym adresie
strony, to skrypt uywa czci URL,
znajdujcej si za znakiem zapytania, jako
rda ramki content zapisanej w zmiennej
$62. W przeciwnym razie skrypt
wykorzystuje domylny URL, w tym
przypadku jest to plik defaultContent.html,
ale moemy w tym miejscu wykorzysta
dowolny plik.

403

Zachowanie podziau strony na ramki

Kod 22.23. Zestaw ramek nie jest kodowany

bezporednio w HTML-u, ale jest kodowany przy
uyciu metody JavaScript document.write, tak bymy
mogli doda zmienne do HTML-a

Aby automatycznie umieci stron

HTML wewntrz odpowiedniego
zestawu ramek:

Rozdzia 22.
3. 

Stwrz strony, ktre bd wywietlane

w witrynie (kody 22.24 i 22.25). Podcz
zewntrzny plik JavaScript stworzony
w punkcie 1. w znaczniku

 wszystkich
dokumentw, ktre chcesz dynamicznie
umieszcza w ramce  w zestawie
ramek:

Zachowanie podziau strony na ramki

 #
"#
'

Wskazwki

Jeli chcemy skierowa kogo bezporednio
do jakiej strony wewntrz naszej witryny,
wystarczy wysa tej osobie URL do
dokumentu stworzonego w punkcie 2.
(
&). Strona automatycznie umieci
si w odpowiedniej ramce, jeli tylko bdzie
do niej zaimportowany plik 
", jak
pokazano w punkcie 3.

Gdy odwiedzajcy pody za odnonikiem

do jednej z tych stron i umieci tam zakadk,

to powrci do tej strony, znajdujcej si
wewntrz otoczenia pozostaych ramek.

Netscape Navigator dla Windows i Internet

Explorer dla MacOS i Windows umoliwiaj

zaoenie strony w zestawie ramek poprzez
kliknicie i przytrzymanie przycisku (MacOS)
lub nacinicie prawego przycisku myszy
(Windows) i wybranie odpowiedniej opcji
z wyskakujcego menu. Jeli odwiedzajcy
zaoy stron wewntrz struktury ramek
stworzonej przy uyciu pokazanej tu techniki,
to gdy powrci do strony przez zakadk
strona zaaduje si do ramek automatycznie.

Technika nie rozwizuje wszystkich

problemw zwizanych z zakadaniem stron

w ramkach, ale dopki twrcy przegldarek
nie skoordynuj swoich wysikw,
niewtpliwie pomoe zwikszy uyteczno
stron w ramkach.

404

Kod 22.24. Ta strona jest adowana, jeli w adresie

URL nie znajduje si znak zapytania (?). Do strony
zaimportowany jest zewntrzny plik frames.js,
wymuszajcy w razie koniecznoci umieszczenie
strony w ramkach



 
 
$"
 I"' &
$'



  !

 

 

1<

1

 



Kod 22.25. Strona zawiera podczenie do kodu

frames.js



 
 
$"
 I"' &
$'



  !

 

 

1<
1
1

 



Ukad strony internetowej

Dobry wygl&d w druku

(w Sieci)
Nie spotkaem jeszcze nigdy biura, w ktrym
w ogle nie korzystano by z papieru i bybym
zaskoczony, gdybym do takiego trafi. Ale
wraz z nadejciem komputerw przysza
obietnica wyeliminowania papieru z naszego
ycia koniec z zapchanymi i zagraconymi
szafkami, koniec wycinania drzew tylko
wolna od entropii utopia, w ktrej s bez
przerwy utylizowane i ponownie
wykorzystywane elektrony, dokadnie
tak jak w Star Treku.

Dobry wygl%d w druku (w Sieci)

Ale co mi mwi, e zanim uda si nam

wyeliminowa z naszego ycia papier,
odkryjemy technologie, pozwalajce
podrowa do najbardziej oddalonych
gwiazd.
Wraz z pojawieniem si drukarek laserowych
i atramentowych zaczlimy zakopywa si
w hadach doskonaych wydrukw. Wydaje
si, e Sie wpywa nawet na zwikszenie
liczby robionych przez nas wydrukw. Jeli
strona jest dusza ni par przewini,
wikszo osb drukuje j.
Ale Internet zosta stworzony, aby wywietla
informacje na ekranie, a nie na papierze.
Grafiki uywane w Sieci wygldaj w druku
klockowato, a zwykemu HTML-owi
brakuje wiele do dobrej kontroli ukadu.
Moemy jednak poczyni kilka krokw, aby
poprawi wygld drukowanych stron. Dobry
wygld strony po wydrukowaniu moe
kosztowa nas troch wysiku, ale odbiorcy
bd nam za to wdziczni.

405

Rozdzia 22.
Oto osiem prostych zasad, ktre moemy
wprowadzi w ycie, chcc poprawi wygld
naszych stron po wydrukowaniu:

Uywajmy CSS. Kaskadowe arkusze stylw

s narzdziem projektowania internetowego.

CSS umoliwia tworzenie dokumentw
wygldajcych w druku tak samo dobrze,
jak te tworzone przy uyciu edytora tekstu.

Okrelajmy media. CSS pozwala zdefiniowa

rne arkusze stylw, ktre bd stosowane

w zalenoci od tego, w jaki sposb bdzie
pokazywana strona czy to na ekranie, czy
na papierze (zobacz Tworzenie arkusza
stylw dla wydrukw w rozdziale 2.).

Dobry wygl%d w druku (w Sieci)

Uywajmy podziaw strony, aby nagwki

byy drukowane wraz z tekstem, ktry

poprzedzaj. Chocia atrybut podziau
strony nie jest jeszcze szeroko obsugiwany
(zobacz Ustawianie podziau strony przy
drukowaniu w rozdziale 4.), to ju wkrtce
moe si sta uniwersalnym standardem.

Korzystajmy z ramek, aby oddzieli

nawigacj od zawartoci. Sprbujmy

umieszcza gwn tre (to, co chc
przeczyta nasi odbiorcy) w osobnej ramce.
Mona wtedy umieci nawigacj, tytuy
i ogoszenia w rnych ramkach. Umoliwi
to odwiedzajcym wydrukowanie tylko ramki
zawierajcej to, co ich interesuje
i nieprzejmowanie si reszt (zobacz
Otwieranie i zamykanie ramek wczeniej
w tym rozdziale).

Unikajmy korzystania z kolorw lub grafik

ta z jasnym tekstem. Chocia mog one

doda naszej stronie pewnego smaku,
wygldaj fatalnie na wydruku. Niektre
przegldarki umoliwiaj drukowanie
dokumentw bez ta, ale jasny tekst nie
bdzie widoczny na biaym tle papieru.

406

Unikajmy korzystania z przezroczystych

kolorw w grafikach, zwaszcza jeli

grafika znajduje si na tle innej grafiki lub
koloru ta innego ni biay. Przezroczysty
obszar w rysunkach GIF zazwyczaj
drukowany jest jako biay, bez wzgldu
na to, jaki kolor znajdowa si za nim
w oknie. Taka sytuacja nie sprawi kopotu,
jeli grafika znajduje si na biaym tle, ale
efekty wypadn koszmarnie, jeli grafika
znajdzie si na ciemnym tle.

Unikajmy uywania tekstu w grafice. Ironia

drukowania materiaw z Sieci polega na

tym, e tekst w grafice wygldajcy
dobrze w oknie wyglda strasznie
klockowato na papierze, ale zwyczajny
tekst HTML, ktry moe wyglda
klockowato na ekranie, drukuje si
dobrze na kadej przyzwoitej drukarce.
Starajmy si uywa tekstu HTML
wszdzie tam, gdzie to tylko moliwe.

Umiemy osobn, gotow do druku

wersj dokumentu. Zamiast zmusza

odwiedzajcych, aby podali za kadym
odnonikiem w naszej witrynie i drukowali
kad stron osobno, umiemy podobny
dokument, ktry odwiedzajcy mog
pobra i wydrukowa. Zastosowanie
Adobe Acrobata jest dobrym sposobem na
udostpnienie mniej wicej uniwersalnego
formatu plikw, ktry przy dostarczaniu
dokumentw przez sie zachowuje wikszo
stylw formatowania, czcionki i grafik.
Wicej na temat Acrobata mona dowiedzie
si na stronach internetowych Adobe
(www.adobe.com).