Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00271 004590 15180795 na godz. na dobę w sumie
Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III - książka
Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III - książka
Autor: Liczba stron: 312
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-5120-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Tylko krok dzieli Cię od idealnej witryny!

Każdego dnia w sieci pojawiają się tysiące nowych witryn. Niejednokrotnie są one perfekcyjne merytorycznie i interesujące wizualnie. Niestety, wiele z nich nie odniesie sukcesu, bo nie trafi do szerokiego grona odbiorców. Konkurencja jest dziś tak ogromna, że Twoje rozwiązanie musi się wyróżniać nie pod jednym, a pod kilkoma względami. Jedną z najważniejszych zalet dobrej strony jest lekki, poprawny kod, korzystający z nowości języka HTML5 i CSS3 oraz dostępny dla różnych urządzeń (stacjonarnych i mobilnych). W trakcie lektury kolejnej edycji tej wyjątkowej książki dowiesz się, jak zagwarantować czytelność i atrakcyjność Twojej strony, nawet jeśli nie masz dostępu do elementów graficznych i CSS. Ponadto zobaczysz, jak sobie radzić z rozmiarem czcionek czy ograniczoną przestrzenią.

Każdy rozdział rozpoczyna się opisem rozwiązania, które nie jest kuloodporne. Rozwiązanie takie przeważnie opiera się na tradycyjnych technikach i zwykłym kodzie HTML. Dan Cederholm, autor tej bestsellerowej pozycji, rozkłada je na czynniki pierwsze i pokazuje przy okazji różne ograniczenia. Następnie proponuje zastosowanie wariantu alternatywnego, opracowanego przy użyciu HTML-a oraz CSS. Ten wariant umożliwia zastąpienie opasłego źródła odchudzonym, strukturalnym kodem oraz przemyślnie opracowanymi regułami CSS. W rezultacie otrzymany projekt jest lekki i dostępny dla wielu użytkowników. Na koniec Dan prezentuje proces tworzenia kompletnej strony internetowej z komponentów omówionych w poprzednich rozdziałach. Ten sposób naprawdę pozwala się wiele nauczyć!

Sięgnij po tę książkę i twórz niezawodne strony w sieci!

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

Darmowy fragment publikacji:

Tytuł oryginału: Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with HTML5 and CSS3 (3rd Edition) Tłumaczenie: Piotr Cieślak ISBN: 978-83-246-5120-7 Authorized translation from the English language edition, entitled: BULLETPROOF WEB DESIGN: IMPROVING FLEXIBILITY AND PROTECTING AGAINST WORST-CASE SCENARIOS WITH HTML5 AND CSS3, Third Edition; ISBN 0321808355; by Daniel Cederholm; published by Pearson Education, Inc, publishing as New Riders Publishing. Copyright © 2012 by Daniel Cederholm. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc. Polish language edition published by HELION S.A. Copyright © 2012. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/kuloo3 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treĂci WstÚp .......................................................................................... 11 Rozdziaï 1. Elastyczny tekst .......................................................................... 19 Definiowanie wielkoĂci tekstu za pomocÈ sïów kluczowych, wartoĂci procentowych lub jednostek em jest najbardziej elastyczne i umoĝliwia uĝytkownikom jej regulowanie .............................20 Typowe rozwiÈzanie ....................................................................................21 Dlaczego to rozwiÈzanie nie jest kuloodporne ............................................22 DostÚpne moĝliwoĂci ..................................................................................24 Jednostki dïugoĂci .......................................................................................24 Sïowa kluczowe — wzglÚdne ......................................................................24 Procenty ......................................................................................................25 Sïowa kluczowe — bezwzglÚdne ................................................................25 RozwiÈzanie kuloodporne ...........................................................................26 Sïowa kluczowe — wyjaĂnienie ...................................................................26 Rezygnacja z dokïadnoĂci „co do piksela” ...................................................27 Dlaczego rozwiÈzanie to jest kuloodporne ..................................................28 Elastyczna baza — i co dalej? ......................................................................28 Ustaw i zapomnij .........................................................................................28 Procentowa zmiana wartoĂci bazowej ........................................................29 Stosowanie sïów kluczowych i wartoĂci procentowych ...............................32 Ustawienie poĂredniej wartoĂci bazowej .....................................................32 ZagnieĝdĝajÈc deklaracje w procentach, musimy zachowaÊ ostroĝnoĂÊ ......34 SpójnoĂÊ dziÚki wartoĂciom procentowym ....................................................35 Elastyczny rozmiar tekstu dziÚki jednostkom em .........................................37 Jednostka rem .............................................................................................39 Podsumowanie ............................................................................................41 Rozdziaï 2. Skalowalna nawigacja ................................................................ 43 Naleĝy opracowaÊ takÈ nawigacjÚ, która skaluje siÚ w zaleĝnoĂci od ustawionej wielkoĂci tekstu oraz od objÚtoĂci treĂci umieszczonych na stronie .........................................................................44 Typowe rozwiÈzanie ....................................................................................45 Eleganckie zakïadki .....................................................................................45 6 Spis treĂci Typowy efekt rollover, czyli podmiana obrazków ....................................... 46 Dlaczego rozwiÈzanie to nie jest kuloodporne ............................................ 47 Ogrom kodu ............................................................................................... 47 Problemy z dostÚpnoĂciÈ ............................................................................ 48 Problemy ze skalowalnoĂciÈ ........................................................................ 48 Brak elastycznoĂci ....................................................................................... 48 RozwiÈzanie kuloodporne ........................................................................... 49 Bez stylów ................................................................................................... 50 Dwa maïe obrazki ....................................................................................... 50 Stosowanie stylów ...................................................................................... 51 (O)pïywanie na ratunek .............................................................................. 52 Formowanie zakïadek ................................................................................. 53 Wyrównanie obrazków tïa .......................................................................... 54 Dodanie dolnego obramowania .................................................................. 56 Efekt podmiany ........................................................................................... 57 Wyróĝniona zakïadka .................................................................................. 58 Dlaczego rozwiÈzanie to jest kuloodporne .................................................. 58 Wariant bez obrazków, wykorzystujÈcy gradienty CSS3 .............................. 59 Podobny przykïad wykorzystujÈcy jednostki em .......................................... 63 Dodatkowe przykïady ................................................................................. 65 MOZILLA.ORG ............................................................................................. 65 Skosy .......................................................................................................... 65 Wyszukiwanie w witrynie ESPN.com ........................................................... 66 Podsumowanie ........................................................................................... 68 Rozdziaï 3. Elastyczne wiersze .......................................................................71 Nie naleĝy definiowaÊ wysokoĂci poziomych elementów strony i trzeba zaplanowaÊ moĝliwoĂÊ powiÚkszenia ich w pionie ........... 72 Typowe rozwiÈzanie .................................................................................... 73 Dlaczego rozwiÈzanie to nie jest kuloodporne ............................................ 74 Maïo istotne elementy graficzne ................................................................. 74 Staïe wysokoĂci ........................................................................................... 75 PrzeroĂniÚty kod ......................................................................................... 75 RozwiÈzanie kuloodporne ........................................................................... 76 Struktura kodu ............................................................................................ 76 Identyfikacja elementów ............................................................................. 77 Bez stylów ................................................................................................... 78 Dodanie tïa ................................................................................................. 79 Pozycjonowanie zawartoĂci ........................................................................ 79 BrakujÈce tïo ............................................................................................... 81 Dodanie szczegóïów ................................................................................... 82 Cztery zaokrÈglone naroĝniki ...................................................................... 84 Szczegóïy zwiÈzane z tekstem i odnoĂnikami .............................................. 85 Ostatni etap ................................................................................................ 87 Poprawka dla IE7 ........................................................................................ 89 Dlaczego rozwiÈzanie to jest kuloodporne .................................................. 90 Oddzielenie struktury od wyglÈdu .............................................................. 90 Spis treĂci 7 Koniec z ustalonymi wysokoĂciami ..............................................................91 Wariant z atrybutem border-radius .............................................................92 Inny przykïad rozciÈgania ............................................................................94 Struktura kodu ............................................................................................95 Tworzenie dwóch obrazków .......................................................................96 Zastosowanie stylów CSS ............................................................................96 AutorozciÈganie ..........................................................................................98 Podsumowanie ............................................................................................99 Rozdziaï 4. Pomysïowe rozmieszczanie elementów ................................... 101 Zamiast stosowaÊ tabele, lepiej uĝywaÊ elementów pïywajÈcych ..............102 Typowe rozwiÈzanie ..................................................................................103 Dlaczego rozwiÈzanie to nie jest kuloodporne ..........................................104 RozwiÈzanie 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 Przeciwlegïe obiekty pïywajÈce .................................................................116 Miejsce dla opisów kaĝdej dïugoĂci ...........................................................118 Samoczynne anulowanie opïywania elementów .......................................120 Ostatnie szlify ............................................................................................123 Zmiana kierunku wyrównania ...................................................................125 Efekt siatki .................................................................................................127 Inne tïo ......................................................................................................131 Zastosowanie cienia ..................................................................................132 Zabawa z blokowaniem opïywania elementów pïywajÈcych ....................134 Blokowanie opïywania elementów za pomocÈ wïaĂciwoĂci overflow .......135 ’atwe blokowanie opïywania elementów za pomocÈ zawartoĂci generowanej .......................................................136 Dlaczego rozwiÈzanie to jest kuloodporne ................................................140 Podsumowanie ..........................................................................................141 Rozdziaï 5. Niezniszczalne ramki ................................................................. 143 Przed przystÈpieniem do tworzenia stylów dla ramek naleĝy wszystko dokïadnie zaplanowaÊ ..................................................144 Typowe rozwiÈzanie ..................................................................................145 Dlaczego rozwiÈzanie to nie jest kuloodporne ..........................................146 RozwiÈzanie kuloodporne .........................................................................147 Struktura kodu ..........................................................................................148 Strategia z obrazkami ................................................................................149 Stosowanie stylów ....................................................................................151 Dlaczego rozwiÈzanie to jest kuloodporne ................................................154 8 Spis treĂci Wariant z uĝyciem CSS3 ............................................................................ 155 Inne techniki tworzenia zaokrÈglonych naroĝników .................................. 159 Rogi, rogi na okrÈgïo ................................................................................ 160 Pozorne ramki ........................................................................................... 167 Jeden zaokrÈglony naroĝnik ...................................................................... 168 Iluzja naroĝnika ......................................................................................... 171 Kuloodporna strzaïka ................................................................................ 171 Ograniczenia inspirujÈ ............................................................................... 173 Podsumowanie ......................................................................................... 173 Rozdziaï 6. Brak obrazków? Brak CSS? ¿aden problem! .............................175 Naleĝy zadbaÊ o to, by treĂÊ strony byïa czytelna, nawet jeĂli strona zostanie pozbawiona rysunków i stylów CSS ............. 176 Typowe rozwiÈzanie .................................................................................. 177 Dlaczego rozwiÈzanie to nie jest kuloodporne .......................................... 179 RozwiÈzanie kuloodporne ......................................................................... 181 Dlaczego rozwiÈzanie to jest kuloodporne ................................................ 181 Ze stylami lub bez ..................................................................................... 184 10-sekundowy test uĝytecznoĂci ............................................................... 185 Typowe rozwiÈzanie .................................................................................. 186 RozwiÈzanie kuloodporne ......................................................................... 187 Test Dig Dug ............................................................................................. 189 NarzÚdzia do sprawdzania kuloodpornoĂci stron ...................................... 190 Favelety ..................................................................................................... 190 Pasek Web Developer ............................................................................... 193 Pasek Web Accessibility Toolbar ............................................................... 194 Firebug ...................................................................................................... 195 Walidacja jako narzÚdzie ........................................................................... 195 Podsumowanie ......................................................................................... 198 Rozdziaï 7. Konwersja tabel .........................................................................201 Z tabel naleĝy usunÈÊ kod odpowiadajÈcy za warstwÚ prezentacji, a ich wyglÈd zdefiniowaÊ za pomocÈ CSS .............................................. 202 Typowe rozwiÈzanie .................................................................................. 203 Dlaczego rozwiÈzanie to nie jest kuloodporne .......................................... 205 RozwiÈzanie kuloodporne ......................................................................... 206 Struktura kodu .......................................................................................... 206 Stosowanie stylów .................................................................................... 212 Dlaczego rozwiÈzanie to jest kuloodporne ................................................ 224 Podsumowanie ......................................................................................... 225 Rozdziaï 8. Pïynny oraz elastyczny ukïad strony .........................................227 Eksperymentuj z projektowaniem ukïadów stron, które rozszerzajÈ siÚ i zwÚĝajÈ ................................................................ 228 Typowe rozwiÈzanie .................................................................................. 229 Dlaczego rozwiÈzanie to nie jest kuloodporne .......................................... 231 Spis treĂci 9 Nadmiar kodu ěródïowego ........................................................................231 Koszmar aktualizacji ..................................................................................231 NiewïaĂciwa kolejnoĂÊ treĂci strony ..........................................................232 RozwiÈzanie kuloodporne .........................................................................233 Struktura kodu ..........................................................................................233 Tworzenie kolumn: pïywanie kontra pozycjonowanie ..............................234 Stosowanie stylów ....................................................................................236 OdstÚpy .....................................................................................................239 Dopeïnienie kolumn ..................................................................................243 Ustawianie szerokoĂci minimalnej oraz maksymalnej ................................249 Sposób na optyczne wyrównanie dïugoĂci kolumn ...................................253 Trójkolumnowe ukïady stron .....................................................................256 Dlaczego rozwiÈzanie to jest kuloodporne ................................................265 Ukïad strony oparty na jednostkach em ....................................................265 Przykïad elastycznej strony internetowej ....................................................266 Struktura kodu ..........................................................................................266 CSS ............................................................................................................269 Ideaïem jest spójnoĂÊ strony .....................................................................272 Uwaga na paski przewijania ......................................................................272 Podsumowanie ..........................................................................................273 Rozdziaï 9. ’Èczenie w caïoĂÊ ...................................................................... 275 Zastosuj kuloodporne rozwiÈzania do projektu caïej strony internetowej .....................................................276 Cel .............................................................................................................277 Dlaczego rozwiÈzanie to jest kuloodporne ................................................278 Pïynny, adaptujÈcy siÚ projekt ...................................................................278 Elastyczny tekst .........................................................................................280 Brak rysunków? Brak CSS? ¿aden problem! ................................................280 Wersje jÚzykowe ........................................................................................282 Konstrukcja ...............................................................................................283 Struktura kodu ..........................................................................................283 Style podstawowe .....................................................................................284 Struktura ukïadu strony ............................................................................285 Elastyczna siatka ........................................................................................286 Definiowanie atrybutu max-width .............................................................287 Nagïówek ..................................................................................................289 Elastyczne obrazki .....................................................................................291 Struktura bocznego paska .........................................................................294 Wielokolumnowy ukïad strony w CSS3 .....................................................297 Magia zapytañ o media .............................................................................298 Podsumowanie ..........................................................................................306 Skorowidz ................................................................................. 307 10 Spis treĂci Rozdziaï 3. Elastyczne wiersze ELASTYCZNE WIERSZE 72 Rozdziaï 3. Nie naleĝy definiowaÊ wysokoĂci poziomych elementów strony i trzeba zaplanowaÊ moĝliwoĂÊ powiÚkszenia ich w pionie. Poziome elementy strony, takie jak nagïówki, paski logowania, Ăcieĝki odnoĂników do odwiedzonych stron oraz paski wyszukiwania, to elementy czÚsto spotykane w typowej witrynie internetowej. SÈ one zwykle umieszczone na górze strony i mogÈ zawieraÊ róĝne elementy graficzne (na przykïad tïo lub obrazki) oraz tekst. Obszary te czÚsto sÈ zaprojektowane tak, aby uniemoĝliwiÊ rozciÈgniÚcie ich w pionie — przy tworzeniu takich projektów zazwyczaj zakïada siÚ, ĝe tekst nie bÚdzie powiÚkszany, a w elementach nie bÚdzie umieszczona zbyt duĝa iloĂÊ treĂci, lub ĝe takie dziaïania nie zmieniÈ wyglÈdu strony. Zwyczajowo elementy, w których umieszczane sÈ caïe artykuïy lub duĝe fragmenty tekstu, dopasowujÈ siÚ do dowolnej dïugoĂci i wiel- koĂci tekstu lub innych zawartych w nich treĂci. Waĝne jest — i nie jest to niemoĝliwe — by inne poziome elementy strony takĝe trak- towaÊ w ten sposób. W tym rozdziale zajmiemy siÚ czÚstym rozwiÈzaniem stosowanym przy tworzeniu obszarów na reklamy lub miejsc logowania, które umieszczane sÈ w górnej czÚĂci strony internetowej. Zajrzymy ta- kiemu typowemu projektowi „pod maskÚ”, a nastÚpnie zrekonstru- ujemy go w taki sposób, aby pomieĂciï tekst dowolnego rozmiaru i kaĝdÈ jego iloĂÊ. Elastyczne wiersze 73 Typowe rozwiÈzanie RozciÈgniÚcie w pionie poziomego elementu strony wyjaĂnimy na przykïadzie wziÚtym z internetu — z witryny pewnego sklepu inter- netowego… nazwijmy go „Najlepszy sklep wszech czasów” (oczywiĂcie sklep ten w rzeczywistoĂci tak siÚ nie nazywa, zmieniliĂmy jego nazwÚ, by zachowaÊ anonimowoĂÊ winowaj… znaczy, autorów). „Najlepszy sklep wszech czasów” to typowy sklep internetowy, w którym oferuje siÚ wiele mniej lub bardziej przydatnych produktów dla domu. W przy- kïadzie pokazaliĂmy fikcyjnÈ stronÚ, ale wykorzystane techniki sÈ po- wszechnie stosowane przy tworzeniu projektów tego typu. W prezen- tacji typowego rozwiÈzania ograniczymy siÚ tylko do poziomych pasków logowania i promocji, zastosowanych w witrynie „Najlepszego sklepu wszech czasów” (rysunek 3.1). Na górze kaĝdej strony znajduje siÚ pa- sek umoĝliwiajÈcy zalogowanie siÚ oraz odszukanie najbliĝszego sklepu, a zaraz pod nim pasek z regularnie aktualizowanymi informacjami do- tyczÈcymi promocji. Kaĝdy z nich zawiera tylko jednÈ liniÚ tekstu. Rysunek 3.1. Górna czÚĂÊ strony przykïadowego „Najlepszego sklepu wszech czasów” Widoczne powyĝej paski (oraz caïy ukïad strony) zbudowane sÈ za po- mocÈ wielu zagnieĝdĝonych tabel. Elementy graficzne (takie jak za- okrÈglone koñce kaĝdego paska) oraz tekst umieszczone sÈ w osob- nych komórkach. Na rysunku 3.2 widoczny jest prawdopodobny sposób podzielenia pasków na osobne komórki — ich granice zostaïy zaznaczone czer- wonÈ liniÈ. Kaĝdy segment paska, z obrazkami w postaci zaokrÈglo- nych naroĝników wïÈcznie, zostaï umieszczony w osobnej komórce. Jest to tylko przybliĝenie prawdziwej struktury tabel ěródïowego pro- jektu, gdyĝ nie chcieliĂmy za bardzo wnikaÊ w jego strukturÚ. Najwaĝ- niejszy wniosek jest taki, ĝe do utworzenia widocznego na rysunkach projektu posïuĝyïy tabele, wypeïniacze GIF i maïe grafiki. Rysunek 3.2. Kaĝda czÚĂÊ paska znajduje siÚ w osobnej komórce tabeli 74 Rozdziaï 3. Wykorzystywanie tabel i wypeïniaczy GIF do pozycjonowania grafiki oraz tekstu jest technikÈ, która przez lata stosowania zostaïa udosko- nalona do perfekcji. WiÚkszoĂÊ stron internetowych zostaïa zbudowana w taki sposób, a wielu projektantów szczyciïo siÚ tym, ĝe potrafili co do piksela odtworzyÊ na stronie internetowej dowolny projekt gra- ficzny. PostÚpowano w myĂl zasady, ĝe jeĂli coĂ da siÚ zaprojektowaÊ i wydrukowaÊ, to moĝna to przeksztaïciÊ na stronÚ internetowÈ. PowstajÈ jednak coraz lepsze techniki tworzenia stron internetowych. Odkrywamy metody, które zwiÚkszajÈ czytelnoĂÊ stron oraz ich dostÚp- noĂÊ przy wykorzystaniu zwiÚzïego, poprawnego semantycznie jÚzyka znaczników oraz stylów CSS. W dalszej czÚĂci tego rozdziaïu zasto- sujemy te metody do przebudowania dwóch poziomych pasków w wi- trynie „Najlepszego sklepu wszech czasów”. Jednak najpierw pokaĝe- my, dlaczego dotychczasowy projekt nie jest kuloodporny. Dlaczego rozwiÈzanie to nie jest kuloodporne Do konstrukcji poziomych pasków moĝna wprowadziÊ wiele ulepszeñ, które poprawiÈ elastycznoĂÊ tego elementu strony. Przeanalizujmy wa- dy przedstawionego rozwiÈzania, aby lepiej oszacowaÊ zakres zmian niezbÚdnych do przeksztaïcenia go w prawdziwie kuloodporny projekt. MA’O ISTOTNE ELEMENTY GRAFICZNE Jak juĝ wspomnieliĂmy wczeĂniej, oba paski sÈ zbudowane przy uĝyciu wielu zagnieĝdĝonych tabel. Kaĝda czÚĂÊ paska znajduje siÚ w osobnej komórce tabeli. Maïo istotne elementy graficzne, takie jak zaokrÈglo- ne koñce pasków, sÈ umieszczone w kodzie wraz z tekstem. Takie elementy bÚdÈ tylko przeszkadzaÊ wszystkim uĝytkownikom wyĂwie- tlajÈcym stronÚ w przeglÈdarce tekstowej lub odczytujÈcym jej zawar- toĂÊ przy uĝyciu czytnika ekranu. Z pewnoĂciÈ pomogïoby zadeklaro- wanie odpowiednich wartoĂci atrybutów alt dla wszystkich rysunków (z uwzglÚdnieniem pustych deklaracji alt= dla grafik peïniÈcych rolÚ ozdobników), jednak projektanci pracujÈcy przy tworzeniu witryny „Najlepszego sklepu wszech czasów” postanowili z tego zrezygnowaÊ. PojÚcie „maïo istotnej grafiki” odnosi siÚ do elementów graficznych, które nie wnoszÈ niczego do funkcjonalnoĂci i treĂci witryny oraz nie peïniÈ ĝadnej istotnej roli informacyjnej. ZaokrÈglone naroĝniki pasków to element dekoracyjny, dlatego w naszym rozwiÈzaniu przenie- siemy go z kodu strony do arkusza stylów. Elastyczne wiersze 75 STA’E WYSOKO¥CI Jeĝeli spróbujemy odrobinÚ zwiÚkszyÊ rozmiar tekstu, projekt pozio- mych pasków caïkowicie siÚ rozpadnie (rysunek 3.3). ZwiÚkszenie wiel- koĂci tekstu to jeden z najlepszych testów na to, czy dany projekt jest elastyczny. Taki test umoĝliwia nie tylko sprawdzenie czytelnoĂci strony przy duĝych wielkoĂciach czcionek — dziÚki niemu wiemy takĝe, czy projekt poradzi sobie z prawidïowym wyĂwietleniem róĝnych iloĂci tekstu (niezaleĝnie od jego rozmiaru). Zaïóĝmy, ĝe redaktor bÚdzie chciaï póěniej wyĂwietliÊ dwie linie tekstu promocyjnego, a nie jednÈ, jak jest to zdefiniowane w pierwotnej specyfikacji. W kuloodpornej witrynie pasek powinien siÚ powiÚkszyÊ i dopasowaÊ do nowej iloĂci tekstu bez koniecznoĂci wprowadzania dodatkowych zmian. Takie rozwiÈzanie pozwala zaoszczÚdziÊ czas i pieniÈdze, a to powinno byÊ wystarczajÈcym powodem do jego stosowania. Rysunek 3.3. Przy powiÚkszaniu tekstu rysunek zaokrÈglonych naroĝników nie rozciÈgnie siÚ wraz z caïym projektem PrzyglÈdajÈc siÚ rysunkowi 3.3, moĝemy stwierdziÊ, ĝe obrazki dajÈce efekt zaokrÈglonych krawÚdzi pasków zostaïy zaprojektowane dla ich staïej, ĂciĂle okreĂlonej wysokoĂci. W rezultacie wstawienie do paska dowolnego elementu wyĝszego niĝ wysokoĂÊ obrazka z naroĝni- kami popsuje wyglÈd projektu. W rozdziale tym (oraz pozostaïych) staram siÚ uĂwiadomiÊ twórcom stron, ĝe o wysokoĂci elementów naleĝy zaczÈÊ myĂleÊ w diametralnie inny sposób. Moĝliwe jest two- rzenie projektów, które bÚdÈ dopasowywaÊ siÚ do wiÚkszej czcionki, wiÚkszej iloĂci tekstu oraz dowolnych elementów umieszczonych w ich wnÚtrzu. Jak to osiÈgnÈÊ, pokaĝÚ za chwilÚ. PRZERO¥NI}TY KOD Stosowanie tradycyjnych metod projektowania przy tworzeniu przy- kïadowych poziomych pasków wymaga od projektanta napisania bardzo duĝej iloĂci kodu. Jak pamiÚtamy z rozdziaïu 2., „Skalowalna 76 Rozdziaï 3. nawigacja”, zagnieĝdĝanie tabel znacznie zwiÚksza iloĂÊ kodu two- rzÈcego stronÚ. Taki przerost kodu nad treĂciÈ zatyka serwery, zmniej- sza przepustowoĂÊ ïÈcza i sprawia, ĝe strona moĝe byÊ zupeïnie niezro- zumiaïa dla programów niebÚdÈcych przeglÈdarkami oraz niektórych urzÈdzeñ. Na szczÚĂcie istnieje znacznie prostsza, elastyczna metoda, która pozwala uzyskaÊ ten sam efekt wizualny. Zapoznajmy siÚ z niÈ. RozwiÈzanie kuloodporne Podczas tworzenia kuloodpornego projektu poziomych pasków naj- pierw skupimy siÚ na strukturze kodu. Póěniej zdefiniujemy kolory, rozmieĂcimy poszczególne elementy oraz obrazki tïa. Pod koniec rozdziaïu uzyskamy elastyczny komponent, który bÚdzie siÚ dopaso- wywaï do kaĝdego rozmiaru tekstu i do kaĝdej jego iloĂci. Zacznijmy wiÚc od struktury kodu i zmniejszmy jej objÚtoĂÊ. STRUKTURA KODU Wyboru struktury pasków moĝemy dokonaÊ tylko na podstawie analizy ich zawartoĂci. Jakie elementy najlepiej sprawdzÈ siÚ w tej roli? Jakie elementy najlepiej opiszÈ zawartoĂÊ pasków? Gdy zaczynamy tworzyÊ rozwiÈzanie od samego poczÈtku, najlepiej jest najpierw odpowiedzieÊ sobie na pytania tego typu i na tej podstawie wybraÊ odpowiednie elementy. OczywiĂcie moĝe istnieÊ kilka poprawnych odpowiedzi, jednak pytania te i tak naleĝy sobie zadaÊ przed napisaniem pierwszej linijki kodu. W tym przypadku potrzebujemy dwóch elementów peïniÈcych rolÚ pojemników, po jednym dla kaĝdego paska. Fragmenty tekstu umiesz- czone na obydwu koñcach pierwszego paska widzÚ jako pozycje listy, natomiast w drugim pasku znajduje siÚ po prostu jeden akapit tekstu. Napiszmy wiÚc caïy kod potrzebny do utworzenia naszego kompo- nentu: ul li Not registered? a href= /register/ Register /a now! /li li a href= /find/ Find a store /a /li /ul div p strong Special this week: /strong $2 shipping on all orders! a href= /special/ LEARN MORE /a /p /div Elastyczne wiersze 77 Górny pasek przedstawiliĂmy jako listÚ skïadajÈcÈ siÚ z dwóch elemen- tów, a dolny jako jeden akapit zawarty wewnÈtrz elementu div . Projekt wyglÈda teraz ïadnie, prosto i bardzo schludnie — pozbyli- Ămy siÚ przeroĂniÚtego kodu z zagnieĝdĝonymi tabelami. OsiÈgnÚliĂmy takĝe nasz cel w zakresie poprawienia dostÚpnoĂci treĂci. Bez wzglÚdu na to, jakie urzÈdzenie bÈdě oprogramowanie zostanie uĝyte do wyĂwietlenia strony, te dwa paski zawsze zostanÈ zinter- pretowane jako lista i jeden akapit, czyli struktura odpowiadajÈca umieszczonej w niej treĂci. IDENTYFIKACJA ELEMENTÓW Naszym kolejnym zadaniem jest unikatowe oznaczenie wszystkich elementów, do których bÚdziemy chcieli zastosowaÊ style. Przypi- sanie kilku elementom identyfikatorów (atrybut id) umoĝliwi nam póěniejsze rozmieszczenie i pokolorowanie skïadników projektu oraz dodanie obrazków — czyli przeksztaïcenie prostego kodu w gotowy projekt. ul id= register li id= reg Not registered? a href= /register/ Register /a now! /li li id= find a href= /find/ Find a store /a /li /ul div id= message p strong Special this week: /strong $2 shipping on all orders! a href= /special/ LEARN MORE /a /p /div WïaĂnie dodaliĂmy unikatowe atrybuty id do listy, jej dwóch ele- mentów oraz do elementu div zawierajÈcego drugi pasek. Iden- tyfikatory te moĝna sobie wyobraziÊ jako uchwyty, do których juĝ za chwilÚ doïÈczymy style. Moĝna siÚ zastanawiaÊ, dlaczego identy- fikator #message nie zostaï przyporzÈdkowany do samego elemen- tu p , co wyeliminowaïoby koniecznoĂÊ wstawiania otaczajÈcego go elementu div . Do skoñczenia projektu potrzebne nam jednak bÚdÈ oba elementy, a dodatkowy element peïniÈcy rolÚ kontenera tu i tam jest czÚsto niezbÚdny (jego zastosowanie nie jest przestÚp- stwem!), kiedy tworzy siÚ elastyczne, ale rozbudowane projekty stron internetowych. Byle tylko z umiarem! 78 Rozdziaï 3. Zanim zaczniemy przypi- sywaÊ style, przyjmujemy, ĝe caïy projekt ma zdefi- niowanÈ konkretnÈ szero- koĂÊ (w przypadku witryny „Najlepszego sklepu wszech czasów” wynosi ona 768 pikseli). Innymi sïowy, zakïadamy, ĝe two- rzone paski znajdujÈ siÚ wewnÈtrz jakiegoĂ konte- nera (na przykïad div lub table ) o ĂciĂle okreĂlonej szerokoĂci. BEZ STYLÓW Na rysunku 3.4 widzimy zdefiniowanÈ wczeĂniej strukturÚ po wyĂwie- tleniu w przeglÈdarce internetowej. Arkusz stylów zawiera na razie tylko podstawowe deklaracje zwiÈzane z wyglÈdem tekstu (w witrynie „Najlepszego sklepu wszech czasów” uĝywana byïa czcionka Arial). Rysunek 3.4. PodglÈd kuloodpornej struktury kodu (efekt uzyskany przed zastosowaniem stylów). Taki projekt jest czytelny i zrozumiaïy dla kaĝdego urzÈdzenia Na urzÈdzeniu, które nie obsïuguje CSS, strona wyĂwietlona zostanie tak, jak na rysunku 3.4. Taki szkielet jest nadal czytelny oraz zrozu- miaïy dla kaĝdego urzÈdzenia odtwarzajÈcego stronÚ. Teraz moĝe- my przystÈpiÊ do definiowania stylów. W arkuszu stylów utworzyliĂmy deklaracjÚ dla elementu body , w której przy uĝyciu sïowa kluczowego small ustaliliĂmy podsta- wowy rozmiar tekstu. body { font-family: Arial, sans-serif; font-size: small; } ChoÊ w witrynie „Najlepszego sklepu wszech czasów” jako podstawowa rodzina krojów pisma wybrany zo- staï font Arial, puryĂci typograficzni mogÈ sugerowaÊ zastÈpienie go krojem Helvetica (na jego podstawie zaprojektowany zostaï Arial). Poniewaĝ wiÚkszoĂÊ uĝytkowników komputerów Macintosh ma zainstalowa- ny font Helvetica, moĝemy go wykorzystaÊ, aby zaproponowaÊ im (a takĝe wszystkim innym posiadaczom tego fontu) ïadniejszy wyglÈd strony. Aby to zrobiÊ, naleĝaïoby najpierw wymieniÊ krój Helvetica, a dopiero potem jego zamiennik — Arial, na przykïad tak: body { font-family: Helvetica, Arial, sans-serif; }. Róĝnice pomiÚdzy tymi dwoma krojami sÈ dla wiÚkszoĂci osób niedostrzegalne, ale pasjonaci typografii umiejÈ rozróĝniÊ oba kroje z odlegïoĂci kilometra. WiÚcej informacji na temat podobieñstw obu krojów moĝna uzy- skaÊ na stronie projektanta krojów pisma Marka Simonsona: http://www.ms-studio.com/articlesarialsid.html. Elastyczne wiersze 79 DODANIE T’A Najpierw zadeklarujmy kolory tïa dla kaĝdego z pasków. DziÚki temu bÚdziemy widzieli, jakie marginesy i dopeïnienia naleĝy zdefiniowaÊ. #register { background: #BDDB62; } #message { background: #92B91C; } Rysunek 3.5 ilustruje rezultat zdefiniowania kolorów tïa obydwu pasków. Rysunek 3.5. Dodanie koloru tïa uïatwi nam wizualne oszacowanie struktury pasków przed dodaniem pozostaïych elementów POZYCJONOWANIE ZAWARTO¥CI NastÚpnie zajmiemy siÚ pozycjonowaniem treĂci. Elementy listy umie- Ăcimy na przeciwlegïych koñcach pierwszego poziomego paska, a tekst o promocyjnej cenie wysyïki — poĂrodku drugiego paska. Na rysun- ku 3.6 przedstawiono wyglÈd komponentu po zastosowaniu zdefi- niowanych niĝej stylów CSS. Rysunek 3.6. Elementy listy umieĂciliĂmy na koñcach pierwszego paska #register { margin: 0; padding: 0; list-style: none; background: #BDDB62; } #reg { float: left; margin: 0; padding: 8px 14px; } 80 Rozdziaï 3. #find { float: right; margin: 0; padding: 8px 14px; } #message { clear: both; text-align: center; background: #92B91C; } PoczÈwszy od góry: w liĂcie #register pozbyliĂmy siÚ domyĂlnych marginesów oraz dopeïnienia. Przy uĝyciu reguïy list-style: none; wyïÈczyliĂmy takĝe wyĂwietlanie znaków wypunktowania przy pozy- cjach listy. NastÚpnie posïuĝyliĂmy siÚ metodÈ przeciwlegïych obiektów pïy- wajÈcych, aby umieĂciÊ elementy listy na dwóch koñcach górnego pa- ska. Dla pierwszego elementu (#reg) ustawiliĂmy wyrównanie do lewej strony, a drugiemu (#find) przypisaliĂmy wyrównanie do prawej strony. DziÚki takiemu rozwiÈzaniu moĝliwe jest umieszczenie dwóch elementów na jednakowej wysokoĂci po przeciwlegïych stronach paska (rysunek 3.7). Rysunek 3.7. Metoda przeciwlegïych obiektów pïywajÈcych to wygodny sposób wyrównania treĂci do przeciwlegïych boków elementu nadrzÚdnego Opisana wyĝej metoda wyrównania elementów do przeciwnych stron to wygodny sposób umieszczenia treĂci na przeciwlegïych koñcach elementu nadrzÚdnego. WracajÈc do zadeklarowanych stylów — oprócz ustawienia elementów pïywajÈcych ustawiliĂmy takĝe dopeïnienie dla kaĝdego boku elementu listy. DziÚki temu zyskaliĂmy odpowiednio duĝo miejsca, by po lewej stronie odnoĂnika „Find a store” umieĂciÊ ikonÚ lupy. Dla drugiego paska dodaliĂmy reguïÚ clear: both;, dziÚki której element ten bÚdzie wyĂwietlony poniĝej elementów pïywajÈcych. Wy- Ărodkowanie tekstu akapitu uzyskaliĂmy poprzez dopisanie reguïy text-align: center;. Elastyczne wiersze 81 BRAKUJkCE T’O Gdzie podziaïo siÚ tïo górnego paska? Z bardzo podobnym proble- mem spotkaliĂmy siÚ w rozdziale 2. Gdy ustawiamy atrybut float dla elementów wewnÚtrznych (w tym przypadku dwóch elementów li ), wyjmujemy je z normalnego ukïadu dokumentu. StÈd obej- mujÈcy pozycje listy element ul nie wie nawet, czy elementy listy istniejÈ. W rezultacie ul nie zna swojej prawidïowej wysokoĂci, a zatem nie wie, na jakÈ wysokoĂÊ powinno siÚgaÊ jego tïo. Aby naprawiÊ ten problem, listÚ ul takĝe ustawiamy jako element pïywajÈcy (tak, jak zrobiliĂmy to w przypadku zakïadek z rozdziaïu 2.). Musimy równieĝ zdefiniowaÊ szerokoĂÊ listy (width), by mieÊ pewnoĂÊ, ĝe pasek zajmie caïy przeznaczony dla niego obszar. WyglÈda na to, ĝe wiÚkszoĂÊ przeglÈdarek dosïownie zaimplementowaïa wymaganie specyfikacji CSS 2.0: „Element pïywajÈcy musi mieÊ jawnie przypisanÈ szerokoĂÊ” (http://www.w3.org/TR/REC-CSS2/visuren.html#floats). JeĂli nie podamy tutaj szerokoĂci, pasek bÚdzie miaï szerokoĂÊ wymuszo- nÈ przez umieszczonÈ w jego wnÚtrzu treĂÊ (czyli dwie pozycje listy). #register { float: left; width: 100 ; margin: 0; padding: 0; list-style: none; background: #BDDB62; } #reg { float: left; margin: 0; padding: 8px 14px; } #find { float: right; margin: 0; padding: 8px 14px; } #message { clear: both; text-align: center; background: #92B91C; } 82 Rozdziaï 3. Na rysunku 3.8 przedstawiono aktualny wyglÈd pasków — jak widaÊ, tïo górnego paska jest ponownie widoczne. Rysunek 3.8. Gdy przy uĝyciu wïaĂciwoĂci float rozmieĂcimy elementy znajdujÈce siÚ wewnÈtrz kontenera odpowiedzialnego za wyĂwietlenie dla nich tïa, wyĂwietlanie tïa moĝemy naprawiÊ, ustawiajÈc sam kontener jako element pïywajÈcy DODANIE SZCZEGӒÓW Pozostaïo nam juĝ tylko dodaÊ kilka szczegóïów, które pozwolÈ wykoñ- czyÊ projekt pasków. Zacznijmy od górnego paska i wprowaděmy za- okrÈglone naroĝniki, które widoczne sÈ przy dolnej krawÚdzi na kaĝ- dym jego koñcu (rysunek 3.9). Po powiÚkszeniu ilustracji (jak na rysunku 3.9) widaÊ, ĝe zaokrÈglony róg to tak naprawdÚ kilka biaïych pikseli uïoĝonych na ksztaït schodów. Gdy obrazek wyĂwietlany jest w normalnej rozdzielczoĂci, wydaje siÚ, ĝe koñce paska sÈ zaokrÈglone. Utworzenie efektu zaokrÈglonych naroĝników to Ăwietna sztuczka, a na dodatek bardzo ïatwo moĝna jÈ zaimplementowaÊ z wykorzy- staniem maïego obrazka i deklaracji koloru tïa w arkuszu CSS. Najpierw w programie Photoshop (lub innym wybranym programie graficznym) utworzymy obrazek tïa. Nasze paski majÈ ustalonÈ szero- koĂÊ (768 pikseli), dlatego moĝemy utworzyÊ jeden obrazek, w którym umieĂcimy zarówno lewy, jak i prawy róg paska. NastÚpnie w arku- szu stylów wskaĝemy ten obrazek jako tïo pierwszego paska. Rysunek 3.10 przedstawia gotowy obrazek w powiÚkszeniu. ¥ciĂlej rzecz biorÈc, widzimy na nim tylko lewy koniec obrazka, którego szero- koĂÊ wynosi 768 pikseli (tej samej szerokoĂci bÚdÈ obydwa paski). Na obydwu koñcach obrazka utworzyliĂmy za pomocÈ narzÚdzia Pencil (Oïówek) o gruboĂci 1 piksela biaïy schodkowy motyw (biaïy, poniewaĝ taki jest kolor tïa caïej strony). Pozostaïa czÚĂÊ obrazka jest przezro- czysta (w programie Photoshop przezroczysty obszar zaznaczony jest wzorem szachownicy). Biaïe kawaïki obrazka zostanÈ umiesz- czone na kolorowym tle zdefiniowanym w arkuszu stylów. DziÚki temu uzyskamy wraĝenie, ĝe koñce paska sÈ zaokrÈglone. Do wczeĂniejszej deklaracji stylu dla elementu o identyfikatorze #register (nadrzÚdnej listy ul ) dodajemy nastÚpujÈcÈ reguïÚ: #register { float: left; width: 100 ; Rysunek 3.9. ZaokrÈglony naroĝnik to po prostu kilka biaïych pikseli uïoĝonych w sposób „schodkowy” Rysunek 3.10. Lewy koniec obrazka GIF o szerokoĂci 768 pikseli (powiÚkszenie: 1600 ) Elastyczne wiersze 83 margin: 0; padding: 0; list-style: none; background: #BDDB62 url(img/reg_bottom.gif) no-repeat bottom left; } ZdefiniowaliĂmy wïaĂnie kolor tïa i umieĂciliĂmy na nim obrazek. Obra- zek tïa nie moĝe byÊ powielany i musi byÊ wyrównany do dolnej i lewej krawÚdzi elementu. Tïo bÚdzie widoczne przez przezroczystÈ czÚĂÊ ob- razka, a biaïe naroĝniki bÚdÈ je zasïaniaÊ. Wyrównanie obrazka do dol- nej krawÚdzi sprawia, ĝe bez wzglÚdu na wysokoĂÊ elementu (ulegajÈcÈ zmianie wraz ze zmianÈ rozmiaru tekstu lub zmianÈ iloĂci treĂci) biaïe rogi zawsze bÚdÈ znajdowaÊ siÚ w odpowiednim miejscu (rysunek 3.11). Rysunek 3.11. Trójwymiarowy rysunek obrazujÈcy kolejnoĂÊ nakïadania siÚ elementów Na rysunku 3.12 przedstawiono otrzymany rezultat — dolna krawÚdě pierwszego paska jest przy koñcach zaokrÈglona. Rysunek 3.12. PoïÈczenie koloru tïa i biaïych fragmentów obrazka tïa daje efekt zaokrÈglonych dolnych naroĝników paska 84 Rozdziaï 3. Standard CSS3 przewiduje moĝliwoĂÊ zastosowania kilku obrazków tïa dla jed- nego elementu. WïaĂciwoĂÊ ta jest obsïugiwana w naj- nowszych przeglÈdarkach (w tym w IE9). WiÚcej in- formacji na ten temat znaj- dziesz pod adresem http://www.css3.info/previe w/multiple-backgrounds/. CZTERY ZAOKRkGLONE NARO¿NIKI W przypadku drugiego paska zaokrÈglone naroĝniki powinny byÊ wi- doczne zarówno przy górnej, jak i dolnej krawÚdzi, a pasek nadal po- winno siÚ daÊ rozciÈgnÈÊ w pionie. Moĝemy to osiÈgnÈÊ, stosujÈc dwa obrazki tïa. Przy dolnej krawÚdzi wykorzystamy obrazek utworzony dla górnego paska, a przy górnej uĝyjemy tego samego obrazka, ale po odwróceniu go do góry nogami. Aby zastosowaÊ dwa obrazki tïa, po- trzebne sÈ nam dwa osobne elementy, do których bÚdziemy mogli je przypisaÊ. Na szczÚĂcie mamy dwa elementy, które moĝemy wykorzystaÊ. W ko- dzie odpowiadajÈcym za wyĂwietlenie drugiego paska mamy element div , w którym umieszczony jest akapit p : div id= message p strong Special this week: /strong $2 shipping on all orders! a href= /special/ LEARN MORE /a /p /div Do kaĝdego z tych elementów przypiszemy teraz po jednym obrazku tïa. Obrazek z poprzedniej czÚĂci przykïadu przypiszemy do akapitu p , a jego odwróconÈ o 180 stopni wersjÚ przypiszemy do elementu o identyfikatorze #message. #message { clear: both; text-align: center; background: #92B91C url(img/mess_top.gif) no-repeat top left; } #message p { margin: 0; padding: 8px 14px; background: url(img/reg_bottom.gif) no-repeat bottom left; } DziÚki wyrównaniu górnych naroĝników do górnej krawÚdzi elementu #message (zewnÚtrzny div ), a dolnych naroĝników do dolnej kra- wÚdzi elementu p (rysunek 3.13) mamy pewnoĂÊ, ĝe wszystkie cztery rogi bÚdÈ poprawnie rozmieszczone bez wzglÚdu na to, jak duĝy lub maïy bÚdzie znajdujÈcy siÚ w akapicie tekst. JeĂli powiÚkszymy rozmiar tekstu lub umieĂcimy w pasku wiÚkszÈ iloĂÊ tekstu, górne na- roĝniki pozostanÈ wyrównane do górnego brzegu elementu, a dolne do dolnego brzegu akapitu (jak zobaczymy za chwilÚ). Elastyczne wiersze 85 Rysunek 3.13. W przypadku dolnego paska zastosowaliĂmy dwa obrazki. Kolor tïa przeĂwituje przez przezroczyste obszary rysunków GIF Na rysunku 3.14. przedstawiono wyglÈd pasków po dodaniu do arku- sza stylów ostatnich deklaracji. Równieĝ w przypadku drugiego pa- ska zastosowaliĂmy przezroczyste obrazki z biaïymi naroĝnikami — przez ich puste miejsca widaÊ tïo strony. Rysunek 3.14. Po dodaniu obrazków tïa paski zaczynajÈ nabieraÊ wïaĂciwych ksztaïtów SZCZEGӒY ZWIkZANE Z TEKSTEM I ODNO¥NIKAMI Pozostaïo nam tylko kilka detali, by caïkowicie odwzorowaÊ stary pro- jekt — naleĝy jeszcze zmieniÊ kolor tekstu i odnoĂników. Brakuje takĝe grafik przy odnoĂnikach „Find a store” oraz „LEARN MORE”. Zaj- mijmy siÚ tym. Najpierw zdefiniujemy kolor tekstu i odnoĂników dla kaĝdego paska — w tym celu dodamy potrzebne reguïy do istniejÈcych juĝ deklaracji stylów. #register { float: left; width: 100 ; margin: 0; padding: 0; list-style: none; color: #690; background: #BDDB62 url(img/reg_bottom.gif) no-repeat bottom left; 86 Rozdziaï 3. } #register a { text-decoration: none; color: #360; } #reg { float: left; margin: 0; padding: 8px 14px; } #find { float: right; margin: 0; padding: 8px 14px; } #message { clear: both; font-weight: bold; font-size: 110 ; color: #FFF; text-align: center; background: #92B91C url(img/mess_top.gif) no-repeat top left; } #message p { margin: 0; padding: 8px 14px; background: url(img/reg_bottom.gif) no-repeat bottom left; } #message strong { text-transform: uppercase; } #message a { margin: 0 0 0 6px; padding: 2px 15px; text-decoration: none; font-weight: normal; color: #FFF; } UstawiliĂmy kolor tekstu dla odnoĂników umieszczonych w elemencie #register oraz domyĂlnÈ wielkoĂÊ czcionki i kolor tekstu dla odno- Ăników i tekstu znajdujÈcych siÚ wewnÈtrz elementu #message (rysunek 3.15). Elastyczne wiersze 87 Rysunek 3.15. WyglÈd pasków po dodaniu stylów dla odnoĂników i tekstu. Widoczne jest takĝe wolne miejsce pozostawione na ikony, które bÚdÈ towarzyszyÊ odnoĂnikom „Find a store” oraz „LEARN MORE” Tekst „Special this week:” zostaï przez nas wczeĂniej wyróĝniony przy uĝyciu elementu strong . Teraz skorzystaliĂmy z moĝliwoĂci wïaĂci- woĂci text-transform i przeksztaïciliĂmy wyróĝniony tekst na wersa- liki, utrzymujÈc oryginalny tekst w kodzie, napisany zgodnie z normalnÈ wielkoĂciÈ liter w zdaniu. Dlaczego jest to dobre rozwiÈzanie? Otóĝ o ile teraz chcemy, by napisy „SPECIAL THIS WEEK” oraz „LEARN MORE” byïy zïoĝone wielkimi literami, o tyle kiedyĂ moĝe siÚ to zmieniÊ. Moĝe siÚ zdarzyÊ, ĝe nowy dyrektor artystyczny projektu zaĝyczy sobie, by zmieniÊ styl tego tekstu na same maïe litery. DziÚki wïaĂciwoĂci text-transform moĝemy z ïatwoĂciÈ wprowadziÊ takie poprawki, uaktualniajÈc sam arkusz stylów CSS i nie dotykajÈc kodu ěródïowego strony. To kolejny przykïad przygotowania siÚ na alternatywne wersje, jakie moĝe w przyszïoĂci przybraÊ projekt strony. Naleĝy pamiÚtaÊ, by tekst z kodu ěródïowego byï rozdzielony od warstwy prezentacyj- nej, i wykorzystywaÊ wïaĂciwoĂÊ text-transform do zmiany tek- stu na maïe lub wielkie litery w zaleĝnoĂci od aktualnych potrzeb. OSTATNI ETAP Ostatni etap przebudowy poziomych pasków bÚdzie polegaï na do- daniu grafik wyĂwietlanych obok odnoĂników „Find a store” oraz „LEARN MORE”. Obrazki te mogliĂmy dodaÊ w kodzie strony, jednak w celu uïatwienia póěniejszej aktualizacji wszelkie maïo istotne ele- menty graficzne lepiej jest trzymaÊ poza kodem ěródïowym doku- mentu — zwïaszcza ĝe moĝemy z ïatwoĂciÈ uĝyÊ ich jako obrazków tïa z wykorzystaniem stylów CSS. Najpierw do drugiego elementu listy w górnym pasku dodajmy ikonÚ przedstawiajÈcÈ lupÚ. PozycjÚ grafiki definiujemy wartoĂciami 0 50 , dziÚki czemu zostanie ona umieszczona przy lewym brzegu elementu, w poïowie wysokoĂci, liczÈc od górnej krawÚdzi (czyli zostanie wy- Ărodkowana w pionie): #find { float: right; margin: 0; 88 Rozdziaï 3. padding: 8px 14px; background: url(img/mag-glass.gif) no-repeat 0 50 ; } Na rysunku 3.16 widoczny jest efekt dodania ikony do odnoĂnika „Find a store”. Rysunek 3.16. Obrazek tïa zostaï wyrównany do lewej krawÚdzi elementu listy, gdzie wczeĂniej odpowiednio zwiÚkszyliĂmy dopeïnienie Teraz obok odnoĂnika „LEARN MORE” znajdujÈcego siÚ w drugim pa- sku dodamy grafikÚ strzaïki. Pozycjonujemy jÈ jak wczeĂniej — przy uĝyciu wartoĂci 0 50 , czyli wyrównamy jÈ do lewej strony i do poïowy wysokoĂci elementu: #message a { margin: 0 0 0 6px; padding: 2px 15px; text-decoration: none; font-weight: normal; color: #fff; background: url(img/arrow.gif) no-repeat 0 50 ; } Na rysunku 3.17 pokazano wyglÈd elementu po dodaniu ikony strzaïki po lewej stronie odnoĂnika „LEARN MORE”. Strzaïka zostaïa umiesz- czona na stronie poprzez zadeklarowanie stylu dla elementu a znajdujÈcego siÚ wewnÈtrz drugiego paska. Na rysunku 3.18 przedstawiono ostateczny wyglÈd przykïadu — wszystkie elementy znajdujÈ siÚ we wïaĂciwym miejscu. Otrzymali- Ămy dwa paski praktycznie identyczne z tymi, które widoczne byïy w witrynie „Najlepszego sklepu wszech czasów”, jednak kryjÈca siÚ za naszym projektem struktura kodu i wszystkie zabiegi, których do- konaliĂmy, by strategicznie rozmieĂciÊ obrazki tïa i tekst, sprawiajÈ, ĝe projekt jest kuloodporny. A wïaĂciwie prawie kuloodporny — po- trzebujemy jeszcze jednej poprawki, by wszystko dziaïaïo w prze- glÈdarce Internet Explorer 7. Elastyczne wiersze 89 Rysunek 3.17. W ten sam sposób, w jaki dodaliĂmy obrazek do elementu listy w pierwszym pasku, po lewej stronie tekstu LEARN MORE dodaliĂmy rysunek strzaïki. Tym razem obrazek zostaï dodany bezpoĂrednio do elementu a Rysunek 3.18. Ostateczna, kuloodporna wersja projektu poziomych pasków POPRAWKA DLA IE7 JeĂli gotowy projekt wyĂwietlimy w przeglÈdarce Internet Explorer 7, zauwaĝymy dodatkowy odstÚp ponad tekstem w dolnym pasku (ry- sunek 3.19). Grrr! Z nieznanych powodów IE7 dodaje ten odstÚp, choÊ inne przeglÈdarki (w tym jej poprzednik, IE6) tego nie robiÈ. Najïa- twiejszÈ (i najmniej uciÈĝliwÈ) metodÈ poradzenia sobie z tym proble- mem jest skorzystanie z dodatkowego elementu pïywajÈcego, zgodnie z technikÈ opisanÈ wczeĂniej. Element div o identyfikatorze #reg juĝ wczeĂniej zostaï zadeklarowany jako pïywajÈcy, aby zmieĂciïy siÚ w nim dwa pïywajÈce elementy listy; teraz zastosujemy jeszcze reguïÚ float: left; do elementu div o identyfikatorze #message, by poradziÊ sobie z dodatkowym odstÚpem w IE7. Rysunek 3.19. Gotowy przykïad wyĂwietlony w przeglÈdarce Internet Explorer 7, pokazujÈcy dodatkowy odstÚp ponad treĂciÈ drugiego paska Poprawiona deklaracja bÚdzie wyglÈdaïa nastÚpujÈco: #message { float: left; width: 100 ; 90 Rozdziaï 3. margin: 0; padding: 0; font-weight: bold; font-size: 110 ; color: #fff; text-align: center; background: #92B91C url(img/mess_top.gif) no-repeat top left; } Tak jak wczeĂniej, dodaliĂmy równieĝ reguïÚ width: 100 , niezbÚdnÈ do rozciÈgniÚcia paska na caïÈ szerokoĂÊ kontenera (w tym przy- padku 768 pikseli). Takie wyjĂcie jest proste, szybkie i nadaje siÚ do zastosowania we wszystkich przeglÈdarkach. W tym przykïadzie jest to chyba najlepsze rozwiÈzanie problemu wystÚpujÈcego w IE7. IstniejÈ jednak równieĝ inne sposoby radzenia sobie z problemami z ele- mentami pïywajÈcymi. W kolejnym rozdziale omówimy innÈ meto- dÚ, która pozwala utrzymywaÊ niezaleĝnoĂÊ elementów, tak by nie reagowaïy one na to, co dzieje siÚ po nich w strukturze dokumentu. Dlaczego rozwiÈzanie to jest kuloodporne Po uproszczeniu kodu i wykorzystaniu w kreatywny sposób maïych obrazków tïa z powodzeniem odtworzyliĂmy oryginalny projekt. Teraz dowiemy siÚ, dlaczego zaproponowane rozwiÈzanie jest takie dobre, czyli elastyczne. ODDZIELENIE STRUKTURY OD WYGLkDU WyrzuciliĂmy zbÚdne grafiki i tabele, a na ich miejsce wprowadziliĂmy schludny, ustrukturyzowany kod HTML. Sensownie zastosowane znaczniki bÚdÈ lepiej zinterpretowane przez wiÚcej urzÈdzeñ i progra- mów, nawet w przypadku ewentualnego braku obsïugi stylów CSS. Obrazki wykorzystane w projekcie umieĂciliĂmy w arkuszu stylów, zamiast wstawiaÊ je bezpoĂrednio do kodu. DziÚki temu wprowadzenie póěniejszych zmian w szacie graficznej bÚdzie znacznie prostsze, nie wspominajÈc juĝ o tym, ĝe poprzez zastosowanie takiego rozwiÈza- nia znacznie ograniczyliĂmy iloĂÊ kodu. Zmiana koloru pasków, na przykïad na czerwony, niebieski czy jaki- kolwiek inny, bÚdzie polegaïa na prostej modyfikacji kilku reguï CSS. A rezultat bÚdzie widoczny natychmiast. Elastyczne wiersze 91 KONIEC Z USTALONYMI WYSOKO¥CIAMI Zamiast zakïadaÊ, ĝe paski zawsze bÚdÈ miaïy wysokoĂÊ x pikseli, w pomysïowy sposób rozmieĂciliĂmy obrazki tïa, dziÚki czemu zacho- waliĂmy integralnoĂÊ projektu, a jednoczeĂnie umoĝliwiliĂmy dowolne rozciÈganie i zwÚĝanie paska. Takie rozwiÈzanie pozwala takĝe na stosowanie dowolnych metod definiowania rozmiaru tekstu (takich jak te opisane w rozdziale 1., „Elastyczny tekst”) — nie trzeba juĝ uwaĝaÊ, by wymiary tekstu podane w pikselach nie przekroczyïy rozmiaru paska. Na rysunku 3.20 przedstawiono zrekonstruowany projekt wyĂwietlony przy znacznie powiÚkszonym rozmiarze tekstu. Tïo i zaokrÈglone naroĝniki pasków nadal wyglÈdajÈ dobrze i znajdujÈ siÚ we wïaĂci- wym miejscu. Rysunek 3.20. Po zwiÚkszeniu rozmiaru tekstu paski odpowiednio siÚ rozciÈgajÈ, a projekt od strony graficznej nadal wyglÈda bez zarzutu Wyobraěmy sobie teraz, ĝe redaktor chce w pasku promocyjnym umieĂciÊ dwie wiadomoĂci. Bez modyfikowania projektu moĝemy w prosty sposób dodaÊ drugi wiersz tekstu — pasek sam dopasuje siÚ do nowego wymiaru wiadomoĂci (rysunek 3.21). Przykïad ten ilustruje najwiÚkszÈ zaletÚ stosowania rozwiÈzañ kuloodpornych — projekt dopasowuje siÚ nawet do nieprzewidzianych sytuacji. Rysunek 3.21. Dodanie drugiego wiersza tekstu do elementu #message nie wymaga ĝadnych przeróbek ze strony projektanta, poniewaĝ strona zostaïa opracowana pod kÈtem moĝliwoĂci wyĂwietlenia dowolnej iloĂci treĂci JeĂli nasz klient lub szef powie: „W tym miejscu bÚdziemy umiesz- czaÊ najwyĝej jeden wiersz tekstu”, a my wykonamy projekt zgodnie z takÈ specyfikacjÈ, to moĝemy byÊ prawie pewni, ĝe za tydzieñ ta sa- ma osoba stwierdzi, iĝ „oczywiste jest, ĝe tutaj niezbÚdne jest miej- sce na dwa wiersze tekstu”. JeĂli tworzymy kuloodporne projekty, takÈ funkcjonalnoĂÊ bÚdziemy mieli od razu wbudowanÈ w projekt. Oczywi- Ăcie szefowi czy klientowi naleĝy powiedzieÊ, ĝe przygotowanie miejsca na drugi wiersz tekstu zajÚïo nam kolejny tydzieñ. Albo pochwaliÊ siÚ 92 Rozdziaï 3. Rysunek lupy i strzaïki umieĂciliĂmy w poïowie wysokoĂci elementu nad- rzÚdnego. Warto zauwaĝyÊ, ĝe dziÚki takiemu rozwiÈ- zaniu obrazki — bez wzglÚ- du na rozmiar tekstu — zawsze bÚdÈ wyĂrodkowane w pionie wzglÚdem tekstu. swojÈ przezornoĂciÈ i powiedzieÊ, ĝe od razu pomyĂleliĂmy o odpo- wiednim rozwiÈzaniu. Przy okazji moĝemy pokazaÊ, w jaki sposób sto- sowanie CSS ogranicza problemy zwiÈzane z aktualizacjÈ projektu. Wariant z atrybutem border-radius Poniewaĝ oryginalny projekt, który odtwarzaliĂmy, zostaï zaprojekto- wany z uĝyciem bitmapowych naroĝników „w schodki”, my takĝe uĝyli- Ămy malutkich elementów graficznych, które wiernie naĂladowaïy zaokrÈglenie naroĝników na obydwu paskach. Moĝemy jednak pokusiÊ siÚ o uproszczenie tego projektu poprzez caïkowite wyeliminowanie elementów graficznych i zastÈpienie ich atrybutem border-radius, dostÚpnym w CSS3. PrzeglÈdarki, które nie obsïugujÈ atrybutu bor- der-radius, wyĂwietlÈ paski w postaci prostokÈtów, ale w wielu przypadkach jest to akceptowalny kompromis. Czy zaokrÈglone naroĝ- niki sÈ kluczowe dla danego projektu? JeĂli odpowiedě brzmi „nie”, to rezygnacja z elementów bitmapowych na rzecz stylów CSS moĝe byÊ znakomitym rozwiÈzaniem. WiÚksza elastycznoĂÊ i ïatwoĂÊ wprowa- dzenia modyfikacji mniejszym nakïadem pracy. Czegoĝ chcieÊ wiÚcej? Zapewne pamiÚtasz, ĝe w rozdziale 2. uĝyliĂmy gradientów CSS3 w celu odtworzenia gradientów na zakïadkach nawigacji. Podobnie jak gradienty, atrybut border-radius jest obsïugiwany przez zna- komitÈ wiÚkszoĂÊ nowoczesnych przeglÈdarek (Safari, Firefox, Opera, IE9+). Trzeba jedynie pamiÚtaÊ, aby zastosowaÊ odpowiednie pre- fiksy atrybutów w celu uzyskania spójnego wyglÈdu zaokrÈglonych naroĝników w róĝnych przeglÈdarkach. Zastosujmy atrybut border-radius na przykïadzie omówionym w tym rozdziale, aby wypróbowaÊ go w praktyce. Przy okazji pozbÚ- dziemy siÚ przygotowanych uprzednio naroĝników. Wystarczy, ĝe zmodyfikujemy dwie deklaracje stylów, by zaokrÈgliÊ lewy oraz prawy dolny naroĝnik w elemencie #register oraz wszystkie cztery na- roĝniki w elemencie #message. Usuniemy teĝ odwoïania do obraz- ków z reguï zwiÈzanych z atrybutem background. #register { float: left; width: 100 ; margin: 0; padding: 0; list-style: none; Elastyczne wiersze 93 Reguïy bez prefiksów od- woïujÈcych siÚ do silników przeglÈdarek zawsze po- winny byÊ podawane na poczÈtku. DziÚki takiemu rozwiÈzaniu strona zostanie poprawnie wyĂwietlona na- wet w przypadku ewentual- nych zmian w specyfikacji, dotyczÈcych (niekiedy) eks- perymentalnych atrybutów. color: #690; background: #BDDB62; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #message { float: left; width: 100 ; margin: 0; padding: 0; font-weight: bold; font-size: 110 ; color: #FFF; text-align: center; background: #92B91C; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } ZastosowaliĂmy takÈ skïadniÚ dla atrybutu border-radius, która powinna bez zarzutu zadziaïaÊ w przeglÈdarkach opartych na silni- ku WebKit (Safari, Chrome) i Mozilla (Firefox). Dodatkowo reguïy pozbawione prefiksów gwarantujÈ uzyskanie poprawnego efektu w Operze oraz IE9+ (a takĝe wszystkich przyszïych przeglÈdarkach, które bÚdÈ obsïugiwaïy atrybut border-radius). Warto zauwaĝyÊ, ĝe skïadnia zaokrÈglania lewego i prawego dolne- go naroĝnika róĝni siÚ nieznacznie w implementacjach –webkit- oraz –moz-. W razie problemów z zapamiÚtaniem tych róĝnic dodaj stronÚ http://border-radius.com do ulubionych — znajdziesz na niej skrypt, który wygeneruje odpowiedni kod za Ciebie. Rysunek 3.22 (na nastÚpnej stronie) przedstawia porównanie piÚk- nie zaokrÈglonych naroĝników w przeglÈdarce Safari (rysunek u gó- ry) z kwadratowymi, niezaokrÈglonymi naroĝnikami w IE8, która nie obsïuguje atrybutu border-radius (rysunek na dole). Czy brak za- okrÈglonych naroĝników w niektórych przeglÈdarkach oznacza koniec Ăwiata? Raczej nie, zwïaszcza ĝe elastycznoĂÊ wynikajÈca z rezygnacji z obrazków wyïÈcznie w celach estetycznych czÚsto przewaĝa nad ewentualnymi uciÈĝliwoĂciami zwiÈzanymi z brakiem obsïugi opisywa- nego atrybutu w starszych przeglÈdarkach. 94 Rozdziaï 3. Rysunek 3.22. ZaokrÈglone naroĝniki w przeglÈdarce Safari (u góry) oraz niezaokrÈglone w IE8 (na dole) Inny przykïad rozciÈgania Inne zastosowanie elastycznych elementów projektu przedstawiÚ na przykïadzie procesu tworzenia nagïówka dla szablonu TicTac, który zaprojektowaïem dla witryny Blogger. Blogger to popularne narzÚdzie do publikowania blogów, naleĝÈce do firmy Google. Oferuje ono kilka gotowych szablonów, które uĝytkownicy mogÈ wykorzystaÊ przy tworzeniu swojego dziennika internetowego. Projekty szablonów musiaïy byÊ kuloodporne, aby nagïówek mógï pomieĂciÊ dowolnie dïugi tytuï witryny. Na rysunku 3.23 widoczny jest nagïówek szablonu i wyĂwietlony w nim tytuï „Sample Blog”. Wszystkie elementy graficzne nagïówka to obrazki tïa zdefiniowane w arkuszu stylów CSS. Tytuï witryny musi byÊ
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS. Wydanie III
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ą: