Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00620 008689 10481319 na godz. na dobę w sumie
Zwiększ szybkość! Optymalizacja serwisów internetowych - książka
Zwiększ szybkość! Optymalizacja serwisów internetowych - książka
Autor: Liczba stron: 416
Wydawca: Helion Język publikacji: polski
ISBN: 83-7361-134-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> funkcjonalność stron
Porównaj ceny (książka, ebook, audiobook).

Ktoś wszedł na Twoją stronę? Nie każ mu czekać!

Cierpliwość użytkownika jest jak bomba zegarowa. Każde wejście na Twoją stronę WWW uruchamia odliczanie. Masz zaledwie kilka sekund, by dostarczyć odwiedzającemu treści, których poszukuje. Jeśli nie zdążysz, możesz się pożegnać ze swoim gościem (i z ewentualnymi zyskami, które osiągnąłbyś dzięki jego wizycie).

Nie możesz liczyć na szybkie łącza. W dalszym ciągu wielu gości Twojej witryny używa sieci telefonicznej i zwykłych modemów. Albo zdążysz, nim skończy się ich cierpliwość, albo przegrasz. Dlatego powinieneś sięgnąć po tę książką. Dowiesz się z niej, jak skrócić o połowę czas wczytywania strony. Zmniejszysz rozmiary plików HTML, XHTML, CSS, ilustracji i skryptów JavaScript oszczędzając dodatkowo na kosztach łączy. Przykłady wzięte z praktyki przedstawiają techniki przynoszące rzeczywiste rezultaty. Po przeczytaniu tej książki będziesz już wiedział, jak tworzyć strony pojawiające się na ekranie w mgnieniu oka.

Nauczysz się:

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

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA Zwiêksz szybkoġæ! Optymalizacja serwisów internetowych Autor: Andrew B. King T³umaczenie: Marek Suczyk (rozdz. 1 – 11), Jacek Smycz (rozdz. 12 – 19) ISBN: 83-7361-134-7 Tytu³ orygina³u: Speed Up Your Site – Web Site Optimization Format: B5, stron: 416 Przyk³ady na ftp: 80 kB Cierpliwoġæ u¿ytkownika jest jak bomba zegarowa. Ka¿de wejġcie na Twoj¹ stronê WWW uruchamia odliczanie. Masz zaledwie kilka sekund, by dostarczyæ odwiedzaj¹cemu treġci, których poszukuje. Jeġli nie zd¹¿ysz, mo¿esz siê po¿egnaæ ze swoim goġciem (i z ewentualnymi zyskami, które osi¹gn¹³byġ dziêki jego wizycie). Nie mo¿esz liczyæ na szybkie ³¹cza. W dalszym ci¹gu wielu goġci Twojej witryny u¿ywa sieci telefonicznej i zwyk³ych modemów. Albo zd¹¿ysz, nim skoñczy siê ich cierpliwoġæ, albo przegrasz. Dlatego powinieneġ siêgn¹æ po tê ksi¹¿k¹. Dowiesz siê z niej, jak skróciæ o po³owê czas wczytywania strony. Zmniejszysz rozmiary plików HTML, XHTML, CSS, ilustracji i skryptów JavaScript oszczêdzaj¹c dodatkowo na kosztach ³¹czy. Przyk³ady wziête z praktyki przedstawiaj¹ techniki przynosz¹ce rzeczywiste rezultaty. Po przeczytaniu tej ksi¹¿ki bêdziesz ju¿ wiedzia³, jak tworzyæ strony pojawiaj¹ce siê na ekranie w mgnieniu oka. FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Nauczysz siê: • Przyspieszaæ ³adowanie siê stron WWW • Anga¿owaæ u¿ytkowników w proces przegl¹dania strony • Analizowaæ efekty psychologiczne wywo³ywane wolnym ³adowaniem siê stron • Zmniejszaæ rozmiary i stopieñ skomplikowania plików HTML • Stosowaæ skróty w CSS • Przyspieszaæ i odchudzaæ JavaScript • Zmniejszaæ rozmiary plików graficznych i multimedialnych • Oszczêdzaæ przepustowoġæ ³¹czy (a¿ do 60 !) stosuj¹c kompresjê HTTP Andrew B. King (Andy) jest za³o¿ycielem WebReference.com oraz JavaScript.com (obie witryny zosta³y nagrodzone w klasyfikacji stron przeznaczonych dla programistów). WebReference.com – utworzona w 1995 roku, a nastêpnie w 1997 r. zaadoptowana przez Macklermedia (obecnie Jupitermedia) – uros³a do rangi jednej z najpopularniejszych stron internetowych dla programistów. Ktoġ wszed³ na Twoj¹ stronê? Nie ka¿ mu czekaæ! • Praktyczne sposoby przyspieszania stron WWW • Psychologia cierpliwoġci – co powodujê, ¿e u¿ytkownicy uciekaj¹ ze strony • Oszczêdzanie czasu i oszczêdzanie przepustowoġci: kompresja HTTP • Zmniejszanie rozmiarów plików graficznych i multimedialnych. Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Spis treści O Autorze ........................................................................................... 9 Przedmowa....................................................................................... 13 Wstęp .............................................................................................. 15 Część I Psychologia wydajności..................................................21 Rozdział 1. Czas odpowiedzi: osiem +/– dwie sekundy ....................................... 23 Szybkość — główny składnik wpływający na wygodę używania systemu......................25 Krótka historia o wydajności sieci ...................................................—.................................27 Czas reakcji a zadowolenie użytkownika...................................................—.......................29 Wskaźnik rezygnacji i granica uwagi...................................................—.............................34 Zdolność dostosowania ...................................................—..................................................37 Podsumowanie ...................................................—...................................................—............4 0 Rozdział 2. Przepływ w projektowaniu stron internetowych ................................. 43 Mihaly Csikszentmihalyi i przepływ...................................................—..............................44 Co powoduje uczucie przepływu w sieci internetowej? ...................................................—46 Uczucie przepływu i projektowanie stron internetowych .................................................50 2 Podsumowanie ...................................................—...................................................—............5 Część II Optymalizacja kodu HTML i XHTML.................................53 Rozdział 3. Optymalizacja HTML ......................................................................... 55 Co to jest optymalizacja kodu HTML? ...................................................—..........................56 Złożoność kodu a przepustowość łącza ...................................................—.........................56 Jak nowoczesne przeglądarki współpracują z HTML?...................................................—..59 W jaki sposób optymalizować HTML? ...................................................—.........................61 Podsumowanie ...................................................—...................................................—............7 6 Rozdział 4. Zaawansowane metody optymalizacji ............................................... 77 Wskazówki do projektowania tabel ...................................................—...............................77 Optymalizacja formularzy...................................................—..............................................92 Skróty URL ...................................................—...................................................—............... ..98 HTML i kompresja...................................................—...................................................—....100 Podsumowanie ...................................................—...................................................—..........101 6 Zwiększ szybkość! Optymalizacja serwisów internetowych Rozdział 5. Ekstremalny XHTML ....................................................................... 103 Korzyści płynące z XHTML ...................................................—........................................104 XHTML kontra HTML ...................................................—................................................106 Anatomia dokumentu XHTML...................................................—....................................106 Zasady składni XML...................................................—...................................................—.110 Konwersja z HTML do XHTML ...................................................—.................................116 Optymalizacja kodu XHTML ...................................................—......................................117 Podsumowanie ...................................................—...................................................—..........120 Rozdział 6. Studium przypadku: PopularMechanics.com.................................... 123 Automatyczna optymalizacja ...................................................—.......................................126 Optymalizacja ręczna ...................................................—...................................................—127 Podsumowanie ...................................................—...................................................—..........132 Część III Optymalizacja DHTML: CSS i JavaScript ........................135 Rozdział 7. Optymalizacja CSS.......................................................................... 137 Mądre stosowanie stylów ...................................................—.............................................138 Usuwanie wolnych przestrzeni...................................................—.....................................139 Wycinanie komentarzy...................................................—.................................................139 Minimalizacja żądań HTTP ...................................................—.........................................140 Używanie prostych selektorów i podstawień ...................................................—...............140 Grupowanie ...................................................—...................................................—............... 143 Dziedziczenie ...................................................—...................................................—............ 145 Warstwy stylów a szybkość ...................................................—.........................................146 Skracanie właściwości...................................................—..................................................146 Optymalizacja kolorów CSS ...................................................—........................................154 Jednostki długości: wszystko jest względne ...................................................—................156 Podsumowanie ...................................................—...................................................—..........158 Rozdział 8. Zaawansowana optymalizacja kodu CSS......................................... 161 Zasady optymalizacji arkuszy CSS ...................................................—..............................161 Elementy zastępcze ...................................................—...................................................—...164 Tabele i CSS...................................................—...................................................—............. .176 Kontrolowanie układu za pomocą arkuszy CSS ...................................................—..........177 Podsumowanie ...................................................—...................................................—..........180 Rozdział 9. Optymalizacja kodu JavaScript pod kątem szybkości ładowania....... 183 Kiedy zdecydować się na optymalizację? ...................................................—....................184 Zrzucenie zbędnych kalorii ...................................................—..........................................184 Mądre stosowanie JavaScriptu ...................................................—.....................................187 Minimalizacja żądań HTTP ...................................................—.........................................188 Skróty i odwzorowanie...................................................—.................................................191 Zagęszczanie i zaciemnianie ...................................................—........................................192 JavaScript i kompresja ...................................................—.................................................196 Podsumowanie ...................................................—...................................................—..........197 Rozdział 10. Optymalizacja kodu JavaScript pod kątem szybkości działania......... 199 Poziomy projektowania...................................................—................................................200 Sprawdzanie zmian ...................................................—...................................................—...201 Algorytmy i struktury danych ...................................................—......................................201 Upraszczanie kodu ...................................................—...................................................—....203 Minimalizacja współdziałania modelu DOM z wejściem-wyjściem ..............................203 Optymalizacja lokalna...................................................—..................................................208 Dostrajanie wyrażeń...................................................—...................................................—..220 Podsumowanie ...................................................—...................................................—..........222 Spis treści 7 Rozdział 11. Studium przypadku: DHTML.com ..................................................... 225 Część IV Optymalizacja grafiki i multimediów ..............................229 Rozdział 12. Optymalizacja grafiki stron internetowych....................................... 231 Tworzenie i przygotowanie obrazków ...................................................—.........................232 Optymalizacja plików JPEG ...................................................—........................................233 Optymalizacja plików GIF ...................................................—...........................................243 Optymalizacja PNG...................................................—...................................................—...250 Czas pobierania: liczba pakietów a rozmiar strony...................................................—......255 Na horyzoncie: JPEG2000 i grafika wektorowa ...................................................—..........256 Podsumowanie ...................................................—...................................................—..........257 Rozdział 13. Minimalizacja multimediów ............................................................. 259 Podstawy multimediów ...................................................—................................................260 Kompresja i optymalizacja audio...................................................—.................................271 Optymalizacja wideo...................................................—...................................................—.277 Optymalizacja PDF ...................................................—...................................................—...289 Podsumowanie ...................................................—...................................................—..........293 Rozdział 14. Studium przypadku: Apple.com........................................................ 295 Output (wyjście)...................................................—...................................................—........296 Tracks (ścieżki) ...................................................—...................................................—......... 296 Image (obraz) ...................................................—...................................................—............ 296 Adjust (dostosowanie)...................................................—..................................................297 Encode (kodowanie)...................................................—...................................................—..297 Audio...................................................—...................................................—.................... Ostateczne wyniki ...................................................—...................................................—.....298 .....298 Część V Optymalizacja mechanizmów wyszukiwania ...................299 Rozdział 15. Optymalizacja słów kluczowych ....................................................... 301 Ogólny obraz ...................................................—...................................................—............. 301 Optymalizacja słów kluczowych — porady...................................................—.................304 Strategie projektowe przyjazne dla pająków...................................................—................318 Charakterystyka strony o wysokiej pozycji w rankingach..............................................319 Podsumowanie ...................................................—...................................................—..........320 Rozdział 16. Studia przypadków: PopularMechanics.com i iProspect.com ........... 323 PopularMechanics.com ...................................................—................................................323 iProspect.com ...................................................—...................................................—............ 328 Część VI Zaawansowane techniki optymalizacji .........................333 Rozdział 17. Techniki działające po stronie serwera ........................................... 335 Server-Side Includes ...................................................—...................................................—.336 Zalety SSI: szybkość i duża zgodność ...................................................—.........................337 Dostrajanie mod_include...................................................—..............................................338 Wykrywanie przeglądarek po stronie serwera ...................................................—.............340 Skracanie adresów URL za pomocą mod_rewrite ...................................................—.......351 Optymalizacja formularzy i CGI...................................................—..................................358 Nigdy więcej www...................................................—...................................................—....362 Podsumowanie ...................................................—...................................................—..........363 8 Zwiększ szybkość! Optymalizacja serwisów internetowych Rozdział 18. Kompresowanie stron internetowych .............................................. 365 Algorytmy kompresji tekstu...................................................—.........................................366 Kompresja zawartości ...................................................—..................................................367 Kompresja zawartości: strona klienta ...................................................—..........................369 Kompresja zawartości: strona serwera...................................................—.........................373 Kompresja zawartości oparta na proxy ...................................................—........................389 Narzędzia oceniające...................................................—...................................................—.390 Na horyzoncie ...................................................—...................................................—...........391 Podsumowanie ...................................................—...................................................—..........392 Rozdział 19. Studia przypadków: Yahoo.com i WebReference.com ...................... 395 Skracanie Yahoo.com...................................................—...................................................—395 Skracanie WebReference.com ...................................................—.....................................397 Dodatki ...................................................................................... 399 Skorowidz....................................................................................... 401 Rozdział 8. Zaawansowana optymalizacja kodu CSS Oprócz omówionych korzyści płynących z buforowania plików CSS i zmniejszenia obciążenia łącza, CSS pozwala na zastąpienie elementów strony, które pochłaniają znaczne zasoby i wydłużają czas ładowania (np. grafika nakładkowa), na „lekkie” elementy, nieobciążające strony. W tym rozdziale zamieszczone zostały informacje omawiające cztery główne sposoby wykorzystania arkuszy CSS do przyspieszenia stron internetowych. Zagadnienia te dotyczą:  mniejszych rozmiarów arkuszy stylów,  elementów zastępczych,  szybszych tabel,  kontroli układu i rozmieszczenia elementów. Zasady optymalizacji arkuszy CSS Na podstawie metod, których zdążyłeś się nauczyć w rozdziale 7., będziesz mógł zo- baczyć, w jaki sposób przeprowadzana jest optymalizacja starego arkusza stylów strony WebReference.com (listing 8.1). Listing 8.1. Oryginalny arkusz stylów WebReference.com UV[NGV[RGVGZVEUU  HQTOVD]FKURNC[KPNKPG_ J]VGZVFGEQTCVKQPPQPGHQPVUKGRVHQPVHCOKN[IGPGXCCTKCNUCPUUGTKH_ E]HQPVUKGHQPVHCOKN[CTKCNIGPGXCUCPUUGTKH_ F]HQPVUKGHQPVHCOKN[CTKCNIGPGXCUCPUUGTKH_ FV]HQPVYGKIJVDQNFHQPVUKGOCTIKPVQRGO_ 162 Część III ♦ Optymalizacja DHTML: CSS i JavaScript Y]HQPVUKGHQPVHCOKN[XGTFCPCUCPUUGTKHEQNQT_ 05N[T]YKFVJRQUKVKQPCDUQNWVGXKUKDKNKV[JKFFGP_ CJQXGT]DCEMITQWPFEQNQTHHFF_  UV[NG W powyższym arkuszu można zauważyć wiele technik omawianych we wcześniej- szych rozdziałach książki. Używane są skróty, jednoznakowe nazwy klas (jak J i E), proste selektory typów (FV), pseudoklasa JQXGT. Arkusz nie jest połączony ze stroną, lecz jest w niej osadzony. Zawsze jednak można coś zrobić lepiej. Wykorzystajmy skrócone właściwości HQPV i DCEMITQWPF, jak również skorzystajmy ze skróconego za- pisu szesnastkowego: UV[NGV[RGVGZVEUU  HQTOVD]FKURNC[KPNKPG_ J]VGZVFGEQTCVKQPPQPGHQPVRVIGPGXCCTKCNUCPUUGTKH_ E]HQPVCTKCNIGPGXCUCPUUGTKH_ F]HQPVCTKCNIGPGXCUCPUUGTKH_ FV]HQPVDQNFUGTKHOCTIKPVQRGO_ Y]HQPVXGTFCPCUCPUUGTKHEQNQT_ 05N[T]YKFVJRQUKVKQPCDUQNWVGXKUKDKNKV[JKFFGP_ CJQXGT]DCEMITQWPFHF_  UV[NG Dzięki wykorzystaniu skróconych właściwości oszczędzamy 99 bajtów (ilość znaków zmniejsza się z 449 do 350). Ponieważ skrócona właściwość HQPV wymaga wartości HQPVHCOKN[, może pojawić się problem z listą definicji, jeżeli użytkownik wybierze czcionkę UCPUUGTKH. Elementy FV będą wówczas pisane czcionką szeryfową, a ele- menty FF bezszeryfową. Aby temu zaradzić, można ustawić czcionkę dla elementu DQF[ na UGTKH: UV[NGV[RGVGZVEUU  DQF[]HQPVGOUGTKH_ HQTOVD]FKURNC[KPNKPG_ J]VGZVFGEQTCVKQPPQPGHQPVRVIGPGXCCTKCNUCPUUGTKH_ E]HQPVCTKCNIGPGXCUCPUUGTKH_ F]HQPVCTKCNIGPGXCUCPUUGTKH_ FV]HQPVDQNFUGTKHOCTIKPVQRGO_ Y]HQPVXGTFCPCUCPUUGTKHEQNQT_ 05N[T]YKFVJRQUKVKQPCDUQNWVGXKUKDKNKV[JKFFGP_ CJQXGT]DCEMITQWPFHF_  UV[NG Lecz jak się okazuje, dłuższy zapis właściwości FV i pozostawienie HQPVHCOKN[ jest w rzeczywistości krótsze o 4 znaki (360 zamiast 364 znakóww): UV[NGV[RGVGZVEUU  HQTOVD]FKURNC[KPNKPG_ J]VGZVFGEQTCVKQPPQPGHQPVRVIGPGXCCTKCNUCPUUGTKH_ E]HQPVCTKCNIGPGXCUCPUUGTKH_ Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 163 F]HQPVCTKCNIGPGXCUCPUUGTKH_ FV]HQPVYGKIJVDQNFHQPVUKGOCTIKPVQRGO_ Y]HQPVXGTFCPCUCPUUGTKHEQNQT_ 05N[T]YKFVJRQUKVKQPCDUQNWVGXKUKDKNKV[JKFFGP_ CJQXGT]DCEMITQWPFHF_  UV[NG W tym miejscu pierwotny arkusz stylów został zmniejszony o 20 (z 449 znaków do 360). W dalszej części optymalizacji można pogrupować rodziny czcionki na trzy style i osobno określić ich rozmiary: UV[NGV[RGVGZVEUU  HQTOVD]FKURNC[KPNKPG_ JEF]HQPVHCOKN[CTKCNIGPGXCUCPUUGTKH_ J]VGZVFGEQTCVKQPPQPGHQPVUKGRV_ E]HQPVUKG_ F]HQPVUKG_ FV]HQPVYGKIJVDQNFHQPVUKGOCTIKPVQRGO_ Y]HQPVXGTFCPCUCPUUGTKHEQNQT_ 05N[T]YKFVJRQUKVKQPCDUQNWVGXKUKDKNKV[JKFFGP_ CJQXGT]DCEMITQWPFHF_  UV[NG Ilość znaków zmniejszyła się do 348. Można uzyskać jeszcze lepszy rezultat używa- jąc ogólnych rodzin czcionki, mniejszych rozmiarów oraz skróconej właściwości HQPV (listing 8.2). Listing 8.2. Zoptymalizowany arkusz stylów WebReference.com UV[NGV[RGVGZVEUU  HQTOVD]FKURNC[KPNKPG_ JEF]HQPVUCPUUGTKH_ J]VGZVFGEQTCVKQPPQPG_ FV]HQPVYGKIJVDQNFHQPVUKGOCTIKPVQRGO_ Y]HQPVUCPUUGTKHEQNQT_ 05N[T]YKFVJRQUKVKQPCDUQNWVGXKUKDKNKV[JKFFGP_ CJQXGT]DCEMITQWPFHF_  UV[NG Wielkość kodu została zmniejszona do 276 bajtów, czyli o 38 procent względem pierwotnego rozmiaru. Czy zwróciłeś uwagę na połączenie metody grupowania ze skróconą właściwością HQPV? Zauważ, że powyższy kod można jeszcze bardziej zmniejszyć usuwając z niego wszystkie znaki końcowe i niepotrzebne spacje (pamię- taj, że linia nie powinna być dłuższa niż 255 znaków). Dzięki kaskadowaniu, dziedzi- czeniu, grupowaniu i skracaniu właściwości można zmniejszyć rozmiar arkusza CSS o ponad 50 procent. 164 Część III ♦ Optymalizacja DHTML: CSS i JavaScript Elementy zastępcze Coraz więcej przeglądarek obsługuje pseudoklasę JQXGT arkusza CSS2. Dzięki temu można uzyskać efekty nakładkowe, które pobierają znacznie mniej zasobów niż Java- Script. Można wyróżnić dwa podstawowe sposoby optymalizacji elementów nakład- kowych:   za pomocą grafiki nakładkowej CSS2 — przeźroczyste GIF-y woraz kolorowe tła mogą o połowę zmniejszyć ilość potrzebnych obrazkóww, za pomocą samych nakładek CSS2 — obrazki zostają całkwowicie zastąpione tekstem. Bez względu na to, z którego sposobu skorzystasz, zawsze rezultatem będzie zmniej- szenie ilości żądań HTTP i wielkości kodu. Grafika nakładkowa CSS2 Grafika nakładkowa CSS2 polega na używaniu przeźroczystych GIF-ów oraz pseu- doklasy JQXGT do zmiany tła za obrazkiem nakładkowym. Efekt jest taki sam, jak pod- czas korzystania z dodatkowych obrazków i kodu JavaScript. Stuart Robertson z Desi- gnmeme.com przedstawił sposób ulepszenia paska narzędzi na stronie Zeldman.com (rysunek 8.1). Rysunek 8.1. Grafika nakładkowa CSS2 (http:// designmeme.com/ zeldman) Wszystko, co jest potrzebne, to zaledwie kilka obrazków z przeźroczystymi wycin- kami oraz kilka wierszy kodu CSS: GNFOCPC]FKURNC[DNQEMYKFVJRZDCEMITQWPFEQNQT_ GNFOCPCJQXGT]DCEMITQWPFEQNQT ((_ Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 165 Uproszczony kod HTML wygląda następująco: FKXENCUUGNFOCP VCDNGDQTFGTEGNNRCFFKPIEGNNURCEKPI VT VFDIEQNQT CJTGHJVVRYYYGNFOCPEQOINCOQTQWU KOIPCOGINCOUTEINCOIKHYKFVJJGKIJVDQTFGT CNV/;).#/14175.+( 6TCIKEQOKEHQFFGTHTQOVJGNKHGQH  GNFOCP C VF  Ta pomysłowa metoda zmienia kolor tła łącza za obrazkiem nakładkowym. Ponieważ tekst na obrazku jest przeźroczysty, przebija przez niego kolor tła. Oczywiście po- wyższy kod można lepiej zoptymalizować używając skróconej właściwości DCEMITQ WPF i krótkich szesnastkowych zapisów kolorów. Teraz jednak chodzi o przedstawie- nie samego pomysłu. Opisana metoda znakomicie działa w starszych przeglądarkach i nie wymaga korzystania z kodu JavaScript. Proste nakładki CSS Możesz zrobić kolejny krok i wymienić wszystkie obrazki na CSS2. Proste nakładki CSS2 używają stylów zarówno dla pierwszoplanowych elementów menu, jak i dla samego tła menu. Autorzy stron znaleźli pomysłowy sposób na przekształcenie łączy w nakładki. Niektórzy tworzą przyciski trójwymiarowe, inni przekształcają łącza w elementy blokowe, a jeszcze inni zmieniają listy w wewnętrzne elementy wierszy. Bez względu na to, który sposób wybierzesz, wszystkie metody bazują na pseudoklasie JQXGT, umożliwiającej utworzenie prostej nakładki tekstowwej. Proste nakładki tekstowe Najprostszym sposobem dodania efektu nakładkowego do łącza jest użycie pseudo- klasy JQXGT. Łącza są tworzone w normalny sposób, lecz dodawany jest do nich kolor tła: CJQXGT]DCEMITQWPFHF_ Z technicznego punktu widzenia powyższa metoda może mieć wpływ na wszystkie zakotwiczone obiekty (nie tylko na łącza) i wszędzie wyświetlać efekt JQXGT. Dokład- niejsza definicja stylu JQXGT dla łączy jest następująca: CNKPMJQXGT]DCEMITQWPFHF_ CXKUKVGFJQXGT]DCEMITQWPFHF_ Dodatkowe informacje Więcej informacji o grafice nakładkowej CSS można zonaleźć na następujących stronach:   http://www.alistapart.com/stories/rollovers/ http://www.designmeme.com/zeldman/ 166 Część III ♦ Optymalizacja DHTML: CSS i JavaScript W momencie, gdy użytkownik wskaże łącze, zgodnie z powyższą zasadą kolor tła łą- cza zmieni się na żółty. Aby mieć pewność, że zmiana koloru tła nie zmniejszy czy- telności wyświetlanego tekstu, należy również okreśwlić kolor pierwszoplanowy: CNKPMJQXGT]DCEMITQWPFHFEQNQTH_ CXKUKVGFJQXGT]DCEMITQWPFHFEQNQTH_ Zebranie wszystkich pseudoklas łączy może zostać zapiwsane w następujący sposób: CNKPM]EQNQTH_ PKGQFYKGFCPGđæECŌPKGDKGUMK  CXKUKVGF]EQNQT_ QFYKGFCPGđæECŌUMCTđCVP[  CNKPMJQXGT]EQNQTHF_ YUMCCPGRTGWľ[VMQYPKMCŌľÎđVG  CXKUKVGFJQXGT]EQNQTHF_ YUMCCPGRTGWľ[VMQYPKMCŌľÎđVG  CNKPMCEVKXG]EQNQTTGF_ CMV[YPGđæEC  CXKUKVGFCEVKXG]EQNQTTGF_ CMV[YPGđæEC  Możesz uzyskać odwrotny efekt poprzez zamianę koloru pierwszoplanowego z kolo- rem tła. CNKPM]EQNQTHDCEMITQWPFHE_ CXKUKVGF]EQNQT_ CNKPMJQXGT]EQNQTHEDCEMITQWPFH_ CXKUKVGFJQXGT]EQNQTHEDCEMITQWPFH_ CNKPMCEVKXG]EQNQTTGF_ CMV[YPGđæEC  CXKUKVGFCEVKXG]EQNQTTGF_ Pionowe menu CSS2 Na stronie WebReference.com utworzone zostały przykładowe pionowe nakładki CSS2, które nie są prawidłowo wyświetlane w Netscape 4 (http://www.webreference. com/new/rollovers). W przeglądarce Netscape 4 wyglądają niemal identycznie, lecz nie mają efektu nakładkowego. W przeglądarkach obsługujących pseudoklasę JQXGT (Opera 3.5, IE4+, Netscape 6+/Mozilla) działają poprawnie. Po dokładnych testach znaleźliśmy rozwiązanie, które działało prawidłowo we wszyst- kich przeglądarkach biorących udział w testach. Użyty wzostał znacznik łącza dla arkuszy stylów. Wyniki zostały przedstawione na rysunku 8.2. Listwing 8.3 prezentuje kod CSS. Łączenie pseudoklas Internet Explorer dla Windows może mieć pewne problemy z łańcuchami pseudoklas. Wygląda na to, że wersje IE4, IE5 i IE6 mogą ignorować wszystkie, z wyjątkiem ostatniej pseudoklasy w łańcuchu. Dzieje się to tak długo, dopóki nie pojawi się identyfikator elementu. Na szczę- ście w tym przypadku nie stanowi to problemu, gdyż CNKPMJQXGT i CXKUVGFJQXGT mają określony ten sam styl (Internet Explorer efektywnie skraca oba zapisy do CJQXGT). To samo dotyczy CEVKXG. Internet Explorer może zachowywać się dziwnie, gdy zechcesz nadać różne style połączonym pseudoklasom, albo gdy nadasz styl tylko części z nich. Większość pro- jektantów nie ma problemu z takim zachowaniem, gdyż używa prostszego selektora CJQXGT albo selektora kontekstowego. Więcej informacji znajdziesz pod adresem http://www. meyerweb.com/eric/css/tests/css2/sec05-10.htm. Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 167 Rysunek 8.2. Proste pionowe nakładki CSS2 Listing 8.3. Pionowe nakładki CSS2 (kod CSS) DQF[]DCEMITQWPFHHH_ J]OCTIKPRCFFKPIGOVGZVCNKIPEGPVGT_ FKXOGPW] YKFVJRZ DCEMITQWPFHHH RCFFKPI OCTIKPGO DQTFGTRZUQNKF _ FKXOGPWC] FKURNC[DNQEM OCTIKP YKFVJ RCFFKPIGO HQPVYGKIJVDQNF DQTFGTVQRRZUQNKF EQNQTH VGZVFGEQTCVKQPPQPG _ JVON DQF[FKXOGPWC]YKFVJCWVQ_ FKXOGPWCJQXGT]DCEMITQWPFEQNQTHHH_ Aby uzyskać efekt nakładkowy na całej szerokości menu, wykorzystana została sztucz- ka zapożyczona z www.tantek.com. Szerokość łącza jest ustawiana na CWVQ dla prze- glądarek innych niż IE6: JVON DQF[FKXOGPWC]YKFVJCWVQ_ Autorzy, którzy nie chcą korzystać z tej sztuczki, mogą napisać YKFVJCWVQ dla łączy blokowych. Internet Explorer nałoży nakładkę tylko na łącza. Wszystkie pozostałe przeglądarki zgodne z CSS2 będą poprawnie obsługiwać cały pojemnik, a łącze bę- dzie aktywne. Spacje na listingu 8.4 zostały dodane z myślą o zachowaniu łączy w starszych prze- glądarkach. Na zewnątrz łączy znaczniki DT mogą zostawiać pionową lukę. Aby uniknąć wyświetlania luk, należy przenieść je na zewnątrz łączy i nie stosować stylu dla przeglądarek niezgodnych z CSS: FKXOGPWDT]FKURNC[PQPG_ 168 Część III ♦ Optymalizacja DHTML: CSS i JavaScript Listing 8.4. Pionowe nakładki CSS (kod HTML)  1 6;2 *6/.27$.+ 9  6 *6/. 0 JVVRYYYYQTI64JVONUVTKEVFVF JVON JGCF VKVNG 2TQUVGPCMđCFMK 55VKVNG NKPMTGNUV[NGUJGGVJTGHNKUVKPIEUUV[RGVGZVEUU JGCF DQF[ FKXENCUUOGPW J /GPW6KVNGJ CJTGHRTQFWEVU 2TQFWEVUDT C CJTGHUGTXKEGU 5GTXKEGUDT C CJTGHCDQWV #DQWVDT C CJTGHEQPVCEV QPVCEVDT C FKX DQF[ JVON Aby najwyższy element menu był również aktywny, można zmienić nagłówek w styl łącza, analogicznie do pozostałych elementów: FKXENCUUOGPW CJTGHJQOG *QOGDT C CJTGHRTQFWEVU 2TQFWEVUDT C Pojawia się jednak inny problem — górna krawędź menu jest rysowana podwójną li- nią, gdyż zarówno zewnętrzny FKX, jak i łącze JQOG mają krawędź górną (rysunek 8.3). Rysunek 8.3. Proste pionowe nakładki CSS2 — zwróć uwagę na podwójną krawędź górną Aby pozbyć się dodatkowej linii, wystarczy usunąć ją z górnej krawędzi FKX, tak jak zostało to przedstawione poniżej (spójrz na rezultatw na rysunku 8.4): FKXOGPW] YKFVJRZ DCEMITQWPFHHH RCFFKPI OCTIKPGO DQTFGTRZUQNKF DQTFGTVQRRZ WUWēRQFYÎLPæNKPKú  _ Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 169 Rysunek 8.4. Proste pionowe nakładki CSS2 — z pojedynczą górną krawędzią W przypadku korzystania z poleceń CSS2, które mogą być przyczyną potencjalnych problemów w Netscape 4, można opcjonalnie zastosować dyrektywy KORQTV, aby czytać z zewnętrznego arkusza stylów. Powyższe przykłady zostały przedstawione dla czarno-białych kolorów. Generalnie nie zalecam używania czarnych łączy. Nawet w menu użytkownicy spodziewają się domyślnego, niebieskiego koloru łączy. Łącza powinny odróżniać się od zwykłego tekstu. Prawdziwy przykład nakładek CSS2 Projektanci zamieniają stare nakładki bazujące na grafice i kodzie JavaScript na nowe, „lekkie” menu CSS2. Przyjrzyjmy się prawdziwym przykładom korzystającym z na- kładek CSS2. Zacznijmy od Designmeme.com. Designmeme.com Stuart Robinson, webmaster na Uniwersytecie Guelph w Kanadzie, na swojej stronie internetowej używa dwóch typów nakładek CSS2, które zostały przedstawione na ry- sunku 8.5. Z lewej strony widoczne jest menu utworzone za pomocą przeźroczystych GIF-ów i pseudoklasy JQXGT (bez korzystania z nakładek graficznych JavaScript). Pio- nowy pasek menu, widoczny po prawej stronie, korzysta natomiast z prostych nakła- dek CSS2, bez żadnej dodatkowej grafiki. Rysunek 8.5. Designmeme.com 170 Część III ♦ Optymalizacja DHTML: CSS i JavaScript Stuart Robinson jest pionierem w dziedzinie nakładek CSS, których używa od maja 2001 r. Strona CSS Edge Erica Meyera Eric Meyer jest autorem książek: „Cascading Style Sheets: The Definitive Guide” (O’Reilly, 2000 r.) („CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny”, Helion, 2001 r.) oraz „Eric Meyer on CSS” (New Riders, 2002 r.). W swoich książ- kach omawia wiele technik używania arkuszy CSS. Na jego stronie CSS Edge można znaleźć wiele technik opartych na arkuszach stylów CSS, które mogą poprawnie pra- cować w nowszych przeglądarkach (rysunek 8.6). Rysunek 8.6. Strona CSS Edge Erica Meyera (http://www.meyerweb. com/eric/css/edge/) Poziome nakładki CSS2 Używając podobnych metod i bez stosowania sztuczki FKURNC[DNQEM, można utworzyć poziome nakładki CSS2. Mike Hall na stronie Brainjar.com przedstawia bardzo dobry przykład poziomego paska menu bazującego na nakładkach CSS2 (rysunek 8.7). Po- przez wykorzystanie offsetu i efektu jasnych krawędzi (ang. light-sourced) przyciski menu zyskały trójwymiarowy wygląd. Mike Hall poszedł krok dalej, dodając hierarchiczne rozwijane menu korzystające z FKX-ów i odrobiny JavaScript. Menu jest poprawnie wyświetlane w Netscape 6 i In- ternet Explorerze 5.5, lecz nie sprawdza się w IE5 Mac i Opwerze1 (rysunek 8.8). Dzięki Kwon Ekstrom i za pozwoleniem Mike’a Halla możemy zajrzeć do środka trójwymiarowego menu, aby wyciągnąć z niego to, co najistotniejsze. Zacznijmy od HTML: 1 Opera 7.x radzi sobie już z opisaną techniką dość ddobrze — przyp. red. Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 171 Rysunek 8.7. Strona BrainJar Mike’a Halla (http://www. brainjar.com/) Rysunek 8.8. Strona BrainJar. Hierarchiczne menu oparte na modelu DOM FKXENCUUOGPWDCTYKFVJ CENCUUDWVVQPCEVKXGJTGH *QOGC CENCUUDWVVQPJTGHRTQFWEVU 2TQFWEVUC CENCUUDWVVQPJTGHUGTXKEGU 5GTXKEGUC CENCUUDWVVQPJTGHEQPVCEV QPVCEVC FKX  Jedyną niestandardową rzeczą w powyższym zapisie jest klasa CEVKXG. Zoptymalizo- wany arkusz stylów na listingu 8.5 definiuje pasek nawwigacyjny i sprawia, że aktywny przycisk wygląda tak, jakby był „wciśnięty”. 172 Część III ♦ Optymalizacja DHTML: CSS i JavaScript Listing 8.5. Trójwymiarowe poziome menu CSS2 DQF[] DCEMITQWPFHHH EQNQT _ FKXOGPWDCTFKXOGPWDCTCDWVVQP] HQPVDQNFGOCTKCNJGNXGVKECUCPUUGTKH VGZVFGEQTCVKQPPQPG EQNQTDNWG _ FKXOGPWDCT] DCEMITQWPFHF RCFFKPIRZRZ DQTFGTRZUQNKF DQTFGTEQNQTHHHH VGZVCNKIPNGHV RQFECUħTQFMQYCPKCFNCKG  _ FKXOGPWDCTCDWVVQP] DCEMITQWPFVTCPURCTGPV DQTFGTRZUQNKFHF EWTUQTFGHCWNV NGHVRZ VQRRZ OCTIKPRZ RCFFKPIRZRZ RQUKVKQPTGNCVKXG KPFGZ _ FKXOGPWDCTCDWVVQPJQXGT] DCEMITQWPFVTCPURCTGPV DQTFGTEQNQTHHHH EQNQTDNWG _ FKXOGPWDCTCCEVKXG FKXOGPW$CTCCEVKXGJQXGT] DCEMITQWPF DQTFGTEQNQTHHHH EQNQTHHH NGHVRZ VQRRZ _ Zasada CDWVVQP i odpowiadające jej style JQXGT są kluczem do sukcesu. Przycisk jest definiowany tym samym kolorem tła (przeźroczysty), co otaczający go FKX, dzięki czemu „wtapia” się on w pasek nawigacyjny. Ustawiając offset i cień, można zasymulować wygląd wciśniętego przycisku (rysunek 8.9). Styl CDWVVQPJQXGT zmienia kolor wszyst- kich czterech krawędzi, nadając trójwymiarowy wygląd. Aktywny styl JQXGT przesu- wa przycisk o 1 piksel w dół i w prawo, zamieniając kolory krawędzi i przyciemnia- jąc tło. Więcej informacji o pasku menu znajdziesz na stronie BrainJar.com w części „Revenge of the Menu Bar”. Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 173 Rysunek 8.9. Pasek menu CSS2 Dynamiczny pasek menu CSS2 Można połączyć ideę interaktywnego trójwymiarowego przycisku z warunkowym SSI i utworzyć dynamiczny pasek menu oparty na CSS2. Zacznijmy od prezentacji kodu HTML paska menu i odpowiadającemu arkuszowi CSS (listing w8.6). Listing 8.6. Szablon HTML paska menu CSS2 JVON JGCF VKVNG GOQRCUMCOGPW 55VKVNG UV[NGV[RGVGZVEUU  KORQTVEUUOGPWDCTEUU  UV[NG JGCF DQF[ KPENWFGXKTVWCNEUUOGPWDCTJVON DQF[ JVON Powyższy kod pozwala na umieszczenie na stronie paska menu o szerokości strony. Konieczna jest aktualizacja tylko dwóch plików. Zwróć uwagę, że dołączony zostaje plik HTML, a nie plik tekstowy. Poprzez ustawienie flagi w pliku konfiguracyjnym serwera (patrz rozdział 17.) można dołączyć warunkowy SSI w każdym dołączonym pliku HTML (listing 8.7). Listing 8.7. Warunkowe SSI paska menu KHGZRT ] 1 7/ 06A74+_@ RTQFWEVU    FKXENCUUOGPWDCTYKFVJ CENCUUDWVVQPJTGH *QOGC CENCUUDWVVQPCEVKXGJTGHRTQFWEVU 2TQFWEVUC CENCUUDWVVQPJTGHUGTXKEGU 5GTXKEGUC CENCUUDWVVQPJTGHEQPVCEV QPVCEVC FKX GNKHGZRT ] 1 7/ 06A74+_@ UGTXKEGU    FKXENCUUOGPWDCTYKFVJ CENCUUDWVVQPJTGH *QOGC CENCUUDWVVQPJTGHRTQFWEVU 2TQFWEVUC CENCUUDWVVQPCEVKXGJTGHUGTXKEGU 5GTXKEGUC CENCUUDWVVQPJTGHEQPVCEV QPVCEVC FKX GNKHGZRT ] 1 7/ 06A74+_@ EQPVCEV    FKXENCUUOGPWDCTYKFVJ CENCUUDWVVQPJTGH *QOGC CENCUUDWVVQPJTGHRTQFWEVU 2TQFWEVUC CENCUUDWVVQPJTGHUGTXKEGU 5GTXKEGUC CENCUUDWVVQPCEVKXGJTGHEQPVCEV QPVCEVC FKX 174 Część III ♦ Optymalizacja DHTML: CSS i JavaScript GNKHGZRT ] 1 7/ 06A74+_@  ^^ ] 1 7/ 06A74+_ @ KPFGZ JVON  FKXENCUUOGPWDCTYKFVJ CENCUUDWVVQPCEVKXGJTGH *QOGC CENCUUDWVVQPJTGHRTQFWEVU 2TQFWEVUC CENCUUDWVVQPJTGHUGTXKEGU 5GTXKEGUC CENCUUDWVVQPJTGHEQPVCEV QPVCEVC FKX GNUG FKXENCUUOGPWDCTYKFVJ CENCUUDWVVQPJTGH *QOGC CENCUUDWVVQPJTGHRTQFWEVU 2TQFWEVUC CENCUUDWVVQPJTGHUGTXKEGU 5GTXKEGUC CENCUUDWVVQPJTGHEQPVCEV QPVCEVC FKX GPFKH Nakładkowy pasek menu będzie zmieniał wygląd aktywnego przycisku. Przycisk bę- dzie aktywny, jeżeli kursor będzie znajdował się w danym menu hierarchicznym, wy- świetlonym za pomocą tego przycisku. W arkuszu stylów z listingu 8.5 wystarczy zmienić lokalizację klasy „CEVKXG” w HTML. Przykładowo, przy wybraniu pozycji „EQPVCEV”, warunkowy SSI z listingu 8.7 sprawdza bieżący URL i znajduje odpo- wiednią instrukcję: KHGZRT ] 1 7/ 06A74+_@ EQPVCEV    Wyrażenie odpowiada każdemu adresowi URL zaczynającemu się od EQPVCEV, jak np. EQPVCEVUVCHHJVON (rysunek 8.10). Rysunek 8.10. Dynamiczny pasek menu CSS2 To samo przypisanie ENCUU można uzyskać za pomocą kodu JavaScript, lecz — jak widać na powyższym przykładzie — można się bez niego obwejść. Menu oparte na liście Christopher Schmitt, założyciel BabbleList.com, jest najprawdopodobniej pierwszą osobą, która opublikowała sztuczkę polegającą na uzyskaniu poziomego nakładkowe- go menu przy użyciu FKURNC[KPNKPG na elementach listy. Na rysunku 8.11 przedsta- wiony został przykład. Rysunek 8.11. Strona CSSBook.com Christophera Schmitta. Menu oparte na liście (http://www.cssbook. com/cssnav/css2.html) Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 175 Różnica pomiędzy tą i wcześniej opisaną metodą polega na tym, że w tym przypadku elementy menu są oddzielone od siebie wewnętrznymi elementami listy. Korzyść jest taka, że aktywny jest cały pojemnik, który w całości jest łączem. Margines wokół łą- cza tworzy przestrzeń otaczającą tekst. Nie ma potrzeby, aby używać łączy elemen- tów blokowych. Poniżej przedstawiony został kod HTML: FKXKFPCX R 0CXKICVKQPR WN NK CJTGHCPMNG #PMNGC NK NK CJTGH DQCV $QCVC NK NK CJTGHEWRECMG WRECMGC NK NK CJTGHFQWDNG QWDNGC NK NK CJTGHGCVGT[ CVGT[C NK WN FKX W prosty i jasny sposób FKXPCX otacza nieuporządkowaną listę. Wystarczy nadać styl wyświetlania listy (KPNKPG zamiast domyślnego NKUVKVGO): PCXNK] RCFFKPI OCTIKP FKURNC[KPNKPG OKGPKCNKDNQMQYGIQPCNKPKQY[  HQPVUKGGO HQPVHCOKN[8GTFCPC#TKCN*GNXGVKECUCPUUGTKH _ Następnie należy dodać trochę marginesu wewnętrznego i efwekt JQXGT: PCXNKC] FKURNC[KPNKPG RCFFKPIRZ OCTIKP EQNQT DCEMITQWPFEQNQTEEE HQPVUKGGO HQPVHCOKN[8GTFCPC#TKCN*GNXGVKECUCPUUGTKH VGZVFGEQTCVKQPPQPG _ PCXNKCJQXGT] EQNQTHHH DCEMITQWPFEQNQT HQPVUKGGO HQPVHCOKN[8GTFCPC#TKCN*GNXGVKECUCPUUGTKH VGZVFGEQTCVKQPPQPG _ Zauważ, że powyższy kod można zoptymalizować za pomocą skróconych właściwo- ści i usunięcia paru nadmiarowych informacji. Końcowy, zoptymalizowany kod arku- sza stylów został przedstawiony na listingu 8.8. Listing 8.8. Zoptymalizowane menu oparte na elementach listy PCX] RQUKVKQPCDUQNWVG VQRRZ NGHVRZ EQNQTHHH DCEMITQWPFVTCPURCTGPV HQPVGOXGTFCPCCTKCNJGNXGVKECUCPUUGTKH _ 176 Część III ♦ Optymalizacja DHTML: CSS i JavaScript PCXWNWN] OCTIKP RCFFKPI _ PCXNK] RCFFKPI OCTIKP FKURNC[KPNKPG HQPVGOXGTFCPCCTKCNJGNXGVKECUCPUUGTKH _ PCXNKC] FKURNC[KPNKPG RCFFKPIRZ OCTIKP EQNQT DCEMITQWPFEEE HQPVGOXGTFCPCCTKCNJGNXGVKECUCPUUGTKH VGZVFGEQTCVKQPPQPG _ PCXNKCJQXGT] EQNQTHHH DCEMITQWPF _ PCXNKCCEVKXG] EQNQTEEE DCEMITQWPF _ Tabele i CSS W rozdziale 4. „Zaawansowane metody optymalizacji” dowiedziałeś się, w jaki spo- sób należy przyspieszać wyświetlanie tabel za pomocą właściwości CSS2 VCDNG NC[QWVHKZGF oraz elementów EQNITQWR i EQN. Innym sposobem jest wykorzystanie arkuszy CSS do określenia koloru tła komórek tabeli. Dzięki temu nie trzeba w każ- dym miejscu pisać DIEQNQT. Zamiast: VCDNGDIEQNQTHHEE VTDIEQNQTVGPUCOMQNQT VF VF VFDIEQNQTKPP[MQNQT VF Dodatkowe informacje Więcej informacji o menu opartym na wewnętrznych elementach listy można znaleźć na stronie Christophera Schmitta CSSBook.com albo w jego książce „Designing CSS Web Pa- ges”, New Riders, 2002 r. Polecam również stronę Dave’a Lindquista, omawiającą menu DHTML tworzone na bazie list (rozwijane i rozszerzalne poniżej 6 kB) — http://www.gazingus. org/dhtml/?id=109. Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 177 należy napisać: Z]DCEMITQWPFHE_[]DCEMITQWPFHHGFC_]DCEMITQWPFHHHCE_ VCDNGENCUUZ VTENCUU[ VF VF VFENCUU VF Wszystkie przeglądarki od wersji 4. obsługują powyższą mwetodę. Kontrolowanie układu za pomocą arkuszy CSS Rozmieszczenie elementów strony za pomocą arkuszy CSS może przekształcić stary tabelaryczny układ w elegancki układ bazujący na CSS. Wielu projektantów przeko- nało się, że zmiana sposobu rozmieszczenia elementów może zmniejszyć obciążenie łącza oraz koszty utrzymania. Pozbycie się tabel daje również większą elastyczność, pozwalając na wyświetlanie różnej zawartości z tymi samymi stylami. Przenosząc warstwę prezentacyjną do arkuszy stylów, struktura dokumentu staje się przejrzysta. Zmiana układu strony sprowadza się do zmiany jednego arkwusza stylów. Przeniesienie zawartości na inną platformę (inną przeglądarkę lub wersję przeglądarki) albo inny typ mediów wymaga jedynie zastosowania innego arkusza stylów i nie zmusza do po- nownego przepisywania kodu dokumentu. Najpopularniejszym układem jest struktura dwu- lub trójkolumnowa (zachowanie zgodności z Netscape 4 jest tutaj pewnym wyzwaniem). Spójrzmy na przykładowy układ trójkolumnowy z listingu 8.9. Listing 8.9. Układ trójkolumnowy — stary sposób VCDNG VT VFEQNURCP R IÎTP[RCUGMPCYKICE[LP[ PCMHKTOQY[KTGMNCO[ R VF VT VT VF R NGY[RCUGMPCYKICE[LP[R VF VF R IđÎYP[QDUCTR VF VT VCDNG 178 Część III ♦ Optymalizacja DHTML: CSS i JavaScript W arkuszu CSS komórki tabeli są zastąpione elementawmi FKX (listing 8.10). Listing 8.10. Układ trójkolumnowy — nowy sposób FKXKFCFX R IÎTP[RCUGMPCYKICE[LP[ PCMHKTOQY[KTGMNCO[ R FKX FKXKFPCX R NGY[RCUGMPCYKICE[LP[R FKX FKXKFOCKP R IđÎYP[QDUCTR FKX Powyższy kod jest znacznie bardziej przejrzysty. Zwróć uwagę, że elementy FKX są nazywane funkcjonalnie, a nie na podstawie lokalizacji. Dodajmy teraz CSS, aby od- powiednio rozmieścić elementy (listing 8.11). Listing 8.11. Układ trójkolumnowy — CSS UV[NGV[RGVGZVEUU  FKXCFX] DCEMITQWPFEEE YKFVJCWVQ OCTIKP RCFFKPIGO _ FKXPCX] DCEMITQWPFFFF HNQCVNGHV YKFVJ OCTIKPTKIJVGO RCFFKPIGO _ FKXOCKP] DCEMITQWPFHE OCTIKPNGHV RCFFKPIGO _  UV[NG Kluczowymi elementami dla układów dwu- i trójkolumnowych są: HNQCV, OCTIKPNGHV i TKIJV. HNQCV przesuwa dany element do prawej lub lewej strony (pozostała zawartość go „otacza”). W tym przypadku nawigacyjny FKX jest ustawiony po lewej stronie, ma określoną szerokość i margines wewnętrzny oraz margines zewnętrzny po stronie pra- wej. Dla głównej zawartości FKX ustawiany jest lewy margines zewnętrzny, który ma odpowiadać szerokości elementu przesuniętego do lewej swtrony. Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 179 Zwiększenie skuteczności Im wyżej umieścisz główną zawartość dokumentu w kodzie HTML, tym większa bę- dzie skuteczność wyszukiwania słów kluczowych na stronie. Można wykorzystać CSS do sztuczki wyświetlania tabeli opisanej w rozdziale 4. Na listingu 8.12 przed- stawiony został sposób odwrotnego wyrównywania elementów — zamiast przesunię- cia paska nawigacyjnego do lewej strony główna zawartość FKX jest przesuwana do strony prawej. Listing 8.12. Udoskonalony układ trójkolumnowy (kod CSS) UV[NGV[RGVGZVEUU  FKXCFX] DCEMITQWPFEEE YKFVJCWVQ OCTIKP RCFFKPIGO _ FKXOCKP] HNQCVTKIJV YKFVJ DCEMITQWPFHE OCTIKPNGHVGO RCFFKPIGO _ FKXPCX] DCEMITQWPFFFF OCTIKPTKIJV RCFFKPIGO _  UV[NG Można teraz zamienić pozycje FKX-ów OCKP z PCX, umieszczając główną zawartość wcześniej w kodzie HTML (listing 8.13). Listing 8.13. Udoskonalony układ trójkolumnowy (kod HTML) FKXKFCFX R IÎTP[RCUGMPCYKICE[LP[ PCMHKTOQY[KTGMNCO[ R FKX FKXKFOCKP R IđÎYPCCYCTVQħèR FKX R NGY[RCUGMPCYKICE[LP[R FKX Strona wygląda identycznie, lecz główna zawartość jest wcześniej umieszczona w ko- dzie, dzięki czemu jest szybciej wyświetlana. Jeżeli chcesz, możesz ją nawet umieścić na samej górze dokumentu, a dopiero za nią FKX z reklamami i nawigacją. 180 Część III ♦ Optymalizacja DHTML: CSS i JavaScript Dodatkowe informacje Na poniższych stronach znajdziesz dodatkowe informacji o sposobach tworzenia układów dokumentów na podstawie CSS:  http://www.alistapart.com — A List Apart korzysta z układu opartego na arkuszacoh CSS i uczy programistów, jak z nich korzystać.  http://www.meyerweb.com/eric/css/edge/ — strona CSS Edge Erica Meyera jest prawdziwym placem zabaw z metodami bazującymi na arkouszach CSS.  http://developer.apple.com/internet/css/introcsslayiout.html — wstęp do układów stron opartych na arkuszach CSS (autorstwa Erica Costeollo). Podsumowanie Aby w pełni wykorzystać arkusz CSS, niezbędne jest przekształcenie kodu doku- mentu. Należy korzystać ze skróconych nazw ENCUU i KF, używać skróconych wła- ściwości oraz grupować właściwości minimalizując rozmiar arkusza stylów. Należy zamienić stary tabelaryczny układ dokumentu oraz nakładki oparte na obrazkach i JavaScripcie na strukturę bazującą na arkuszach CSS. Aby zmniejszyć tabele, należy nadać styl za pomocą arkuszy CSS (a nie umieszczać w każdym miejscu właściwości DIEQNQT). Warto także przenieść główną zawartość dokumentu na wyższą pozycję w kodzie HTML (sztuczka wyświetlania tabeli albo metody CSS). Poniżej przedsta- wiona została lista wskazówek omówionych w niniejszwym rozdziale:    Używaj skróconych właściwości, grupowania i skrótów wdo optymalizacji arkuszy CSS. Zamieniaj kod efektów nakładkowych JavaScript/obrazki nwa CSS. Twórz efekty nakładkowe CSS2 za pomocą pseudoklasy JQXGT, stylizowanych łączy albo list.  Używaj VCDNGNC[QWVHKZGF, EQNITQWR i EQN, aby zwiększyć prędkość wyświetlania tabel.     Używaj arkuszy CSS do ustawiania kolorów komórek tabweli (działa tylko z przeglądarkami w wersji 4+). Definiuj układ i rozmieszczenie elementów poprzez arwkusze CSS i XHTML, aby oddzielić warstwę prezentacyjną od struktury i zmnwiejszyć rozmiar kodu. Staraj się, aby układ dokumentu był elastyczny. Zwiększ skuteczność wyszukiwania na swojej stronie. Rozdział 8. ♦ Zaawansowana optymalizacja kodu CSS 181 Polecane publikacje  „Cascading Style Sheets: The Definitive Guide”, Eric Meyer, oO’Reilly 2000r. („CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedycozny”, Helion, 2001 r.) — doskonałe wprowadzenie do CSS.  „Eric Meyer on CSS”, Eric Meyer, New Riders, 2002 r. — Meyer prozedstawia prawdziwy świat CSS (13 projektów konwersji).  A List Apart pod przewodnictwem Jefferya Zeldmana (http://www.alistapart.com) — dobre źródło informacji o standardach internetowych, ow tym między innymi o CSS.  Cascading Style Sheets 1, 2 i 3, World Wide Web Consortoium (http://www.w3.org/Style/CSS/) — oficjalna specyfikacja CSS.  The Web Standards Project pod przewodnictwem Jefferya oZeldmana (http://www.webstandards.org) — ustalenie standardów dla producentów przeglądarek internetowych. Powrót do WaSP (The Web Standoards Project).
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Zwiększ szybkość! Optymalizacja serwisów internetowych
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ą: