Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00373 009677 10453529 na godz. na dobę w sumie
Po prostu DHTML i CSS - książka
Po prostu DHTML i CSS - książka
Autor: Liczba stron: 592
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-569-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> css
Porównaj ceny (książka, ebook, audiobook).
W książce tej pokazano najlepsze sposoby wprowadzania w życie DHTML-a i CSS, umożliwiające obejrzenie tych stron jak największej liczbie osób myszkujących po Internecie. W celu lepszej organizacji informacji książka jest podzielona na cztery części:

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI Po prostu DHTML i CSS KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Autor: Jason Cranford Teague T‡umaczenie: Agata Bulandra ISBN: 83-7197-569-4 Tytu‡ orygina‡u: Web, 2nd Edition, Visual QuickStart Guide Format: B5, stron: 592 Przyk‡ady na ftp: 7771 kB DHTML and CSS for the World Wide W ksi„¿ce tej pokazano najlepsze sposoby wprowadzania w ¿ycie DHTML-a i CSS, umo¿liwiaj„ce obejrzenie tych stron jak najwiŒkszej liczbie os(cid:243)b myszkuj„cych po Internecie. W celu lepszej organizacji informacji ksi„¿ka jest podzielona na cztery czŒ(cid:156)ci: CzŒ(cid:156)(cid:230) 1. informuje, jak u¿ywa(cid:230) CSS, aby zapanowa(cid:230) nad wygl„dem zawarto(cid:156)ci stron internetowych. Poka¿Œ w‡a(cid:156)ciwe sposoby kontrolowania r(cid:243)¿nych aspekt(cid:243)w wygl„du strony. CzŒ(cid:156)(cid:230) 2. zajmuje siŒ sposobem wykorzystania obiektowego modelu dokumentu (DOM -- Document Object Model) wraz z CSS i JavaScriptem do stworzenia prostych funkcji dynamicznych. Poka¿Œ tak¿e, jak stworzy(cid:230) DOM, pozwalaj„cy na uruchomienie funkcji dynamicznych w wiŒkszo(cid:156)ci przegl„darek, maksymalnie ograniczaj„c przy tym ilo(cid:156)(cid:230) zbŒdnego kodu. CzŒ(cid:156)(cid:230) 3. skupia siŒ nad sposobem wykorzystania DHTML-a i CSS w dw(cid:243)ch najbardziej znanych programach do edycji stron internetowych: Adobe GoLive i(cid:160) Macromedia Dreamweaver. Chocia¿ nie musimy u¿ywa(cid:230) tych program(cid:243)w przy tworzeniu stron internetowych w technologii DHTML i CSS, to mog„ one u‡atwi(cid:230) nasze ¿ycie. CzŒ(cid:156)(cid:230) 4. pokazuje, jak przy u¿yciu DHTML-a i CSS zaprojektowa(cid:230) witrynŒ internetow„, opisuje tak¿e niekt(cid:243)re zastosowania tych technologii. Dodatkowo pokazuje, jak szuka(cid:230) b‡Œd(cid:243)w w kodzie oraz zapoznaje nas z dopiero pojawiaj„cymi siŒ technologiami. Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Spis treści Wprowadzenie Część I Kaskadowe arkusze stylów 13 23 Rozdział 1. Wprowadzenie do CSS 25 Czym jest styl? ...................................................l....................................... 27 Czym są kaskadowe arkusze stylów?...................................................l..... 28 Wersje CSS ...................................................l............................................ 31 Typy reguł CSS ...................................................l...................................... 33 Części składowe reguły CSS...................................................l.................. 34 Rodzaje znaczników HTML ...................................................l.................. 36 Rozdział 2. Podstawy CSS 39 Dodawanie CSS do znacznika HTML ...................................................l... 40 S p i s t r e ś c i Dodawanie CSS do strony internetowej...................................................l. 42 Dodawanie CSS do witryny internetowej ................................................. 45 (Re)Definiowanie znaczników HTML...................................................l... 51 Definiowanie klas w celu stworzenia własnych znaczników...................... 53 Definiowanie identyfikatorów w celu identyfikacji obiektów .................. 55 Tworzenie własnych znaczników elementów wewnętrznych ................... 57 Tworzenie własnych znaczników elementów blokowych ........................ 59 Definiowanie znaczników z tą samą regułą .............................................. 61 Definiowanie znaczników w kontekście ...................................................l 63 Tworzenie definicji !important...................................................l............... 65 Dziedziczenie właściwości od rodzica ...................................................l... 67 Zarządzanie istniejącymi i dziedziczonymi wartościami właściwości...... 69 Ustalanie kolejności w kaskadzie...................................................l........... 71 Tworzenie arkusza stylów dla wydruków ................................................. 73 Dodawanie komentarzy...................................................l.......................... 76 Strategie arkuszy stylów...................................................l......................... 77 5 Spis treści Rozdział 3. Sterowanie czcionkami 79 Podstawy typografii używanej w Sieci ...................................................l.. 80 Rodzaje prezentacji tekstu w Sieci ...................................................l......... 81 Ustawianie czcionki ...................................................l............................... 83 Pobieranie czcionek...................................................l................................ 85 Używanie czcionek właściwych dla przeglądarki..................................... 87 Ustawianie wielkości czcionki ...................................................l............... 89 Ustawianie kursywy ...................................................l............................... 91 Gruby, grubszy, najgrubszy ...................................................l................... 93 Tworzenie kapitalików ...................................................l........................... 95 Ustawianie kilku wartości dla czcionki...................................................l.. 96 i c l e r t s i p S Rozdział 4. Kontrolowanie tekstu 99 Dostosowywanie kerningu ...................................................l................... 100 Dostosowywanie odstępów między słowami.......................................... 101 Dostosowywanie interlinii...................................................l.................... 102 Ustawianie wielkości liter ...................................................l.................... 104 Wyśrodkowanie tekstu oraz wyrównanie do lewej, prawej strony ......... 105 Pionowe wyrównanie tekstu...................................................l................. 107 Tworzenie wcięć akapitów...................................................l................... 109 Dekorowanie tekstu...................................................l.............................. 111 Kontrolowanie pustej przestrzeni...................................................l......... 113 Ustawianie podziału strony przy drukowaniu ......................................... 115 Rozdział 5. Kontrolowanie list i kursorów 117 Tworzenie listy...................................................l..................................... 118 Ustawianie stylów znaków wypunktowania ........................................... 120 Tworzenie wcięcia list...................................................l.......................... 121 Tworzenie własnych znaków wypunktowania........................................ 122 Zmiana wyglądu kursora myszy...................................................l........... 124 Rozdział 6. Kontrolowanie koloru i tła 127 Ustawianie tła...................................................l....................................... 128 Ustawianie poszczególnych właściwości tła ........................................... 131 Określanie koloru pierwszego planu ...................................................l.... 136 6 Rozdział 7. Kontrolowanie ramek i marginesów Spis treści 137 Pudełko elementu — podstawowe informacje ........................................ 138 Ustawianie szerokości i wysokości elementu ......................................... 140 Ustawianie marginesów elementu...................................................l........ 143 Ustawianie ramek elementu ...................................................l................. 146 Ozdabianie ramek elementu ...................................................l................. 148 Ustawianie dopełnienia elementu...................................................l......... 151 Ustawianie ramek i marginesów tabeli ...................................................l 153 Oblewanie elementu tekstem..................................................l................. 155 Uniemożliwianie oblewania tekstem...................................................l.... 157 Określanie sposobu wyświetlenia elementu............................................ 159 Rozdział 8. Kontrola pozycjonowania 161 Okno — podstawowe informacje...................................................l......... 162 Ustawianie typu pozycjonowania...................................................l.......... 164 Ustawianie pozycji lewej i górnej ...................................................l........ 168 Ustawianie pozycji prawej i dolnej ...................................................l...... 171 Układanie obiektów w stos (pozycjonowanie trójwymiarowe)................. 173 Zagnieżdżanie elementu pozycjonowanego bezwzględnie w elemencie pozycjonowanym względnie ...................................................l................ 175 Zagnieżdżanie elementu pozycjonowanego względnie w elemencie pozycjonowanym bezwzględnie...................................................l........... 177 S p i s t r e ś c i Rozdział 9. Kontrolowanie widzialnolci 179 Ustawianie widzialności elementu ...................................................l....... 180 Ustawianie widocznego obszaru elementu (przycinanie) ......................... 182 Nadzór nad sposobem wyświetlenia pozostałej zawartości .................... 184 Część II Dynamiczny HTML Rozdział 10. DHTML — podstawowe informacje 187 189 Czym jest dynamiczny HTML? ...................................................l........... 190 Smaczki DHTML-a...................................................l.............................. 191 Dlaczego powinniśmy używać DHTML-a?............................................ 193 Flash kontra DHTML...................................................l........................... 195 7 Spis treści Rozdział 11. Obiektowy model dokumentu 199 DOM — plan strony internetowej...................................................l......... 200 Tworzenie obiektu...................................................l................................ 202 Procedury obsługi zdarzeń ...................................................l................... 203 Wykrywanie zdarzenia ...................................................l......................... 205 Jak działa DOM...................................................l.................................... 207 Sprawdzanie cech ...................................................l................................. 213 Sprawdzanie typu DOM...................................................l....................... 214 Tworzenie DOM zgodnego z różnymi przeglądarkami .......................... 216 Używanie DOM zgodnego z różnymi przeglądarkami ........................... 219 Netscape Navigator 4 a zagnieżdżane warstwy....................................... 221 Rozdział 12. Zbieranie informacji na temat lrodowiska 225 Sprawdzanie nazwy i wersji przeglądarki ............................................... 226 Sprawdzanie systemu operacyjnego...................................................l..... 228 Sprawdzanie wymiarów ekranu ...................................................l........... 230 Sprawdzanie ustawionej liczby kolorów ................................................. 232 Sprawdzanie wymiarów okna przeglądarki ............................................ 234 Sprawdzanie wymiarów widocznej części strony ................................... 235 Sprawdzanie tytułu i adresu strony ...................................................l...... 237 Sprawdzanie pozycji, do której została przewinięta strona ...................... 238 Sprawdzanie wymiarów obiektu ...................................................l.......... 240 Sprawdzanie górnej i lewej pozycji obiektu............................................ 242 Sprawdzanie dolnej i prawej pozycji obiektu.......................................... 244 Sprawdzanie kolejności nakładania się obiektów ................................... 246 Sprawdzanie stanu widzialności obiektu................................................. 248 Sprawdzanie widocznego obszaru obiektu.............................................. 250 Rozdział 13. Podstawowe techniki dynamiczne 255 Wyświetlanie i ukrywanie obiektów ...................................................l.... 256 Przesuwanie obiektu z miejsca na miejsce.............................................. 258 Przesunięcie obiektu o pewną odległość ................................................. 260 Zmiana wartości indeksu Z elementów...................................................l 262 Przewijanie strony internetowej ...................................................l........... 265 Zmiana widocznego obszaru obiektu ...................................................l... 267 i c l e r t s i p S 8 Rozdział 14. Zaawansowane techniki dynamiczne Spis treści 269 Powtórne uruchomienie funkcji ...................................................l........... 270 Przekazanie wydarzenia do funkcji ...................................................l...... 273 Globalna procedura obsługi zdarzeń ...................................................l.... 274 Animowanie obiektu ...................................................l............................ 276 Sprawdzanie umiejscowienia wskaźnika na ekranie ............................... 279 Rozpoznanie elementu na ekranie ...................................................l........ 281 Współpraca dynamicznej zawartości różnych ramek.............................. 283 Przesuwanie okna przeglądarki ...................................................l............ 286 Otwieranie nowego okna przeglądarki...................................................l. 288 Zmiana rozmiaru okna ...................................................l......................... 292 Rozdział 15. Techniki dynamiczne — CSS 295 Zmiana deklaracji ...................................................l................................. 296 Zmiana klasy obiektu ...................................................l........................... 298 Dodawanie nowej reguły...................................................l...................... 300 Unieważnianie arkusza stylów ...................................................l............. 302 Rozdział 16. Warstwy Netscape 305 Czym są warstwy Netscape? ...................................................l................ 306 Tworzenie warstwy ...................................................l.............................. 307 Importowanie zewnętrznej zawartości za pomocą warstw Netscape ...... 310 Uzyskiwanie dostępu do warstw przy użyciu JavaScriptu...................... 312 Modyfikowanie warstw za pomocą JavaScriptu ..................................... 316 Przeglądarki nie obsługujące warstw — umieszczanie treści ................. 318 Rozdział 17. Internet Explorer dla Windows 319 Przenikanie obiektu w obiekt ...................................................l............... 320 Przejście pomiędzy stronami...................................................l................ 321 Rozmywanie elementu ...................................................l......................... 323 Obiekty „falujące”...................................................l................................ 324 Część III Urywanie narzędzi DHTML i CSS 325 Rozdział 18. Elementarz GoLive 327 Interfejs GoLive ...................................................l................................... 328 Dodawanie CSS...................................................l.................................... 332 Dodawanie warstwy (pływającego pudełka)........................................... 336 Dodawanie animacji DHTML...................................................l.............. 338 9 S p i s t r e ś c i Spis treści Rozdział 19. Elementarz Dreamweavera 341 Interfejs Dreamweavera ...................................................l....................... 342 Dodawanie CSS...................................................l.................................... 346 Dodawanie warstwy ...................................................l............................. 350 Dodawanie animacji ...................................................l............................. 352 Część IV Dynamiczne witryny internetowe Rozdział 20. Podstawy dynamicznej Sieci 355 357 Co sprawia, że witryna jest dynamiczna? ............................................... 358 Co to jest hipertekst? ...................................................l............................ 360 Dynamicznie poprzez projekt...................................................l............... 361 Układ strony — podstawowe informacje ................................................ 362 Tworzenie nawigacji — o czym powinniśmy pamiętać, a czego powinniśmy unikać ...................................................l.............................. 365 Rozdział 21. Tworzenie dynamicznej witryny internetowej 369 Pierwszy krok — określ ...................................................l....................... 370 Drugi krok — zaprojektuj ...................................................l.................... 373 Trzeci krok — zbuduj ...................................................l.......................... 378 Rozdział 22. Układ strony internetowej 381 Naprawianie błędu implementacji CSS w Netscape Navigatorze........... 382 i c l e r t s i p S Tworzenie arkuszy stylów dla różnych systemów operacyjnych................ 384 Tworzenie nagłówków ...................................................l......................... 386 Tworzenie nagłówka o ustalonej pozycji ................................................ 388 Tworzenie bocznego menu...................................................l................... 390 Ustawianie dynamicznego nagłówka i stopki ......................................... 392 Tworzenie własnych obramowań ramek ................................................. 394 Otwieranie i zamykanie ramek...................................................l............. 396 Zachowanie podziału strony na ramki...................................................l.. 402 Dobry wygląd w druku (w Sieci) ...................................................l......... 405 Rozdział 23. Importowanie zewntrznej zawartolci 407 Łączenie znaczników ilayer i iframe .............................................. 408 Dołączanie po stronie serwera...................................................l................ 410 Używanie zewnętrznych plików JavaScript............................................ 411 Przeglądanie zewnętrznych skryptów innych autorów ........................... 412 10 Spis treści Rozdział 24. Nawigacja po witrynie 415 Ustawianie stylów odnośników...................................................l.............. 416 Ustawianie wielu stylów odnośników ...................................................l.. 419 Tworzenie rozwijanych list ...................................................l.................. 421 Tworzenie wysuwających się menu ...................................................l..... 426 Tworzenie zdalnego sterowania ...................................................l........... 429 Tworzenie rozwijanych menu ...................................................l.............. 433 Tworzenie wielopoziomowego menu ...................................................l.. 437 Nawigacja w przeglądarkach niedynamicznych ..................................... 443 Informowanie przeglądarki ...................................................l.................. 444 Rozdział 25. Obiekty sterujce 447 Tworzenie własnych suwaków...................................................l............. 448 Tworzenie własnego przycisku Wstecz .................................................. 455 Tworzenie pokazu slajdów...................................................l................... 456 Tworzenie wyskakującego hipertekstu ...................................................l 460 Używanie danych z formularzy w dynamicznych akcjach ......................... 463 Tworzenie formularzy kontekstowych ...................................................l. 465 Przeciąganie i upuszczanie obiektów ...................................................l... 468 Wymiana obrazków...................................................l.............................. 471 Tworzenie inteligentnych menu ...................................................l........... 476 S p i s t r e ś c i Rozdział 26. Efekty specjalne 481 Tworzenie inicjałów ...................................................l............................. 482 Tworzenie nieskomplikowanych cieni ...................................................l. 484 Tworzenie zaawansowanych cieni ...................................................l....... 486 Pojawianie się lub wygaszanie tekstu HTML ......................................... 489 Podążaj za kursorem myszy ...................................................l................. 493 Pływające obiekty ...................................................l................................ 497 Tworzenie przezroczystej grafiki w formacie PNG ................................ 500 Tworzenie zegara ...................................................l................................. 505 Rozdział 27. Multimedia 507 Dodawanie dźwięku ...................................................l............................. 508 Dodawanie animacji GIF ...................................................l..................... 510 Dodawanie animacji Flash ...................................................l................... 517 Dodawanie filmów ...................................................l............................... 523 Dodawanie apletów Javy...................................................l...................... 526 11 Spis treści Rozdział 28. Usuwanie błdów w kodzie 529 Identyfikowanie i usuwane usterek CSS ................................................. 530 Sprawdzanie kodu CSS ...................................................l........................ 533 Identyfikowanie i usuwanie usterek JavaScript ...................................... 535 Międzyprzeglądarkowe zagadki...................................................l............. 539 Rozdział 29. Przyszłolć dynamicznej Sieci 541 Dlaczego standardy są ważne? ...................................................l............. 542 Rozszerzalny język znakowania (XML) ................................................. 544 Rozszerzalny hipertekstowy język znakowania (XHTML) .................... 547 Język zsynchronizowanej integracji multimediów (SMIL) .................... 551 Skalowalna grafika wektorowa (SVG)...................................................l. 553 Co dalej: CSS poziom 3. ...................................................l...................... 554 Dodatki Dodatek A Przegldarki obsługujce DHTML-a i CSS 555 557 i c l e r t s i p S Internet Explorer ...................................................l.................................. 558 Netscape Navigator ...................................................l.............................. 559 Dodatek B Przegldarki obsługujce DHTML-a i CSS 561 Krótki przegląd...................................................l..................................... 562 Dodatek C 571 DHTML — krótka lciga Słowa zastrzeżone ...................................................l................................ 574 Skorowidz 577 12 Rozdział 22. Układ strony internetowej Układ strony internetowej Jest tak wiele sposobów wykorzystania CSS i DHTML-a, jak wielu jest projektantów używających tych technologii. Narzędzia te są stosunkowo nowe i projektanci wciąż odkrywają ich możliwości i ograniczenia. Dodatkowo niektórzy projektanci, początkowo zafascynowani możliwościami CSS w tworzeniu dynamicznego HTML-a, zlekceważyli wiele z jego zalet, dotyczących układu strony. Spiesząc się do eksperymentów z dynamicznymi aspektami CSS, wielu projektantów przeoczyło pewne praktyczne szczegóły problemów, które CSS rozwiązuje. CSS ułatwia stworzenie jednolitego układu strony — po prostu nie do odrzucenia. Rozdział ten odkrywa niektóre z cennych rozwiązań CSS, oferowanych do rozwiązania codziennych problemów związanych z projektem i — jako najlepszy sposób zintegrowania DHTML-a — z układem stron. U k ł a d s t r o n y i n t e r n e t o w e j 381 Rozdział 22. Naprawianie błędu implementacji CSS w Netscape Navigatorze W Netscape Navigatorze istnieje jeden oczywisty błąd związany z CSS, na który autorzy bardzo często narzekają. Gdy odwiedzający zmieni wielkość okna przeglądarki, wszystkie style CSS, pochodzące z zewnętrznego pliku arkusza stylów (podłączanego poprzez znacznik 2), tajemniczo znikają, tak jakby podłączony plik CSS w ogóle nie istniał. Jednak jeśli odwiedzający ponownie załaduje stronę, to style CSS pojawiają się znowu (rysunki 22.1 i 22.2). Błąd ten może być czymś odpychającym dla odwiedzającego stronę, zwłaszcza jeśli nie wie, że ponowne załadowanie strony rozwiązuje ten problem. Jak upewnić się, że strona zostanie przeładowana po zmianie wielkości okna? Wystarczy sprawić, by przeglądarka zwracała uwagę na to, co dzieje się w jej środowisku (kod 22.1). Aby wymusić ponowne załadowanie strony po zmianie jej wielkości: 1. 0(cid:9).3-9/28 +/67(cid:22)  W znaczniku 7-648 w nagłówku strony HTML ( head ) dodaj kod wykrywający, czy przeglądarka korzysta z obiektowego modelu dokumentu dla warstw (zobacz Sprawdzanie cech w rozdziale 11.). Jeśli go używa, kod zarejestruje aktualną szerokość (22/6 .8) i wysokość (22//18) widocznego obszaru strony (zobacz Sprawdzanie wymiarów widocznej części strony w rozdziale 12.). S S C i j c a t n e m e l p m i u d ę ł b e i n a i w a r p a N 382 Rysunek 22.1. Tak strona powinna wyglądać w Netscape Navigatorze Rysunek 22.2. Bez kodu naprawiającego błąd w Netscape Navigatorze, gdy odwiedzający zmieni wielkość ekranu, do wyświetlenia strony zostają użyte ustawienia domyślne Kod 22.1. Jeśli przeglądarka korzysta z warstw (co może oznaczać, że jest Netscape Navigatorem 4), JavaScript rejestruje początkową wartość szerokości i wysokości dostępnego obszaru okna przeglądarki. Jeśli wielkość okna ulegnie zmianie, kod porówna początkowe wymiary z nowymi i — jeśli się różnią — strona zostaje przeładowana, co przywraca zastosowanie zewnętrznego pliku CSS 8 /+. 7-648 0(cid:4).3-9/28 +/67(cid:19) 361 .822/6 .8 361/1822/6/18  092-8326/3+. +1/(cid:4)(cid:19) 0(cid:4)22/6 .8361 .8 22/6/18361/18(cid:19) 3-+832 6/3+.(cid:4)(cid:19)  0(cid:4).3-9/28 +/67(cid:19)326/7/6/3+. +1/  7-648 26/78/7//86/078/7 -77  /+. ,3.  /71221 8+7-+.21#8/ #//87   4-+77-34 /2/:/63984/2+ 7/-83288/  4 4-+77-3446/:397+68-/33/. +8+  4 .:-+77-3./ 7//-8364634/68:+9/   .: 4-+77-34 /6/8/7//-836  78//;36.4+6830+2$  4  ,3.  8 Układ strony internetowej 2. 092-8326/3+. +1/(cid:9)(cid:22)  Do skryptu dodaj funkcję 6/3+. +1/(cid:9)(cid:22). Funkcja, gdy zostanie wywołana, porówna obecną wysokość i szerokość widocznej części strony z wartościami zarejestrowanymi w punkcie 1. Jeśli wartości się różnią, strona zostanie przeładowana. 3. 326/7/6/3+. +1/ Dodaj procedurę 326/7/, aby uruchomić funkcję 6/3+. +1/ z punktu 2. Jeśli użytkownik zmieni wielkość okna, zmieniając tym samym widoczny obszar, to przeglądarka ponownie załaduje stronę, przywracając działanie zewnętrznego arkusza stylów CSS. Wskazówka  Dobrym pomysłem jest umieszczenie tego kodu w zewnętrznym pliku 7, który będziemy importować do każdej strony w witrynie, wykorzystującej zewnętrzny plik CSS (zobacz Używanie zewnętrznych plików JavaScript w rozdziale 23.). N a p r a w i a n i e b ł ę d u i m p l e m e n t a c j i C S S 383 . . . w ó l y t s y z s u k r a e i n e z r o w T Rozdział 22. Tworzenie arkuszy stylów dla rórnych systemów operacyjnych Projektantów tworzących za pomocą CSS denerwuje kilka niezgodności pomiędzy systemami Windows i MacOS, zwłaszcza w przypadku ustalania wielkości czcionki i kolorów. Tak naprawdę sam problem tkwi nie w CSS, ale w sposobie, w jaki te systemy operacyjn.e definiują wielkość czcionki i kolor na ekranie. Bez zagłębiania się w szczegóły historyczne i techniczne — podstawowy problem polega na tym, że Windows ten sam rozmiar czcionki wyświetla jako większy, niż robi to MacOS, a ten sam kolor wyświetla jako nieco ciemniejszy. Taka sytuacja może sprawić, że projekt będzie wyglądał wyśmienicie na MacOS, ale będzie miał zbyt duży tekst i zbyt ciemne kolory na komputerze typu PC. Jaka jest na to rada? Wykorzystując JavaScript i kilka arkuszy stylów dopasowanych do kolejnych systemów operacyjnych, można każdemu z nich udostępnić odpowie- dni rozmiar czcionki i kolor (rysunki 22.3, 22.4 i 22.5). Aby stworzyć CSS odpowiedni dla systemu operacyjnego odwiedzającego: 1. ./0+98 -77 Stwórz zewnętrzny plik CSS, zawierający style, które zostaną użyte w witrynie internetowej i zapamiętaj go jako default.css (kod 22.2). Plik ten zostanie bezpośrednio podłączony do stron w punkcie 3. 2. +- -77 Stwórz drugi plik z arkuszem stylów i zapamiętaj go jako +- -77 (kod 22.3). Ta wersja pliku powinna zostać wykorzystana do podmiany deklaracji z pliku default.css i dostosowania ich dla użytkowników systemu MacOS poprzez zwiększenie czcionki i dopasowanie koloru. Nie trzeba powtarzać wszystkich deklaracji z pliku default.css, ponieważ te, których chcemy użyć, znajdą się w kaskadzie arkuszy stylów. 3. 26/0./0+98 -776/78/#//8 84/˜/8 -77 W nagłówku dokumentu HTML — w tym przykładzie index.html (kod 22.4) — podłącz domyślną wersję arkusza stylów. 384 Rysunek 22.3. Strona wyświetlona w Internet Explorerze 5 dla Windows Rysunek 22.4. Ta sama strona wyświetlona w Internet Explorerze 5 dla systemu MacOS (bez korekcji). Tekst jest mniejszy i zbyt jasny Rysunek 22.5. Ta sama strona wyświetlona w Internet Explorerze 5 dla systemu MacOS z korekcyjnym arkuszem stylów. Aby zrekompensować wcześniejsze błędy, tekst jest nieco większy i ciemniejszy Kod 22.2. Domyślny arkusz stylów default.css zawiera wszystkie domyślne style, które powinny zostać użyte na stronie -34 -336-- 0328 4 4 $/7/; 3+2 /361+7$/777/60 ;.8 4  ,3. ,+-16392.9-336000  Kod 22.3. Style w pliku mac.css unieważnią odpowiednie style z pliku default.css -34 -336,, 03284 4 ;.8 4  Kod 22.4. JavaScript. System, w którym działa przeglądarka, to MacOS. Jeśli tak, to kolejny arkusz stylów zostaje dodany do strony i wprowadza pewne korekcje 8 /+. 26/0./0+98 -776/78/#//8 84/8/8 -77 7-648+219+1/+:+#-648 0(cid:4)(cid:4)2+:1+836 +44 /6732 2./0(cid:4) +- (cid:19)- (cid:19)(cid:19) .3-9/28 ;68/(cid:4) 26/0+- -77 6/78/#//884/8/8 -77 (cid:19)  7-648  /+. ,3. 4-+77-343;27.3;27.3;2  4 4-+77-34 6/7/287/,/1+2 +1+2  4  ,3.  8 Układ strony internetowej 4. 0(cid:9)(cid:9)2+:1+836 +44 /6732 2./0(cid:9) +- (cid:22) - (cid:22)(cid:22)  Za znacznikiem 2 umieść skrypt JavaScript, który sprawdza, czy przeglądarka wyświetlająca stronę jest używana w środowisku MacOS. Jeśli jest, to znacznik 2 podłączający wersję arkusza stylów dla MacOS zostaje „dopisany” do strony poprzez JavaScript. Drugi arkusz stylów dopasowuje deklaracje tak, by były odpowiednie dla systemu MacOS. Wskazówki  Chociaż wersja stylu CSS dla klasy -34 w MacOS nie zawiera deklaracji czcionki, to tekst i tak wyświetlony jest czcionką Times. Dlaczego reguła dla klasy copy z pliku CSS dla MacOS nie podmienia deklaracji w domyślnym pliku CSS? Pojęcie kaskadowe w kaskadowych arkuszach stylów odnosi się do możliwości mieszania deklaracji, nawet gdy pochodzą z różnych źródeł.  Systemy operacyjne to nie jedyne źródło problemów. Przeglądarki, nawet gdy działają w tym samym systemie operacyjnym, także dziwacznie wyświetlają rozmiar czcionki i pozycjonują elementy na stronie. Aby wykryć typ przeglądarki, można użyć tej samej techniki (zobacz Sprawdzanie nazwy i wersji przeglądarki w rozdziale 12.) i udostępnić każdej przeglądarce odpowiedni arkusz stylów.  Rozwiązania JavaScript pokazanego w tym podrozdziale można użyć także w innych celach. Jeśli chcemy udostępnić różne arkusze stylów w zależności od preferencji odwiedzającego, można użyć cookie, aby nadzorować, jakie arkusze stylów są ładowane. Skrypt umożliwia projektantowi i odwiedzającemu stronę dużo większą kontrolę nad tym, jak wyświetlona jest strona, a projektant nie musi tworzyć nowych stron dla każdej wersji. 385 T w o r z e n i e a r k u s z y s t y l ó w . . . Rozdział 22. Tworzenie nagłówków Kolejna rzecz, irytująca projektantów, to tworzenie nagłówków za pomocą grafiki, co najczęściej oznacza tworzenie nowej grafiki dla każdego nagłówka. Wykorzystując właściwość tła CSS, można stworzyć wiele różnych tytułów bez konieczności tworzenia nowego pliku dla każdego z nich. Takie rozwiązanie ma dodatkową zaletę, polegającą na tym, że nie wydłużamy czasu pobierania strony przez umieszczenie tekstu w plikach graficznych. Aby stworzyć nagłówek z graficznym tłem: 1. ,+-16392.)/+.2/ 10 w ó k w ó ł g a n e i n e z r o w T W programie graficznym stwórz i zapamiętaj tło. Nazwij ten plik np. ,+-16392.) /+.2/ 10 (rysunek 22.6). 2.  16+4-  Dodaj regułę CSS dla znacznika  (kod 22.5) z przypisaną klasą 16+4- (zobacz Definiowanie klas w celu stworzenia własnych znaczników w rozdziale 2.). Dołącz właściwość tła i zadeklaruj użycie grafiki stworzonej w punkcie 1. (zobacz Ustawianie tła w rozdziale 6.). Uwaga: Klasy zdefiniowanej w punkcie 2. nie trzeba nazywać 16+4-; możemy użyć dowolnej innej nazwy. Rysunek 22.6. Grafika, która wypełni tło nagłówków Kod 22.5. Zastosowanie grafiki w tle nagłówków jest proste, a możliwości są nieskończone 8 /+. 78/84/8/8 -77  3007/8 -336  0328-;/18,3. 0328-7/ 4 0328-0+ /6.+2+66+6/:/8-+6 7+27-7/60 ,+-16392.--336--- 4+..214 ,36./673. 48  4378326/+8:/ ;.8 4  16+4- ,+-16392.,+- 96(cid:4),+-16392.)/+.2/ 10(cid:19)23-6/4/+8 0328,3. 4/:/8-+67+27-7/60 -336;8/ ;.8 4 4+..21 4 4 0328236+ 48 488/777/60 /089+6124 ;.8   78/  /+. ,3. -+773007/8 $  ,6 +.$/+- +68  4$/8+,/;+7++61/32/  4 -+7716+4- $  ,6 +.$/+- +68  4$/6/;+7+8+,/7/839892./6+86// 206328308/397/  4  ,3.  8 386 Układ strony internetowej 3. -+7716+4- $  ,6 +.$/+- +68  Od tej chwili zawsze, gdy będziemy używać w dokumencie nagłówka trzeciego stopnia i dodamy do niego atrybut -+77 z klasą, którą zdefiniowaliśmy w punkcie 2., to w jego tle zostanie wyświetlona grafika (rysunek 22.7). Wskazówki  Tło dla pozostałych poziomów nagłówków można stworzyć w taki sam sposób. Można użyć dla nich tej samej lub innej grafiki poprzez zgrupowanie selektorów (zobacz Definiowanie znaczników z tą samą regułą w rozdziale 2.).  Można eksperymentować z różnymi grafikami w tle. Grafiką dla tła, które stworzyłem dla jednej ze swych witryn, był gradient, który zaczynał się pewnym kolorem po lewej i stopniowo przechodził w kolor tła po prawej stronie (rysunek 22.8). T w o r z e n i e n a g ł ó w k ó w Rysunek 22.7. Dwa przykłady nagłówka. W celu uzyskania innych efektów można poeksperymentować z różnymi grafikami, ramkami, a nawet z innym dopełnieniem Rysunek 22.8. Obydwa nagłówki („About the Site” i „Reading the Code”) są tekstem HTML z grafiką w tle 387 Rysunek 22.9. Pomimo że tekst został przewinięty, nagłówek pozostał u góry okna przeglądarki Rozdział 22. Tworzenie nagłówka o ustalonej pozycji Najważniejszą zasadą dobrego projektu jest informowanie ludzi o tym, gdzie się znajdują. Niestety, strony się przewijają, a ważne informacje na temat oglądanej strony (takie jak na przykład tytuł strony) zazwyczaj przewijają się na samą górę i stają się niewidoczne. Wykorzystując CSS, można ustalić położenie tytułu na górze strony tak, by był zawsze widoczny i informował, w którym miejscu witryny znajdują się odwiedzający — bez względu na to, jak została przewinięta 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 obsługują ustalonej pozycji. Jedyna przeglądarka, która obsługuje ten typ pozycjonowania, to Internet Explorer 5 dla systemu MacOS. Aby stworzyć nagłówek o ustalonej pozycji: 1. /+./6 Rozpocznij listę deklaracji selektorem klasy lub identyfikatora. W tym przykładzie stworzyłem identyfikator o nazwie /+./6 (kod 22.6). 2. 4378320/. Wpisz nazwę właściwości 437832 i przypisz jej wartość 0/.. 3. -3366/. Dodaj do listy pozostałe deklaracje, które chcesz zastosować przy tworzeniu nagłówka. W tym przykładzie zostanie wyświetlony czerwony tekst na szarym tle. i j c y z o p j e n o l a t s u o a k w ó ł g a n e i n e z r o w T 388 Kod 22.6. Styl nagłówka o ustalonej pozycji został przypisany do identyfikatora, który został następnie nadany znacznikowi div 8 /+. 78/84/8/8 -77 /+./6 -3366/. 0328-;/18,3. 0328-7/ 4 0328-0+$/7/; 3+26/361+6 $/767/60 ,+-16392.--336+++ 4+..214 4378320/. -2./  834 4 /08 4 ;.8  :7,8:7,/  78/  /+. ,3. .:./+./6 -/2 32./6+2. /;7 +663  .: ,6 4  796/837/+6/2388/618 ;36.7  4 4176-+-/  10;.8  /18  ,36./6 +1261877/ 7+.877/33/..3;2+8/6+2.7  4 4 $+8;+7 +2+663; /7-+4/  4 477/7+.8/7/;36.7/60338 744/.  4  ,3.  8 Układ strony internetowej 4.  Zakończ listę deklaracji zamykającym nawiasem klamrowym (). 5. .:./+./6-/2 ;32./6+2. /;7+663 .: Dodaj identyfikator do odpowiedniego elementu. W tym przypadku do stworzenia tytułu strony wykorzystałem znacznik .:. Wskazówki  Należy pamiętać, że ta technika nie będzie działała we wszystkich przeglądarkach. Przeglądarki nie rozpoznające tego typu pozycjonowania traktują nagłówek tak, jakby był elementem statycznym i przewijają go wraz z pozostałą zawartością strony. Pozostała część formatowania CSS będzie działać.  Chociaż byłoby wspaniale, gdyby można było umieszczać odnośniki w nagłówku o niezmiennej pozycji, to błąd w Internet Explorerze 5 dla MacOS powoduje, że elementy o ustalonej pozycji są prawie bezużyteczne (zobacz notatkę Czy jest niezmienna? w rozdziale 8.). T w o r z e n i e n a g ł ó w k a o u s t a l o n e j p o z y c j i 389 Rysunek 22.10. Grafika tła wykorzystana do stworzenia bocznego menu o szerokości 160 pikseli Rysunek 22.11. Grafika bocznego menu wypełnia lewą część ekranu do samego dołu strony, a kolor tła wypełni pozostałą część ekranu po prawej stronie u n e m o g e n z c o b e i n e z r o w T Rozdział 22. Tworzenie bocznego menu Boczne menu są chyba najczęściej stosowanym sposobem umieszczania narzędzi do nawigacji. Tradycyjnie tworzono szeroką grafikę tła, zawierającą tło bocznego menu i tło obszaru zawartości. Jednak wykorzystując CSS, wystarczy stworzyć dużo mniejszą grafikę, mającą szerokość wyłączenie bocznego menu i użyć wartości 6/4/+8-, aby wypełnić tło bocznego menu obrazkiem powielanym w pionie przy lewym brzegu okna przeglądarki. Technika ta zmniejsza czas pobierania strony poprzez zmniejszenie wielkości pliku grafiki tła. Aby stworzyć boczne menu: 1. ,+-16392.)7./ 10 Stwórz grafikę — cienki pasek o szerokości takiej, jaka jest przeznaczona dla menu (rysunek 22.10). 2. ,3.,+-16392.------96 (cid:9),+-16392.)7./ 10(cid:22)6/4/+8- W dokumencie stwórz regułę dla selektora znacznika ,3. i zadeklaruj wykorzystanie grafiki utworzonej w punkcie 1. oraz to, że powinna być powielana jedynie wzdłuż osi Y (zobacz Ustawianie poszczególnych właściwości tła w rozdziale 6.). Także tutaj można zadeklarować kolor tła dla pozostałej części strony (kod 22.7). 3. Wykorzystaj tabele lub pozycjonowanie CSS, aby stworzyć lewą kolumnę, w której znajdzie się zawartość bocznego menu, i prawą kolumnę dla pozostałej treści. W tym przykładzie stworzyłem dwie pozycjonowane bezwzględnie kolumny, jedną z przeznaczeniem na menu, a drugą na zawartość (rysunek 22.11). Wskazówka  Można eksperymentować z różnymi grafikami i różnymi efektami. Można wypróbować powtarzanie grafiki w poziomie (6/4/+8-), aby zamiast bocznego menu stworzyć nagłówek. Możliwości są nieskończone. 390 Układ strony internetowej Kod 22.7. Stwórz boczne menu, używając grafiki tła i tworząc npa stronie dwie kolumny 8 /+. 78/84/8/8 -77 ,3. ,+-16392.------96(cid:4),+-16392.)7./ 10(cid:19)6/4/+8- 7./,+6 437832+,7398/ 834 4 /08 4 ;.8  4 -328/28 437832+,7398/ 834 4 /08 4  78/  /+. ,3. .:.7./,+6 /29  176-,),33 10;.8/18 ,633,6 176-,)43686+8 10;.8/18 ,6 3686+8,6 176-,)4368033 10;.8/18,6 368033,6 176-,)4+2821 10;.8/18 ,6 +2821,6 176-,)/88/6 10;.8/18,6/88/6,6 176-,)+/6 10;.8/18 ,6$337  .: .:.-328/28 32:/67+832;8-/  4  :/,//283+.+97-3378337 7+.-/ 392//.2 8,/734639.+7+ 8+8  4 4 8/86+7 +7/.8/3-$968/+88/+2397  4 4 /77 7+.-/7 ;//+62/.6/2-+2.97-  4 4 2.;+721 7+.8/3-$968/  4 4 /68+2238 7+.-/2.12+28  4  .:  ,3.  8 T w o r z e n i e b o c z n e g o m e n u 391 Rozdział 22. Ustawianie dynamicznego nagłówka i stopki Kod 22.8. Ten plik JavaScript jest importowany na górę dokumentu index.html, aby stworzyć nagłówek dokumentu .3-9/28 ;68/2G   H .3-9/28 ;68/2G88/H .3-9/28 ;68/2G    H .3-9/28 ;68/2G  H .3-9/28 ;68/2G79,$8/H .3-9/28 ;68/2G   H .3-9/28 ;68/2G  H .3-9/28 ;68/2G8/+7/6H .3-9/28 ;68/2G  ,6,674+2 78/0328 48+6+ H .3-9/28 ;68/2G.+8/I  I+8/I  I +8/H .3-9/28 ;68/2G  74+2 H Kod 22.9. Ten plik JavaScript jest importowany na dół dokumentu index.html, aby stworzyć stopkę dokumentu .3-9/28 ;68/2G ,66,6-/+6+ H .3-9/28 ;68/2G 74+2-+77-34618 H .3-9/28 ;68/2G ,$8/ , I 7/0 .3-9/28 88/H .3-9/28 ;68/2G  ,6 H .3-9/28 ;68/2G ,  ,+6/0 I 7/0 3-+832I  I7/0 3-+832I  + H .3-9/28 ;68/2G  ,6 H .3-9/28 ;68/2G + 6/0 +9 -34618 834618 -34 + 9   +83+732;/,,/./2:632/287 -3+ 7326+2036.$/+19/  6187 6/7/6:/. H .3-9/28 ;68/2G  74+2 ,6 H . . . a k w ó ł g a n o g e n z c i m a n y d e i n a i w a t s U Z dużymi witrynami wiąże się jeden problem — trudno jest zmienić ich wygląd, gdy już się je utworzyło. Moja witryna prezentuje około stu artykułów, które napisałem na przestrzeni kilku lat. Nie jestem guru baz danych, dlatego przechowuję je jako statyczne strony HTML, ale zawsze lubiłem od czasu do czasu zmienić wygląd witryny. A więc, zamiast umieszczać nagłówki i stopki bezpośrednio na stronie, wykorzystuję JavaScript do zapisania ich w odpowiednim miejscu. Aby przekazać tytuł, datę i inne informacje na temat artykułu do zewnętrznego skryptu, wykorzystuję zmienne (zobacz Używanie zewnętrznych plików JavaScript w rozdziale 23.). Aby stworzyć dynamiczny nagłówek i stopkę: 1. /+./6 7 Stwórz zewnętrzny plik JavaScript i zapisz go jako /+./6 7. Plik w punkcie 4. zostanie zaimportowany na górę strony 2./ 8. W pliku dodaj metody .3-9/28 ;68/2(cid:9) (cid:22), aby zapisać cały kod HTML nagłówka strony. Dodatkowo nagłówek będzie używał zmiennych (2./ 8), aby dodać tytuł, podtytuł, sentencję i datę (kod 22.8). 2. 0338/6 7 Stwórz zewnętrzny plik JavaScript i zapisz go jako 0338/6 7. Plik w punkcie 4. zostanie zaimportowany na dół strony index.html. W pliku dodaj metody .3-9/28 ;68/2 (cid:9) (cid:22), aby zapisać cały kod HTML stopki strony. W tym przykładzie stopka wyświetla tytuł strony (ten znajdujący się pomiędzy znacznikami 88/ w nagłówku dokumentu, a nie wartość zmiennej 88/) oraz adres URL strony, a także odnośnik do strony o prawach autorskich oraz odnośnik +83 (kod 22.9). 392 Kod 22.10. Oto przykładowa strona internetowa (index.html), importująca nagłówek i stopkę. Zawiera także kilka zmiennych JavaScript, dodających do nagłówka dokumentu tytuł, podtytuł, sentencję i datę 8 /+. 7-648 88/ $//1221308/2.  79,$8/ ;/28838/#836/  8/+7/6 $/.+78+68/./+238/66,98 88/..23;8+88;39.73328962 2838/;3678.+300/ .+8/ +8/ +29+6 +8/   7-648 26/78/7//8 6/0./0+98 -77  /+. ,3. 7-64876-/+./6 7 7-648 99/12328/2899 4859./6+87593././/-8+,+8727 ++6//8++6  4 992.328/2899 7-64876-0338/6 7 7-648  ,3.  8 Układ strony internetowej 3. 88/$//12221308/2. W znaczniku 7-648 w nagłówku dokumentu, w którym chcemy dodać nagłówek i stopkę, dodajmy zmienne, takie jak: 88/, 79,$8/, 8/+7/6, .+8/, +8/ i +8/. JavaScript wykorzysta te zmienne przy zapisywaniu nagłówka (kod 22.10). 4. 7-64876-/+./6 7 7-648 W znaczniku ,3. strony HTML dodaj znaczniki 7-648 z atrybutem źródła, którego wartość stanowi adres URL zewnętrznych plików JavaScript, zawierających nagłówek i stopkę (rysunek 22.12). Wskazówki  W nagłówku i stopce można umieścić dowolny kod HTML. Na przykład w mojej witrynie całą nawigację umieszczam w zewnętrznym pliku JavaScript — takim, jak te w tym przykładzie. Umożliwia mi to dodawanie i usuwanie elementów nawigacji bez konieczności zmieniania każdej strony w witrynie.  Zmienne w punkcie 3. są tylko przykładem typu informacji, jakie można dodać do poszczególnych stron HTML, używając importowanego globalnego pliku JavaScript. W taki sposób można dołączyć każdy typ danych na temat artykułu, takich jak: rocznik, numer wydania lub jego położenie w witrynie. U s t a w i a n i e d y n a m i c z n e g o n a g ł ó w k a . . . Rysunek 22.12. Końcowy wygląd strony z dynamicznie stworzoną stopką i nagłówkiem. Ponieważ kodu nagłówka i stopki nie umieszczamy na stronie, możemy zmienić jej układ w plikach JavaScript, a zmiany zostaną naniesione na każdej używającej ich stronie HTML 393 Rozdział 22. Tworzenie własnych obramowa ramek W używaniu ramek najbardziej denerwuje projektantów przestarzały wygląd obramowań standardowo umieszczanych pomiędzy ramkami (rysunek 22.13). Jednak używając właściwości tła, można stworzyć ramki w dowolnym stylu, jaki tylko możemy sobie wymarzyć (rysunek 22.14). Chociaż takie obramowania mogą zostać umieszczone jedynie wzdłuż lewego lub górnego boku pojedynczej ramki, to i tak są bardzo pożyteczne przy zaznaczaniu granic pomiędzy poszczególnymi ramkami. Aby stworzyć obramowanie ramki: 1. ,36./6 10 Stwórz grafikę, którą wykorzystasz do obramowania ramki. W tym przykładzie korzystam z ornamentu, który zapamiętałem jako ,36./6 10 (rysunek 22.15). Możecie użyć dowolnej grafiki, jaka się wam podoba. 2. 2./ 8 Stwórz dokument podzielony na ramki i upewnij się, że wyłączyłeś domyślne obramowanie: ,36./6˜ ˜06+/74+-21˜ ˜ 06+/,36./6˜23˜ Zapisz ten zestaw ramek jako index.html (kod 22.11). k e m a r ! a w o m a r b o h c y n s a ł w e i n e z r o w T 394 Rysunek 22.13. Dokument podzielony na ramki, z wyświetlonym domyślnym obramowaniem Rysunek 22.14. Dokument podzielony na ramki ze stworzonym przy użyciu CSS rozdzielającym ramki obramowaniem w postaci czerwonego ornamentu Rysunek 22.15. Dwie grafiki wykorzystane do stworzenia obramowania w prawej i dolnej ramce. Można wykorzystać dowolną grafikę, a więc zaszalejmy! Kod 22.11. Dokument podzielony na ramki 3. 618)06+/ 8 Układ strony internetowej 8 06+/7/863;7P7 ,36./6  06+/74+-21 06+/,36./623 06+/7/8-37P7  ,36./6  06+/74+-21 06+/,36./623 06+/76--/28/6)06+/ 8 2+/-/28/6236/7/ 06+/76-618)06+/ 8 2+/618236/7/  06+/7/8 06+/76-,3883)06+/ 8 2+/,3883236/7/7-632123  06+/7/8  8 Wykorzystaj właściwość ,+-16392. w znaczniku ,3. dokumentu HTML (kod 22.12 i 22.13), aby umieścić grafikę ornamentu stworzoną w punkcie 1. w tle odpowiednich ramek (patrz rysunek 22.14). Powiel grafikę albo w pionie (6/4/+8-), albo w poziomie (6/4/+8-) (zobacz Ustawianie tła w rozdziale 6.). Wskazówki  Technika sprawdza się tylko przy ustawianiu obramowania na górze ramki lub po jej lewej stronie. Nie można ustawić obramowań na obu brzegach jednocześnie, na dole lub po prawej stronie ramki. Kod 22.12. Ramka z pionowym obramowaniem  Wygląd obramowania może być dowolny 8 /+. 78/84/8/8 -77 ,3. ,+-16392.;8/96(cid:4),36./6 10(cid:19) 6/4/+8-  78/  /+. ,3. $+,/0328/287  6;.8 +12/08 4+6/0+48/6 + 4  ,3.  8 Kod 22.13. Ramka z poziomym obramowaniem 8 /+. 78/84/8/8 -77 ,3. ,+-16392.7:/696(cid:4),36./6 10(cid:19) 6/4/+8- 4   78/  /+. ,3. +48/6 9.:-/063+ +8/64+6   ,3.  8 i może być dowolnie duży. Należy tylko pamiętać, że obrazek powielany jest w określonym przez nas kierunku.  Takie obramowania mają jedną ogromną wadę w porównaniu z domyślnym stylem obramowania. Ani autor, ani odwiedzający nie może użyć tych obramowań, aby zmienić wielkość ramki. 395 T w o r z e n i e w ł a s n y c h o b r a m o w a ! r a m e k Rozdział 22. Otwieranie i zamykanie ramek Wadą ramek jest to, że „monopolizują” obszar ekranu poprzez umieszczanie na nim na stałe tytułów i menu. Jeśli posiadamy duży monitor, może działać to znakomicie. Jednak osoby mające mniejsze monitory mogą wystraszyć się tym, co zobaczą. Oto technika, którą opracowałem, wykorzystująca zagnieżdżone zestawy ramek oraz trochę skryptu JavaScript, aby otworzyć i zamknąć menu znajdujące się w ramce (rysunki 22.16 i 22.17). Gdy menu jest zamknięte, obszar zawartości okna może wykorzystać dowolną potrzebną przestrzeń. k e m a r e i n a k y m a z i e i n a r e i w t O Rysunek 22.16. Menu jest zamknięte Rysunek 22.17. Menu jest otwarte 396 Kod 22.14. Dokument podzielony na ramki wykorzystane do stworzenia układu strony Aby stworzyć zamykające się ramki: 1. 2./ 8 Układ strony internetowej Stwórz główny zestaw ramek. W tym przykładzie stworzyłem dwie ramki: /+./6 i -328/28 (kod 22.14 i rysunek 22.18). Ramka o nazwie /+./6 będzie statyczna (nie zmienia swojego źródła) i będzie zawierać plik header.html z większością JavaScriptu, potrzebnego nam do wykonania tego efektu. W ramce -328/28 początkowo załadowana jest strona 23/29)06+/7 8, która także podzielona jest na ramki. Następnie źródło ramki zamieniane jest na stronę /29)06+/7 8, aby przełączyć wygląd na wersję z otwartym menu. 2. 23/29)06+/7 8 Stwórz zestaw ramek, dzielący stronę na dwie kolumny, i zapisz go jako 23/29) 06+/7 8 (kod 22.15 oraz rysunek 22.19). Pierwsza ramka o nazwie -32863 zawiera plik -32863 8, druga — nazwana -328/28 — początkowo zawiera stronę -328/28 8. O t w i e r a n i e i z a m y k a n i e r a m e k 8 06+/7/863;77P,36./6  06+/74+-21 06+/,36./623 06+/2+//+./676-/+./6 8 7-63212306+/,36./623236/7/ +612/184+612 .84 06+/2+/-328/28 76-23/29)06+/7 8+612;.8  +612/18 06+/,36./623  06+/7/8  8 Rysunek 22.18. Zestaw ramek pliku index.html Kod 22.15. Zestaw ramek, który zostanie załadowany do ramki o nazwie content na stronie index.html, gdy menu jest zamknięte 8 06+/7/8-377P,36./6  06+/74+-21 06+/,36./623 06+/2+/-3286376--32863 8 +612;.8 +612/18  7-63212306+/,36./623236/7/ 06+/2+/-328/2876--328/28 8 +612;.8 +612/18  7-6321+98306+/,36./623  06+/7/8  8 Rysunek 22.19. Podzielona na ramki strona nomenu_frames.html zostanie załadowana do ramki o nazwie content na stronie index.html wtedy, gdy menu jest zamknięte 397 Rozdział 22. 3. /29)06+/7 8 Stwórz zestaw ramek, dzielący stronę na trzy kolumny, i zapamiętaj go jako /29)06+/7 8 (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 wyświetla plik /29 8. Odwiedzający będą mogli przełączać się pomiędzy dwoma zestawami ramek, utworzonymi w punkcie 2. i 3., w zależności od tego, czy będą chcieli, by menu było otwarte, czy nie. Kod 22.16. Podzielony na ramki dokument ładowany jest do ramki content pliku index.html, gdy menu jest otwarte 8 06+/7/8-37 77P,36./6  06+/74+-21 06+/,36./623 06+/2+//2976-/29 8 +612;.8 +612/18  7-63212306+/,36./623236/7/ 06+/2+/-3286376--32863 8 +612;.8 +612/18  7-63212306+/,36./623236/7/ 06+/2+/-328/2876--328/28 8 +612;.8 +612/18  7-6321+98306+/,36./623  06+/7/8  $ Rysunek 22.20. Podzielona na ramki strona menu_frames.html ładowana jest do ramki content na stronie index.html, gdy menu jest otwarte k e m a r e i n a k y m a z i e i n a r e i w t O 398 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 8 /+. 7-648+219+1/+:+#-648 :+606+/#8+8/  :+6-328/28# 29 092-832/29$311/(cid:4)(cid:19) 0(cid:4)06+/#8+8/ (cid:19) -328/28#  4+6/28 -328/28 -328/28 3-+832 6/0 834 -328/28 3-+832 /29)06+/7 8  06+/#8+8/  6/8962  /7/ -328/28#  4+6/28 -328/28 -328/28 3-+832 6/0 834 -328/28 3-+832 23/29)06+/7 8  06+/#8+8/  6/8962    7-648 78/84/8/8 -77 -33616+03289;/18,3.03289 7/4032890+$6/,9-/8#7 6+7/:/8-+7/2/:+77+2797/60 ,3.,+-16392.9-336  78/  /+. ,3. ;/,,/.  $#   ,3.  8 Układ strony internetowej 4. /+./6 8 Stwórz plik HTML, który będzie wykorzystany w ramce o nazwie /+./6 w pliku stworzonym w punkcie 1. i zapamiętaj go jako /+./6 8 (kod 22.17). Funkcja /29$311/(cid:9)(cid:22) jest kluczową funkcją na tej stronie. Wykonywana jest wtedy, gdy odwiedzający kliknie odnośnik „Menu” w pliku control.html. Funkcja najpierw sprawdza, jaki dokument jest załadowany do ramki -328/28 i przechowuje ten URL jako zmienną -328/28# . Następnie sprawdza, czy menu jest widoczne i zmienia zestaw ramek na 23/29)06+/7 8 albo na /29)06+/7 8. Zmienna 06+/#8+8/ zapisuje stan menu: (zamknięte) lub (otwarte). O t w i e r a n i e i z a m y k a n i e r a m e k 399 Rozdział 22. 5. /29 8 Stwórz plik HTML, który będzie wyświetlany wtedy, gdy menu będzie otwarte i zapisz go jako menu.html (kod 22.18). Ja w przykładzie użyłem odnośników HTML, jednak w pliku tym można umieścić dowolną zawartość HTML. Wszystkim odnośnikom powinno się przypisać ramkę, w której mają zostać wyświetlone (8+61/8˜-328/28˜). 6. -32863 8 Stwórz plik HTML, który zostanie wykorzystany w ramce -32863 i zapisz go jako -32863 8 (kod 22.19). Plik zawiera odnośnik, który — gdy zostanie kliknięty — uruchamia funkcję /29$311/(cid:9)(cid:22) z punktu 4. k e m a r e i n a k y m a z i e i n a r e i w t O 400 Kod 22.18. Dokument HTML zawierający menu, które będzie wyświetlane w ramce o nazwie menu w pliku menu_frames.html. Dokument może zawierać dowolną zawartość HTML 8 /+. 78/84/8/8 -77 ,3.-33616+0328,3. 4 4 $6/,9-/8#76+7/:/8-+7/2/:+7 7+2797/60,+-16392.9-336,+- +2-336;8/8/89./-36+832232/  +3:/6-336;8/8/89./-36+832 92./62/ ++-8:/-3367:/68/89./-36+832 92./62/ +:78/.-336;8/8/89./-36+832 232/  78/  /+. ,3. +6/03/ 8 8+61/8-328/283/ +,6 +6/04+1/ 8 8+61/8-328/28 +1/  +,6 +6/04+1/ 8 8+61/8-328/28 +1/ +,6 +6/04+1/ 8 8+61/8-328/28 +1/ +,6  ,3.  8 Kod 22.19. Dokument HTML wykorzystany w ramce o nazwie control w pliku menu_frames.html i nomenu_frames.html. Plik zawiera odnośnik, uruchamiający funkcję menuToggle(), umieszczoną w pliku header.html 8 ,3. .:.8+,7 + 6/0+:+7-648834 /+./6 /29$311/GH 176-+1/7 8+,/29 10 ;.8 /18 ,36./6   +  .:  ,3.  8 Kod 22.20. Plik jest początkowo wyświetlany w ramce content2 w plikach menu_frames.html i nomenu_frames.html. JavaScript, znajdujący się w pliku, sprawdza adres URL strony, która była wyświetlona, zanim menu zostało zmienione (zapisany w zmiennej contentSRC w pliku header.html) i ładuje stronę w tę ramkę 8 /+. 7-648+219+1/+:+#-648 :+6-328/28#  092-8326/4+-/328/28(cid:4)(cid:19) -328/28# 834 /+./6 -328/28#  0(cid:4)-328/28# 29(cid:19)7/0 3-+832 3/ 8  /7/7/0 3-+832-328/28#    7-648  /+. ,3.323+.6/4+-/328/28(cid:4)(cid:19)  ,3.  8 Układ strony internetowej 7. -328/28 8 Stwórz stronę HTML, zawierającą kod 22.20. Strona ta jest krokiem pośrednim i nigdy nie jest zbyt długo widoczna na ekranie. Kontroluje tylko, jaki dokument był załadowany do ramki -328/28 poprzez sprawdzenie wartości przypisanej zmiennej -328/28#  zapisanej w ramce /+./6, i załadowuje ten dokument. Jeśli wcześniej nie był w niej wyświetlony żaden plik (na przykład strona jest ładowana po raz pierwszy), to ładowany jest plik home.html. 8. 3/ 8 Stwórz wszystkie strony dla witryny (kod 22.21). Wszystkie będą wyświetlane w ramce -328/28. Wskazówki  Technika umożliwia odwiedzającemu stronę otwarcie i zamknięcie menu nawigacyjnego, bez „zgubienia” miejsca, w którym znajdował się w witrynie.  W zamykanej ramce nie musi znajdować się menu. Tę technikę zastosowałem w intranecie pewnej organizacji do stworzenia kalendarza zdarzeń, który mógł być otwierany w dowolnym momencie.  Ze względu na pewne ograniczenia związane z bezpieczeństwem, w Internet Explorerze i Netscape Navigatorze nie można otwierać lub zamykać menu, gdy ramka -328/28 zawiera dokument spoza serwera, na którym znajduje się witryna, a więc nie można wykorzystywać zawartości z innych witryn. O t w i e r a n i e i z a m y k a n i e r a m e k 401 Rozdział 22. Zachowanie podziału strony na ramki Wyobraźmy sobie, że czytamy książkę. Wieczorem, kończąc czytać, wkładamy zakładkę na stronę, którą przeczytaliśmy jako ostatnią i odkładamy książkę. Następnego wieczoru podnosimy książkę i chcemy rozpocząć czytanie w miejscu, w którym poprzednio skończyliśmy. Jednak przez jakieś dziwne okoliczności zakładka w rzeczywistości znalazła się z powrotem za okładką, a my musimy przekartkować wcześniej przeczytane strony, aby znaleźć miejsce, w którym skończyliśmy. Jeśli tworzymy stronę przy użyciu ramek, to takie sytuacje mogą spotkać również naszych odwiedzających. Chcą umieścić zakładkę na jednej z wewnętrznych stron, ale okazuje się, że zakładka znalazła się za okładką. Powyższa sytuacja nie jest jedynym problemem, związanym z wywoływaniem stron podzielonych na ramki. Co się stanie, jeśli zechcemy w e-mailu umieścić odnośnik do konkretnej strony wewnątrz witryny lub stworzyć taki odnośnik w innej witrynie? Pewnie, można wysłać URL pojedynczej strony, ale jeśli wyślemy odwiedzających do tej konkretnej strony bez ramek, to będzie tak, jakbyśmy dali im książkę bez pozostałych stron lub bez grzbietu. Można by stworzyć dokument podzielony na ramki dla każdej ze stron osobno, ale byłoby to problematyczne i nieporęczne. Jest łatwiejszy sposób. Co prawda nie możemy zmienić sposobu, w jaki działają ramki i z pewnych powodów twórcy przeglądarek zignorowali te poważne problemy ich używalności, ale możemy w naszej witrynie zaimplementować specjalne obejście tego problemu i pomóc naszym odwiedzającym (rysunki 22.21 i 22.22). i k m a r a n y n o r t s u ł a i z d o p e i n a w o h c a Z 402 Rysunek 22.21. Strona początkowo ładuje się normalnie, ale prawie natychmiast... Rysunek 22.22. ...ekran mruga i strona, którą oglądaliśmy, znajduje się już wewnątrz odpowiedniego zestawu ramek Układ strony internetowej Kod 22.22. Ten mały zewnętrzny plik JavaScript sprawia, że strona znajdu
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Po prostu DHTML i CSS
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: