Spis treci
Wstp .......................................................................................... 11
Rozdzia 1. Elastyczny tekst .......................................................................... 19
Definiowanie wielkoci tekstu za pomoc sów kluczowych,
wartoci procentowych lub jednostek em jest najbardziej
elastyczne i umoliwia uytkownikom jej regulowanie .............................20
Typowe rozwizanie ....................................................................................21
Dlaczego to rozwizanie nie jest kuloodporne ............................................22
Dostpne moliwoci ..................................................................................24
Jednostki dugoci .......................................................................................24
Sowa kluczowe — wzgldne ......................................................................24
Procenty ......................................................................................................25
Sowa kluczowe — bezwzgldne ................................................................25
Rozwizanie kuloodporne ...........................................................................26
Sowa kluczowe — wyjanienie ...................................................................26
Rezygnacja z dokadnoci „co do piksela” ...................................................27
Dlaczego rozwizanie to jest kuloodporne ..................................................28
Elastyczna baza — i co dalej? ......................................................................28
Ustaw i zapomnij .........................................................................................28
Procentowa zmiana wartoci bazowej ........................................................29
Stosowanie sów kluczowych i wartoci procentowych ...............................32
Ustawienie poredniej wartoci bazowej .....................................................32
Zagniedajc deklaracje w procentach, musimy zachowa ostrono ......34
Spójno dziki wartociom procentowym ....................................................35
Elastyczny rozmiar tekstu dziki jednostkom em .........................................37
Jednostka rem .............................................................................................39
Podsumowanie ............................................................................................41
Rozdzia 2. Skalowalna nawigacja ................................................................ 43
Naley opracowa tak nawigacj, która skaluje si w zalenoci
od ustawionej wielkoci tekstu oraz od objtoci treci
umieszczonych na stronie .........................................................................44
Typowe rozwizanie ....................................................................................45
Eleganckie zakadki .....................................................................................45
6
Spis treci
Typowy efekt rollover, czyli podmiana obrazków ....................................... 46
Dlaczego rozwizanie to nie jest kuloodporne ............................................ 47
Ogrom kodu ............................................................................................... 47
Problemy z dostpnoci ............................................................................ 48
Problemy ze skalowalnoci ........................................................................ 48
Brak elastycznoci ....................................................................................... 48
Rozwizanie kuloodporne ........................................................................... 49
Bez stylów ................................................................................................... 50
Dwa mae obrazki ....................................................................................... 50
Stosowanie stylów ...................................................................................... 51
(O)pywanie na ratunek .............................................................................. 52
Formowanie zakadek ................................................................................. 53
Wyrównanie obrazków ta .......................................................................... 54
Dodanie dolnego obramowania .................................................................. 56
Efekt podmiany ........................................................................................... 57
Wyróniona zakadka .................................................................................. 58
Dlaczego rozwizanie to jest kuloodporne .................................................. 58
Wariant bez obrazków, wykorzystujcy gradienty CSS3 .............................. 59
Podobny przykad wykorzystujcy jednostki em .......................................... 63
Dodatkowe przykady ................................................................................. 65
MOZILLA.ORG ............................................................................................. 65
Skosy .......................................................................................................... 65
Wyszukiwanie w witrynie ESPN.com ........................................................... 66
Podsumowanie ........................................................................................... 68
Rozdzia 3. Elastyczne wiersze .......................................................................71
Nie naley definiowa wysokoci poziomych elementów
strony i trzeba zaplanowa moliwo powikszenia ich w pionie ........... 72
Typowe rozwizanie .................................................................................... 73
Dlaczego rozwizanie to nie jest kuloodporne ............................................ 74
Mao istotne elementy graficzne ................................................................. 74
Stae wysokoci ........................................................................................... 75
Przeronity kod ......................................................................................... 75
Rozwizanie kuloodporne ........................................................................... 76
Struktura kodu ............................................................................................ 76
Identyfikacja elementów ............................................................................. 77
Bez stylów ................................................................................................... 78
Dodanie ta ................................................................................................. 79
Pozycjonowanie zawartoci ........................................................................ 79
Brakujce to ............................................................................................... 81
Dodanie szczegóów ................................................................................... 82
Cztery zaokrglone naroniki ...................................................................... 84
Szczegóy zwizane z tekstem i odnonikami .............................................. 85
Ostatni etap ................................................................................................ 87
Poprawka dla IE7 ........................................................................................ 89
Dlaczego rozwizanie to jest kuloodporne .................................................. 90
Oddzielenie struktury od wygldu .............................................................. 90
Spis treci
7
Koniec z ustalonymi wysokociami ..............................................................91
Wariant z atrybutem border-radius .............................................................92
Inny przykad rozcigania ............................................................................94
Struktura kodu ............................................................................................95
Tworzenie dwóch obrazków .......................................................................96
Zastosowanie stylów CSS ............................................................................96
Autorozciganie ..........................................................................................98
Podsumowanie ............................................................................................99
Rozdzia 4. Pomysowe rozmieszczanie elementów ................................... 101
Zamiast stosowa tabele, lepiej uywa elementów pywajcych ..............102
Typowe rozwizanie ..................................................................................103
Dlaczego rozwizanie to nie jest kuloodporne ..........................................104
Rozwizanie kuloodporne .........................................................................105
Nieograniczony wybór struktur .................................................................105
Stosowanie list definicji .............................................................................106
Struktura kodu ..........................................................................................107
Bez stylów .................................................................................................109
Definiowanie stylów dla kontenera ...........................................................109
Identyfikacja obrazków .............................................................................110
Style podstawowe .....................................................................................111
Pozycjonowanie obrazka ...........................................................................115
Przeciwlege obiekty pywajce .................................................................116
Miejsce dla opisów kadej dugoci ...........................................................118
Samoczynne anulowanie opywania elementów .......................................120
Ostatnie szlify ............................................................................................123
Zmiana kierunku wyrównania ...................................................................125
Efekt siatki .................................................................................................127
Inne to ......................................................................................................131
Zastosowanie cienia ..................................................................................132
Zabawa z blokowaniem opywania elementów pywajcych ....................134
Blokowanie opywania elementów za pomoc waciwoci overflow .......135
atwe blokowanie opywania elementów
za pomoc zawartoci generowanej .......................................................136
Dlaczego rozwizanie to jest kuloodporne ................................................140
Podsumowanie ..........................................................................................141
Rozdzia 5. Niezniszczalne ramki ................................................................. 143
Przed przystpieniem do tworzenia stylów dla ramek
naley wszystko dokadnie zaplanowa ..................................................144
Typowe rozwizanie ..................................................................................145
Dlaczego rozwizanie to nie jest kuloodporne ..........................................146
Rozwizanie kuloodporne .........................................................................147
Struktura kodu ..........................................................................................148
Strategia z obrazkami ................................................................................149
Stosowanie stylów ....................................................................................151
Dlaczego rozwizanie to jest kuloodporne ................................................154
8
Spis treci
Wariant z uyciem CSS3 ............................................................................ 155
Inne techniki tworzenia zaokrglonych naroników .................................. 159
Rogi, rogi na okrgo ................................................................................ 160
Pozorne ramki ........................................................................................... 167
Jeden zaokrglony naronik ...................................................................... 168
Iluzja naronika ......................................................................................... 171
Kuloodporna strzaka ................................................................................ 171
Ograniczenia inspiruj ............................................................................... 173
Podsumowanie ......................................................................................... 173
Rozdzia 6. Brak obrazków? Brak CSS? aden problem! .............................175
Naley zadba o to, by tre strony bya czytelna,
nawet jeli strona zostanie pozbawiona rysunków i stylów CSS ............. 176
Typowe rozwizanie .................................................................................. 177
Dlaczego rozwizanie to nie jest kuloodporne .......................................... 179
Rozwizanie kuloodporne ......................................................................... 181
Dlaczego rozwizanie to jest kuloodporne ................................................ 181
Ze stylami lub bez ..................................................................................... 184
10-sekundowy test uytecznoci ............................................................... 185
Typowe rozwizanie .................................................................................. 186
Rozwizanie kuloodporne ......................................................................... 187
Test Dig Dug ............................................................................................. 189
Narzdzia do sprawdzania kuloodpornoci stron ...................................... 190
Favelety ..................................................................................................... 190
Pasek Web Developer ............................................................................... 193
Pasek Web Accessibility Toolbar ............................................................... 194
Firebug ...................................................................................................... 195
Walidacja jako narzdzie ........................................................................... 195
Podsumowanie ......................................................................................... 198
Rozdzia 7. Konwersja tabel .........................................................................201
Z tabel naley usun kod odpowiadajcy za warstw prezentacji,
a ich wygld zdefiniowa za pomoc CSS .............................................. 202
Typowe rozwizanie .................................................................................. 203
Dlaczego rozwizanie to nie jest kuloodporne .......................................... 205
Rozwizanie kuloodporne ......................................................................... 206
Struktura kodu .......................................................................................... 206
Stosowanie stylów .................................................................................... 212
Dlaczego rozwizanie to jest kuloodporne ................................................ 224
Podsumowanie ......................................................................................... 225
Rozdzia 8. Pynny oraz elastyczny ukad strony .........................................227
Eksperymentuj z projektowaniem ukadów stron,
które rozszerzaj si i zwaj ................................................................ 228
Typowe rozwizanie .................................................................................. 229
Dlaczego rozwizanie to nie jest kuloodporne .......................................... 231
[ Pobierz całość w formacie PDF ]