Kuloodporne strony internetowe Jak poprawic elastycznosc z wykorzystaniem XHTML a i CSS Wydanie III.pdf

(1001 KB) Pobierz
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
Kup książkę
Poleć książkę
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
Kup książkę
Poleć książkę
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
Kup książkę
Poleć książkę

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin