Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3 Wydanie II.pdf

(1019 KB) Pobierz
Tytuł oryginału: Responsive Web Design with HTML5 and CSS3, 2nd Edition
Tłumaczenie: Łukasz Piwko
ISBN: 978-83-283-2343-8
Copyright © Packt Publishing 2015.
First published in the English language under the title ‘Responsive Web Design with HTML5 and CSS3 –
Second Edition – (9781784398934)’
Polish edition copyright © 2016 by Helion S.A.
All rights reserved.
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)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
ftp://ftp.helion.pl/przyklady/trash2.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/trash2
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
Zespó wydania oryginalnego
O autorze
O korektorach merytorycznych
Przedmowa
Rozdzia 1. Podstawowe wiadomo ci o projektowaniu responsywnych
stron internetowych
Rozpoczynamy przygod
Projekt responsywny — definicja
Projektowanie responsywnych stron internetowych w pigu ce
Ustawianie poziomu obs ugi przegl darek
Kilka uwag na temat narz dzi i edytorów tekstu
Pierwszy przyk ad projektu responsywnego
Podstawowy plik HTML
Okie zna obrazy
Zapytania medialne wkraczaj do akcji
Wady opisanego przyk adu
Podsumowanie
11
13
15
17
21
22
23
23
23
25
26
26
29
32
37
38
Rozdzia 2. Zapytania medialne: obs uga zró nicowanych obszarów roboczych
Dlaczego zapytania medialne s potrzebne do budowy uk adów responsywnych
Podstawowa logika warunkowa w CSS
Sk adnia zapyta medialnych
Zapytania medialne w znaczniku <link>
czenie zapyta medialnych
Importowanie zapyta medialnych za pomoc dyrektywy @import
Zapytania medialne w arkuszach stylów
Co mo na sprawdza za pomoc zapyta medialnych
39
40
41
41
42
43
44
44
44
Kup książkę
Poleć książkę
Spis tre ci
Modyfikowanie projektu strony za pomoc zapyta medialnych
W zapytaniu medialnym mo na wpisa ka d regu CSS
Zapytania medialne dla urz dze o du ej g sto ci pikseli
Metody organizacji i pisania zapyta medialnych
Do czanie ró nych plików CSS za pomoc zapyta medialnych
Zasadno dzielenia zapyta medialnych na wiele plików
ródliniowe zagnie d anie zapyta medialnych
czy zapytania medialne w bloki czy rozprasza je w ró nych miejscach pliku
Znacznik meta viewport
Zapytania medialne — poziom 4.
Obs uga skryptów
Urz dzenia wskazuj ce
Funkcja sprawdzania obs ugi efektu hover
Zapytania dotycz ce otoczenia
Podsumowanie
46
48
48
49
49
50
50
51
52
54
54
55
56
57
58
Rozdzia 3. Uk ady p ynne i obrazy responsywne
Konwertowanie uk adu sta ego na elastyczny
Do czego s u y model flexbox
Bloki ródliniowe i bia e znaki
Elementy p ywaj ce
W asno ci tabelaryczne
Flexbox — wprowadzenie
Wyboista droga do flexboksa
Obs uga flexboksa przez przegl darki
Podstawy flexboksa
Idealne rodkowanie tekstu w pionie
Przesuwanie elementów
Zmienianie kolejno ci elementów
Ró ne rodzaje uk adu flexboksa w ró nych zapytaniach medialnych
W asno inline-flex
Wyrównywanie tre ci we flexboksie
W asno flex
Lepka stopka
Zmienianie kolejno ci elementów
Podsumowanie wiadomo ci o flexboksie
Obrazy responsywne
Wewn trzny problem obrazów responsywnych
Proste prze czanie rozdzielczo ci za pomoc atrybutu srcset
Zaawansowane techniki prze czania obrazów za pomoc atrybutu srcset
Prezentowanie obrazów za pomoc elementu picture
Podsumowanie
59
60
64
65
65
65
66
66
66
68
68
70
71
72
73
74
79
82
83
88
88
88
89
90
91
92
Rozdzia 4. HTML5 i projekty responsywne
Znaczniki HTML5 s rozpoznawane przez wszystkie nowoczesne przegl darki
Prawid owe rozpoczynanie strony HTML5
Znacznik doctype
Element HTML i atrybut lang
95
96
97
97
98
4
Kup książkę
Poleć książkę
Spis tre ci
Definiowanie ró nych j zyków
Kodowanie znaków
Jak najlepiej pracowa z j zykiem HTML5
Rozs dne podej cie do pisania kodu
Oddajmy cze wszechmocnemu elementowi <a>
Nowe elementy semantyczne HTML5
Element main
Element <section>
Element <nav>
Element <article>
Element <aside>
Elementy <figure> i <figcaption>
Elementy <details> i <summary>
Element <header>
Element <footer>
Element <address>
Uwaga na temat elementów h1 – h6
ródliniowe elementy semantyczne HTML5
Element <b>
Element <em>
Element <i>
Elementy j zyka HTML, które uleg y dezaktualizacji
Praktyczne wykorzystanie elementów strukturalnych HTML5
Rozs dne wybieranie elementów
Standardy dost pno ci stron WCAG i WAI-ARIA
WCAG
Standard WAI-ARIA
Zapami taj tylko jedn rzecz
Krok dalej z ARIA
Osadzanie elementów multimedialnych w HTML5
Dodawanie do stron internetowych filmów i d wi ków
Znaczniki audio i video dzia aj niemal identycznie
Responsywne odtwarzacze filmów i ramki wewn trzne
Aplikacje sieciowe w trybie offline
Podsumowanie
98
98
98
99
100
101
101
102
102
103
103
103
104
105
105
106
106
107
107
107
108
108
109
109
110
110
111
111
112
112
113
115
115
116
117
Rozdzia 5. CSS3: selektory, typografia, tryby kolorów i nowe funkcje
Nikt nie wie wszystkiego
Struktura regu CSS
Przydatne triki w CSS3
Uk ad wielokolumnowy w CSS3 dla projektu responsywnego
Zawijanie tekstu
Obcinanie tekstu
Tworzenie poziomych przewijanych okienek
Rozga zianie kodu CSS
Zapytania o obs ug w asno ci
czenie warunków
Biblioteka Modernizr
119
120
120
121
121
124
125
126
128
128
129
130
5
Kup książkę
Poleć książkę

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin